:root { /* global page width */ --global-container-width: min(80vw, 70rem); --global-container-fixwidth: 1400px; /* typography */ /* fonts */ --font-sans: 'Scandia', Avenir, Helvetica, Arial, sans-serif; --font-sans-text: 'Colfax', Avenir, Helvetica, Arial, sans-serif; --font-serif: 'Elena', Constantia, Georgia, serif; /* body font size */ /* --font-base-size: 1em; --font-leading: 1.25em; */ /* type scale */ /* --font-scale-ratio: 1.2; --font-size-00: calc(var(--font-base-size) * var(--font-scale-ratio) / 1.35); --font-size-01: calc(var(--font-base-size) * var(--font-scale-ratio)); --font-size-02: calc(var(--font-size-01) * var(--font-scale-ratio)); --font-size-03: calc(var(--font-size-02) * var(--font-scale-ratio)); --font-size-04: calc(var(--font-size-03) * var(--font-scale-ratio)); --font-size-05: calc(var(--font-size-04) * var(--font-scale-ratio)); --font-size-06: calc(var(--font-size-05) * var(--font-scale-ratio)); --font-size-07: calc(var(--font-size-06) * var(--font-scale-ratio)); --font-size-08: calc(var(--font-size-07) * var(--font-scale-ratio)); --font-size-09: calc(var(--font-size-08) * var(--font-scale-ratio)); --font-size-10: calc(var(--font-size-09) * var(--font-scale-ratio)); --font-leading-01: calc(var(--font-leading) * var(--font-scale-ratio)); --font-leading-02: calc(var(--font-leading-01) * var(--font-scale-ratio)); --font-leading-03: calc(var(--font-leading-02) * var(--font-scale-ratio)); --font-leading-04: calc(var(--font-leading-03) * var(--font-scale-ratio)); --font-leading-05: calc(var(--font-leading-04) * var(--font-scale-ratio)); */ --font-size-00: calc(.25rem + .5 * ((100vw - 320px) / 680)); --font-size-01: calc(.50rem + .5 * ((100vw - 320px) / 680)); --font-size-02: calc(.75rem + .5 * ((100vw - 320px) / 680)); --font-size-03: calc(1rem + .5 * ((100vw - 320px) / 680)); --font-size-04: calc(1.25rem + .5 * ((100vw - 320px) / 680)); --font-size-05: calc(1.5rem + .5 * ((100vw - 320px) / 680)); --font-size-06: calc(1.75rem + .5 * ((100vw - 320px) / 680)); --font-size-07: calc(2rem + 1 * ((100vw - 320px) / 680)); --font-size-08: calc(2.5rem + 1 * ((100vw - 320px) / 680)); --font-size-09: calc(3rem + 1 * ((100vw - 320px) / 680)); --font-size-10: calc(3.5rem + 1 * ((100vw - 320px) / 680)); --font-leading-00: 1rem; --font-leading-01: 1.25em; --font-leading-02: 1.4em; --font-leading-03: 1.75rem; --font-leading-04: 2rem; --font-leading-05: 2.5rem; --font-leading-06: 3rem; --font-leading-07: calc(42px + 2 * ((100vw - 320px) / 680)); --font-leading-08: calc(52px + 2 * ((100vw - 320px) / 680)); --font-leading-09: calc(64px + 2 * ((100vw - 320px) / 680)); --font-leading-10: calc(80px + 2 * ((100vw - 320px) / 680)); --font-size-p: calc(1em + 0 * ((100vw - 320px) / 680)); --font-size-p-article: 21px; --font-leading-p-article: 28px; --font-size-h1: calc(32px + 8 * ((100vw - 320px) / 680)); --font-size-h2: calc(3em + 1 * ((100vw - 320px) / 680)); --font-size-h3: calc(18px + 2 * ((100vw - 320px) / 680)); --font-size-h4: calc(14px + 2 * ((100vw - 320px) / 680)); --font-size-h5: calc(12px + 2 * ((100vw - 320px) / 680)); --font-size-h6: calc(10px + 2 * ((100vw - 320px) / 680)); --footer-about-text: calc(12px + 2 * ((100vw - 320px) / 680)); --footer-utility-text: calc(12px + 1 * ((100vw - 320px) / 680)); --footer-copyright-text: calc(10px + 1 * ((100vw - 320px) / 680)); /* --font-size-xxsm: 1rem; --font-size-xsm: 1.2rem; --font-size-sm: calc(12px + 1 * ((100vw - 320px) / 680)); --font-size-lg: calc(21px + 3 * ((100vw - 320px) / 680)); --font-size-xlg: 3.6rem; --font-size-xxlg: 4.8rem; */ --font-leading-p: calc(24px + 4 * ((100vw - 320px) / 680)); --font-leading-h1: calc(36px + 8 * ((100vw - 320px) / 680)); --font-leading-h2: calc(26px + 8 * ((100vw - 320px) / 680)); --font-leading-h3: calc(26px + 4 * ((100vw - 320px) / 680)); --font-leading-lg: calc(28px + 3 * ((100vw - 320px) / 680)); --font-leading-sm: calc(18px + 4 * ((100vw - 320px) / 680)); --font-leading-xlg: 4.0rem; /* font weights */ --font-weight-thin: 200; --font-weight-light: 200; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-bold: 700; --font-weight-black: 900; /* font styles */ --font-style-normal: normal; --font-style-italic: italic; /* layout */ /* layout */ /* layout */ /* breakpoint widths */ --page-desktop: 2000px; --page-laptop: 1200px; --page-tablet-landscape: 960px; --page-tablet-portrait: 700px; --page-mobile-landscape: 480px; --page-mobile-portrait: 320px; /* colors */ --color-white: rgba(255,255,255,1.0); --color-white-1: rgba(255,255,255,0.1); --color-white-2: rgba(255,255,255,0.2); --color-white-3: rgba(255,255,255,0.3); --color-white-4: rgba(255,255,255,0.4); --color-white-5: rgba(255,255,255,0.5); --color-white-6: rgba(255,255,255,0.6); --color-white-7: rgba(255,255,255,0.7); --color-white-8: rgba(255,255,255,0.8); --color-black: rgba(0,0,0,1.0); --color-trans: rgba(0,0,0,0.0); --color-grey-0: rgba(0,0,0,0.05); --color-grey-1: rgba(0,0,0,0.1); --color-grey-2: rgba(0,0,0,0.2); --color-grey-3: rgba(0,0,0,0.3); --color-grey-4: rgba(0,0,0,0.4); --color-grey-5: rgba(0,0,0,0.5); --color-grey-6: rgba(0,0,0,0.6); --color-grey-7: rgba(0,0,0,0.7); --color-grey-8: rgba(0,0,0,0.8); --color-grey-9: rgba(0,0,0,0.9); /* Old Red — Archive while all the banners are blue */ /* --color-brand-red: rgba(223, 49, 22, 1); --color-brand-red-dark: rgba(187, 15, 15, 1); --color-brand-red-hover: rgba(208, 49, 26, 1); --color-brand-orange: rgba(219, 64, 20, 1); */ /* Old Red — Archive while all the banners are blue */ --color-brand-red: rgba(31, 37, 121, 1); --color-brand-red-dark: rgba(31, 37, 121, 1); --color-brand-red-hover: rgba(45, 53, 163, 1); --color-brand-yellow: rgba(255, 195, 18,1.0); --color-brand-yellow-light: rgba(253,216,128,1); --color-utility: rgba(174,41,22, .5); --color-section-nav: rgba(230, 230, 230, 1); --color-section-nav-link: rgba(0,0,0,0.8); --color-footer-band-promo: rgba(250,250,250,1); --color-footer-band: rgba(0,0,0,1.0); --color-brand-orange: rgba(31, 37, 121, 1); --color-brand-blue-dark: rgba(31, 37, 121, 1); --color-brand-blue-light: rgba(212, 230, 254, 1); --color-nyu-purple: rgba(87, 6, 140, 1); }