/* ========================================================================== Wocsom Forwarding Ltd — site styles Tokens from design-system/wocsom-forwarding/MASTER.md Visual layer: layered gradient mesh + grain, glass surfaces, gradient borders, animated trade-route SVG. No photography — everything is CSS/SVG, which keeps the page fast and fully self-contained. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap'); /* --- Tokens ------------------------------------------------------------- */ :root { --color-primary: #0F172A; --color-on-primary: #FFFFFF; --color-secondary: #334155; --color-accent: #0369A1; --color-accent-dark: #075985; --color-accent-lite: #38BDF8; --color-background: #F8FAFC; --color-foreground: #020617; --color-body: #475569; --color-muted: #E8ECF1; --color-border: #E2E8F0; --color-destructive: #DC2626; --ink-900: #020617; --ink-800: #0B1220; --ink-700: #0F172A; --space-xs: .25rem; --space-sm: .5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --shadow-sm: 0 1px 2px rgba(2,6,23,.05); --shadow-md: 0 4px 6px rgba(2,6,23,.08); --shadow-lg: 0 18px 40px -12px rgba(2,6,23,.18); --shadow-xl: 0 32px 64px -16px rgba(2,6,23,.28); --shadow-glow: 0 20px 60px -20px rgba(3,105,161,.55); --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --ease: cubic-bezier(.16,1,.3,1); --transition: 260ms var(--ease); } /* --- Base --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 6rem; } body { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; background: var(--color-background); color: var(--color-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* `overflow-x: hidden` computes overflow-y to `auto`, making a scroll container — which breaks `position: sticky` inside it (sticky anchors to the nearest scrolling ancestor). `clip` suppresses horizontal overflow without creating a scrollport. `hidden` stays first as the fallback for Safari <16. */ overflow-x: hidden; overflow-x: clip; } h1, h2, h3, h4 { color: var(--color-foreground); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; } /* Fluid display type — the single biggest lift from "basic" to "designed" */ .display-1 { font-size: clamp(2.6rem, 6.2vw, 4.75rem); letter-spacing: -.04em; line-height: 1.02; } .display-2 { font-size: clamp(2rem, 3.9vw, 3.15rem); letter-spacing: -.035em; } .lede { font-size: 1.125rem; line-height: 1.65; } .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--color-accent); } .eyebrow::before { content: ''; width: 1.75rem; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--color-accent), transparent); } .eyebrow-light { color: var(--color-accent-lite); } .eyebrow-light::before { background: linear-gradient(90deg, var(--color-accent-lite), transparent); } /* Gradient text — blue/teal only. MASTER.md forbids purple/pink AI gradients. */ .text-gradient { background: linear-gradient(120deg, #7DD3FC 0%, #38BDF8 45%, #0EA5E9 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--color-accent-lite); outline-offset: 3px; border-radius: 6px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--color-primary); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--radius-sm) 0; font-weight: 600; } .skip-link:focus { left: 0; } /* --- Placeholder highlighting ------------------------------------------- Unverified facts. Delete this ONE rule to ship without highlighting. ------------------------------------------------------------------------ */ .ph { background: #FEF3C7; border-bottom: 2px dotted #B45309; color: #78350F; font-weight: 600; padding: 0 .2em; border-radius: 3px; } .on-dark .ph { background: rgba(251,191,36,.16); color: #FCD34D; border-bottom-color: #F59E0B; } /* --- Decorative layers --------------------------------------------------- */ /* Grain: kills the flat "CSS gradient" look. Inline SVG = no extra request. */ .grain::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .16; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); } .mesh { position: relative; isolation: isolate; } .mesh > .mesh-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .mesh-blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; } .dot-grid { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.10) 1px, transparent 0); background-size: 34px 34px; mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 40%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 40%, transparent 100%); } .dot-grid-dark { background-image: radial-gradient(circle at 1px 1px, rgba(2,6,23,.09) 1px, transparent 0); } /* --- Buttons ------------------------------------------------------------ */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .95rem 1.9rem; border-radius: 999px; font-weight: 700; font-size: 1rem; line-height: 1; letter-spacing: -.01em; cursor: pointer; text-decoration: none; border: 1.5px solid transparent; transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition), color var(--transition), border-color var(--transition); } .btn svg { transition: transform var(--transition); } .btn:hover svg.arrow { transform: translateX(3px); } /* Gradient stops are all >= 4.5:1 against white text. #0EA5E9 was the original light stop and measured 2.77:1 — a real WCAG fail on the main CTA. The lightest stop is now --color-accent (5.93:1); the dark end is 7.56:1. */ .btn-primary { background: linear-gradient(135deg, var(--color-accent) 0%, #04628F 55%, var(--color-accent-dark) 100%); color: #fff; box-shadow: var(--shadow-glow); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 26px 70px -18px rgba(3,105,161,.7); } .btn-secondary { background: #fff; color: var(--color-primary); border-color: var(--color-border); box-shadow: var(--shadow-sm); } .btn-secondary:hover { border-color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-glass { background: rgba(255,255,255,.07); color: #fff; border-color: rgba(255,255,255,.22); backdrop-filter: blur(8px); } .btn-glass:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); transform: translateY(-2px); } /* --- Surfaces ----------------------------------------------------------- */ .card { position: relative; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.75rem; box-shadow: var(--shadow-sm); height: 100%; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); overflow: hidden; } /* Accent wash that fades in on hover — depth without a layout shift */ .card::before { content: ''; position: absolute; inset: 0; opacity: 0; z-index: 0; background: radial-gradient(120% 100% at 0% 0%, rgba(3,105,161,.07), transparent 60%); transition: opacity var(--transition); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: #C7D6E5; } .card:hover::before { opacity: 1; } .card > * { position: relative; z-index: 1; } /* Gradient-border glass card, used for the hero form */ .card-glow { position: relative; border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow-xl); } .card-glow::before { content: ''; position: absolute; inset: -1.5px; border-radius: inherit; z-index: -1; background: linear-gradient(140deg, rgba(56,189,248,.9), rgba(3,105,161,.35) 40%, rgba(255,255,255,0) 70%); } .glass-panel { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); border-radius: var(--radius-lg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .icon-badge { display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: var(--radius-md); background: linear-gradient(140deg, #E0F2FE, #BAE6FD); color: var(--color-accent-dark); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); transition: transform var(--transition); } .card:hover .icon-badge { transform: scale(1.06) rotate(-3deg); } .icon-badge-dark { background: linear-gradient(140deg, rgba(56,189,248,.18), rgba(3,105,161,.10)); color: var(--color-accent-lite); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); } /* --- Forms -------------------------------------------------------------- */ .label { display: block; font-size: .875rem; font-weight: 700; color: var(--color-primary); margin-bottom: .4rem; } .input { width: 100%; padding: .8rem 1rem; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); font-size: 1rem; /* 16px stops iOS zoom-on-focus */ font-family: inherit; color: var(--color-foreground); background: #FCFDFE; transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition); } .input::placeholder { color: #94A3B8; } .input:focus { border-color: var(--color-accent); background: #fff; outline: none; box-shadow: 0 0 0 4px rgba(3,105,161,.13); } select.input { cursor: pointer; appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23475569' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .85rem center; background-size: 1.15rem; } .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* --- Marquee ------------------------------------------------------------ */ /* Separator: a small rotated square (diamond), crisper and less generic than a bullet. Inherits the accent colour from its .text-accent/70

. */ .mq-sep { display: inline-block; width: 6px; height: 6px; border-radius: 1px; background: currentColor; transform: rotate(45deg); } .marquee { display: flex; overflow: hidden; user-select: none; gap: 0; } .marquee__track { display: flex; flex-shrink: 0; align-items: center; gap: 3rem; padding-right: 3rem; min-width: 100%; animation: marquee-scroll 38s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } } .marquee-mask { mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } /* --- Trade-route SVG ----------------------------------------------------- */ .route-arc { stroke-dasharray: 4 6; stroke-linecap: round; animation: route-dash 2.4s linear infinite; } @keyframes route-dash { to { stroke-dashoffset: -20; } } .route-node { transform-box: fill-box; transform-origin: center; animation: node-pulse 3s ease-in-out infinite; } .route-node:nth-of-type(2) { animation-delay: .5s; } .route-node:nth-of-type(3) { animation-delay: 1s; } .route-node:nth-of-type(4) { animation-delay: 1.5s; } @keyframes node-pulse { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } } /* --- Process: scroll-driven stage progression ---------------------------- NOTE: #process must NOT carry overflow:hidden — position:sticky silently stops working under a clipping ancestor. The mesh blobs are clipped by .mesh-layer's own overflow instead. ------------------------------------------------------------------------ */ @media (min-width: 1024px) { .process-scroll { height: 300vh; } /* the scroll runway */ .process-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; } } .step-num { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; flex: 0 0 3rem; border-radius: 50%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.5); font-weight: 800; font-size: 1rem; position: relative; z-index: 1; transition: background var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition), border-color var(--transition); } /* Reached stages */ .step.is-done .step-num, .step.is-active .step-num { background: linear-gradient(140deg, var(--color-accent), var(--color-accent-dark)); border-color: transparent; color: #fff; } /* The stage you're on */ .step.is-active .step-num { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(56,189,248,.13), 0 0 32px rgba(56,189,248,.45); } /* Dim un-reached stages ONLY when JS is driving. No JS => all fully legible. */ html.js .step { opacity: .4; transition: opacity .5s var(--ease); } html.js .step.is-done { opacity: .72; } html.js .step.is-active { opacity: 1; } /* Connecting rail (desktop only). No overflow:hidden — the fill is inset and scaled, so it can never exceed the rail box, and clipping would decapitate the travelling marker on a 2px element. --p is written by site.js and drives BOTH the fill and the marker position. */ .step-rail { --p: 0; position: absolute; top: 1.5rem; left: 0; right: 0; height: 2px; z-index: 0; background: rgba(255,255,255,.14); border-radius: 2px; } .step-rail__fill { position: absolute; inset: 0; border-radius: 2px; transform: scaleX(var(--p)); transform-origin: left center; background: linear-gradient(90deg, var(--color-accent), var(--color-accent-lite)); box-shadow: 0 0 16px rgba(56,189,248,.55); } /* The shipment itself, riding the rail. z-index 2 puts it above the station circles (z-index 1) so it stays visible as it passes each one. */ .step-marker { position: absolute; top: 50%; left: calc(var(--p) * 100%); transform: translate(-50%, -50%); z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 2.35rem; height: 1.6rem; border-radius: 6px; background: linear-gradient(140deg, #7DD3FC, var(--color-accent-lite)); color: var(--ink-900); box-shadow: 0 0 0 4px rgba(2,6,23,.55), 0 0 26px rgba(56,189,248,.75); opacity: 0; transition: opacity 400ms var(--ease); } .step-marker svg { width: 1rem; height: 1rem; } /* Fades in once the section is actually being scrubbed */ .process-scroll.is-live .step-marker { opacity: 1; } /* --- Lane table ---------------------------------------------------------- */ .lane-row { transition: background-color var(--transition); } .lane-row:hover { background: rgba(3,105,161,.05); } /* --- Reveal on scroll ---------------------------------------------------- Content is VISIBLE by default. The hidden start state applies only once the inline script confirms JS runs (html.js). JS disabled, blocked, or throwing => everything still renders. The animation is never a gate. ------------------------------------------------------------------------ */ .reveal { opacity: 1; transform: none; } html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); } html.js .reveal.is-visible { opacity: 1; transform: none; } html.js .reveal[data-delay="1"] { transition-delay: .08s; } html.js .reveal[data-delay="2"] { transition-delay: .16s; } html.js .reveal[data-delay="3"] { transition-delay: .24s; } html.js .reveal[data-delay="4"] { transition-delay: .32s; } html.js .reveal[data-delay="5"] { transition-delay: .40s; } /* --- Shipment tracker card (hero) ---------------------------------------- An ILLUSTRATIVE product-UI mock, not a live feed. The visible label in the markup says so — do not remove it unless a real tracking view replaces this. ------------------------------------------------------------------------ */ .track { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; row-gap: 0; } .track-node { position: relative; display: flex; justify-content: center; width: 1.5rem; } .track-dot { position: relative; z-index: 1; margin-top: .3rem; width: .85rem; height: .85rem; border-radius: 50%; background: #fff; border: 2px solid var(--color-border); transition: background var(--transition), border-color var(--transition), box-shadow var(--transition); } /* Completed stages */ .track-step.is-done .track-dot { background: var(--color-accent); border-color: var(--color-accent); } /* The stage in progress */ .track-step.is-current .track-dot { background: var(--color-accent-lite); border-color: var(--color-accent-lite); box-shadow: 0 0 0 4px rgba(56,189,248,.22); } .track-step.is-current .track-dot::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--color-accent-lite); animation: track-ping 1.9s cubic-bezier(0,0,.2,1) infinite; } @keyframes track-ping { 0% { transform: scale(1); opacity: .85; } 80%, 100% { transform: scale(2.1); opacity: 0; } } /* Connector between nodes */ .track-line { position: absolute; top: 1.15rem; bottom: -.35rem; left: 50%; width: 2px; margin-left: -1px; background: var(--color-border); border-radius: 2px; } .track-step.is-done .track-line { background: var(--color-accent); } .track-step:last-child .track-line { display: none; } .track-body { padding-bottom: 1.15rem; } /* #64748B = 4.76:1 on white. The previous #94A3B8 read as "muted" but measured 2.56:1 — these labels are permanent text, not a transient scroll state. */ .track-label { font-size: .875rem; font-weight: 700; color: #64748B; transition: color var(--transition); } .track-step.is-done .track-label, .track-step.is-current .track-label { color: var(--color-foreground); } .track-meta { font-size: .75rem; color: var(--color-body); margin-top: .1rem; } /* --- Scroll progress ------------------------------------------------------ */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; z-index: 60; background: linear-gradient(90deg, var(--color-accent), var(--color-accent-lite)); will-change: transform; } /* --- Cursor spotlight on cards ------------------------------------------- A radial highlight that tracks the pointer. --mx/--my are set by site.js; with no JS they stay at 50%/0 and the card simply looks normal. ------------------------------------------------------------------------ */ .spotlight::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity var(--transition); background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(56,189,248,.14), transparent 42%); } .spotlight:hover::after { opacity: 1; } .spotlight-dark::after { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(56,189,248,.20), transparent 45%); } /* --- Magnetic CTA (limited to one focal element per screen) ---------------- */ .magnetic { will-change: transform; } /* --- Comparison ------------------------------------------------------------ */ /* Both columns sit on a dark section. "Before" is recessed and dashed; "after" is elevated with an accent edge and glow, so the eye lands on it first. */ .compare-col { border-radius: var(--radius-xl); padding: 2rem; height: 100%; } .compare-col--before { background: rgba(255,255,255,.03); border: 1.5px dashed rgba(255,255,255,.20); } .compare-col--after { position: relative; overflow: hidden; background: linear-gradient(150deg, rgba(3,105,161,.22), rgba(2,6,23,.65)); border: 1.5px solid rgba(56,189,248,.42); box-shadow: var(--shadow-xl), 0 0 60px -20px rgba(56,189,248,.45); } .compare-item { display: flex; gap: .85rem; align-items: flex-start; padding: .8rem 0; } .compare-item + .compare-item { border-top: 1px solid rgba(255,255,255,.09); } /* Muted cross on dark, rather than the light-mode red chip */ .compare-col--before .cross { background: rgba(248,113,113,.14); color: #FCA5A5; } .tick, .cross { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; flex: 0 0 1.5rem; border-radius: 50%; margin-top: .1rem; } .tick { background: rgba(56,189,248,.16); color: #7DD3FC; } .cross { background: #FEE2E2; color: #B91C1C; } /* --- FAQ accordion -------------------------------------------------------- Built on

: fully functional and accessible with zero JS. ------------------------------------------------------------------------ */ .faq-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; overflow: hidden; transition: border-color var(--transition), box-shadow var(--transition); } .faq-item[open] { border-color: rgba(3,105,161,.35); box-shadow: var(--shadow-md); } .faq-item:hover { border-color: #C7D6E5; } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.35rem 1.5rem; cursor: pointer; list-style: none; font-weight: 700; color: var(--color-foreground); font-size: 1rem; line-height: 1.4; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary .chev { flex: 0 0 auto; transition: transform var(--transition); color: var(--color-accent); } .faq-item[open] summary .chev { transform: rotate(180deg); } .faq-answer { padding: 0 1.5rem 1.5rem; line-height: 1.7; } /* --- Header --------------------------------------------------------------- */ .site-header { transition: background-color var(--transition), box-shadow var(--transition), border-color var(--transition); } .site-header.is-scrolled { background: rgba(255,255,255,.88); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); box-shadow: 0 1px 0 rgba(2,6,23,.07), 0 8px 30px -12px rgba(2,6,23,.15); } /* Over the dark hero the header is transparent, so its text must be light. Once .is-scrolled adds the white-glass background, text reverts to its dark utility colours. Two-class selectors beat the single-class Tailwind utilities, and site.css loads after tailwind.css so these win. */ .site-header .nav-link, .site-header .hdr-word, .site-header .hdr-sub, .site-header .hdr-phone { transition: color var(--transition); } .site-header:not(.is-scrolled) .nav-link { color: #E2E8F0; } .site-header:not(.is-scrolled) .nav-link:hover { color: #fff; } .site-header:not(.is-scrolled) .hdr-word { color: #fff; } .site-header:not(.is-scrolled) .hdr-sub { color: #94A3B8; } .site-header:not(.is-scrolled) .hdr-phone { color: #fff; } .site-header:not(.is-scrolled) .hdr-phone:hover { color: var(--color-accent-lite); } .site-header:not(.is-scrolled) [data-nav-toggle] { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); color: #fff; } .nav-link { position: relative; } .nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--color-accent); border-radius: 2px; transform: scaleX(0); transform-origin: right; transition: transform var(--transition); } .nav-link:hover::after { transform: scaleX(1); transform-origin: left; } /* --- Motion & contrast preferences --------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } html.js .reveal, .reveal { opacity: 1 !important; transform: none !important; } .btn:hover, .card:hover, .step:hover .step-num { transform: none !important; } .marquee__track { animation: none !important; } .route-arc, .route-node { animation: none !important; } .spotlight::after, .spotlight-dark::after { display: none !important; } .magnetic { transform: none !important; } .track-step.is-current .track-dot::after { animation: none !important; opacity: 0 !important; } .scroll-progress { display: none !important; } /* No scroll-driven staging: every step reads as complete and fully legible */ html.js .step, .step { opacity: 1 !important; } .step-rail__fill { transform: scaleX(1) !important; } .step-marker { display: none !important; } .process-scroll { height: auto !important; } .process-sticky { position: static !important; height: auto !important; } } @media (prefers-contrast: more) { :root { --color-body: #1E293B; --color-border: #94A3B8; } .card { border-width: 2px; } } @media print { .site-header, .no-print { display: none !important; } body { background: #fff; color: #000; } }