:root { --ora: 1px solid #f90; --black: 1px solid black; --red: 1px solid red; --pink: 1px solid pink; --blue: 1px solid blue; --green: 1px solid green; /* -------------------------------- FONTS -------------------------------- */ --font-primary: 'Cabin', sans-serif; --font-secondary: 'Rubik', sans-serif; /* set base values */ --text-base-size: 17px; --text-scale-ratio: 1.200; /* line-height */ --baseline: 1.5; --baseline-heading: 1.2; --baseline-small: 1; --baseline-vertical: 1.05rem; --p: var(--text-base-size); --h6: calc( var(--h5) / var(--text-scale-ratio)); --h5: calc( var(--p) / var(--text-scale-ratio)); --h4: calc( var(--p) * var(--text-scale-ratio)); --h3: calc( var(--h4) * var(--text-scale-ratio)); --h2: calc( var(--h3) * var(--text-scale-ratio)); --h1: calc( var(--h2) * var(--text-scale-ratio)); --text-xl: calc(var(--h1) * var(--text-scale-ratio)); --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio)); --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio)); --small: calc(var(--h5) / var(--text-scale-ratio)); --text-xs: calc(var(--h6) / var(--text-scale-ratio)); /* -------------------------------- LAYOUT -------------------------------- */ /*--space-unit: 1em;*/ --screen-xs: 512px; --screen-s: 890px; --screen-m: 1024px; --screen-l: 1200px; --screen-xl: 1440px; --grid-gutter: 2em; --row-gap: calc(3.25 * var(--space-unit)); --radius8: 8px; --radius12: 12px; --radius16: 16px; --radius24: 24px; /* spacing values */ --space-unit: 1em; --space-ratio: 1.500; /*--space-xxxxs: calc(0.125 * var(--space-unit));*/ /*--space-xxxs: calc(0.25 * var(--space-unit)); */ /*--space-xxs: calc(0.375 * var(--space-unit)); */ /*--space-xs: calc(0.5 * var(--space-unit)); */ /*--space-s: calc(0.75 * var(--space-unit)); */ /*--space-m: calc(1.25 * var(--space-unit)); */ /* --space-l: calc(2 * var(--space-unit)); */ /*--space-xl: calc(3.25 * var(--space-unit)); */ /*--space-xxl: calc(5.25 * var(--space-unit)); */ /*--space-xxxl: calc(8.5 * var(--space-unit)); */ /*--space-xxxxl: calc(13.75 * var(--space-unit));*/ --space-xxxs: calc(var(--space-xxs) / var(--space-ratio)); --space-xxs: calc(var(--space-xs) / var(--space-ratio)); --space-xs: calc(var(--space-s) / var(--space-ratio)); --space-s: calc(var(--space-m) / var(--space-ratio)); --space-m: calc(var(--space-unit) * var(--space-ratio)); --space-l: calc(var(--space-m) * var(--space-ratio)); --space-xl: calc(var(--space-l) * var(--space-ratio)); --space-xxl: calc(var(--space-xl) * var(--space-ratio)); --space-xxxl: calc(var(--space-xxl) * var(--space-ratio)); --space-huge: calc(var(--space-xxxl) * var(--space-ratio)); /* -------------------------------- SHADOWS -------------------------------- */ --shadow10: 0 7px 14px -8px rgba(0, 0, 0, 0.41); --shadow20: 0 12px 24px -8px rgba(0, 0, 0, 0.41); --shadow30: 0 17px 34px -8px rgba(0, 0, 0, 0.41); --shadow40: 0 22px 54px -8px rgba(0, 0, 0, 0.41); --shadow50: 0 27px 74px -8px rgba(0, 0, 0, 0.41); --shadow-s: 0 1px 2px rgba(251, 120, 19, .6); --shadow-m: 0 1px 2px rgba(251, 120, 19, .4), 0 1px 8px rgba(251, 120, 19, .6); --shadow-l: 0 1px 8px rgba(251, 120, 19, .4), 0 8px 24px rgba(251, 120, 19, .6); --shadow-xl: 0 1px 8px rgba(251, 120, 19, .4), 0 16px 48px rgba(251, 120, 19, .4), 0 24px 60px rgba(251, 120, 19, .4); --shadow-xxl: 0 1px 8px rgba(251, 120, 19, .4), 0 16px 64px rgba(251, 120, 19, .6), 0 24px 100px rgba(251, 120, 19, .6); --shadow-card: 0 8px 14px rgba(0, 0, 0, 0.21); --shadow-brand10: 0 7px 14px -8px hsla(var(--brand),.63); --shadow-brand20: 0 12px 24px -8px hsla(var(--brand),.63); --shadow-brand30: 0 17px 34px -8px hsla(var(--brand),.63); --shadow-brand40: 0 22px 54px -8px hsla(var(--brand),.63); --shadow-brand50: 0 27px 74px -8px hsla(var(--brand),.63); --shadow-second10: 0 7px 14px -8px hsla(var(--brand-second),.63); --shadow-second20: 0 12px 24px -8px hsla(var(--brand-second),.63); --shadow-second30: 0 17px 34px -8px hsla(var(--brand-second),.63); --shadow-second40: 0 22px 54px -8px hsla(var(--brand-second),.63); --shadow-second50: 0 27px 74px -8px hsla(var(--brand-second),.63); --shadow-third10: 0 7px 14px -8px hsla(var(--brand-third),.63); --shadow-third20: 0 12px 24px -8px hsla(var(--brand-third),.63); --shadow-third30: 0 17px 34px -8px hsla(var(--brand-third),.63); --shadow-third40: 0 22px 54px -8px hsla(var(--brand-third),.63); --shadow-third50: 0 27px 74px -8px hsla(var(--brand-third),.63); --dark10: 0 7px 14px -8px hsla(var(--dark),.63); --dark20: 0 12px 24px -8px hsla(var(--dark),.63); --dark30: 0 17px 34px -8px hsla(var(--dark),.63); --dark40: 0 22px 54px -8px hsla(var(--dark),.63); --dark50: 0 27px 74px -8px hsla(var(--dark),.63); /* -------------------------------- ICONS & RADIUS -------------------------------- */ --radius4: 4px; --radius8: 8px; --radius16: 16px; --radius24: 24px; --icon-12: 12px; --icon-18: 18px; --icon-24: 24px; --icon-36: 36px; --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z' fill='rgba(25,25,25,1)'/%3E%3C/svg%3E"); --arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 10.828l-4.95 4.95-1.414-1.414L12 8l6.364 6.364-1.414 1.414z' fill='rgba(255,255,255,1)'/%3E%3C/svg%3E"); --plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z' fill='rgba(255,255,255,1)'/%3E%3C/svg%3E"); --close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z' fill='rgba(255,255,255,1)'/%3E%3C/svg%3E"); --arrow-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z' fill='rgba(5,190,214,1)'/%3E%3C/svg%3E"); } @media only screen and (min-width:1440px) { :root { } } @media only screen and (max-width:1280px) { :root { } } @media only screen and (max-width:1024px) { :root { } } @media only screen and (max-width:768px) { :root { --row-gap: var(--space-l); /*--text-scale-ratio: 1.100;*/ /*--space-ratio: 1.450;*/ } } @media only screen and (max-width: 512px) { :root { --row-gap: var(--space-s); } }