/* ========================================================================== Auld & Associates Investigations, Inc. — Shared Design System css/main.css This file is SHARED across every page. Other pages (about.html, services.html, contact.html) depend on the class names below staying stable. Add page-only styles to that page's own css/.css file, not here. TABLE OF CONTENTS 1. Design tokens (:root custom properties) 2. Modern CSS reset 3. Base typography 4. Layout utilities (container, section, grid) 5. Skip link 6. Header + primary nav + mobile overlay menu 7. Buttons 8. Eyebrow / section-head / hairline ornaments 9. Credential strip 10. Cards (service cards, pillar cards, generic cards) 11. Process steps (numbered 01-04) 12. FAQ (details/summary) 13. Form controls 14. Confidentiality / band sections 15. Footer 16. Scroll-reveal animation system 17. Misc utilities 18. Reduced motion PUBLIC CLASSES (documented so other pages can reuse them): Layout: .container max-width content wrapper with responsive padding .section standard vertical section padding .section--paper paper (light) background variant .section--alt ink-900 alt dark background variant .section--tight reduced vertical padding .grid generic CSS grid, use with --cols custom prop .grid--2 / .grid--3 / .grid--4 preset column counts (responsive) .stack vertical flex stack with gap .u-visually-hidden visually hidden but accessible Header / nav: .site-header fixed header, gets .is-scrolled via JS .site-header__inner .brand, .brand__logo, .brand__word, .brand__wordmark, .brand__sub .nav-primary, .nav-primary__list, .nav-primary__link .nav-primary__link[aria-current="page"] active page state .nav-phone brass outline phone button in header .nav-toggle hamburger button (mobile) .nav-toggle__box, .nav-toggle__bar .nav-overlay full-screen mobile menu panel .nav-overlay__list, .nav-overlay__link .nav-overlay__phone .is-open state class toggled on /.nav-overlay by JS Buttons: .btn filled brass button .btn--ghost outline brass button .btn--on-dark / .btn--on-paper contextual tweaks .btn__arrow inline arrow span, nudges on hover Text / ornament: .eyebrow small uppercase brass label .section-head eyebrow + heading + lede wrapper .section-head__lede .hairline thin brass rule, standalone ornament .hairline--center centers a hairline under text Credential strip: .credential-strip .credential-strip__list, .credential-strip__item Cards: .card base surface card .card--pillar pillar/feature card (icon + title + copy) .card--service service card w/ icon, title, copy, link .card__icon .card__title .card__text .card__link "Learn more" link with sliding arrow Process steps: .process .process__list .process__step .process__number .process__line connecting hairline (draws in on reveal) .process__title .process__text FAQ: .faq .faq__item (uses native

) .faq__summary .faq__chevron .faq__answer Forms: .form .form__row .form__group .form__label .form__input, .form__select, .form__textarea .form__hint .form__error .form__status Bands: .band full-bleed dark band section .band--confidential .band__inner Footer: .site-footer .site-footer__inner .site-footer__grid .site-footer__brand .site-footer__heading .site-footer__list .site-footer__bottom .site-footer__note Motion / reveal: [data-reveal] element to animate in on scroll [data-reveal-group] parent whose children stagger via --i .is-revealed state class added by JS [data-parallax] element that receives gentle scroll parallax Misc: .scroll-cue hero scroll-down affordance .u-text-brass .u-mt-0 ========================================================================== */ /* ========================================================================== 1. Design tokens ========================================================================== */ :root { /* Ink (dark) surfaces */ --ink-950: #0B0F14; --ink-900: #111721; --ink-800: #18202C; --ink-700: #232D3B; --ink-300: #9AA4B2; --ink-100: #E6E9EE; /* Paper (light) surfaces */ --paper: #F5F2EC; --paper-2: #EAE6DE; --ink-on-paper: #14181F; /* Brass accent */ --brass-500: #C9A961; --brass-400: #D9BE7A; --brass-600: #A88A48; --brass-glow: rgba(201, 169, 97, .18); /* Borders */ --border-on-dark: rgba(255, 255, 255, .06); --border-on-dark-strong: rgba(255, 255, 255, .12); --border-on-paper: rgba(20, 24, 31, .1); /* Typography */ --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --fs-h1: clamp(2.6rem, 5.5vw, 4.75rem); --fs-h2: clamp(2rem, 3.6vw, 3rem); --fs-h3: 1.5rem; --fs-body: 1.0625rem; --lh-body: 1.7; --measure: 65ch; /* Layout */ --container-max: 1200px; --container-pad: clamp(1.25rem, 4vw, 2.5rem); --section-pad: clamp(4.5rem, 9vw, 8rem); --radius: 6px; --radius-sm: 3px; /* Motion */ --ease-reveal: cubic-bezier(.2, .7, .2, 1); --dur-reveal: 700ms; --dur-fast: 250ms; --dur-header: 300ms; /* Header */ --header-h: 88px; } /* ========================================================================== 2. Modern reset ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { min-height: 100svh; background: var(--ink-950); color: var(--ink-100); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; } body.has-lock { overflow: hidden; } img, picture, svg, video { display: block; max-width: 100%; } img { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; } p { text-wrap: pretty; } /* ========================================================================== 3. Base typography ========================================================================== */ h1 { font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -0.015em; } h2 { font-size: var(--fs-h2); line-height: 1.1; } h3 { font-size: var(--fs-h3); font-weight: 600; } p, li { max-width: var(--measure); } .u-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .u-text-brass { color: var(--brass-500); } .u-mt-0 { margin-top: 0; } /* ========================================================================== 4. Layout utilities ========================================================================== */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } .section { padding-block: var(--section-pad); position: relative; } .section--paper { background: var(--paper); color: var(--ink-on-paper); } .section--paper h1, .section--paper h2, .section--paper h3 { color: var(--ink-on-paper); } .section--alt { background: var(--ink-900); } .section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); } .grid { display: grid; gap: 1.75rem; } .grid--2 { grid-template-columns: repeat(1, 1fr); } .grid--3 { grid-template-columns: repeat(1, 1fr); } .grid--4 { grid-template-columns: repeat(1, 1fr); } @media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } } .stack { display: flex; flex-direction: column; gap: 1rem; } /* ========================================================================== 5. Skip link ========================================================================== */ .skip-link { position: fixed; top: -100%; left: 1rem; z-index: 1000; background: var(--brass-500); color: var(--ink-950); padding: .75rem 1.25rem; border-radius: var(--radius-sm); font-weight: 600; font-size: .9rem; transition: top var(--dur-fast) var(--ease-reveal); } .skip-link:focus { top: 1rem; } /* ========================================================================== 6. Header + nav ========================================================================== */ .site-header { position: fixed; inset-inline: 0; top: 0; z-index: 100; background: transparent; border-bottom: 1px solid transparent; transition: background var(--dur-header) ease, border-color var(--dur-header) ease, backdrop-filter var(--dur-header) ease; } .site-header.is-scrolled { background: rgba(11, 15, 20, .85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--border-on-dark); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.1rem; } .brand { display: flex; align-items: center; gap: .85rem; z-index: 101; } .brand__logo { height: 44px; width: auto; filter: invert(1); flex-shrink: 0; } .brand__word { display: flex; flex-direction: column; line-height: 1.1; } .brand__wordmark { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: var(--ink-100); letter-spacing: .01em; } .brand__sub { font-family: var(--font-body); font-size: .625rem; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-300); margin-top: .15rem; } .nav-primary { display: none; } @media (min-width: 900px) { .nav-primary { display: flex; align-items: center; gap: 2.25rem; } } .nav-primary__list { display: flex; align-items: center; gap: 2.25rem; } .nav-primary__link { font-size: .875rem; font-weight: 500; letter-spacing: .02em; color: var(--ink-100); position: relative; padding-block: .25rem; } .nav-primary__link::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: var(--brass-500); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-fast) var(--ease-reveal); } .nav-primary__link:hover::after, .nav-primary__link[aria-current="page"]::after { transform: scaleX(1); } .nav-primary__link[aria-current="page"] { color: var(--brass-400); } .site-header .nav-phone { display: none; } @media (min-width: 900px) { .site-header .nav-phone { display: inline-flex; } } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; z-index: 101; position: relative; } @media (min-width: 900px) { .nav-toggle { display: none; } } .nav-toggle__box { position: relative; width: 22px; height: 14px; } .nav-toggle__bar { position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--ink-100); transition: transform var(--dur-fast) var(--ease-reveal), opacity var(--dur-fast) var(--ease-reveal), top var(--dur-fast) var(--ease-reveal); } .nav-toggle__bar:nth-child(1) { top: 0; } .nav-toggle__bar:nth-child(2) { top: 6.25px; } .nav-toggle__bar:nth-child(3) { top: 12.5px; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { top: 6.25px; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { top: 6.25px; transform: rotate(-45deg); } .nav-overlay { position: fixed; inset: 0; z-index: 99; background: var(--ink-950); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--dur-fast) var(--ease-reveal), visibility var(--dur-fast), transform var(--dur-fast) var(--ease-reveal); } @media (min-width: 900px) { .nav-overlay { display: none; } } .nav-overlay.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .nav-overlay__list { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; } .nav-overlay__link { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--ink-100); opacity: 0; transform: translateY(14px); transition: opacity 450ms var(--ease-reveal), transform 450ms var(--ease-reveal); transition-delay: calc(var(--i, 0) * 70ms); } .nav-overlay.is-open .nav-overlay__link { opacity: 1; transform: translateY(0); } .nav-overlay__link[aria-current="page"] { color: var(--brass-400); } .nav-overlay__phone { opacity: 0; transform: translateY(14px); transition: opacity 450ms var(--ease-reveal), transform 450ms var(--ease-reveal); transition-delay: 300ms; } .nav-overlay.is-open .nav-overlay__phone { opacity: 1; transform: translateY(0); } /* ========================================================================== 7. Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; background: var(--brass-500); color: var(--ink-950); font-family: var(--font-body); font-weight: 500; font-size: 12.5px; text-transform: uppercase; letter-spacing: .14em; padding: 1rem 1.75rem; border-radius: var(--radius-sm); border: 1px solid var(--brass-500); transition: transform var(--dur-fast) var(--ease-reveal), box-shadow var(--dur-fast) var(--ease-reveal), background var(--dur-fast) var(--ease-reveal); white-space: nowrap; } .btn:hover { background: var(--brass-400); border-color: var(--brass-400); transform: translateY(-1px); box-shadow: 0 8px 24px var(--brass-glow); } .btn--ghost { background: transparent; color: var(--brass-400); border: 1px solid var(--brass-500); } .btn--ghost:hover { background: var(--brass-glow); color: var(--brass-400); border-color: var(--brass-400); } .btn--on-paper { color: var(--ink-on-paper); } .btn--ghost.btn--on-paper { color: var(--brass-600); border-color: var(--brass-600); } .btn--ghost.btn--on-paper:hover { background: rgba(168, 138, 72, .1); color: var(--brass-600); } .btn:focus-visible, .nav-primary__link:focus-visible, .nav-overlay__link:focus-visible, .card__link:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--brass-500); outline-offset: 3px; } .btn__arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease-reveal); } .btn:hover .btn__arrow { transform: translateX(4px); } /* ========================================================================== 8. Eyebrow / section-head / hairlines ========================================================================== */ .eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-body); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .18em; color: var(--brass-500); } .section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); } .section-head .eyebrow { margin-bottom: 1rem; } .section-head h2 { margin-top: .75rem; } .section-head__lede { margin-top: 1.25rem; color: var(--ink-300); font-size: 1.0625rem; max-width: 42rem; } .section--paper .section-head__lede { color: #4b5261; } .hairline { width: 56px; height: 1px; background: var(--brass-500); border: none; opacity: .8; } .hairline--center { margin-inline: auto; } /* animated "draw" variant used in hero */ .hairline--draw { transform: scaleX(0); transform-origin: left; animation: hairline-draw 900ms var(--ease-reveal) 400ms forwards; } @keyframes hairline-draw { to { transform: scaleX(1); } } /* ========================================================================== 9. Credential strip ========================================================================== */ .credential-strip { border-top: 1px solid var(--border-on-paper); border-bottom: 1px solid var(--border-on-paper); } .credential-strip__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.5rem; text-align: center; padding-block: 1.75rem; } .credential-strip__item { font-family: var(--font-body); font-size: .8rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-on-paper); opacity: .8; position: relative; padding-right: 1.5rem; } .credential-strip__item::after { content: ""; position: absolute; right: -0.4rem; top: 50%; translate: 0 -50%; width: 4px; height: 4px; border-radius: 50%; background: var(--brass-500); } .credential-strip__item:last-child { padding-right: 0; } .credential-strip__item:last-child::after { display: none; } /* ========================================================================== 10. Cards ========================================================================== */ .card { background: var(--ink-800); border: 1px solid var(--border-on-dark); border-radius: var(--radius); padding: 2.25rem 2rem; position: relative; transition: transform var(--dur-fast) var(--ease-reveal), border-color var(--dur-fast) var(--ease-reveal), box-shadow var(--dur-fast) var(--ease-reveal); } .card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, .16), transparent 70%); border-radius: var(--radius) var(--radius) 0 0; } .card:hover { transform: translateY(-3px); border-color: rgba(201, 169, 97, .4); box-shadow: 0 20px 40px rgba(0, 0, 0, .25); } .card:hover .card__icon { color: var(--brass-400); } .card__icon { display: inline-flex; width: 32px; height: 32px; color: var(--brass-500); margin-bottom: 1.5rem; transition: color var(--dur-fast) var(--ease-reveal); } .card__icon svg { width: 100%; height: 100%; } .card__title { font-size: 1.3rem; margin-bottom: .75rem; } .card__text { color: var(--ink-300); font-size: .975rem; } .card__link { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.5rem; font-size: .8rem; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--brass-400); } .card__link svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-reveal); } .card__link:hover svg { transform: translateX(4px); } .card--pillar { text-align: left; } /* ========================================================================== 11. Process steps ========================================================================== */ .process__list { display: grid; grid-template-columns: repeat(1, 1fr); gap: 2.5rem; position: relative; } @media (min-width: 900px) { .process__list { grid-template-columns: repeat(4, 1fr); } } .process__step { position: relative; padding-top: 1.5rem; } .process__number { font-family: var(--font-display); font-size: 2.75rem; font-weight: 600; color: var(--brass-500); line-height: 1; margin-bottom: 1rem; display: block; } .process__line { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--brass-500); opacity: .5; transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--ease-reveal); } .process__step.is-revealed .process__line { transform: scaleX(1); } .process__title { font-size: 1.15rem; margin-bottom: .5rem; } .process__text { color: var(--ink-300); font-size: .95rem; } .section--paper .process__text { color: #4b5261; } /* ========================================================================== 12. FAQ ========================================================================== */ .faq { display: flex; flex-direction: column; gap: 1px; background: var(--border-on-dark); border: 1px solid var(--border-on-dark); border-radius: var(--radius); overflow: hidden; } .faq__item { background: var(--ink-800); } .faq__summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 1.75rem; cursor: pointer; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; } .faq__summary::-webkit-details-marker { display: none; } .faq__chevron { flex-shrink: 0; width: 20px; height: 20px; color: var(--brass-500); transition: transform var(--dur-fast) var(--ease-reveal); } .faq__item[open] .faq__chevron { transform: rotate(180deg); } .faq__answer { padding: 0 1.75rem 1.5rem; color: var(--ink-300); font-size: .975rem; max-width: 60ch; } /* ========================================================================== 13. Forms ========================================================================== */ .form__row { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1.5rem; } @media (min-width: 640px) { .form__row--2 { grid-template-columns: repeat(2, 1fr); } } .form__group { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.5rem; } .form__label { font-size: .8rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-300); } .form__input, .form__select, .form__textarea { background: var(--ink-800); border: 1px solid var(--border-on-dark-strong); border-radius: var(--radius-sm); padding: .9rem 1rem; color: var(--ink-100); transition: border-color var(--dur-fast) var(--ease-reveal), box-shadow var(--dur-fast) var(--ease-reveal); } .form__textarea { resize: vertical; min-height: 140px; } .form__input:focus, .form__select:focus, .form__textarea:focus { outline: none; border-color: var(--brass-500); box-shadow: 0 0 0 3px var(--brass-glow); } .form__input:user-invalid, .form__textarea:user-invalid { border-color: #a86a48; } .form__hint { font-size: .8rem; color: var(--ink-300); } .form__error { font-size: .8rem; color: var(--brass-400); display: none; } .form__status { margin-top: 1.25rem; font-size: .9rem; color: var(--brass-400); } /* ========================================================================== 14. Bands ========================================================================== */ .band { background: var(--ink-950); text-align: center; position: relative; } .band--confidential { background: linear-gradient(180deg, var(--ink-900), var(--ink-950)); } .band__inner { max-width: 44rem; margin-inline: auto; } .band__inner p { margin-inline: auto; color: var(--ink-300); font-size: 1.15rem; font-family: var(--font-display); font-weight: 500; line-height: 1.5; } .band__inner .hairline { margin-block: 1.75rem; } .band__actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem; } .band__phone { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink-100); } /* ========================================================================== 15. Footer ========================================================================== */ .site-footer { background: var(--ink-950); border-top: 1px solid var(--brass-500); padding-top: clamp(3.5rem, 7vw, 5.5rem); } .site-footer__grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 2.5rem; padding-bottom: 3rem; } @media (min-width: 640px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem; } } .site-footer__brand { display: flex; flex-direction: column; gap: 1.25rem; } .site-footer__brand .brand__logo { filter: invert(1); opacity: .9; } .site-footer__tagline { color: var(--ink-300); font-size: .925rem; max-width: 32ch; } .site-footer__heading { font-family: var(--font-body); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--brass-500); margin-bottom: 1.25rem; } .site-footer__list { display: flex; flex-direction: column; gap: .85rem; } .site-footer__list a { color: var(--ink-300); font-size: .9rem; transition: color var(--dur-fast) var(--ease-reveal); } .site-footer__list a:hover { color: var(--brass-400); } .site-footer__bottom { border-top: 1px solid var(--border-on-dark); padding-block: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; font-size: .8rem; color: var(--ink-300); } .site-footer__note { font-size: .8rem; color: var(--ink-300); opacity: .75; } /* ========================================================================== 16. Scroll-reveal animation system ========================================================================== */ [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-reveal) var(--ease-reveal), transform var(--dur-reveal) var(--ease-reveal); transition-delay: calc(var(--i, 0) * 90ms); } [data-reveal].is-revealed { opacity: 1; transform: translateY(0); } /* ========================================================================== 17. Misc utilities ========================================================================== */ .scroll-cue { position: absolute; bottom: 2.25rem; left: 50%; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: .6rem; color: var(--ink-100); opacity: .75; z-index: 2; } .scroll-cue__label { font-size: 10px; text-transform: uppercase; letter-spacing: .2em; } .scroll-cue__line { width: 1px; height: 36px; background: linear-gradient(180deg, var(--brass-500), transparent); animation: scroll-cue-move 2.2s ease-in-out infinite; } @keyframes scroll-cue-move { 0%, 100% { transform: scaleY(1); opacity: .6; } 50% { transform: scaleY(.6); opacity: 1; } } /* ========================================================================== 18. Reduced motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1; transform: none; } .process__line { transform: scaleX(1); } .nav-overlay__link, .nav-overlay__phone { opacity: 1; transform: none; } .scroll-cue__line { animation: none; } }