/* --- 01 TYPOGRAPHY SYSTEM FONT SIZE SYSTEM (px) 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 FONT WEIGHTS: Default: 400 medium: 500 semi-bold: 600 Bold: 700 LINE HEIGHTS: - Default: 1 Small: 1.05 Medium: 1.2 paragragh default: 1.6 Large: 1.8 LETTER SPACING - 0.5px - 0.75px --- 02 COLORS - Primary: #e67e22 - Tints: #fdf2e9 - Shades: #cf711f - Accents: - Greys: #6f6f6f (lightest grey allowed on #fdf2e9 ) #555 #333 #767676 --- 05 SHADDOWS box-shadow: 0 3.2rem 6.4rem rgba(0, 0, 0, 0.075); --- 06 BORDER-RADIUS default: 9px Medium: 11px --- 07 WHITESPACE SPACING SYSTEM (px) 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 */ /* MAIN COLOR: #087f5b Grey Color: #343a40 #45260a */ * { padding: 0; margin: 0; box-sizing: border-box; } /* on the html element we can set the font px to 10px and then 1rem will equal 10px */ :root { --color-primary: #c69963; --color-primary-dark: #B28451; --color-secondary: #101d2c; --color-sectorborder: #3a3c3f; /* --color-grey-light-1: #f9f7f6; */ --color-grey-light-1: #fbfbfb; --color-grey-light-2: #aaa; --color-grey-light-3: #e1e1e1; --color-grey-dark-1: #54483A; --color-grey-dark-2: #6D5D4B; } html { /* font-size: 10px; */ /* .. percentage of users browser font-size setting*/ font-size: 62.5%; overflow-x: hidden; /* to hide the mobile menu 'translated' off to the side ready for 'fly-in' */ /* does NOT */ scroll-behavior: smooth; } body { font-family: "Rubik", sans-serif; line-height: 1; font-weight: 400; /* color: #555; */ color: var(--color-grey-dark-2); /* only works if there is nothing absolutely positioned in relation to body so need to make '.header' position to relative*/ overflow-x: hidden; /* to hide the mobile menu 'translated' off to the side ready for 'fly-in' */ /* jv adds */ /* background-color: var(--color-secondary); */ background-color: var(--color-grey-light-1); } /* ~~~~~~~~~~~~~~~~~~~~~~~ */ /* GENERAL REUSEABLE COMPONENTS */ /* ~~~~~~~~~~~~~~~~~~~~~~~ */ .container { /* 1140px is another convention but Jonas prefers the following 120rem that equals 1200px with our html font-size 62.5% setting above.*/ max-width: 120rem; padding: 0 3.2rem; margin: 0 auto; /* JVaddition */ /* background-color: var(--color-secondary); */ background-color: var(--color-grey-light-1); } .container-board { /* 1140px is another convention but Jonas prefers the following 120rem that equals 1200px with our html font-size 62.5% setting above.*/ max-width: 120rem; padding: 0 3.2rem; margin: 0 auto; margin-top: 3rem; /* JVaddition */ background-color: var(--color-secondary); /* background-color: var(--color-grey-light-1); */ } .container__policy { /* 1140px is another convention but Jonas prefers the following 120rem that equals 1200px with our html font-size 62.5% setting above.*/ max-width: 135rem; padding: 0 3.2rem; margin: 0 auto; /* JVaddition */ /* background-color: var(--color-secondary); */ background-color: var(--color-grey-light-1); } .grid { display: grid; column-gap: 6.4rem; row-gap: 9.6rem; /* padding-left: 5rem; padding-right: 5rem; */ /* margin-bottom: 9.6rem; */ } /* .grid:last-child { margin-bottom: 0; } */ .grid:not(:last-child) { margin-bottom: 9.6rem; } .grid--2-cols { grid-template-columns: repeat(2, 1fr); } .grid--3-cols { grid-template-columns: repeat(3, 1fr); } .grid--4-cols { grid-template-columns: repeat(4, 1fr); } .grid--5-cols { grid-template-columns: repeat(5, 1fr); } .grid--center-v { align-items: center; } .heading-primary, .heading-secondary { font-weight: 600; /* color: #333; */ color: var(--color-primary); letter-spacing: -0.5; } .heading-primary { font-size: 5.2rem; line-height: 1.05; margin-bottom: 3.2rem; } .heading-secondary { font-size: 4.4rem; line-height: 1.2; margin-bottom: 9.6rem; } .heading-tertiary { font-size: 3.6rem; line-height: 1.2; margin-bottom: 3.2rem; } .subheading { display: block; /* we used and that is an inline element so we first need to make it a block */ font-size: 1.6rem; font-weight: 500; /* color: #cf711f; */ color: var(--color-primary-dark); text-transform: uppercase; margin-bottom: 1.6rem; letter-spacing: 0.75px; } .btn, .btn:link, .btn:visited { display: inline-block; /* this is inline element so we need to make it an 'inline-block' so that the box model applies correctly - thereby enabling padding to take effect as expected. */ font-size: 2rem; text-decoration: none; padding: 1.6rem 3.2rem; border-radius: 9px; /* only necessary for .btn which is the button (not href) on the contact form */ border: none; cursor: pointer; font-family: inherit; /* Put Transition on original 'state' */ /* transition: all 500ms; */ /* transition: background-color 300ms; */ transition: all 300ms; /* ..we should use 'all' so that background and border et al are transitioned */ } .btn--full:link, .btn--full:visited { /* background-color: #e67e22; */ background-color: var(--color-primary); color: #fff; } .btn--full:hover, .btn--full:active { /* background-color: #cf711f; */ background-color: var(--color-primary); color: #fff; } .btn--outline:link, .btn--outline:visited { background-color: #fff; color: #555; } .btn--outline:hover, .btn--outline:active { background-color: #fdf2e9; /* border: 3px solid #fff; */ /* Trick to add border inside */ box-shadow: inset 0 0 0 3px #fff; } .btn--form { background-color: #45260a; color: #fdf2e9; align-self: end; padding: 1.2rem; } .btn--form:hover { background-color: #fff; color: #555; } .link:link, .link:visited { display: inline-block; /* ...so that padding can take effect ....as padding wont take effect for inline element */ /* color: #e67e22; */ color: var(--color-primary); text-decoration: none; border-bottom: 1px solid currentColor; /* especially useful if we change color on say hover state */ padding-bottom: 2px; transition: all 0.3s; } .link:hover, .link:active { /* color: #cf711f; */ color: var(--color-primary-dark); border-bottom: 1px solid transparent; /* we use this as if 'border: none' it would remove the 1px line and cause the screen to jump*/ } .list { list-style: none; /* following flex and flex-direction is for gap between list-item s*/ display: flex; flex-direction: column; gap: 1.6rem; } .list-item { font-size: 1.8rem; display: flex; align-items: center; gap: 1.6rem; line-height: 1.2; } .list-icon { width: 3rem; height: 3rem; /* color: #e67e22; */ color: var(--color-primary); z-index: -1; } .policy__list-icon { width: 3rem; height: 3rem; /* color: #e67e22; */ color: var(--color-primary); z-index: -1; opacity: .6; } /* THE FOLLOWING WILL PUT THE HIGHLIGHT AROUND THE LIN KS AFTER CLICK */ /* *:focus { outline: none; outline: 4px dotted #e67e22; outline-offset: 8px; box-shadow: 0 0 0 0.8rem rgba(230, 125, 34, 0.505); } */ /* HELPER CLASSES */ .margin-right-sm { margin-right: 1.6rem !important; } .margin-bottom-md { margin-bottom: 1.8rem !important; } .center-text { text-align: center; } strong { /* reduce 'strong' to font weight of 500 in lieu of 700 which is probably the default */ font-weight: 500; }