/* ========================================================================== PACK N MAIL — "AMERICAN FREIGHT EDITORIAL" A maximalist design system for Temple, TX's shipping & mailbox center. Direction: Swiss logistics poster × brutalist editorial. Big blue slabs, red as percussion, white as oxygen. Oversized Archivo Black display type, hard offset shadows, barcode rules, route lines, stamp perforations. PALETTE LAW — only three colors exist. Shades are opacity of these: Blue #00007A Red #FE010C White #FFFFFF CONTRAST LAW — #FE010C on white is 4.02:1 (fails AA for text). Therefore RED NEVER CARRIES TEXT. Red is structure, energy, and decoration: bars, rules, shadows, dots, arrows, outlines, glyph accents. Blue (16.4:1 on white) and white carry every word on the site. ========================================================================== */ /* -- Reset / Base ---------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: 17px; line-height: 1.55; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* `clip`, not `hidden`: hidden would force overflow-y to compute to `auto`, turning into a scroll container. Decorative layers (skewed wedges, ghost type, marquee) intentionally exceed the viewport and need trimming. */ overflow-x: clip; } img, svg, video { display: block; max-width: 100%; height: auto; } button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; } a { color: var(--accent); text-decoration: none; transition: color .2s ease; } a:hover { color: var(--accent-strong); } input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; } ::selection { background: var(--red); color: #fff; } /* Focus — a red bracket that never blends into the blue */ :focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 2px; } /* -- Tokens ---------------------------------------------------------------- */ :root { /* The only three colors */ --blue: #00007A; --red: #FE010C; --white: #FFFFFF; /* Type */ --font-display: "Archivo Black", "Arial Black", "Helvetica Neue", sans-serif; --font-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif; /* Surfaces */ --bg: #ffffff; --bg-soft: rgba(0, 0, 122, 0.035); --bg-mute: rgba(0, 0, 122, 0.07); --surface: #ffffff; --surface-2: rgba(0, 0, 122, 0.02); /* Ink — every shade is blue at opacity */ --ink: #00007A; --ink-2: rgba(0, 0, 122, 0.88); --muted: rgba(0, 0, 122, 0.66); --muted-2: rgba(0, 0, 122, 0.5); --line: rgba(0, 0, 122, 0.14); --line-strong: rgba(0, 0, 122, 0.28); /* Accents — text-safe blue, structural red */ --accent: #00007A; --accent-strong: #FE010C; --accent-soft: rgba(0, 0, 122, 0.08); --red-soft: rgba(254, 1, 12, 0.08); --red-line: rgba(254, 1, 12, 0.32); /* State — meaning lives in the text; color is redundant reinforcement */ --success: #00007A; --warn: #FE010C; --danger: #FE010C; /* Brutalist hard shadows — offset, no blur */ --shadow-1: 3px 3px 0 rgba(0, 0, 122, 0.1); --shadow-2: 6px 6px 0 rgba(0, 0, 122, 0.12); --shadow-3: 14px 14px 0 rgba(0, 0, 122, 0.14); --shadow-red: 8px 8px 0 var(--red); --shadow-blue: 8px 8px 0 var(--blue); --shadow-soft: 0 18px 50px rgba(0, 0, 122, 0.16); /* Geometry — squared off, industrial */ --radius-sm: 2px; --radius: 4px; --radius-lg: 6px; --radius-xl: 8px; --container: 1240px; /* Textures */ --grid-paper: linear-gradient(to right, rgba(0, 0, 122, 0.055) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(to bottom, rgba(0, 0, 122, 0.055) 1px, transparent 1px) 0 0 / 44px 44px; --barcode: repeating-linear-gradient(90deg, var(--blue) 0 2px, transparent 2px 5px, var(--blue) 5px 9px, transparent 9px 11px, var(--blue) 11px 12px, transparent 12px 17px, var(--blue) 17px 22px, transparent 22px 24px); --barcode-red: repeating-linear-gradient(90deg, var(--red) 0 2px, transparent 2px 5px, var(--red) 5px 9px, transparent 9px 11px, var(--red) 11px 12px, transparent 12px 17px, var(--red) 17px 22px, transparent 22px 24px); --gradient-hero: none; --gradient-card: linear-gradient(160deg, rgba(0, 0, 122, 0.1), rgba(0, 0, 122, 0.02)); --gradient-cta: linear-gradient(135deg, #00007A 0%, rgba(0, 0, 122, 0.86) 100%); --gradient-dark: radial-gradient(900px 600px at 85% -20%, rgba(255, 255, 255, 0.16), transparent 60%), linear-gradient(180deg, #00007A 0%, #00007A 100%); --ease: cubic-bezier(.2, .7, .2, 1); --ease-punch: cubic-bezier(.34, 1.56, .64, 1); } /* ========================================================================== DECORATIVE PRIMITIVES — the vocabulary of the rebrand ========================================================================== */ /* Barcode rule */ .barcode-rule { height: 26px; background-image: var(--barcode); opacity: .5; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .barcode-rule--red { background-image: var(--barcode-red); } /* Ghost display type sitting behind a section */ .ghost-type { position: absolute; font-family: var(--font-display); font-size: clamp(6rem, 17vw, 15rem); line-height: .8; letter-spacing: -.04em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 2px rgba(0, 0, 122, 0.07); pointer-events: none; user-select: none; white-space: nowrap; z-index: 0; } .section--dark .ghost-type, .cta-band .ghost-type { -webkit-text-stroke-color: rgba(255, 255, 255, 0.14); } /* Dashed delivery route */ .route-line { stroke: var(--red); stroke-width: 3; stroke-dasharray: 10 12; stroke-linecap: round; fill: none; animation: routeMove 1.4s linear infinite; } @keyframes routeMove { to { stroke-dashoffset: -22; } } /* Stamp perforation edge */ .perforated { --perf: 7px; mask-image: radial-gradient(circle var(--perf) at 50% 0, transparent 98%, #000 100%), linear-gradient(#000 0 0); -webkit-mask-image: radial-gradient(circle var(--perf) at 50% 0, transparent 98%, #000 100%), linear-gradient(#000 0 0); } /* Reading-progress bar */ .scroll-progress { position: fixed; inset: 0 auto auto 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--red); z-index: 300; pointer-events: none; will-change: transform; } /* ========================================================================== TYPOGRAPHY ========================================================================== */ h1, h2, h3, h4, h5 { color: var(--ink); line-height: 1.02; margin: 0 0 .5em; } h1, h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: -.03em; } h1 { font-size: clamp(2.5rem, 4.9vw, 4.5rem); line-height: .92; } h2 { font-size: clamp(1.9rem, 3.4vw, 3.2rem); line-height: .96; } h3, h4, h5 { font-family: var(--font-body); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; } h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); } h4 { font-size: 1.1rem; } p { margin: 0 0 1em; color: var(--ink-2); } .lede { font-size: clamp(1.08rem, 1.4vw, 1.28rem); color: var(--muted); max-width: 62ch; font-weight: 400; } strong { font-weight: 700; } /* Eyebrow — a red slash kicker, not a pill */ .eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-body); font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); background: none; padding: 0; border-radius: 0; margin-bottom: 18px; } .eyebrow::before { content: ""; width: 30px; height: 8px; border-radius: 0; background: var(--red); box-shadow: none; flex-shrink: 0; transform: skewX(-18deg); } .section-head .eyebrow { justify-content: center; } .section--dark .eyebrow, .cta-band .eyebrow { color: #fff; } /* ========================================================================== LAYOUT ========================================================================== */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; } .container-narrow { max-width: 900px; margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; } .section { padding: clamp(72px, 10vw, 150px) 0; position: relative; overflow: hidden; } .section--tight { padding: clamp(48px, 6vw, 84px) 0; } /* White section with grid paper + a red corner tick */ .section--soft { background-color: #fff; background-image: var(--grid-paper); } .section--soft::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--red); transform-origin: 0 50%; } /* Mute — inverted crosshatch band */ .section--mute { background-color: rgba(0, 0, 122, 0.045); background-image: repeating-linear-gradient(-45deg, rgba(0, 0, 122, .05) 0 1px, transparent 1px 14px); } .section--mute::after { content: ""; position: absolute; inset: auto 0 0 0; height: 26px; background-image: var(--barcode); opacity: .18; } /* The blue slab */ .section--dark { background: var(--gradient-dark); color: rgba(255, 255, 255, .82); } .section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; } .section--dark p { color: rgba(255, 255, 255, .78); } .section--dark .lede { color: rgba(255, 255, 255, .8); } .section--dark a { color: #fff; } .section--dark::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 8px; background: var(--red); } .divider { height: 1px; background: var(--line); border: 0; margin: 0; } .section-head { max-width: 860px; margin: 0 auto clamp(48px, 6vw, 76px); text-align: center; } .section-head h2 { margin-bottom: 18px; } .section-head .lede { margin-left: auto; margin-right: auto; } .section-head--left { margin-left: 0; text-align: left; } .section-head--left .eyebrow { justify-content: flex-start; } .grid { display: grid; gap: 24px; } /* Every .grid--2 on the site holds 4 or 6 cards, so hold two real columns instead of letting auto-fit collapse them into a 3+1 orphan row. */ .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } @media (max-width: 780px) { .grid--2 { grid-template-columns: 1fr; } } .row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; } .row--end { justify-content: flex-end; } .row--center { justify-content: center; } .stack > * + * { margin-top: 1rem; } /* ========================================================================== BUTTONS — squared, chunky, with a red hard shadow that snaps on hover ========================================================================== */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: 16px 26px; border-radius: var(--radius); font-family: var(--font-body); font-weight: 800; font-size: .95rem; letter-spacing: .02em; text-transform: uppercase; transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s ease, color .18s ease, border-color .18s ease; white-space: nowrap; border: 2px solid transparent; line-height: 1; overflow: hidden; isolation: isolate; } .btn > * { position: relative; z-index: 2; } /* Ripple (JS-injected span) */ .btn .ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .45); transform: scale(0); animation: ripple .55s var(--ease) forwards; pointer-events: none; z-index: 1; } @keyframes ripple { to { transform: scale(2.6); opacity: 0; } } /* Primary — blue block, red shadow. White text stays 16.4:1 in every state. */ .btn--primary { background: var(--blue); color: #fff; border-color: var(--blue); box-shadow: 4px 4px 0 var(--red); } .btn--primary:hover { color: #fff; transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--red); } .btn--primary:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--red); } /* Secondary — outlined, fills blue on hover */ .btn--secondary { background: #fff; color: var(--ink); border-color: var(--blue); box-shadow: 4px 4px 0 rgba(0, 0, 122, .16); } .btn--secondary:hover { background: var(--blue); color: #fff; transform: translate(-3px, -3px); box-shadow: 7px 7px 0 rgba(0, 0, 122, .22); } .btn--secondary:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 rgba(0, 0, 122, .18); } /* Ghost — underline grows from the left */ .btn--ghost { color: var(--ink); border-color: transparent; padding-inline: 12px; } .btn--ghost::after { content: ""; position: absolute; inset: auto 12px 8px 12px; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; transition: transform .28s var(--ease); } .btn--ghost:hover { color: var(--ink); background: rgba(0, 0, 122, .04); } .btn--ghost:hover::after { transform: scaleX(1); } /* Light — for use on blue slabs */ .btn--light { background: #fff; color: var(--blue); border-color: #fff; box-shadow: 4px 4px 0 var(--red); } .btn--light:hover { background: #fff; color: var(--blue); transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--red); } .btn--light:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--red); } /* Outline — on blue slabs */ .btn--outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); } .btn--outline:hover { background: #fff; color: var(--blue); border-color: #fff; transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--red); } .btn--sm { padding: 11px 16px; font-size: .8rem; } .btn--lg { padding: 20px 34px; font-size: 1.05rem; } .btn .arrow { transition: transform .22s var(--ease); display: inline-block; } .btn:hover .arrow { transform: translateX(5px); } /* ========================================================================== HEADER ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .82); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 2px solid transparent; transition: border-color .25s ease, background .25s ease, box-shadow .25s ease; } .site-header::after { content: ""; position: absolute; inset: auto 0 -4px 0; height: 4px; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s var(--ease); } .site-header.is-scrolled { background: rgba(255, 255, 255, .95); border-bottom-color: var(--blue); box-shadow: 0 10px 30px rgba(0, 0, 122, .07); } .site-header.is-scrolled::after { transform: scaleX(1); } .header-bar { display: flex; align-items: center; gap: 22px; height: 82px; transition: height .25s var(--ease); } .site-header.is-scrolled .header-bar { height: 68px; } /* Brand — the real logo, breathing */ .brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--ink); flex-shrink: 0; transition: transform .25s var(--ease); } .brand:hover { transform: translateY(-1px); } .brand-mark { width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; } .brand-logo { height: 46px; width: auto; display: block; transition: height .25s var(--ease); } .site-header.is-scrolled .brand-logo { height: 38px; } /* The wordmark lives inside the logo art — hide the redundant text label */ .brand > span:not(.brand-mark) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Nav — animated red underline */ .primary-nav { display: flex; align-items: center; gap: 2px; margin-left: 6px; } .nav-item { position: relative; } .nav-link { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 10px 13px; border-radius: var(--radius-sm); color: var(--ink); font-weight: 600; font-size: .9rem; letter-spacing: -.01em; white-space: nowrap; transition: color .2s ease; } .nav-link::after { content: ""; position: absolute; inset: auto 13px 4px 13px; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; transition: transform .28s var(--ease); } .nav-link:hover::after, .nav-item:focus-within > .nav-link::after, .nav-link.is-current::after { transform: scaleX(1); } .nav-link:hover, .nav-item:focus-within > .nav-link { background: none; color: var(--ink); } .nav-link.is-current { font-weight: 800; } .nav-link .chev { width: 11px; height: 11px; opacity: .55; transition: transform .25s var(--ease); } .nav-item:hover .chev, .nav-item:focus-within .chev { transform: rotate(180deg); opacity: 1; } /* Mega — a hard-edged blue-bordered panel */ .mega { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(10px); min-width: 360px; background: #fff; border: 2px solid var(--blue); border-radius: var(--radius); box-shadow: 10px 10px 0 rgba(0, 0, 122, .12); padding: 10px; opacity: 0; visibility: hidden; transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; pointer-events: none; } .mega::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--red); } .nav-item:hover .mega, .nav-item:focus-within .mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; } .mega-link { display: block; position: relative; padding: 12px 14px 12px 18px; border-radius: var(--radius-sm); color: var(--ink); transition: background .18s ease, padding-left .18s var(--ease); } .mega-link::before { content: ""; position: absolute; inset: 12px auto 12px 6px; width: 4px; background: var(--red); transform: scaleY(0); transition: transform .18s var(--ease); } .mega-link:hover { background: rgba(0, 0, 122, .05); color: var(--ink); padding-left: 22px; } .mega-link:hover::before { transform: scaleY(1); } .mega-link strong { display: block; font-weight: 700; font-size: .97rem; letter-spacing: -.015em; } .mega-link span { display: block; color: var(--muted); font-size: .84rem; margin-top: 2px; font-weight: 400; } .header-spacer { flex: 1; } .header-cta { display: flex; gap: 10px; align-items: center; } /* The rail can't hold brand + 7 nav items + status + 2 CTAs at any width without crowding. "Start Shipping" already leads every hero and sits in the drawer, so the header keeps a single, unambiguous primary action. */ .header-cta .btn--secondary { display: none; } /* Status pill — the DOT carries state; the label is always high-contrast blue */ .status-pill { display: inline-flex; align-items: center; gap: .5rem; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 7px 12px; border-radius: var(--radius-sm); background: rgba(0, 0, 122, .06); color: var(--ink); border: 2px solid var(--line); white-space: nowrap; } .status-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); flex-shrink: 0; } .status-pill[data-status="open"] { border-color: var(--blue); background: rgba(0, 0, 122, .07); } .status-pill[data-status="open"] .dot { background: var(--blue); animation: pulse 2s ease-out infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 0, 122, .5); } 70% { box-shadow: 0 0 0 7px rgba(0, 0, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 0, 122, 0); } } .status-pill[data-status="closed"] { border-color: var(--red-line); background: var(--red-soft); } .status-pill[data-status="closed"] .dot { background: var(--red); } .status-pill[data-status="soon"] { border-color: var(--red-line); background: var(--red-soft); } .status-pill[data-status="soon"] .dot { background: var(--red); animation: pulse-red 1.4s ease-out infinite; } @keyframes pulse-red { 0% { box-shadow: 0 0 0 0 rgba(254, 1, 12, .6); } 70% { box-shadow: 0 0 0 7px rgba(254, 1, 12, 0); } 100% { box-shadow: 0 0 0 0 rgba(254, 1, 12, 0); } } .hamburger { display: none; width: 46px; height: 46px; border-radius: var(--radius-sm); background: var(--blue); color: #fff; align-items: center; justify-content: center; box-shadow: 3px 3px 0 var(--red); transition: transform .18s var(--ease), box-shadow .18s var(--ease); } .hamburger:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--red); } .hamburger:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--red); } .hamburger svg { width: 22px; height: 22px; } /* ========================================================================== MOBILE DRAWER ========================================================================== */ .mobile-drawer { position: fixed; inset: 0; background: #fff; background-image: var(--grid-paper); z-index: 200; transform: translateY(-100%); transition: transform .42s var(--ease); padding: 92px 0 40px; overflow-y: auto; overscroll-behavior: contain; display: none; } .mobile-drawer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 8px; background: var(--red); } .mobile-drawer.is-open { transform: translateY(0); } .mobile-drawer .drawer-close { position: absolute; top: 26px; right: 26px; width: 46px; height: 46px; border-radius: var(--radius-sm); background: var(--blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 3px 3px 0 var(--red); z-index: 2; } .mobile-drawer .drawer-close svg { width: 22px; height: 22px; } .mobile-drawer details { border-top: 2px solid var(--line); padding: 18px 0; } .mobile-drawer details:last-of-type { border-bottom: 2px solid var(--line); } .mobile-drawer summary { display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; font-family: var(--font-display); text-transform: uppercase; letter-spacing: -.02em; font-size: 1.35rem; color: var(--ink); } .mobile-drawer summary::-webkit-details-marker { display: none; } .mobile-drawer summary::after { content: ""; width: 16px; height: 16px; flex-shrink: 0; background: var(--red); clip-path: polygon(44% 0, 56% 0, 56% 44%, 100% 44%, 100% 56%, 56% 56%, 56% 100%, 44% 100%, 44% 56%, 0 56%, 0 44%, 44% 44%); transition: transform .3s var(--ease); } .mobile-drawer details[open] summary::after { transform: rotate(135deg); } .mobile-drawer .drawer-sub { padding: 14px 0 0; display: flex; flex-direction: column; gap: 2px; } .mobile-drawer .drawer-sub a { padding: 11px 0 11px 18px; color: var(--ink-2); font-size: 1rem; font-weight: 500; position: relative; } .mobile-drawer .drawer-sub a::before { content: ""; position: absolute; inset: 50% auto auto 0; width: 8px; height: 2px; background: var(--red); transform: translateY(-50%); transition: width .2s var(--ease); } .mobile-drawer .drawer-sub a:hover::before { width: 14px; } .mobile-drawer .drawer-link { display: block; padding: 20px 0; border-top: 2px solid var(--line); font-family: var(--font-display); text-transform: uppercase; font-size: 1.35rem; letter-spacing: -.02em; color: var(--ink); } .mobile-drawer .drawer-cta { margin-top: 30px; display: flex; flex-direction: column; gap: 14px; } /* ========================================================================== HERO — the flagship composition ========================================================================== */ .hero { position: relative; padding: clamp(64px, 9vw, 118px) 0 clamp(56px, 8vw, 96px); background-color: #fff; background-image: var(--grid-paper); overflow: hidden; isolation: isolate; } /* Big red diagonal wedge anchoring the right edge */ .hero::before { content: ""; position: absolute; inset: -10% -18% auto auto; width: 46vw; height: 130%; background: var(--red); opacity: .07; transform: skewX(-13deg); z-index: -1; } .hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 8px; background: var(--blue); } .hero-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(36px, 5vw, 76px); align-items: center; } .hero h1 { margin: 0 0 22px; } /* Red slash under the last hero word, drawn on load */ .hero h1 .mark { position: relative; display: inline-block; color: var(--blue); } .hero h1 .mark::after { content: ""; position: absolute; inset: auto 0 .06em 0; height: .13em; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; animation: underlineIn .8s var(--ease) .5s forwards; } @keyframes underlineIn { to { transform: scaleX(1); } } .hero .lede { font-size: clamp(1.08rem, 1.35vw, 1.24rem); margin-bottom: 32px; max-width: 54ch; } .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; } .hero-trust { display: inline-flex; align-items: center; gap: 12px; color: var(--muted); font-size: .92rem; font-weight: 500; } .hero-trust .ratings { display: inline-flex; gap: 2px; color: var(--red); letter-spacing: 2px; } /* Hero visual — a blue slab with route art; cards break its bounds */ .hero-visual { position: relative; aspect-ratio: 5 / 4; border-radius: var(--radius-lg); background: var(--gradient-dark); box-shadow: 16px 16px 0 var(--red); overflow: visible; isolation: isolate; } .hero-visual::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 40px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 40px); z-index: 0; } .hero-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; border-radius: inherit; } .hero-art svg { width: 100%; height: 100%; display: block; } .hero-visual .barcode-strip { position: absolute; inset: auto 22px 22px 22px; height: 34px; background-image: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px, #fff 5px 9px, transparent 9px 11px, #fff 11px 12px, transparent 12px 17px, #fff 17px 22px, transparent 22px 24px); opacity: .5; z-index: 2; } .hero-card { position: absolute; z-index: 3; background: #fff; border: 2px solid var(--blue); border-radius: var(--radius); padding: 13px 16px; box-shadow: 6px 6px 0 rgba(0, 0, 122, .18); font-size: .88rem; color: var(--ink); display: flex; align-items: center; gap: 12px; max-width: 260px; } .hero-card .icon { width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .hero-card .icon svg { width: 19px; height: 19px; } .hero-card strong { display: block; font-weight: 800; letter-spacing: -.015em; } .hero-card span { display: block; color: var(--muted); font-size: .8rem; margin-top: 1px; } .hero-card.card-1 { top: 8%; left: -12%; animation: floatA 7s ease-in-out infinite; } .hero-card.card-2 { bottom: 26%; right: -12%; animation: floatB 8s ease-in-out infinite; } .hero-card.card-3 { bottom: -5%; left: 8%; animation: floatA 6s ease-in-out infinite reverse; } .hero-card.card-2 .icon { background: var(--red); } @keyframes floatA { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes floatB { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } } /* Hero stat strip */ .hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2px; margin-top: clamp(40px, 5vw, 64px); background: var(--line); border: 2px solid var(--blue); border-radius: var(--radius); overflow: hidden; } .hero-stat { background: #fff; padding: 22px 24px; } .hero-stat .num { font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1; color: var(--blue); letter-spacing: -.03em; display: flex; align-items: baseline; gap: 1px; } .hero-stat .num .suffix { color: var(--red); } .hero-stat .label { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-top: 8px; } /* Carrier marquee — an infinite freight ticker on a blue rail */ .hero-marquee { margin-top: clamp(36px, 5vw, 56px); border: 0; border-top: 2px solid var(--blue); border-bottom: 2px solid var(--blue); padding: 0; display: block; overflow: hidden; background: var(--blue); position: relative; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } /* Two identical groups, each carrying its own trailing gap, so the track is exactly 2x one group and -50% lands precisely on the seam. */ .marquee-track { display: flex; align-items: center; gap: 0; width: max-content; padding: 18px 0; animation: marquee 34s linear infinite; will-change: transform; } .marquee-group { display: flex; align-items: center; gap: clamp(28px, 4vw, 52px); padding-right: clamp(28px, 4vw, 52px); flex-shrink: 0; } .hero-marquee:hover .marquee-track { animation-play-state: paused; } @keyframes marquee { to { transform: translateX(-50%); } } .hero-marquee span { font-size: .8rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; color: rgba(255, 255, 255, .7); white-space: nowrap; } .hero-marquee .carrier { font-family: var(--font-display); font-size: 1.25rem; color: #fff; letter-spacing: -.02em; text-transform: uppercase; } .hero-marquee .sep-star { color: var(--red); font-size: 1.1rem; -webkit-text-stroke: 0; } /* Third-party review widget shell */ .hero-reviews, .reviews-carousel { position: relative; z-index: 1; } .reviews-carousel { background: #fff; border: 2px solid var(--blue); border-radius: var(--radius); padding: 22px; box-shadow: 10px 10px 0 rgba(0, 0, 122, .1); } /* ========================================================================== CARDS ========================================================================== */ .card { background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); padding: 32px; transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s ease; position: relative; overflow: hidden; isolation: isolate; } /* Red bar wipes down the left edge on hover */ .card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--red); transform: scaleY(0); transform-origin: 50% 0; transition: transform .32s var(--ease); } .card:hover { transform: translate(-4px, -6px); box-shadow: 10px 12px 0 rgba(0, 0, 122, .13); border-color: var(--blue); } .card:hover::before { transform: scaleY(1); } .card .icon-tile { width: 54px; height: 54px; border-radius: var(--radius-sm); background: var(--blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; border: 0; box-shadow: 4px 4px 0 var(--red-soft); transition: transform .3s var(--ease-punch), box-shadow .3s var(--ease); } .card:hover .icon-tile { transform: rotate(-6deg) scale(1.06); box-shadow: 5px 5px 0 var(--red); } .card .icon-tile svg { width: 25px; height: 25px; } .card h3 { margin-bottom: 10px; } .card p { color: var(--muted); margin-bottom: 18px; } .card-cta { font-weight: 800; font-size: .84rem; text-transform: uppercase; letter-spacing: .09em; display: inline-flex; align-items: center; gap: 8px; color: var(--ink); } .card-cta span { color: var(--red); transition: transform .22s var(--ease); display: inline-block; } .card-cta:hover { gap: 8px; color: var(--ink); } .card-cta:hover span { transform: translateX(6px); } .card--featured { background: var(--gradient-dark); border-color: var(--blue); color: rgba(255, 255, 255, .82); box-shadow: 8px 8px 0 var(--red); } .card--featured:hover { box-shadow: 14px 16px 0 var(--red); border-color: var(--blue); } .card--featured h3 { color: #fff; } .card--featured p { color: rgba(255, 255, 255, .78); } .card--featured .icon-tile { background: #fff; color: var(--blue); box-shadow: 4px 4px 0 rgba(255, 255, 255, .25); } .card--featured:hover .icon-tile { box-shadow: 5px 5px 0 var(--red); } .card--featured .card-cta { color: #fff; } .card--featured .card-cta span { color: #fff; } .card--featured::before { background: var(--red); } /* Persona cards — stamp-like, numbered */ .persona-card { position: relative; background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); padding: 30px; display: flex; flex-direction: column; transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s ease; min-height: 240px; overflow: hidden; isolation: isolate; } .persona-card::after { content: ""; position: absolute; inset: auto -30px -30px auto; width: 96px; height: 96px; background: var(--red); opacity: .07; transform: rotate(45deg); transition: transform .4s var(--ease), opacity .3s ease; } .persona-card:hover { transform: translate(-4px, -6px); box-shadow: 10px 12px 0 rgba(0, 0, 122, .13); border-color: var(--blue); } .persona-card:hover::after { transform: rotate(45deg) scale(1.35); opacity: .12; } /* Cards flipped to the blue slab via inline style: translucent red over blue reads purple, so tint with white (a legal lighter blue) instead. */ .persona-card[style*="gradient-dark"]::after, .card[style*="gradient-dark"]::after { background: #fff; opacity: .1; } .persona-card .tag { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: #fff; background: var(--blue); padding: 6px 11px; border-radius: var(--radius-sm); align-self: flex-start; margin-bottom: 16px; } .persona-card h3 { font-size: 1.22rem; } .persona-card p { color: var(--muted); margin: 0; flex: 1; } .persona-card .card-cta { margin-top: 20px; } /* ========================================================================== FEATURE / BULLET LISTS ========================================================================== */ .feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; } .feature-list li { display: flex; gap: 16px; align-items: flex-start; color: var(--ink-2); padding: 18px 0; border-bottom: 2px solid var(--line); transition: padding-left .25s var(--ease); } .feature-list li:last-child { border-bottom: 0; } .feature-list li:hover { padding-left: 8px; } .feature-list .check { flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; transition: background .25s ease, transform .25s var(--ease-punch); } .feature-list li:hover .check { background: var(--red); transform: rotate(-8deg); } .feature-list .check svg { width: 15px; height: 15px; } .feature-list li strong { display: block; color: var(--ink); margin-bottom: 3px; font-weight: 800; letter-spacing: -.015em; } .feature-list li span { color: var(--muted); font-size: .94rem; } .bullet-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .bullet-list li { padding-left: 28px; position: relative; color: var(--ink-2); } .bullet-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 14px; height: 8px; border-radius: 0; background: var(--red); box-shadow: none; transform: skewX(-18deg); } .section--dark .bullet-list li { color: rgba(255, 255, 255, .82); } /* ========================================================================== PROBLEM / SOLUTION SPLIT ========================================================================== */ .split { display: grid; gap: 28px; grid-template-columns: repeat(2, 1fr); } .split-card { background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); padding: 36px; position: relative; overflow: hidden; } .split-card h3 { font-size: 1.3rem; margin-bottom: 22px; } .split-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; } .split-card ul li { display: flex; align-items: flex-start; gap: 12px; color: var(--ink-2); padding: 13px 0; border-bottom: 1px solid var(--line); } .split-card ul li:last-child { border-bottom: 0; } .split-card.problem { background: #fff; border-color: var(--red-line); box-shadow: 8px 8px 0 var(--red-soft); } .split-card.problem::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--red); } .split-card.problem li::before { content: ""; width: 14px; height: 3px; background: var(--red); flex-shrink: 0; margin-top: 11px; } .split-card.solution { background: var(--gradient-dark); border-color: var(--blue); box-shadow: 8px 8px 0 rgba(0, 0, 122, .18); } .split-card.solution h3 { color: #fff; } .split-card.solution ul li { color: rgba(255, 255, 255, .86); border-bottom-color: rgba(255, 255, 255, .14); } .split-card.solution li::before { content: "✓"; color: #fff; font-weight: 800; line-height: 1; flex-shrink: 0; padding-top: 3px; } /* ========================================================================== STEPS — big ghosted numerals ========================================================================== */ .steps { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .step { background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); padding: 32px; position: relative; overflow: hidden; transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .25s ease; } .step:hover { transform: translate(-3px, -5px); box-shadow: 8px 10px 0 rgba(0, 0, 122, .12); border-color: var(--blue); } .step .num { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--radius-sm); background: var(--blue); color: #fff; font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 18px; box-shadow: 4px 4px 0 var(--red); } .step h4 { font-size: 1.1rem; margin-bottom: 8px; } .step p { color: var(--muted); margin: 0; font-size: .95rem; } /* ========================================================================== PRICING ========================================================================== */ .pricing { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); align-items: stretch; } .plan { background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); padding: 36px; display: flex; flex-direction: column; position: relative; overflow: hidden; transition: border-color .25s ease, transform .28s var(--ease), box-shadow .28s var(--ease); } .plan:hover { transform: translate(-4px, -6px); box-shadow: 10px 12px 0 rgba(0, 0, 122, .13); border-color: var(--blue); } .plan.is-featured { background: var(--gradient-dark); color: rgba(255, 255, 255, .82); border-color: var(--blue); box-shadow: 10px 10px 0 var(--red); } .plan.is-featured:hover { box-shadow: 16px 18px 0 var(--red); } .plan.is-featured h3 { color: #fff; } .plan.is-featured .plan-best { color: rgba(255, 255, 255, .72); } .plan.is-featured .plan-features li { color: rgba(255, 255, 255, .84); } .plan.is-featured .plan-features .check { background: #fff; color: var(--blue); } /* White on red is 4.02:1 — fails AA at this size. Blue chip, red underline. */ .plan-tag { position: absolute; top: 0; right: 0; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: #fff; background: var(--blue); border-bottom: 3px solid var(--red); padding: 8px 14px; border-radius: 0 0 0 var(--radius); } .plan.is-featured .plan-tag { background: #fff; color: var(--blue); } .plan h3 { font-size: 1.35rem; margin-bottom: 6px; } /* Descriptions run 1–2 lines; reserve both so prices align across the row. */ .plan-best { color: var(--muted); font-size: .9rem; margin-bottom: 22px; min-height: 2.7em; } /* The term line sits directly under the price, so the price block closes tight. */ .plan-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .plan-term { margin: 0 0 24px; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); } .plan.is-featured .plan-term { color: rgba(255, 255, 255, .78); } .plan-price .amt { font-family: var(--font-display); /* Holds "From $15" on one line inside a 3-up card */ font-size: clamp(1.8rem, 2.6vw, 2.5rem); letter-spacing: -.04em; color: var(--ink); line-height: 1; white-space: nowrap; } .plan.is-featured .plan-price .amt { color: #fff; } .plan-price .per { color: var(--muted); font-size: .9rem; font-weight: 600; } .plan.is-featured .plan-price .per { color: rgba(255, 255, 255, .7); } /* Capacity is the only thing separating the plans — give it a red-barred callout so the real difference is scannable above the shared feature list. */ .plan-capacity { display: grid; gap: 5px; padding: 14px 16px; margin-bottom: 24px; border: 2px solid var(--line); border-left: 6px solid var(--red); border-radius: var(--radius-sm); background: rgba(0, 0, 122, .03); } .plan-capacity strong { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--ink); } .plan-capacity span { font-size: .92rem; color: var(--muted); line-height: 1.45; } .plan.is-featured .plan-capacity { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); border-left-color: var(--red); } .plan.is-featured .plan-capacity strong { color: #fff; } .plan.is-featured .plan-capacity span { color: rgba(255, 255, 255, .82); } .plan-features { flex: 1; margin-bottom: 28px; list-style: none; padding: 0; } .plan-features li { padding: 12px 0; color: var(--ink-2); display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; border-top: 1px solid var(--line); } .plan.is-featured .plan-features li { border-top-color: rgba(255, 255, 255, .14); } .plan-features li:first-child { border-top: 0; padding-top: 0; } .plan-features .check { flex-shrink: 0; width: 22px; height: 22px; border-radius: var(--radius-sm); background: var(--blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; } .plan-features .check svg { width: 13px; height: 13px; } /* ========================================================================== FAQ ========================================================================== */ .faq { display: grid; gap: 14px; max-width: 860px; margin: 0 auto; } .faq-item { background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .25s ease, box-shadow .25s var(--ease); } .faq-item:hover, .faq-item[open] { border-color: var(--blue); box-shadow: 6px 6px 0 rgba(0, 0, 122, .1); } .faq-item summary { list-style: none; cursor: pointer; padding: 24px 26px; display: flex; align-items: center; justify-content: space-between; gap: 24px; font-weight: 700; color: var(--ink); font-size: 1.05rem; letter-spacing: -.015em; transition: background .2s ease; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { background: rgba(0, 0, 122, .04); } .faq-item summary::after { content: ""; width: 16px; height: 16px; flex-shrink: 0; background: var(--red); clip-path: polygon(44% 0, 56% 0, 56% 44%, 100% 44%, 100% 56%, 56% 56%, 56% 100%, 44% 100%, 44% 56%, 0 56%, 0 44%, 44% 44%); border: 0; transform: none; transition: transform .3s var(--ease); margin-left: 0; } .faq-item[open] summary { background: rgba(0, 0, 122, .04); } .faq-item[open] summary::after { transform: rotate(135deg); } .faq-item .faq-body { padding: 0 26px 26px; color: var(--muted); animation: faqIn .3s var(--ease); } @keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================================== CTA BAND — full blue slab with ghost type + route art ========================================================================== */ .cta-band { position: relative; border-radius: var(--radius-lg); background: var(--gradient-dark); color: rgba(255, 255, 255, .82); padding: clamp(48px, 7vw, 88px); overflow: hidden; isolation: isolate; border: 2px solid var(--blue); box-shadow: 16px 16px 0 var(--red); } .cta-band::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 46px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 46px); z-index: -1; } /* Solid, never translucent: red at partial opacity over blue blends to purple — a fourth hue. Keep red crisp and geometric on blue surfaces. */ .cta-band::after { content: ""; position: absolute; inset: auto -70px -70px auto; width: 260px; height: 260px; background: var(--red); transform: rotate(45deg); z-index: -1; } .cta-band h2 { color: #fff; margin-bottom: 16px; max-width: 20ch; } .cta-band p { color: rgba(255, 255, 255, .82); max-width: 54ch; margin-bottom: 30px; font-size: 1.05rem; } .cta-band .row { gap: 14px; } /* ========================================================================== FORMS ========================================================================== */ .form { display: grid; gap: 20px; } .form-row { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; } @media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } } .field label { display: block; font-weight: 800; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 9px; color: var(--ink); } .field input, .field textarea, .field select { width: 100%; padding: 15px 16px; border-radius: var(--radius-sm); border: 2px solid var(--line); background: var(--surface); font-size: 1rem; font-weight: 500; transition: border-color .2s ease, box-shadow .2s var(--ease); } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--blue); box-shadow: 4px 4px 0 var(--red); background: #fff; } .field textarea { resize: vertical; min-height: 130px; } .field-help { font-size: .85rem; color: var(--muted); margin-top: 7px; } /* Form status — the live region under the submit button. Text is blue or white only; red stays structural (shadow / left bar). */ [data-form-status] { margin: 0; padding: 14px 16px; border-radius: var(--radius-sm); font-size: .92rem; font-weight: 600; line-height: 1.45; } /* The region is always in the DOM so screen readers announce reliably — hide it until JS puts text in it. */ [data-form-status]:empty, [data-form-status]:not([data-state]) { display: none; } [data-form-status]:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; } /* Success — blue block, red offset shadow. White on blue is 16.4:1. */ [data-form-status][data-state="success"] { background: var(--blue); color: #fff; box-shadow: 4px 4px 0 var(--red); } /* Error — the same language as .notice: white card, red bar, blue text. Red can't carry the text here (4.02:1), so it carries the emphasis instead. */ [data-form-status][data-state="error"] { background: #fff; color: var(--ink); border: 2px solid var(--line); border-left: 6px solid var(--red); } /* Sending — the button is the only thing that changes state. .75 rather than a heavier fade: "Sending…" is feedback the user needs to read, and it keeps white-on-blue at ~8.6:1. A disabled control is exempt from the contrast rule, but there's no reason to cash that in here. */ .btn[disabled] { opacity: .75; cursor: not-allowed; transform: none; box-shadow: 2px 2px 0 var(--red); } .btn[disabled]:hover { transform: none; box-shadow: 2px 2px 0 var(--red); } /* ========================================================================== CONTACT INFO ========================================================================== */ .info-card { background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); padding: 32px; position: relative; overflow: hidden; } .info-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--red); } .info-card h3 { font-size: 1.2rem; margin-bottom: 10px; } .info-row { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); } .info-row:last-child { border-bottom: 0; } .info-row .ico { width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .22s ease, transform .22s var(--ease-punch); } .info-row:hover .ico { background: var(--red); transform: rotate(-8deg); } .info-row .ico svg { width: 19px; height: 19px; } .info-row strong { display: block; font-weight: 800; letter-spacing: -.015em; } .info-row span { display: block; color: var(--muted); font-size: .92rem; } .info-row a { color: var(--ink-2); font-weight: 600; } .info-row a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; text-decoration-thickness: 2px; } .hours-table { width: 100%; border-collapse: collapse; font-size: .95rem; } .hours-table td { padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-weight: 500; } .hours-table td:last-child { text-align: right; color: var(--muted); } .hours-table tr:last-child td { border-bottom: 0; } .hours-table tr.today td { color: var(--ink); font-weight: 800; } .hours-table tr.today td:first-child { position: relative; padding-left: 20px; } .hours-table tr.today td:first-child::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 4px; background: var(--red); transform: translateY(-50%) skewX(-18deg); } /* ========================================================================== BREADCRUMBS ========================================================================== */ .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 22px 0 0; } .crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--ink); } .crumbs .sep { color: var(--red); font-weight: 800; } /* ========================================================================== SUBHERO — every interior page gets the editorial treatment ========================================================================== */ .subhero { position: relative; padding: clamp(44px, 6vw, 76px) 0 clamp(52px, 7vw, 88px); background-color: #fff; background-image: var(--grid-paper); border-bottom: 8px solid var(--blue); overflow: hidden; isolation: isolate; } .subhero::before { content: ""; position: absolute; inset: -20% -14% auto auto; width: 40vw; height: 150%; background: var(--red); opacity: .06; transform: skewX(-13deg); z-index: -1; } .subhero::after { content: ""; position: absolute; inset: auto 0 24px auto; width: 34%; height: 30px; background-image: var(--barcode); opacity: .12; z-index: -1; } .subhero h1 { font-size: clamp(2.4rem, 5.4vw, 4.6rem); margin-bottom: 0; } .subhero .lede { margin: 22px 0 30px; } .subhero-meta { display: inline-flex; gap: 18px; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; } .subhero-meta .pip { width: 8px; height: 8px; border-radius: 0; background: var(--red); transform: skewX(-18deg); } /* ========================================================================== COMPARE TABLE ========================================================================== */ .compare { background: var(--surface); border: 2px solid var(--blue); border-radius: var(--radius); overflow: hidden; box-shadow: 10px 10px 0 rgba(0, 0, 122, .1); } .compare-table { width: 100%; border-collapse: collapse; } .compare-table th, .compare-table td { padding: 17px 20px; text-align: left; border-bottom: 1px solid var(--line); font-size: .94rem; } .compare-table thead th { background: var(--blue); color: #fff; font-weight: 800; font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; } .compare-table tbody tr { transition: background .2s ease; } .compare-table tbody tr:hover { background: rgba(0, 0, 122, .04); } .compare-table tbody tr:last-child td { border-bottom: 0; } .compare-table .cname { font-weight: 800; color: var(--ink); letter-spacing: -.015em; } /* ========================================================================== TRACKER ========================================================================== */ .tracker { background: var(--surface); border: 2px solid var(--blue); border-radius: var(--radius); padding: 36px; box-shadow: 14px 14px 0 var(--red); position: relative; overflow: hidden; } .tracker::after { content: ""; position: absolute; inset: auto 0 0 0; height: 22px; background-image: var(--barcode); opacity: .16; } .tracker .tabs { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; } .tracker .tab { padding: 11px 17px; border-radius: var(--radius-sm); background: #fff; color: var(--ink); border: 2px solid var(--line); font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .18s var(--ease); } .tracker .tab:hover { border-color: var(--blue); transform: translateY(-2px); } .tracker .tab.is-active { background: var(--blue); color: #fff; border-color: var(--blue); box-shadow: 3px 3px 0 var(--red); } .tracker .field { margin-bottom: 16px; } [data-tracker-hint] { font-size: .85rem; color: var(--muted); margin-top: 8px; transition: color .2s ease; font-weight: 600; } [data-tracker-hint][data-state="ok"] { color: var(--ink); font-weight: 800; } [data-tracker-hint][data-state="warn"] { color: var(--ink); } [data-tracker-hint][data-state="warn"]::before, [data-tracker-hint][data-state="ok"]::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 7px; background: var(--red); transform: skewX(-18deg); } [data-tracker-hint][data-state="ok"]::before { background: var(--blue); } /* ========================================================================== FOOTER — its own designed section ========================================================================== */ .site-footer { position: relative; background: var(--blue); color: rgba(255, 255, 255, .74); padding: 0 0 32px; overflow: hidden; isolation: isolate; } .site-footer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 10px; background: var(--red); z-index: 2; } .site-footer::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 46px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 46px); z-index: -1; pointer-events: none; } .site-footer > .container { padding-top: clamp(64px, 8vw, 104px); } .site-footer h4 { color: #fff; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid rgba(255, 255, 255, .16); position: relative; } .site-footer h4::after { content: ""; position: absolute; inset: auto auto -2px 0; width: 32px; height: 2px; background: var(--red); } .site-footer a { color: rgba(255, 255, 255, .74); display: block; padding: 7px 0; font-size: .93rem; font-weight: 500; position: relative; width: fit-content; transition: color .2s ease, transform .2s var(--ease); } .site-footer a::before { content: ""; position: absolute; inset: 50% 100% auto auto; width: 0; height: 2px; background: var(--red); transform: translateY(-50%); transition: width .2s var(--ease); } .site-footer a:hover { color: #fff; transform: translateX(12px); } .site-footer a:hover::before { width: 8px; margin-right: 4px; } .footer-grid { display: grid; gap: 44px; grid-template-columns: 1.5fr repeat(4, 1fr); } .footer-brand .brand { color: #fff; margin-bottom: 20px; } .footer-brand .brand:hover { transform: none; } .footer-brand .brand-logo { height: 58px; } .footer-brand p { color: rgba(255, 255, 255, .68); max-width: 34ch; font-size: .94rem; margin: 0 0 20px; } .footer-brand .brand::before, .footer-brand a.brand::before { display: none; } .footer-brand a.brand:hover { transform: none; } .footer-info { display: grid; gap: 7px; font-size: .93rem; color: rgba(255, 255, 255, .68); } .footer-info strong { color: #fff; font-weight: 700; } /* Live "today" line — JS fills the inner span each minute */ .footer-today { color: #fff; font-weight: 700; } .footer-today [data-hours-today] { color: rgba(255, 255, 255, .68); font-weight: 500; } /* Footer hours — inverted, with today's row called out in red */ .footer-hours { margin-top: 22px; font-size: .88rem; max-width: 320px; } .footer-hours caption { text-align: left; color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding-bottom: 10px; } .footer-hours td { color: rgba(255, 255, 255, .68); border-bottom-color: rgba(255, 255, 255, .12); padding: 9px 0; } .footer-hours td:last-child { color: rgba(255, 255, 255, .6); } .footer-hours tr.today td { color: #fff; font-weight: 800; } .footer-hours tr.today td:first-child::before { background: var(--red); } .site-footer .social-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; padding: 0; } .site-footer .social-row a.social-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .08); color: #fff; border: 2px solid rgba(255, 255, 255, .18); padding: 0; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s var(--ease), box-shadow .2s var(--ease); } .site-footer .social-row a.social-link::before { display: none; } .site-footer .social-row a.social-link:hover { background: #fff; color: var(--blue); border-color: #fff; transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--red); } .site-footer .social-row a.social-link svg { width: 19px; height: 19px; } /* Footer newsletter / visit CTA */ .footer-cta { margin-top: clamp(48px, 6vw, 72px); padding: 32px; border: 2px solid rgba(255, 255, 255, .22); border-radius: var(--radius); display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; background: rgba(255, 255, 255, .04); position: relative; overflow: hidden; } .footer-cta::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--red); } .footer-cta h3 { color: #fff; font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: -.025em; margin: 0 0 6px; } .footer-cta p { color: rgba(255, 255, 255, .7); margin: 0; font-size: .95rem; } .footer-cta .row { flex-shrink: 0; } .footer-cta a { display: inline-flex; padding: 16px 26px; } .footer-cta a:hover { transform: translate(-3px, -3px); } .footer-cta a::before { display: none; } /* `.site-footer a` (0,1,1) outranks `.btn--light` (0,1,0) and would paint the label white on a white button. Restate button colors at higher specificity. */ .site-footer .btn--light { color: var(--blue); } .site-footer .btn--light:hover { color: var(--blue); } .site-footer .btn--outline { color: #fff; } .site-footer .btn--outline:hover { color: var(--blue); } /* Giant footer wordmark */ .footer-wordmark { margin-top: clamp(48px, 6vw, 72px); font-family: var(--font-display); font-size: clamp(3rem, 13vw, 11rem); line-height: .8; letter-spacing: -.045em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .16); text-align: center; user-select: none; pointer-events: none; white-space: nowrap; overflow: hidden; } .footer-bottom { border-top: 2px solid rgba(255, 255, 255, .14); margin-top: 40px; padding-top: 26px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; font-size: .82rem; font-weight: 600; color: rgba(255, 255, 255, .58); text-transform: uppercase; letter-spacing: .06em; } /* The generic `.site-footer a` is a block-level column link with a slide-right hover — wrong inside this inline bar. Reset it to a red-underlined inline link. */ .footer-bottom a { display: inline; width: auto; padding: 0; font-size: inherit; font-weight: 800; color: #fff; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: text-decoration-color .2s ease; } .footer-bottom a::before { display: none; } .footer-bottom a:hover { transform: none; color: #fff; text-decoration-color: #fff; } /* ========================================================================== IMAGE PRESENTATION — framed, offset, layered ========================================================================== */ .img-frame { position: relative; border: 2px solid var(--blue); border-radius: var(--radius); overflow: hidden; box-shadow: 14px 14px 0 var(--red); background: var(--bg-soft); } .img-frame img { width: 100%; height: 100%; object-fit: cover; } .img-frame--tilt { transform: rotate(-1.6deg); transition: transform .4s var(--ease); } .img-frame--tilt:hover { transform: rotate(0deg) scale(1.01); } .img-stack { position: relative; } .img-stack .img-frame + .img-frame { position: absolute; inset: auto -8% -14% auto; width: 52%; box-shadow: 10px 10px 0 var(--blue); border-color: var(--blue); } /* ========================================================================== NOTARY — live availability badge The hours engine replaces this element's textContent, so the status dot has to be a ::before pseudo-element; a child node would be wiped on every tick. ========================================================================== */ .notary-pill { display: inline-flex; align-items: center; gap: .6rem; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 10px 16px; border-radius: var(--radius-sm); border: 2px solid var(--line); background: rgba(0, 0, 122, .05); color: var(--ink); } .notary-pill::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--muted-2); flex-shrink: 0; } .notary-pill[data-status="open"] { border-color: var(--blue); background: rgba(0, 0, 122, .07); } .notary-pill[data-status="open"]::before { background: var(--blue); animation: pulse 2s ease-out infinite; } .notary-pill[data-status="closed"] { border-color: var(--red-line); background: var(--red-soft); } .notary-pill[data-status="closed"]::before { background: var(--red); } /* ========================================================================== UTILITIES ========================================================================== */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .text-center { text-align: center; } .muted { color: var(--muted); } .mb-0 { margin-bottom: 0 !important; } .mb-2 { margin-bottom: 12px !important; } .mb-4 { margin-bottom: 28px !important; } .mt-4 { margin-top: 28px !important; } .tight { letter-spacing: -.025em; } .kbd { display: inline-block; padding: 3px 9px; font-size: .82rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: #fff; border: 2px solid var(--line); border-bottom-width: 3px; border-radius: var(--radius-sm); color: var(--ink); font-weight: 600; } .badge { display: inline-flex; align-items: center; gap: 7px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; background: var(--blue); color: #fff; padding: 6px 11px; border-radius: var(--radius-sm); } .badge--warn { background: #fff; color: var(--ink); border: 2px solid var(--red); padding: 4px 9px; } .badge--success { background: var(--blue); color: #fff; } .notice { background: #fff; border: 2px solid var(--line); border-left: 6px solid var(--red); padding: 16px 18px; border-radius: var(--radius-sm); font-size: .92rem; color: var(--muted); } .metric { background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); padding: 28px; transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .25s ease; } .metric:hover { transform: translate(-3px, -5px); box-shadow: 8px 10px 0 rgba(0, 0, 122, .12); border-color: var(--blue); } .metric .num { font-family: var(--font-display); font-size: clamp(2.2rem, 3.6vw, 2.9rem); letter-spacing: -.035em; color: var(--ink); line-height: 1; } .metric .label { color: var(--muted); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-top: 10px; } /* ========================================================================== REVEAL ANIMATIONS ========================================================================== */ /* Scoped to .js (set by an inline head script): if scripting is unavailable or main.js fails, every section stays visible instead of the page rendering blank. */ .js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .js [data-reveal].is-visible { opacity: 1; transform: translateY(0); } .js [data-reveal-delay="100"] { transition-delay: .1s; } .js [data-reveal-delay="200"] { transition-delay: .2s; } .js [data-reveal-delay="300"] { transition-delay: .3s; } .js [data-reveal-delay="400"] { transition-delay: .4s; } /* ========================================================================== RESPONSIVE — recompose, never just stack ========================================================================== */ /* The header carries brand + 7 nav items + status + 2 CTAs — more than fits at most widths. Shed the lowest-value pieces first, in order, so the primary CTA is never clipped. */ @media (max-width: 1300px) { .nav-link { padding: 10px 9px; font-size: .85rem; } .primary-nav { gap: 0; margin-left: 0; } .nav-link::after { inset: auto 9px 4px 9px; } .header-bar { gap: 14px; } } @media (max-width: 1120px) { .header-cta .status-pill { display: none; } /* hours also live in the footer */ } @media (max-width: 1100px) { .footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); } .footer-grid > div:last-child { grid-column: 2 / -1; } } @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } /* Type leads on narrow screens — the headline is the hook, not the artwork. */ .hero-visual { order: 0; max-width: 520px; margin: 8px auto 0; width: 100%; box-shadow: 10px 10px 0 var(--red); } .hero-card { max-width: 220px; font-size: .82rem; } .hero-card.card-1 { left: -4%; } .hero-card.card-2 { right: -4%; } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } .footer-grid > div:last-child { grid-column: auto; } .split { grid-template-columns: 1fr; } /* Interior pages set 2-col via inline styles — collapse them here. minmax(0,1fr), not 1fr: a bare 1fr is minmax(auto,1fr), and the auto floor won't shrink below the content's min-content width — which let wide children (e.g. the hours table) push the column past the container on narrow screens. */ .grid[style*="1fr 1fr"], .grid[style*="1.1fr .9fr"], .grid[style*="1fr 1.2fr"] { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; } .footer-cta { flex-direction: column; align-items: flex-start; } } /* Below this the 7-item nav can't breathe — hand tablet the drawer, which is a better target size than a cramped rail anyway. */ @media (max-width: 1024px) { .primary-nav, .header-cta .status-pill, .header-cta .btn--secondary { display: none; } .hamburger { display: inline-flex; } .mobile-drawer { display: block; } .header-cta .btn--primary { padding: 11px 16px; font-size: .8rem; } .header-bar { height: 72px; } .site-header.is-scrolled .header-bar { height: 64px; } } @media (max-width: 640px) { .container, .container-narrow { padding: 0 20px; } .footer-grid { grid-template-columns: 1fr; gap: 34px; } .header-bar { gap: 12px; } .brand-logo { height: 38px; } .site-header.is-scrolled .brand-logo { height: 34px; } .section { padding: 72px 0; } .hero { padding-top: 48px; } /* Three cards on a ~335px canvas bury the artwork. The whole visual is aria-hidden decoration, so keep one card for life and drop the rest. */ .hero-card.card-1, .hero-card.card-3 { display: none; } .hero-card.card-2 { right: -10px; bottom: 14%; max-width: 200px; animation: none; } .card, .persona-card, .split-card, .plan, .step, .info-card, .tracker { padding: 24px; } .cta-band { box-shadow: 8px 8px 0 var(--red); } .hero-visual { box-shadow: 8px 8px 0 var(--red); } .tracker { box-shadow: 8px 8px 0 var(--red); } .footer-cta a { width: 100%; } .footer-cta .row { width: 100%; } /* Ragged button widths read as sloppy at this size — go full-bleed. */ .hero-cta { flex-direction: column; align-items: stretch; } .hero-cta .btn { width: 100%; } .cta-band .row { flex-direction: column; align-items: stretch; } .cta-band .row .btn { width: 100%; } /* Keep tables readable */ .compare { overflow-x: auto; } .compare-table { min-width: 560px; } } @media (max-width: 420px) { .hero-card { max-width: 180px; padding: 10px 12px; } .hero-card .icon { width: 30px; height: 30px; } .hero-card .icon svg { width: 15px; height: 15px; } } /* ========================================================================== REDUCED MOTION ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .js [data-reveal] { opacity: 1; transform: none; } .hero h1 .mark::after { transform: scaleX(1); } .marquee-track { animation: none; } .scroll-progress { display: none; } } /* ========================================================================== PRINT ========================================================================== */ @media print { .site-header, .site-footer, .hero-visual, .cta-band, .mobile-drawer, .scroll-progress, .hero-marquee, .ghost-type, .footer-wordmark { display: none !important; } body { color: #000; background: #fff; } * { box-shadow: none !important; } }