/* site.css — Kent State brand system. Shared by industry/, career-fair/ and internships/. This file deploys to the web root as /css/site.css; edit only this copy. Tokens are lifted from Kent's ksu_department_zurb_2018 theme. */ /* Kent State's own sites set headings in National (Klim Type Foundry). That licence does not cover a third party loading it, so we do not use it here. Archivo is the closest freely licensed grotesque and carries the same sturdy, slightly condensed feel at heading sizes. Loaded from Google Fonts in each page's . */ :root{ --ksu-blue:#003976; --ksu-blue-dark:#002664; --ksu-gold:#efab00; --ksu-gold-dark:#d99b00; /* darkened #efab00 for hover, not a new brand color */ --ksu-blue-rgb:0,57,118; /* --ksu-blue as channels, for translucent focus rings */ --ink:#0a0a0a; --white:#fefefe; --gray-100:#f9f9f9; --gray-200:#e6e6e6; --gray-600:#767676; --gray-800:#494949; --link:#0073bd; --font-sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif; --font-serif:"Roboto Slab",Georgia,"Times New Roman",serif; --wrap:1200px; --ease:ease-out; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;scroll-padding-top:96px} body{ background:var(--white); color:var(--ink); font-family:var(--font-sans); font-size:1rem; line-height:1.5; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; /* sticky footer: short pages still push the footer to the viewport bottom */ min-height:100vh; display:flex; flex-direction:column; } main{flex:1 0 auto} footer{flex-shrink:0} a{color:inherit;text-decoration:none} img{max-width:100%;height:auto} ::selection{background:var(--ksu-blue);color:var(--white)} /* ---------- type scale ---------- */ h1,h2,h3,h4,h5{font-family:var(--font-sans);font-weight:700;line-height:1.15;color:var(--ksu-blue)} h1{font-size:3rem} h2{font-size:2rem} h3{font-size:1.375rem} h4{font-size:1.125rem} .on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4,.on-dark h5{color:var(--white)} p{max-width:70ch} small,.small{font-size:.875rem} @media(max-width:640px){h1{font-size:2.25rem}h2{font-size:1.625rem}} /* body copy links are the one place --link is used */ p a{color:var(--link);text-decoration:underline;text-underline-offset:2px} p a:hover{color:var(--ksu-blue)} .on-dark p a{color:var(--ksu-gold)} /* ---------- eyebrow ---------- */ .eyebrow{ font-family:var(--font-sans);font-weight:700;font-size:.75rem; letter-spacing:.16em;text-transform:uppercase;color:var(--ksu-blue); } .eyebrow::before{content:"";display:block;width:48px;height:3px; background:var(--ksu-gold);margin-bottom:12px} .on-dark .eyebrow{color:var(--ksu-gold)} /* ---------- focus + skip ---------- */ :focus-visible{outline:3px solid var(--ksu-blue);outline-offset:2px} .on-dark :focus-visible{outline-color:var(--ksu-gold)} .skip-link{ position:absolute;left:14px;top:-70px;z-index:1000; background:var(--ksu-blue);color:var(--white);font-weight:700;font-size:.875rem; padding:10px 18px;transition:top .25s var(--ease); } .skip-link:focus{top:14px} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:.55em; font-family:var(--font-sans);font-weight:700;font-size:1rem; padding:.8em 3em;border:2px solid var(--ksu-blue); background:var(--ksu-blue);color:var(--white);cursor:pointer; transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease); } .btn:hover{background:var(--ksu-blue-dark);border-color:var(--ksu-blue-dark)} .btn-gold{background:var(--ksu-gold);border-color:var(--ksu-gold);color:var(--ink)} .btn-gold:hover{background:var(--ksu-gold-dark);border-color:var(--ksu-gold-dark);color:var(--ink)} .btn-outline{background:transparent;color:var(--ksu-blue);border-color:var(--ksu-blue)} .btn-outline:hover{background:var(--ksu-blue);color:var(--white)} .btn-ghost{background:transparent;color:currentColor;border-color:currentColor} .btn-ghost:hover{background:var(--white);color:var(--ksu-blue);border-color:var(--white)} @media(max-width:520px){.btn{padding:.8em 1.6em;width:100%;justify-content:center}} /* ---------- layout ---------- */ .wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px} section{padding:72px 0} @media(max-width:640px){section{padding:48px 0}} /* ---------- bands ---------- */ .band{background:var(--white)} .band-tint{background:var(--gray-100)} .band-tint .muted{color:var(--gray-800)} .band-blue{background:var(--ksu-blue);color:var(--white)} .band-gold{background:var(--ksu-gold);color:var(--ink)} .band-gold h1,.band-gold h2,.band-gold h3{color:var(--ink)} .band-gold .eyebrow{color:var(--ink)} .band-gold .eyebrow::before{background:var(--ksu-blue)} .muted{color:var(--gray-600)} .on-dark .muted{color:rgba(255,255,255,.82)} /* ---------- section heads ---------- */ .sec-head{margin-bottom:40px;padding-bottom:16px;border-bottom:1px solid var(--gray-200)} .sec-head h2{max-width:20ch;margin-top:14px} .on-dark .sec-head{border-bottom-color:rgba(255,255,255,.25)} /* ============ HEADER ============ */ header.nav{ position:sticky;top:0;z-index:100; background:var(--ksu-blue);color:var(--white); border-bottom:1px solid var(--ksu-gold); } .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:88px} header.nav.scrolled{box-shadow:0 1px 0 rgba(0,0,0,.25)} .brand{display:flex;align-items:center;gap:12px} .brand-logo{height:56px;width:auto;display:block} .nav-links{display:flex;gap:28px; font-family:var(--font-sans);font-weight:700;font-size:.8125rem; letter-spacing:.06em;text-transform:uppercase} .nav-links a{color:var(--white);position:relative;padding:6px 0} /* gold underline wipes in from the left on hover, and back out to the left on leave. The active link keeps it drawn. */ .nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px; background:var(--ksu-gold); transform:scaleX(0);transform-origin:left center; transition:transform .28s cubic-bezier(.4,0,.2,1)} .nav-links a:hover::after,.nav-links a:focus-visible::after, .nav-links a.active::after{transform:scaleX(1)} .nav-right{display:flex;align-items:center;gap:14px} .nav-cta{ font-family:var(--font-sans);font-weight:700;font-size:.8125rem; letter-spacing:.04em;text-transform:uppercase; background:var(--ksu-gold);color:var(--ink); padding:10px 18px;border:2px solid var(--ksu-gold); transition:background-color .25s var(--ease)} .nav-cta:hover{background:var(--ksu-gold-dark);border-color:var(--ksu-gold-dark)} .nav-toggle{display:none;width:44px;height:44px;border:2px solid var(--white); background:transparent;cursor:pointer;align-items:center;justify-content:center;color:var(--white)} .nav-toggle .bars{position:relative;width:18px;height:2px;background:currentColor} .nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:0;width:18px;height:2px; background:currentColor} .nav-toggle .bars::before{top:-6px}.nav-toggle .bars::after{top:6px} .nav-toggle[aria-expanded="true"] .bars{background:transparent} .nav-toggle[aria-expanded="true"] .bars::before{top:0;transform:rotate(45deg)} .nav-toggle[aria-expanded="true"] .bars::after{top:0;transform:rotate(-45deg)} @media(max-width:880px){ .nav-toggle{display:inline-flex} .nav-links{position:absolute;top:88px;left:0;right:0;flex-direction:column;gap:0; background:var(--ksu-blue-dark);font-size:.95rem; max-height:0;overflow:hidden;transition:max-height .3s var(--ease)} .nav-links.open{max-height:80vh;overflow-y:auto} .nav-links a{padding:16px 28px;border-top:1px solid rgba(255,255,255,.15)} .nav-links a::after{display:none} .nav-links a.active{background:rgba(255,255,255,.08)} } /* ============ FOOTER ============ */ footer{background:var(--ksu-blue-dark);color:var(--white);padding:56px 0 28px} .foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap; padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.2)} .foot-cols{display:flex;gap:56px;flex-wrap:wrap} /* Kent's exact footer block-title spec */ .foot-col h5{color:var(--ksu-gold);font-size:15px;font-weight:700;text-transform:uppercase; margin:0 0 15px} .foot-col a{display:block;font-size:.9375rem;color:var(--white);margin-bottom:9px; transition:color .25s var(--ease)} .foot-col a:hover{color:var(--ksu-gold)} .foot-bot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap; margin-top:24px;font-size:.875rem;color:rgba(255,255,255,.85)} footer .brand-logo{height:38px;filter:brightness(0) invert(1)} /* ============ CARDS ============ */ .card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .card-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} @media(max-width:980px){.card-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:680px){.card-grid,.card-grid-2{grid-template-columns:1fr}} /* shared card base for .card/.co/.voice/.res — see each ruleset below for its own padding and layout, which are not identical across all four */ .card,.co,.voice,.res{ background:var(--white); border:1px solid var(--gray-200); border-top:3px solid var(--ksu-gold); transition:border-color .25s var(--ease); } .card:hover,.co:hover,.voice:hover,.res:hover{border-color:var(--ksu-blue)} .card{ padding:28px; display:flex;flex-direction:column;gap:12px; } .card h3{transition:color .25s var(--ease)} .card:hover h3{color:var(--ksu-blue-dark)} .card p{color:var(--gray-600);font-size:.9375rem;flex:1} .band-tint .card p{color:var(--gray-800)} .card iconify-icon{font-size:2rem;color:var(--ksu-blue)} .card .go{font-family:var(--font-sans);font-weight:700;font-size:.8125rem; letter-spacing:.06em;text-transform:uppercase;color:var(--ksu-blue); display:inline-flex;align-items:center;gap:8px} .card .num{font-weight:700;font-size:.875rem;letter-spacing:.1em;color:var(--gray-600)} /* ============ HERO ============ */ .hero{background:var(--ksu-blue);color:var(--white);padding:72px 0} .hero h1{max-width:18ch;margin:16px 0 0} .hero .lede{max-width:56ch;font-size:1.125rem;margin-top:18px;color:rgba(255,255,255,.9)} .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px} .hero-meta{display:flex;flex-wrap:wrap;gap:0;margin-top:32px;border:1px solid rgba(255,255,255,.25)} .hero-meta .m{font-size:.875rem;padding:11px 18px; border-right:1px solid rgba(255,255,255,.25);display:inline-flex;align-items:center;gap:8px} .hero-meta .m:last-child{border-right:none} .hero-meta .m::before{content:"";width:7px;height:7px;background:var(--ksu-gold);flex:0 0 auto} /* stat strip */ .facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:44px; border:1px solid rgba(255,255,255,.25)} .fact{padding:24px;border-right:1px solid rgba(255,255,255,.25)} .fact:last-child{border-right:none} .fact .k{font-weight:700;font-size:2.25rem;color:var(--ksu-gold);line-height:1; font-variant-numeric:tabular-nums} .fact .l{font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase; color:rgba(255,255,255,.82);margin-top:10px} @media(max-width:640px){ .facts,.hero-meta{grid-template-columns:1fr} .fact,.hero-meta .m{border-right:none;border-bottom:1px solid rgba(255,255,255,.25)} .fact:last-child,.hero-meta .m:last-child{border-bottom:none} } /* ============ FILTER CHIPS ============ */ .filter-bar{display:flex;align-items:center;justify-content:space-between;gap:16px; flex-wrap:wrap;margin-bottom:28px} .filter-row{display:flex;gap:8px;flex-wrap:wrap} .chip{font-family:var(--font-sans);font-size:.8125rem;font-weight:700;letter-spacing:.04em; text-transform:uppercase;padding:9px 16px;border:2px solid var(--ksu-blue);background:transparent; color:var(--ksu-blue);cursor:pointer; transition:background-color .25s var(--ease),color .25s var(--ease)} .chip:hover{background:var(--ksu-blue);color:var(--white)} .chip[aria-pressed="true"]{background:var(--ksu-blue);color:var(--white)} .filter-count{font-size:.875rem;color:var(--gray-600);white-space:nowrap} .filter-count b{color:var(--ksu-blue)} /* ============ COMPANY GRID ============ */ .co-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .co{padding:24px 22px;display:flex;flex-direction:column;gap:14px;position:relative} .co.is-hidden{display:none} .co .booth{position:absolute;top:0;right:0;font-size:.6875rem;font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:var(--ink); background:var(--ksu-gold);padding:5px 9px} .co-logo{width:52px;height:52px;display:grid;place-items:center; border:1px solid var(--gray-200);font-weight:700;font-size:1.3rem;color:var(--ksu-blue)} .co h4{font-size:1.0625rem;color:var(--ksu-blue);font-weight:700} .co .tag{font-size:.8125rem;text-transform:uppercase;letter-spacing:.06em; color:var(--gray-600);margin-top:-6px} .co .roles{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px} .co .role{font-size:.8125rem;font-weight:500;padding:4px 8px; background:var(--gray-100);border:1px solid var(--gray-200);color:var(--gray-800)} .co.placeholder{border-style:dashed;border-top-style:dashed;align-items:center;justify-content:center; text-align:center;min-height:170px;color:var(--ksu-blue)} .co.placeholder .plus{font-weight:700;font-size:2rem;color:var(--ksu-blue)} .co.placeholder h4{font-size:1.15rem} .co.placeholder p{font-size:.875rem;color:var(--gray-600);margin-top:4px} .co-empty{grid-column:1/-1;text-align:center;padding:44px 20px; border:1px dashed var(--gray-200);color:var(--gray-600);font-family:var(--font-serif);font-size:1.05rem} .co-empty.is-hidden{display:none} @media(max-width:980px){.co-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.co-grid{grid-template-columns:1fr}} /* ============ SEMINAR LINK ============ */ .seminar-link{margin-top:32px;padding:20px 26px;border:1px solid var(--gray-200); border-left:3px solid var(--ksu-gold);background:var(--gray-100); font-size:.9375rem;color:var(--gray-800)} .seminar-link a{font-weight:700;color:var(--ksu-blue);text-decoration:underline; text-underline-offset:2px} /* ============ BOOTH FEATURE ============ */ .booth{display:grid;grid-template-columns:1.1fr 1fr;background:var(--ksu-blue);color:var(--white)} .booth-main{padding:44px 40px;display:flex;flex-direction:column} .booth-tag{font-weight:700;font-size:.8125rem;letter-spacing:.16em; text-transform:uppercase;color:var(--ksu-gold)} .booth-main h3{font-size:2rem;line-height:1.15;margin:16px 0;max-width:16ch;color:var(--white)} .booth-main p{color:rgba(255,255,255,.9);max-width:44ch;margin-bottom:28px} .booth-main .btn{align-self:flex-start;margin-top:auto} .booth-list{list-style:none;align-content:center;background:rgba(0,0,0,.22); padding:40px;display:grid;grid-template-columns:1fr 1fr;gap:16px 26px} .booth-list li{position:relative;padding-left:30px;font-size:.9375rem;line-height:1.45} .booth-list li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px; border:2px solid var(--ksu-gold)} @media(max-width:880px){.booth{grid-template-columns:1fr}.booth-main{padding:34px 28px} .booth-list{padding:32px 28px}} @media(max-width:520px){.booth-list{grid-template-columns:1fr}} /* ============ VOICES ============ */ .voice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .voice{padding:28px;display:flex;flex-direction:column;gap:18px} .voice .badge{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--ink);align-self:flex-start;background:var(--ksu-gold);padding:4px 9px} .voice .quote{font-family:var(--font-serif);font-size:1.0625rem;line-height:1.5;color:var(--ksu-blue)} .voice .person{display:flex;align-items:center;gap:14px;margin-top:auto} .voice .avatar{width:46px;height:46px;flex:0 0 auto;display:grid;place-items:center; background:var(--ksu-blue);color:var(--white);font-weight:700;font-size:1rem} .voice .who b{display:block;font-size:.9375rem;color:var(--ink);font-weight:700} .voice .who span{font-size:.875rem;color:var(--gray-600)} @media(max-width:880px){.voice-grid{grid-template-columns:1fr}} /* ============ FORM ============ */ .reg-form{background:var(--white);border:1px solid var(--gray-200);border-top:3px solid var(--ksu-gold); padding:32px;display:flex;flex-direction:column;gap:16px} .field{display:flex;flex-direction:column;gap:7px} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .field label{font-size:.8125rem;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--ksu-blue)} .field label span{color:var(--gray-600);text-transform:none;letter-spacing:0;font-weight:400} .reg-form input,.reg-form select,.reg-form textarea{ font-family:var(--font-sans);font-size:1rem;color:var(--ink); background:var(--white);border:1px solid var(--gray-200);padding:12px 14px;width:100%; transition:border-color .25s var(--ease)} .reg-form input:focus,.reg-form select:focus,.reg-form textarea:focus{ outline:none;border-color:var(--ksu-blue);box-shadow:0 0 0 3px rgba(var(--ksu-blue-rgb),.18)} .reg-form textarea{resize:vertical;min-height:78px} .reg-form .btn{justify-content:center;margin-top:6px} .form-note{font-size:.875rem;text-align:center;min-height:1.2em;color:var(--gray-600)} @media(max-width:880px){.field-row{grid-template-columns:1fr}} /* ============ CHECKLIST ============ */ .checklist-grid{display:grid;grid-template-columns:1fr 1fr; border:1px solid rgba(255,255,255,.25)} .checklist-item{display:flex;align-items:flex-start;gap:16px;padding:22px 24px; border-right:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2)} .check-mark{flex:0 0 auto;width:22px;height:22px;border:2px solid var(--ksu-gold); position:relative;margin-top:2px} .check-mark::before{content:"";position:absolute;left:5px;top:4px;width:9px;height:5px; border-left:2px solid var(--ksu-gold);border-bottom:2px solid var(--ksu-gold); transform:rotate(-45deg)} .check-text{font-size:.9375rem;line-height:1.5;color:rgba(255,255,255,.9)} .check-text b{display:block;font-weight:700;margin-bottom:3px;color:var(--white)} @media(max-width:640px){.checklist-grid{grid-template-columns:1fr}} /* ============ TIMELINE (internships) ============ */ .timeline{border:1px solid var(--gray-200)} .tl-step{display:grid;grid-template-columns:160px 1fr;border-bottom:1px solid var(--gray-200)} .tl-step:last-child{border-bottom:none} .tl-when{padding:28px 24px;background:var(--ksu-blue);color:var(--white); display:flex;flex-direction:column;justify-content:center;gap:6px} .tl-when .yr{font-weight:700;font-size:2rem;color:var(--ksu-gold);line-height:1} .tl-when .lbl{font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase; color:rgba(255,255,255,.85)} .tl-body{padding:28px 30px} .tl-body h3{margin-bottom:8px} .tl-body p{font-size:.9375rem;color:var(--gray-600);max-width:60ch} @media(max-width:640px){.tl-step{grid-template-columns:1fr} .tl-when{flex-direction:row;align-items:baseline;gap:12px}} /* ============ RESOURCE GRID (internships) ============ */ .res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .res{padding:28px;display:flex;flex-direction:column;gap:12px} .res iconify-icon{font-size:1.9rem;color:var(--ksu-blue)} .res p{font-size:.9375rem;color:var(--gray-600);flex:1} .res .go{font-weight:700;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase; color:var(--ksu-blue);display:inline-flex;align-items:center;gap:8px} @media(max-width:980px){.res-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.res-grid{grid-template-columns:1fr}} /* ============ COMPARE MODULE (internships) ============ */ .vs-grid{display:grid;grid-template-columns:1fr auto 1fr;border:1px solid var(--gray-200)} .vs-col{padding:32px 30px;display:flex;flex-direction:column;gap:16px} .vs-col+.vs-col{border-left:1px solid var(--gray-200)} .vs-col .vs-tag{font-weight:700;font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase; color:var(--ksu-blue);align-self:flex-start;border-bottom:3px solid var(--ksu-gold);padding-bottom:4px} .vs-col ul{list-style:none;display:flex;flex-direction:column;gap:11px} .vs-col li{position:relative;padding-left:24px;font-size:.9375rem;color:var(--gray-600);line-height:1.5} .vs-col li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px; background:var(--ksu-blue)} .vs-mid{display:grid;place-items:center;padding:0 6px;background:var(--ksu-blue); color:var(--ksu-gold);font-weight:700;font-size:1rem;letter-spacing:.05em;min-width:64px} @media(max-width:820px){.vs-grid{grid-template-columns:1fr} .vs-col+.vs-col{border-left:none;border-top:1px solid var(--gray-200)} .vs-mid{min-width:0;padding:12px 0}} /* ============ FAQ (internships) ============ */ .faq{border:1px solid var(--gray-200)} .faq-item{border-bottom:1px solid var(--gray-200)} .faq-item:last-child{border-bottom:none} .faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px; padding:22px 26px;background:transparent;border:none;cursor:pointer;text-align:left; font-family:var(--font-sans);font-weight:700;font-size:1.0625rem;color:var(--ksu-blue); transition:background-color .25s var(--ease)} .faq-q:hover{background:var(--gray-100)} .faq-q .ic{flex:0 0 auto;font-size:1.4rem;color:var(--ksu-blue);transition:transform .25s var(--ease)} .faq-item.open .faq-q .ic{transform:rotate(45deg)} .faq-a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)} .faq-item.open .faq-a{max-height:400px} .faq-a p{padding:0 26px 22px;font-size:.9375rem;color:var(--gray-600);max-width:70ch} /* ============ CLOSING CTA ============ */ /* internships uses the default; career-fair/employer.html uses the even split */ .cta-inner{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center} .cta-inner-even{grid-template-columns:1fr 1fr} .cta-actions{display:flex;flex-direction:column;gap:12px;align-items:flex-start} @media(max-width:880px){.cta-inner,.cta-inner-even{grid-template-columns:1fr;gap:32px}} /* ============ RSVP (career-fair students) ============ */ .rsvp-inner{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center} .rsvp-actions{display:flex;flex-direction:column;gap:12px;align-items:flex-end} @media(max-width:760px){.rsvp-inner{grid-template-columns:1fr} .rsvp-actions{align-items:flex-start}} /* ---------- reduced motion ---------- */ @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important} }