/* ?DESIGN SET UP - 01 Typography System * FONT SIZE SYSTEM (px) Typescale 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 * Font Weights Defaultt : 400 Medium : 500 Semi Bold : 600 Bold : 700 * Line Heights Default : 1 Paragraph Default : 1.6 Small : 1.05 Mediuem : 1.2 Large : 1.8 * LETTER SPACING -0.5px 0.75px - 02 COLORS * Primary : #e67e22 * Tints : #fdf2e9 #fae5d3 #eb984e * Shades : #cf711f #45260a * Accents : * Greys : #555 #333 #888 #ddd #6f6f6f (lightest grey allowed on #fdf2e9 with 4.5 rating) #767676 (lightest grey allowed on #fff) - 03 IMAGES * Unsplash * UI faces - 04 Icons - 05 SHADOWS 0 2.4rem 4.8rem rgba(0,0,0,0.075) - 06 BORDER-RADIUS Default : 9px Medium : 11px - 07 WHITE SPACE * SPACING SYSTEM (px) Typescale 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 */ /* ? Max Width * Max width sets maximum width to given value and if component is shrinked then * components width is equal to parent width ? REM * Length in REM of any component is defined with respect to font size of root element (HTML element) * Changing font size on html element will change all lengths defined in REM * 1 rem = 16 px * We can change this value of rem by setting font size to 10px in html element * 1 rem = 10 px * So px is not changeable but rem is changeable * Instead of fixing 10px in html we can fix percent of font size: 10px/16px = 62.5% * So that If user changes font size of browser then it scales down / up by this percent */ /* ? Pseudo Class trick * : => that is * .parent element:nth-child(1) => element that is first child of .parent * element:nth-child(1) => element that is first child of any parent (1st occurence) */ *{ padding: 0; margin: 0; box-sizing: border-box; } html{ font-size: 62.5%; overflow-x: hidden; /*? For smooth scrolling */ /*- Use this along with href + id to scroll smoothly */ /*! But it not works on safari (in iphones) and Microsoft edge */ scroll-behavior: smooth; } body{ font-family: "Rubik",sans-serif; line-height: 1; font-weight: 400; color: #555; /*- Only works if there is nothing absolutely positioned in relation to body */ overflow-x: hidden; } /* *************************************************************** */ /*? GENERAL (Reusable) Components */ /* *************************************************************** */ /*? Wrap all contents of section in separate div then apply all these classes */ /*- Container for centring */ .container{ /* 1140px also used widely */ max-width: 120rem; margin: 0 auto; /*- To prevent components from gluing on shriniking width of vp */ padding: 0 3.2rem; } /*- Reusable Grids */ .grid{ display: grid; column-gap: 6.4rem; row-gap:9.6rem; /* margin-bottom: 9.6rem; */ } /* .grid:last-child{ margin-bottom: 0; } */ /*? For using multiple grids in container */ .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, .heading-tertiary{ font-weight: 700; /* - Use grey color for start up personality */ color: #333; /* - Didnt used because of Start Up personality */ /* color: #45260a; */ color: #343a40; letter-spacing: -0.5px; } .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; } .subheading{ display: block; font-size: 1.6rem; font-weight: 500; color: #cf711f; text-transform: uppercase; margin-bottom: 1.6rem; letter-spacing: 0.75px; } .heading-tertiary{ font-size: 3.0rem; line-height: 1.2; margin-bottom: 3.2rem; } .btn, .btn:link, .btn:visited{ /* ? For using box model on inline element */ display: inline-block; font-size: 2rem; font-weight: 600; text-decoration: none; padding: 1.6rem 3.2rem; border-radius: 9px; /*? Only for btn created with bbutton */ border: none; cursor: pointer; font-family: inherit; /* ? Animation of CSS properties */ /* - transition: property-name time */ /* * If this property (original)changes in future then transition will take place */ /* transition: background-color 0.3s; */ transition: all 0.3s; } .btn--full:link, .btn--full:visited{ background-color: #e67e22; color: #fff; } .btn--full:hover, .btn--full:active{ background-color: #cf711f; color: #fff; } .btn--outline:link, .btn--outline:visited{ background-color: #fff; color: #555; } .btn--outline:hover, .btn--outline:active{ background-color: #fdf2e9; /* ? This not works with box sizing border box */ /* border: 3px solid #fff; */ /* ? Trick to create 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; color: #e67e22; /*? Instead of using text decoration, use padding+border */ text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid currentColor; /* current color = current text color */ transition: all 0.3s; } .link:hover, .link:active{ color: #cf711f; /* border-bottom: none; */ border-bottom: 1px solid transparent; } .list{ list-style: none; 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; } /*? Removing default focus of website */ *:focus{ /*- Not to be used alone*/ outline: none; /* outline: 4px dotted #e67e22; outline-offset: 8px; */ box-shadow: 0 0 0 0.8rem rgba(230, 125, 34, 0.5); } /* ? HELPER / SETTING Classes */ /* ? Interface class to add right */ .margin-right-sm{ margin-right: 1.6rem !important; } .margin-bottom-md{ margin-bottom: 4.8rem !important; } .center-text{ text-align: center; } strong{ font-weight: 500; }