/***************************** CSS Framework Author: Doug Rider, RiderWorks LLC @link https://riderworks.com/ *****************************/ /***************************** 00* - TABLE OF CONTENTS 01* - FONT FAMILY BODY 02* - FONT SPACES, WEIGHTS & MISCELLANEOUS 03* - FONT HEADING SIZES 04* - FONT BODY SIZES 05* - SPACE GAP 06* - SPACE CARD 07* - SPACE CONTENT 08* - SPACE CONTAINER 09* - SPACE CARD WIDTH 10* - SPACE BLOCK 11* - SPACE INLINE 12* - HEADER & FOOTER HEIGHTS 13* - WIDTHS 14* - BORDER RADIUS 15* - TRANSITIONS 16* - BOX SHADOWS 17* - COLORS PRIMARY 18* - COLORS ACCENT 19* - BACKGROUND LIGHT & DARK COLORS 20* - BODY LIGHT & DARK COLORS 21* - HEADING LIGHT & DARK COLORS 22* - LINK LIGHT & DARK COLORS 23* - ERROR LIGHT & DARK COLORS 24* - RADIAL LIGHT & DARK COLORS 25* - SOCIAL MEDIA LIGHT & DARK COLORS *****************************/ :root { /***************************** * * 01* - Font Families Body */ --font-family--body: 'ReadExpro', system-ui, sans-serif; /*****************************/ --font-family--heading: 'Roraima', Georgia, serif; /***************************** * * 02* - Font Spacing, Font Weight & Miscellaneous */ /* Defualt Scaling Increments for Fonts and Spaces */ --_inc--7xs: 0.5; --_inc--6xs: 0.5625; --_inc--5xs: 0.625; --_inc--4xs: 0.6875; --_inc--3xs: 0.75; --_inc--2xs: 0.8125; --_inc--xs: 0.875; --_inc--s: 0.9375; --_inc--m: 1; --_inc--l: 1.0625; --_inc--xl: 1.125; --_inc--2xl: 1.1875; --_inc--3xl: 1.25; --_inc--4xl: 1.3125; --_inc--5xl: 1.375; --_inc--6xl: 1.4375; --_inc--7xl: 1.5; /* Default Line Height */ --_line-h: 1.6182; --line-height: var(--_line-h); --_space-ratio: var(--_line-h); /* Default Scaling for Fonts */ --_font-size--heading: var(--_inc--m); --_font-size--body: var(--_inc--m); --_font-size--button: var(--_inc--s); --_font-size--nav: var(--_inc--s); --_font-size--post-heading: var(--_inc--m); /* Default Font Weights */ --font-weight--light: 250; --font-weight--bold: 525; --font-weight--italic: 325; --font-weight--body: 375; --font-weight--heading: 550; --font-weight--button: 550; --font-weight--nav: 375; --font-weight--link: 400; /* Letter Spacing */ --letter-spacing--body: 0.00625em; --letter-spacing--heading: 0.0125em; --letter-spacing--button: 0.025em; --letter-spacing--nav: 0.0125em; /* Word Spacing */ --word-spacing--body: 0; --word-spacing--heading: -0.05em; --word-spacing--button: 0; --word-spacing--nav: 0; /* Scaling for Spacing */ --_size--gap: var(--_inc--m); --_size--card: var(--_inc--m); --_size--content: var(--_inc--m); --_size--container: var(--_inc--m); --_size--header: var(--_inc--m); --_size--footer: var(--_inc--m); /* Defualt Scaling for Section Padding */ --_size--block: var(--_inc--m); --_size--inline: var(--_inc--m); /* Default Button Padding */ --_btn--pad: calc(var(--_inc--xs) * 1em); --button-padding--block: calc(var(--_btn--pad) * 1); --button-padding--inline: calc(var(--_btn--pad) * var(--_space-ratio)); /* Default Border Styling */ --border--0: 0 solid transparent; --border--s: 1px solid transparent; --border--m: 1.5px solid transparent; --border--l: 2px solid transparent; --border--xl: 2.5px solid transparent; --border--2xl: 3px solid transparent; /* Default Underline and Focus */ --offset--size: 6px; --focus--size: 2px; --focus--width: 2px; --focus--offset: 2px; --text-underline-thickness: 2px; --text-underline-thickness-hover: 3px; --text-underline-offset: 0.3em; /* Default VW Width */ --width--site: 2560px; /* Default Container Width */ --width--container: 1368px; /* Dealing with Annimations. Support is weak */ /* interpolate-size: allow-keywords; */ /***************************** * * 03* - Font Heading Sizes HEADING VI @link https://www.fluid-type-scale.com/calculate?minFontSize=18&minWidth=360&minRatio=1.2711&maxFontSize=21&maxWidth=1368&maxRatio=1.433&steps=h6%2Ch5%2Ch4%2Ch3%2Ch2%2Ch1%2Ctitle&baseStep=h4&prefix=_inc-&useContainerWidth=false&includeFallbacks=false&useRems=true&remValue=16&decimals=4&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1280 */ --_inc--h6: clamp(0.6963rem, -0.0907vi + 0.7167rem, 0.6392rem); --_inc--h5: clamp(0.8851rem, 0.049vi + 0.874rem, 0.9159rem); --_inc--h4: clamp(1.125rem, 0.2976vi + 1.058rem, 1.3125rem); --_inc--h3: clamp(1.43rem, 0.7156vi + 1.269rem, 1.8808rem); --_inc--h2: clamp(1.8177rem, 1.3929vi + 1.5042rem, 2.6952rem); --_inc--h1: clamp(2.3104rem, 2.4632vi + 1.7562rem, 3.8622rem); --_inc--title: clamp(2.9368rem, 4.1235vi + 2.009rem, 5.5346rem); --font-size-heading--h6: calc(var(--_inc--h6) * var(--_font-size--heading)); --font-size-heading--h5: calc(var(--_inc--h5) * var(--_font-size--heading)); --font-size-heading--h4: calc(var(--_inc--h4) * var(--_font-size--heading)); --font-size-heading--h3: calc(var(--_inc--h3) * var(--_font-size--heading)); --font-size-heading--h2: calc(var(--_inc--h2) * var(--_font-size--heading)); --font-size-heading--h1: calc(var(--_inc--h1) * var(--_font-size--heading)); --font-size-heading--title: calc(var(--_inc--title) * var(--_font-size--heading)); /***************************** * * 04* - Font Body Sizes BODY @link https://www.fluid-type-scale.com/calculate?minFontSize=16&minWidth=360&minRatio=1.1274&maxFontSize=18&maxWidth=1368&maxRatio=1.1971&steps=xs%2Cs%2Cm%2Cl%2Cxl%2C2xl%2C3xl&baseStep=m&prefix=_inc-body-&useContainerWidth=false&includeFallbacks=false&useRems=true&remValue=16&decimals=4&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1036 */ --_inc-body--xs: clamp(0.7868rem, -0.0027vi + 0.7874rem, 0.785rem); --_inc-body--s: clamp(0.887rem, 0.0838vi + 0.8681rem, 0.9398rem); --_inc-body--m: clamp(1rem, 0.1984vi + 0.9554rem, 1.125rem); --_inc-body--l: clamp(1.1274rem, 0.3482vi + 1.0491rem, 1.3467rem); --_inc-body--xl: clamp(1.271rem, 0.5415vi + 1.1492rem, 1.6122rem); --_inc-body--2xl: clamp(1.433rem, 0.7889vi + 1.2555rem, 1.9299rem); --_inc-body--3xl: clamp(1.6155rem, 1.1029vi + 1.3674rem, 2.3103rem); --font-size-body--xs: calc(var(--_inc-body--xs) * var(--_font-size--body)); --font-size-body--s: calc(var(--_inc-body--s) * var(--_font-size--body)); --font-size-body--m: calc(var(--_inc-body--m) * var(--_font-size--body)); --font-size-body--l: calc(var(--_inc-body--l) * var(--_font-size--body)); --font-size-body--xl: calc(var(--_inc-body--xl) * var(--_font-size--body)); --font-size-body--2xl: calc(var(--_inc-body--2xl) * var(--_font-size--body)); --font-size-body--3xl: calc(var(--_inc-body--3xl) * var(--_font-size--body)); --font-size-button--xs: calc(var(--_inc-body--xs) * var(--_font-size--button)); --font-size-button--s: calc(var(--_inc-body--s) * var(--_font-size--button)); --font-size-button--m: calc(var(--_inc-body--m) * var(--_font-size--button)); --font-size-button--l: calc(var(--_inc-body--l) * var(--_font-size--button)); --font-size-button--xl: calc(var(--_inc-body--xl) * var(--_font-size--button)); --font-size-button--2xl: calc(var(--_inc-body--2xl) * var(--_font-size--button)); --font-size-button--3xl: calc(var(--_inc-body--3xl) * var(--_font-size--button)); --font-size-nav--xs: calc(var(--_inc-body--xs) * var(--_font-size--nav)); --font-size-nav--s: calc(var(--_inc-body--s) * var(--_font-size--nav)); --font-size-nav--m: calc(var(--_inc-body--m) * var(--_font-size--nav)); --font-size-nav--l: calc(var(--_inc-body--l) * var(--_font-size--nav)); --font-size-nav--xl: calc(var(--_inc-body--xl) * var(--_font-size--nav)); --font-size-nav--2xl: calc(var(--_inc-body--2xl) * var(--_font-size--nav)); --font-size-nav--3xl: calc(var(--_inc-body--xs3xl) * var(--_font-size--nav)); /***************************** * * 05* - Space Gap SPACE GAP @link https://www.fluid-type-scale.com/calculate?minFontSize=22&minWidth=360&minRatio=1.1274&maxFontSize=44&maxWidth=1368&maxRatio=1.1971&steps=3xs%2C2xs%2Cxs%2Cs%2Cm%2Cl%2Cxl%2C2xl%2C3xl&baseStep=m&prefix=_gap-&useContainerWidth=false&includeFallbacks=false&useRems=false&remValue=16&decimals=4&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1440 */ --_gap--3xs: clamp(13.6179px, 0.7746vi + 10.8295px, 21.4255px); --_gap--2xs: clamp(15.3528px, 1.0214vi + 11.6758px, 25.6485px); --_gap--xs: clamp(17.3088px, 1.3289vi + 12.5249px, 30.7038px); --_gap--s: clamp(19.5139px, 1.7105vi + 13.3562px, 36.7555px); --_gap--m: clamp(22px, 2.1825vi + 14.1429px, 44px); --_gap--l: clamp(24.8028px, 2.7648vi + 14.8494px, 52.6724px); --_gap--xl: clamp(27.9627px, 3.4813vi + 15.43px, 63.0541px); --_gap--2xl: clamp(31.5251px, 4.3608vi + 15.8262px, 75.4821px); --_gap--3xl: clamp(35.5414px, 5.4383vi + 15.9635px, 90.3596px); --space-gap--3xs: calc(var(--_gap--3xs) * var(--_size--gap)); --space-gap--2xs: calc(var(--_gap--2xs) * var(--_size--gap)); --space-gap--xs: calc(var(--_gap--xs) * var(--_size--gap)); --space-gap--s: calc(var(--_gap--s) * var(--_size--gap)); --space-gap--m: calc(var(--_gap--m) * var(--_size--gap)); --space-gap--l: calc(var(--_gap--l) * var(--_size--gap)); --space-gap--xl: calc(var(--_gap--xl) * var(--_size--gap)); --space-gap--2xl: calc(var(--_gap--2xl) * var(--_size--gap)); --space-gap--3xl: calc(var(--_gap--3xl) * var(--_size--gap)); /***************************** * * 06* - Space Card SPACE CARD @link https://www.fluid-type-scale.com/calculate?minFontSize=16&minWidth=360&minRatio=1.1274&maxFontSize=24&maxWidth=1368&maxRatio=1.1971&steps=3xs%2C2xs%2Cxs%2Cs%2Cm%2Cl%2Cxl%2C2xl%2C3xl&baseStep=m&prefix=_card-&useContainerWidth=false&includeFallbacks=false&useRems=false&remValue=16&decimals=4&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1440 */ --_card--3xs: clamp(9.9039px, 0.1769vi + 9.2673px, 11.6866px); --_card--2xs: clamp(11.1657px, 0.2802vi + 10.157px, 13.9901px); --_card--xs: clamp(12.5882px, 0.4126vi + 11.1027px, 16.7475px); --_card--s: clamp(14.1919px, 0.581vi + 12.1003px, 20.0485px); --_card--m: clamp(16px, 0.7937vi + 13.1429px, 24px); --_card--l: clamp(18.0384px, 1.0607vi + 14.2198px, 28.7304px); --_card--xl: clamp(20.3365px, 1.3945vi + 15.3163px, 34.3932px); --_card--2xl: clamp(22.9274px, 1.81vi + 16.4114px, 41.1721px); --_card--3xl: clamp(25.8483px, 2.3253vi + 17.4773px, 49.2871px); --space-card--3xs: calc(var(--_card--3xs) * var(--_size--card)); --space-card--2xs: calc(var(--_card--2xs) * var(--_size--card)); --space-card--xs: calc(var(--_card--xs) * var(--_size--card)); --space-card--s: calc(var(--_card--s) * var(--_size--card)); --space-card--m: calc(var(--_card--m) * var(--_size--card)); --space-card--l: calc(var(--_card--l) * var(--_size--card)); --space-card--xl: calc(var(--_card--xl) * var(--_size--card)); --space-card--2xl: calc(var(--_card--2xl) * var(--_size--card)); --space-card--3xl: calc(var(--_card--3xl) * var(--_size--card)); /***************************** * * 07* - Space Content SPACE CONTENT @link https://www.fluid-type-scale.com/calculate?minFontSize=8&minWidth=360&minRatio=1.1274&maxFontSize=14&maxWidth=1368&maxRatio=1.2711&steps=3xs%2C2xs%2Cxs%2Cs%2Cm%2Cl%2Cxl%2C2xl%2C3xl&baseStep=m&prefix=_content-&useContainerWidth=false&includeFallbacks=false&useRems=false&remValue=16&decimals=4&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1440 */ --_content--3xs: clamp(4.952px, 0.0408vi + 4.8052px, 5.363px); --_content--2xs: clamp(5.5828px, 0.1224vi + 5.1421px, 6.8169px); --_content--xs: clamp(6.2941px, 0.2352vi + 5.4474px, 8.665px); --_content--s: clamp(7.096px, 0.3887vi + 5.6966px, 11.0141px); --_content--m: clamp(8px, 0.5952vi + 5.8571px, 14px); --_content--l: clamp(9.0192px, 0.8707vi + 5.8848px, 17.7954px); --_content--xl: clamp(10.1682px, 1.2353vi + 5.7213px, 22.6197px); --_content--2xl: clamp(11.4637px, 1.7151vi + 5.2893px, 28.7519px); --_content--3xl: clamp(12.9242px, 2.3435vi + 4.4876px, 36.5466px); --space-content--3xs: calc(var(--_content--3xs) * var(--_size--content)); --space-content--2xs: calc(var(--_content--2xs) * var(--_size--content)); --space-content--xs: calc(var(--_content--xs) * var(--_size--content)); --space-content--s: calc(var(--_content--s) * var(--_size--content)); --space-content--m: calc(var(--_content--m) * var(--_size--content)); --space-content--l: calc(var(--_content--l) * var(--_size--content)); --space-content--xl: calc(var(--_content--xl) * var(--_size--content)); --space-content--2xl: calc(var(--_content--2xl) * var(--_size--content)); --space-content--3xl: calc(var(--_content--3xl) * var(--_size--content)); /***************************** * * 08* - Space Container SPACE CONTAINER @link https://www.fluid-type-scale.com/calculate?minFontSize=24&minWidth=360&minRatio=1.1274&maxFontSize=48&maxWidth=1368&maxRatio=1.2711&steps=3xs%2C2xs%2Cxs%2Cs%2Cm%2Cl%2Cxl%2C2xl%2C3xl&baseStep=m&prefix=_container-&useContainerWidth=false&includeFallbacks=false&useRems=false&remValue=16&decimals=4&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1440 */ --_container--3xs: clamp(14.8559px, 0.3504vi + 13.5946px, 18.3875px); --_container--2xs: clamp(16.7485px, 0.6571vi + 14.3829px, 23.3723px); --_container--xs: clamp(18.8823px, 1.074vi + 15.0158px, 29.7086px); --_container--s: clamp(21.2879px, 1.6344vi + 15.4041px, 37.7626px); --_container--m: clamp(24px, 2.381vi + 15.4286px, 48px); --_container--l: clamp(27.0576px, 3.3686vi + 14.9307px, 61.0128px); --_container--xl: clamp(30.5047px, 4.6675vi + 13.7017px, 77.5534px); --_container--2xl: clamp(34.391px, 6.3678vi + 11.4671px, 98.5781px); --_container--3xl: clamp(38.7725px, 8.5843vi + 7.8688px, 125.3026px); --space-container--3xs: calc(var(--_container--3xs) * var(--_size--container)); --space-container--2xs: calc(var(--_container--2xs) * var(--_size--container)); --space-container--xs: calc(var(--_container--xs) * var(--_size--container)); --space-container--s: calc(var(--_container--s) * var(--_size--container)); --space-container--m: calc(var(--_container--m) * var(--_size--container)); --space-container--l: calc(var(--_container--l) * var(--_size--container)); --space-container--xl: calc(var(--_container--xl) * var(--_size--container)); --space-container--2xl: calc(var(--_container--2xl) * var(--_size--container)); --space-container--3xl: calc(var(--_container--3xl) * var(--_size--container)); /***************************** * * 09* - Space Card Width - fit for image sizes with GRID #products https://www.fluid-type-scale.com/calculate?minFontSize=180&minWidth=360&minRatio=1.2&maxFontSize=220&maxWidth=1368&maxRatio=1.25&steps=fit&baseStep=fit&prefix=card&useContainerWidth=false&includeFallbacks=false&useRems=false&remValue=16&decimals=4&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=614 */ --card-fit: clamp(180px, 3.9683vi + 165.7143px, 220px); /***************************** * * 10* - Space Block SPACE BLOCK @link https://www.fluid-type-scale.com/calculate?minFontSize=36&minWidth=360&minRatio=1.1971&maxFontSize=96&maxWidth=1368&maxRatio=1.2711&steps=3xs%2C2xs%2Cxs%2Cs%2Cm%2Cl%2Cxl%2C2xl%2C3xl&baseStep=m&prefix=_block-&useContainerWidth=false&includeFallbacks=false&useRems=false&remValue=16&decimals=4&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1280 */ --_block--3xs: clamp(17.53px, 1.9092vi + 10.6567px, 36.775px); --_block--2xs: clamp(20.9851px, 2.5555vi + 11.7853px, 46.7447px); --_block--xs: clamp(25.1213px, 3.4024vi + 12.8727px, 59.4171px); --_block--s: clamp(30.0727px, 4.5092vi + 13.8397px, 75.5251px); --_block--m: clamp(36px, 5.9524vi + 14.5714px, 96px); --_block--l: clamp(43.0956px, 7.8304vi + 14.9063px, 122.0256px); --_block--xl: clamp(51.5897px, 10.2695vi + 14.6194px, 155.1067px); --_block--2xl: clamp(61.7581px, 13.4324vi + 13.4016px, 197.1562px); --_block--3xl: clamp(73.9306px, 17.5272vi + 10.8325px, 250.6052px); --space-block--3xs: calc(var(--_block--3xs) * var(--_size--block)); --space-block--2xs: calc(var(--_block--2xs) * var(--_size--block)); --space-block--xs: calc(var(--_block--xs) * var(--_size--block)); --space-block--s: calc(var(--_block--s) * var(--_size--block)); --space-block--m: calc(var(--_block--m) * var(--_size--block)); --space-block--l: calc(var(--_block--l) * var(--_size--block)); --space-block--xl: calc(var(--_block--xl) * var(--_size--block)); --space-block--2xl: calc(var(--_block--2xl) * var(--_size--block)); --space-block--3xl: calc(var(--_block--3xl) * var(--_size--block)); /***************************** * * 11* - Space Inline /** SPACE INLINE @link https://www.fluid-type-scale.com/calculate?minFontSize=24&minWidth=360&minRatio=1.067&maxFontSize=60&maxWidth=1440&maxRatio=1.125&steps=inline&baseStep=inline&prefix=sp&useContainerWidth=false&includeFallbacks=false&useRems=false&remValue=16&decimals=4&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1280 */ --sp-inline: clamp(24px, 3.5714vi + 11.1429px, 60px); --space-inline: calc(var(--sp-inline) * var(--_size--inline)); /***************************** * * 12* - Header Footer Height SPACE HEADER @link https://www.fluid-type-scale.com/calculate?minFontSize=8&minWidth=360&minRatio=1.1971&maxFontSize=20&maxWidth=1368&maxRatio=1.433&steps=3xs%2C2xs%2Cxs%2Cs%2Cm%2Cl%2Cxl%2C2xl%2C3xl&baseStep=m&prefix=_header-&useContainerWidth=false&includeFallbacks=false&useRems=false&remValue=16&decimals=4&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1280 */ --_header--3xs: clamp(3.8955px, 0.0841vi + 3.5929px, 4.7429px); --_header--2xs: clamp(4.6634px, 0.2116vi + 3.9015px, 6.7966px); --_header--xs: clamp(5.5825px, 0.4124vi + 4.0979px, 9.7395px); --_header--s: clamp(6.6828px, 0.7216vi + 4.085px, 13.9567px); --_header--m: clamp(8px, 1.1905vi + 3.7143px, 20px); --_header--l: clamp(9.5768px, 1.8932vi + 2.7614px, 28.66px); --_header--xl: clamp(11.4644px, 2.937vi + 0.891px, 41.0698px); --_header--2xl: clamp(13.724px, 4.4771vi + -2.3935px, 58.853px); --_header--3xl: clamp(16.429px, 6.7368vi + -7.8236px, 84.3363px); --space-header--3xs: calc(var(--_header--3xs) * var(--_size--header)); --space-header--2xs: calc(var(--_header--2xs) * var(--_size--header)); --space-header--xs: calc(var(--_header--xs) * var(--_size--header)); --space-header--s: calc(var(--_header--s) * var(--_size--header)); --space-header--m: calc(var(--_header--m) * var(--_size--header)); --space-header--l: calc(var(--_header--l) * var(--_size--header)); --space-header--xl: calc(var(--_header--xl) * var(--_size--header)); --space-header--2xl: calc(var(--_header--2xl) * var(--_size--header)); --space-header--3xl: calc(var(--_header--3xl) * var(--_size--header)); /* SPACE FOOTER @link https://www.fluid-type-scale.com/calculate?minFontSize=8&minWidth=360&minRatio=1.1971&maxFontSize=20&maxWidth=1368&maxRatio=1.433&steps=3xs%2C2xs%2Cxs%2Cs%2Cm%2Cl%2Cxl%2C2xl%2C3xl&baseStep=m&prefix=_footer-&useContainerWidth=false&includeFallbacks=false&useRems=false&remValue=16&decimals=4&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1280 */ --_footer--3xs: clamp(3.8955px, 0.0841vi + 3.5929px, 4.7429px); --_footer--2xs: clamp(4.6634px, 0.2116vi + 3.9015px, 6.7966px); --_footer--xs: clamp(5.5825px, 0.4124vi + 4.0979px, 9.7395px); --_footer--s: clamp(6.6828px, 0.7216vi + 4.085px, 13.9567px); --_footer--m: clamp(8px, 1.1905vi + 3.7143px, 20px); --_footer--l: clamp(9.5768px, 1.8932vi + 2.7614px, 28.66px); --_footer--xl: clamp(11.4644px, 2.937vi + 0.891px, 41.0698px); --_footer--2xl: clamp(13.724px, 4.4771vi + -2.3935px, 58.853px); --_footer--3xl: clamp(16.429px, 6.7368vi + -7.8236px, 84.3363px); --space-footer--3xs: calc(var(--_footer--3xs) * var(--_size--footer)); --space-footer--2xs: calc(var(--_footer--2xs) * var(--_size--footer)); --space-footer--xs: calc(var(--_footer--xs) * var(--_size--footer)); --space-footer--s: calc(var(--_footer--s) * var(--_size--footer)); --space-footer--m: calc(var(--_footer--m) * var(--_size--footer)); --space-footer--l: calc(var(--_footer--l) * var(--_size--footer)); --space-footer--xl: calc(var(--_footer--xl) * var(--_size--footer)); --space-footer--2xl: calc(var(--_footer--2xl) * var(--_size--footer)); --space-footer--3xl: calc(var(--_footer--3xl) * var(--_size--footer)); /***************************** * * 13* - Container Widths */ --_width-offset: calc(var(--width--container) / 6); --width-ch: 60ch; /* This is '0' font dependent */ --width--3xs: calc(var(--width--container) - var(--_width-offset) * 4); /* 456px */ --width--2xs: calc(var(--width--container) - var(--_width-offset) * 3); /* 684px */ --width--xs: calc(var(--width--container) - var(--_width-offset) * 2); /* 912px */ --width--s: calc(var(--width--container) - var(--_width-offset) * 1); /* 1140px */ --width--m: var(--width--container); /* 1368px */ --width--l: calc(var(--width--container) + var(--_width-offset) * 1); /* 1596px */ /***************************** * * 14* - Border Radius */ --border-radius--xs: 3px; --border-radius--s: calc(var(--border-radius--xs) * var(--_space-ratio)); --border-radius--m: calc(var(--border-radius--s) * var(--_space-ratio)); --border-radius--l: calc(var(--border-radius--m) * var(--_space-ratio)); --border-radius--xl: calc(var(--border-radius--l) * var(--_space-ratio)); --border-radius--circle: 100%; /***************************** * * 15* - Transitionss */ --_curve: cubic-bezier(0.5, 0, 0.5, 1); --transition--xs: 0.1s var(--_curve); --transition--s: 0.2s var(--_curve); --transition--m: 0.3s var(--_curve); --transition--l: 0.4s var(--_curve); --transition--xl: 0.5s var(--_curve); /***************************** * * 16* - Box Shadows * @link https://shadows.brumm.af * @link https://tobiasahlin.com/blog/layered-smooth-box-shadows/ */ --_rgb: 0.1; --_rgb--scale: 0.25; /****************************/ --_hor--s: 0px; --_ver--s: 0.75px; --_blur--s: calc(3 * var(--_ver--s)); --_inset--s: calc(-0.5 * var(--_ver--s)); --_scale--s: 0.75; --_scale--s-hover: calc(2 * var(--_scale--s)); --box-shadow--s: calc(var(--_hor--s) * var(--_scale--s) * 1) calc(var(--_ver--s) * var(--_scale--s) * 1) calc(var(--_blur--s) * var(--_scale--s) * 1) calc(var(--_inset--s) * var(--_scale--s) * 1) rgba(0,0,0,calc(var(--_rgb))), calc(var(--_hor--s) * var(--_scale--s) * 2) calc(var(--_ver--s) * var(--_scale--s) * 2) calc(var(--_blur--s) * var(--_scale--s) * 2) calc(var(--_inset--s) * var(--_scale--s) * 2) rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 1)), calc(var(--_hor--s) * var(--_scale--s) * 4) calc(var(--_ver--s) * var(--_scale--s) * 4) calc(var(--_blur--s) * var(--_scale--s) * 4) calc(var(--_inset--s) * var(--_scale--s) * 4) rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 2)), calc(var(--_hor--s) * var(--_scale--s) * 8) calc(var(--_ver--s) * var(--_scale--s) * 8) calc(var(--_blur--s) * var(--_scale--s) * 8) calc(var(--_inset--s) * var(--_scale--s) * 8) rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 3)), calc(var(--_hor--s) * var(--_scale--s) * 16) calc(var(--_ver--s) * var(--_scale--s) * 16) calc(var(--_blur--s) * var(--_scale--s) * 16) calc(var(--_inset--s) * var(--_scale--s) * 16) rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 4)); /****************************/ --box-shadow--s-hover: calc(var(--_hor--s) * var(--_scale--s-hover) * 1) calc(var(--_ver--s) * var(--_scale--s-hover) * 1) calc(var(--_blur--s) * var(--_scale--s-hover) * 1) calc(var(--_inset--s) * var(--_scale--s-hover) * 1) rgba(0,0,0,calc(var(--_rgb))), calc(var(--_hor--s) * var(--_scale--s-hover) * 2) calc(var(--_ver--s) * var(--_scale--s-hover) * 2) calc(var(--_blur--s) * var(--_scale--s-hover) * 2) calc(var(--_inset--s) * var(--_scale--s-hover) * 2) rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 1)), calc(var(--_hor--s) * var(--_scale--s-hover) * 4) calc(var(--_ver--s) * var(--_scale--s-hover) * 4) calc(var(--_blur--s) * var(--_scale--s-hover) * 4) calc(var(--_inset--s) * var(--_scale--s-hover) * 4) rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 2)), calc(var(--_hor--s) * var(--_scale--s-hover) * 8) calc(var(--_ver--s) * var(--_scale--s-hover) * 8) calc(var(--_blur--s) * var(--_scale--s-hover) * 8) calc(var(--_inset--s) * var(--_scale--s-hover) * 8) rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 3)), calc(var(--_hor--s) * var(--_scale--s-hover) * 16) calc(var(--_ver--s) * var(--_scale--s-hover) * 16) calc(var(--_blur--s) * var(--_scale--s-hover) * 16) calc(var(--_inset--s) * var(--_scale--s-hover) * 16) rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 4)); /****************************/ --_hor--m: 0px; --_ver--m: 1px; --_blur--m: calc(3 * var(--_ver--m)); --_inset--m: calc(-0.5 * var(--_ver--m)); --_scale--m: 1; --_scale--m-hover: calc(2 * var(--_scale--m)); --box-shadow--m: calc(var(--_hor--m) * var(--_scale--m) * 1) calc(var(--_ver--m) * var(--_scale--m) * 1) calc(var(--_blur--m) * var(--_scale--m) * 1) calc(var(--_inset--m) * var(--_scale--m) * 1) rgba(0,0,0,calc(var(--_rgb))), calc(var(--_hor--m) * var(--_scale--m) * 2) calc(var(--_ver--m) * var(--_scale--m) * 2) calc(var(--_blur--m) * var(--_scale--m) * 2) calc(var(--_inset--m) * var(--_scale--m) * 2) rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 1)), calc(var(--_hor--m) * var(--_scale--m) * 4) calc(var(--_ver--m) * var(--_scale--m) * 4) calc(var(--_blur--m) * var(--_scale--m) * 4) calc(var(--_inset--m) * var(--_scale--m) * 4) rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 2)), calc(var(--_hor--m) * var(--_scale--m) * 8) calc(var(--_ver--m) * var(--_scale--m) * 8) calc(var(--_blur--m) * var(--_scale--m) * 8) calc(var(--_inset--m) * var(--_scale--m) * 8) rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 3)), calc(var(--_hor--m) * var(--_scale--m) * 16) calc(var(--_ver--m) * var(--_scale--m) * 16) calc(var(--_blur--m) * var(--_scale--m) * 16) calc(var(--_inset--m) * var(--_scale--m) * 16) rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 4)); /****************************/ --box-shadow--m-hover: calc(var(--_hor--m) * var(--_scale--m-hover) * 1) calc(var(--_ver--m) * var(--_scale--m-hover) * 1) calc(var(--_blur--m) * var(--_scale--m-hover) * 1) calc(var(--_inset--m) * var(--_scale--m-hover) * 1) rgba(0,0,0,calc(var(--_rgb))), calc(var(--_hor--m) * var(--_scale--m-hover) * 2) calc(var(--_ver--m) * var(--_scale--m-hover) * 2) calc(var(--_blur--m) * var(--_scale--m-hover) * 2) calc(var(--_inset--m) * var(--_scale--m-hover) * 2) rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 1)), calc(var(--_hor--m) * var(--_scale--m-hover) * 4) calc(var(--_ver--m) * var(--_scale--m-hover) * 4) calc(var(--_blur--m) * var(--_scale--m-hover) * 4) calc(var(--_inset--m) * var(--_scale--m-hover) * 4) rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 2)), calc(var(--_hor--m) * var(--_scale--m-hover) * 8) calc(var(--_ver--m) * var(--_scale--m-hover) * 8) calc(var(--_blur--m) * var(--_scale--m-hover) * 8) calc(var(--_inset--m) * var(--_scale--m-hover) * 8) rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 3)), calc(var(--_hor--m) * var(--_scale--m-hover) * 16) calc(var(--_ver--m) * var(--_scale--m-hover) * 16) calc(var(--_blur--m) * var(--_scale--m-hover) * 16) calc(var(--_inset--m) * var(--_scale--m-hover) * 16) rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 4)); /****************************/ --_hor--l: 0px; --_ver--l: 1.25px; --_blur--l: calc(3 * var(--_ver--l)); --_inset--l: calc(-0.5 * var(--_ver--l)); --_scale--l: 1.25; --_scale--l-hover: calc(2 * var(--_scale--l)); --box-shadow--l: calc(var(--_hor--l) * var(--_scale--l) * 1) calc(var(--_ver--l) * var(--_scale--l) * 1) calc(var(--_blur--l) * var(--_scale--l) * 1) calc(var(--_inset--l) * var(--_scale--l) * 1) rgba(0,0,0,calc(var(--_rgb))), calc(var(--_hor--l) * var(--_scale--l) * 2) calc(var(--_ver--l) * var(--_scale--l) * 2) calc(var(--_blur--l) * var(--_scale--l) * 2) calc(var(--_inset--l) * var(--_scale--l) * 2) rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 1)), calc(var(--_hor--l) * var(--_scale--l) * 4) calc(var(--_ver--l) * var(--_scale--l) * 4) calc(var(--_blur--l) * var(--_scale--l) * 4) calc(var(--_inset--l) * var(--_scale--l) * 4) rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 2)), calc(var(--_hor--l) * var(--_scale--l) * 8) calc(var(--_ver--l) * var(--_scale--l) * 8) calc(var(--_blur--l) * var(--_scale--l) * 8) calc(var(--_inset--l) * var(--_scale--l) * 8) rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 3)), calc(var(--_hor--l) * var(--_scale--l) * 16) calc(var(--_ver--l) * var(--_scale--l) * 16) calc(var(--_blur--l) * var(--_scale--l) * 16) calc(var(--_inset--l) * var(--_scale--l) * 16) rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 4)); /****************************/ --box-shadow--l-hover: calc(var(--_hor--l) * var(--_scale--l-hover) * 1) calc(var(--_ver--l) * var(--_scale--l-hover) * 1) calc(var(--_blur--l) * var(--_scale--l-hover) * 1) calc(var(--_inset--l) * var(--_scale--l-hover) * 1) rgba(0,0,0,calc(var(--_rgb))), calc(var(--_hor--l) * var(--_scale--l-hover) * 2) calc(var(--_ver--l) * var(--_scale--l-hover) * 2) calc(var(--_blur--l) * var(--_scale--l-hover) * 2) calc(var(--_inset--l) * var(--_scale--l-hover) * 2) rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 1)), calc(var(--_hor--l) * var(--_scale--l-hover) * 4) calc(var(--_ver--l) * var(--_scale--l-hover) * 4) calc(var(--_blur--l) * var(--_scale--l-hover) * 4) calc(var(--_inset--l) * var(--_scale--l-hover) * 4) rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 2)), calc(var(--_hor--l) * var(--_scale--l-hover) * 8) calc(var(--_ver--l) * var(--_scale--l-hover) * 8) calc(var(--_blur--l) * var(--_scale--l-hover) * 8) calc(var(--_inset--l) * var(--_scale--l-hover) * 8) rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 3)), calc(var(--_hor--l) * var(--_scale--l-hover) * 16) calc(var(--_ver--l) * var(--_scale--l-hover) * 16) calc(var(--_blur--l) * var(--_scale--l-hover) * 16) calc(var(--_inset--l) * var(--_scale--l-hover) * 16) rgba(0,0,0,calc(var(--_rgb) * var(--_rgb--scale) * 4)); /***************************** * * 16* - Drop Shadows */ --_ds: 8px; --dropshadow--light: drop-shadow( calc(var(--_ds) * 0.5) calc(var(--_ds) * 0.75) calc(var(--_ds) * 1.25) rgb(0,0,0,0.4)); --dropshadow--dark: drop-shadow( calc(var(--_ds) * 0.5) calc(var(--_ds) * 0.75) calc(var(--_ds) * 1.25) rgb(0,0,0,0.6)); /***************************** * * 17* - Colors Primary * * @link https://noeldelgado.github.io/shadowlord/#66cccc * @link https://oklch.com/ * */ --opacity: 1; --_pri--h: 285; --_pri: hsl(var(--_pri--h) 80% 40%); --primary--light: hsl(from var(--_pri) h s calc(l + 12)); --primary--base: hsl(from var(--_pri) h s l); --primary--dark: hsl(from var(--_pri) h s calc(l - 15)); /*****************************/ --_pri--s: 40%; --_pri-light: hsl(var(--_pri--h) var(--_pri--s) 97%); --_pri-light-inc: 5; --primary-light--1: hsl(from var(--_pri-light) h s l); --primary-light--2: hsl(from var(--_pri-light) h s calc(l - (1 * var(--_pri-light-inc)))); --primary-light--3: hsl(from var(--_pri-light) h s calc(l - (2.5 * var(--_pri-light-inc)))); --primary-light--4: hsl(from var(--_pri-light) h s calc(l - (3.5 * var(--_pri-light-inc)))); --primary-light--5: hsl(from var(--_pri-light) h s calc(l - (5 * var(--_pri-light-inc)))); --primary-light--6: hsl(from var(--_pri-light) h s calc(l - (6 * var(--_pri-light-inc)))); /*****************************/ --_pri-dark: hsl(var(--_pri--h) var(--_pri--s) 10%); --_pri-dark-inc: 5; --primary-dark--1: hsl(from var(--_pri-dark) h s calc(l + (6 * var(--_pri-dark-inc)))); --primary-dark--2: hsl(from var(--_pri-dark) h s calc(l + (5 * var(--_pri-dark-inc)))); --primary-dark--3: hsl(from var(--_pri-dark) h s calc(l + (3.5 * var(--_pri-dark-inc)))); --primary-dark--4: hsl(from var(--_pri-dark) h s calc(l + (2.5 * var(--_pri-dark-inc)))); --primary-dark--5: hsl(from var(--_pri-dark) h s calc(l + (1 * var(--_pri-dark-inc)))); --primary-dark--6: hsl(from var(--_pri-dark) h s l); /*****************************/ --primary-base--05: hsl(var(--primary--base) / 0.05); --primary-base--10: hsl(var(--primary--base) / 0.1); --primary-base--20: hsl(var(--primary--base) / 0.2); --primary-base--30: hsl(var(--primary--base) / 0.3); --primary-base--40: hsl(var(--primary--base) / 0.4); --primary-base--50: hsl(var(--primary--base) / 0.5); --primary-base--60: hsl(var(--primary--base) / 0.6); --primary-base--70: hsl(var(--primary--base) / 0.7); --primary-base--80: hsl(var(--primary--base) / 0.8); --primary-base--90: hsl(var(--primary--base) / 0.9); --primary-base--95: hsl(var(--primary--base) / 0.95); /***************************** * * 18* - Colors Accent - is the same as Primary -> change it as needed. */ --_acc--h: calc(var(--_pri--h) - 135); --_acc: hsl(var(--_acc--h) 88% 50%); --accent--light: hsl(from var(--_acc) h s calc(l + 20)); --accent--base: hsl(from var(--_acc) h s l); --accent--dark: hsl(from var(--_acc) h s calc(l - 10)); /*****************************/ --_acc--s: 40%; --_acc-light: hsl(var(--_acc--h) var(--_acc--s) 95%); --_acc-light-inc: 5; --accent-light--1: hsl(from var(--_acc-light) h s l); --accent-light--2: hsl(from var(--_acc-light) h s calc(l - (1 * var(--_acc-light-inc)))); --accent-light--3: hsl(from var(--_acc-light) h s calc(l - (2.5 * var(--_acc-light-inc)))); --accent-light--4: hsl(from var(--_acc-light) h s calc(l - (3.5 * var(--_acc-light-inc)))); --accent-light--5: hsl(from var(--_acc-light) h s calc(l - (5 * var(--_acc-light-inc)))); --accent-light--6: hsl(from var(--_acc-light) h s calc(l - (6 * var(--_acc-light-inc)))); /*****************************/ --_acc-dark: hsl(var(--_acc--h) var(--_acc--s) 5%); --_acc-dark-inc: 5; --accent-dark--1: hsl(from var(--_acc-dark) h s calc(l + (6 * var(--_acc-dark-inc)))); --accent-dark--2: hsl(from var(--_acc-dark) h s calc(l + (5 * var(--_acc-dark-inc)))); --accent-dark--3: hsl(from var(--_acc-dark) h s calc(l + (3.5 * var(--_acc-dark-inc)))); --accent-dark--4: hsl(from var(--_acc-dark) h s calc(l + (2.5 * var(--_acc-dark-inc)))); --accent-dark--5: hsl(from var(--_acc-dark) h s calc(l + (1 * var(--_acc-dark-inc)))); --accent-dark--6: hsl(from var(--_acc-dark) h s l); /*****************************/ --accent-base--05: hsl(var(--_hsl-accent--base) / 0.05); --accent-base--10: hsl(var(--_hsl-accent--base) / 0.1); --accent-base--20: hsl(var(--_hsl-accent--base) / 0.2); --accent-base--30: hsl(var(--_hsl-accent--base) / 0.3); --accent-base--40: hsl(var(--_hsl-accent--base) / 0.4); --accent-base--50: hsl(var(--_hsl-accent--base) / 0.5); --accent-base--60: hsl(var(--_hsl-accent--base) / 0.6); --accent-base--70: hsl(var(--_hsl-accent--base) / 0.7); --accent-base--80: hsl(var(--_hsl-accent--base) / 0.8); --accent-base--90: hsl(var(--_hsl-accent--base) / 0.9); --accent-base--95: hsl(var(--_hsl-accent--base) / 0.95); /***************************** * * 19* - Colors Background */ --_bg--h: var(--_pri--h); --_bg-light--s: 8%; --_bg-light-inc: 3; --_bg-light: hsl(var(--_bg--h) var(--_bg-light--s) 98%); /****************************/ --bg-light--1: hsl(from var(--_bg-light) h s l); --bg-light--2: hsl(from var(--_bg-light) h s calc(l - (1 * var(--_bg-light-inc)))); --bg-light--3: hsl(from var(--_bg-light) h s calc(l - (2.5 * var(--_bg-light-inc)))); --bg-light--4: hsl(from var(--_bg-light) h s calc(l - (3.5 * var(--_bg-light-inc)))); --bg-light--5: hsl(from var(--_bg-light) h s calc(l - (5 * var(--_bg-light-inc)))); --bg-light--6: hsl(from var(--_bg-light) h s calc(l - (6 * var(--_bg-light-inc)))); /****************************/ --_bg-dark--s: 10%; --_bg-dark-inc: 4; --_bg-dark: hsl(var(--_bg--h) var(--_bg-dark--s) 6%); /****************************/ --bg-dark--1: hsl(from var(--_bg-dark) h s calc(l + (6 * var(--_bg-dark-inc)))); --bg-dark--2: hsl(from var(--_bg-dark) h s calc(l + (5 * var(--_bg-dark-inc)))); --bg-dark--3: hsl(from var(--_bg-dark) h s calc(l + (3.5 * var(--_bg-dark-inc)))); --bg-dark--4: hsl(from var(--_bg-dark) h s calc(l + (2.5 * var(--_bg-dark-inc)))); --bg-dark--5: hsl(from var(--_bg-dark) h s calc(l + (1 * var(--_bg-dark-inc)))); --bg-dark--6: hsl(from var(--_bg-dark) h s l); /***************************** * * 20* - Colors Body Light & Body Dark */ --_body--h: var(--_acc--h); --_body-light--s: 5%; --_body-light-inc: 4; --_body-light: hsl(var(--_body--h) var(--_body-light--s) 96%); /****************************/ --body-light--1: hsl(from var(--_body-light) h s l); --body-light--2: hsl(from var(--_body-light) h s calc(l - (1 * var(--_body-light-inc)))); --body-light--3: hsl(from var(--_body-light) h s calc(l - (2.5 * var(--_body-light-inc)))); --body-light--4: hsl(from var(--_body-light) h s calc(l - (3.5 * var(--_body-light-inc)))); --body-light--5: hsl(from var(--_body-light) h s calc(l - (5 * var(--_body-light-inc)))); --body-light--6: hsl(from var(--_body-light) h s calc(l - (6 * var(--_body-light-inc)))); /****************************/ --_body-dark--s: 10%; --_body-dark-inc: 4; --_body-dark: hsl(var(--_body--h) var(--_body-dark--s) 6%); /****************************/ --body-dark--1: hsl(from var(--_body-dark) h s calc(l + (6 * var(--_body-dark-inc)))); --body-dark--2: hsl(from var(--_body-dark) h s calc(l + (5 * var(--_body-dark-inc)))); --body-dark--3: hsl(from var(--_body-dark) h s calc(l + (3.5 * var(--_body-dark-inc)))); --body-dark--4: hsl(from var(--_body-dark) h s calc(l + (2.5 * var(--_body-dark-inc)))); --body-dark--5: hsl(from var(--_body-dark) h s calc(l + (1 * var(--_body-dark-inc)))); --body-dark--6: hsl(from var(--_body-dark) h s l); /***************************** * * 21* - Colors Heading Light & Dark */ --_heading--h: var(--_acc--h); --_heading-light--s: 10%; --_heading-light-inc: 4; --_heading-light: hsl(var(--_heading--h) var(--_heading-light--s) 90%); /****************************/ --heading-light--1: hsl(from var(--_heading-light) h s l); --heading-light--2: hsl(from var(--_heading-light) h s calc(l - (1 * var(--_heading-light-inc)))); --heading-light--3: hsl(from var(--_heading-light) h s calc(l - (2.5 * var(--_heading-light-inc)))); --heading-light--4: hsl(from var(--_heading-light) h s calc(l - (3.5 * var(--_heading-light-inc)))); --heading-light--5: hsl(from var(--_heading-light) h s calc(l - (5 * var(--_heading-light-inc)))); --heading-light--6: hsl(from var(--_heading-light) h s calc(l - (6 * var(--_heading-light-inc)))); /****************************/ --_heading-dark--s: 10%; --_heading-dark-inc: 4; --_heading-dark: hsl(var(--_heading--h) var(--_heading-dark--s) 15%); /****************************/ --heading-dark--1: hsl(from var(--_heading-dark) h s calc(l + (6 * var(--_heading-dark-inc)))); --heading-dark--2: hsl(from var(--_heading-dark) h s calc(l + (5 * var(--_heading-dark-inc)))); --heading-dark--3: hsl(from var(--_heading-dark) h s calc(l + (3.5 * var(--_heading-dark-inc)))); --heading-dark--4: hsl(from var(--_heading-dark) h s calc(l + (2.5 * var(--_heading-dark-inc)))); --heading-dark--5: hsl(from var(--_heading-dark) h s calc(l + (1 * var(--_heading-dark-inc)))); --heading-dark--6: hsl(from var(--_heading-dark) h s l); /***************************** * * 22* - Colors Link Light & Dark */ --_link-light--h: var(--_accent--h); --_link-light--s: 10%; --_link-light--l: 75%; --_link-light--h-hover: var(--_accent--h); --_link-light--s-hover: 30%; --_link-light--l-hover: 70%; --link--light: hsl( var(--_link-light--h) var(--_link-light--s) var(--_link-light--l)); --link--light-hover: hsl( var(--_link-light--h-hover) var(--_link-light--s-hover) var(--_link-light--l-hover)); /****************************/ --_link-dark--h: var(--_accent--h); --_link-dark--s: 50%; --_link-dark--l: 25%; --_link-dark--h-hover: var(--_accent--h); --_link-dark--s-hover: 60%; --_link-dark--l-hover: 20%; --link--dark: hsl( var(--_link-dark--h) var(--_link-dark--s) var(--_link-dark--l)); --link--dark-hover: hsl( var(--_link-dark--h-hover) var(--_link-dark--s-hover) var(--_link-dark--l-hover)); /***************************** * * 23* - Colors ERROR Light & Dark */ --error--light: hsl(0deg 90% 50%); --error--dark: hsl(0deg 90% 25%); --success--light: hsl(130deg 70% 50%); --success--dark: hsl(130deg 70% 25%); --warning--light: hsl(45deg 70% 50%); --warning--dark: hsl(45deg 70% 25%); --info--light: hsl(210deg 70% 50%); --info--dark: hsl(210deg 70% 25%); /***************************** * * 24* - Colors Radial Light & Dark */ --radial-primary--light: radial-gradient( var(--primary-light--1) 25%, var(--primary-light--2)); --radial-primary--dark: radial-gradient( var(--primary-dark--2) 25%, var(--primary-dark--3)); --radial-accent--light: radial-gradient( var(--accent-light--1) 25%, var(--accent-light--2)); --radial-accent--dark: radial-gradient( var(--accent-dark--2) 25%, var(--accent-dark--3)); --radial--light: radial-gradient( var(--white) 25%, var(--bg-light--4)); --radial--dark: radial-gradient( var(--bg-dark--1) 25%, var(--black)); --radial--light-hover: radial-gradient( var(--white) 25%, var(--bg-light--5)); --radial--dark-hover: radial-gradient( var(--bg-dark--5) 25%, var(--black)); --radial-card--light: radial-gradient( var(--bg-light--1) 25%, var(--bg-light--4)); --radial-card--dark: radial-gradient( var(--bg-dark--1) 25%, var(--bg-dark--4)); --radial-card--light-hover: radial-gradient( var(--bg-light--2) 25%, var(--bg-light--5)); --radial-card--dark-hover: radial-gradient( var(--bg-dark--2) 25%, var(--bg-dark--5)); /***************************** * * 25* Colors Light and Dark - Social Media */ --white: #fdfdfd; --lightgray: #d3d3d3; --darkgray: #555555; --black: #222222; --brand-facebook: #1877f2; --brand-twitter: #1da1f2; --brand-youtube: #ff0000; --brand-instagram: #c32aa3; --brand-pinterest: #bd081c; --brand-linkedin: #0a66c2; --brand-email: #663399; }