/* ========================================================= Mallen Services — shared stylesheet Used by: index.html, support.html ========================================================= */ :root { --indigo: #4B0082; --indigo-deep: #2A0049; --orange: #FF4500; --orange-warm: #E63E00; --charcoal: #2B2B2B; --charcoal-soft: #3A3A3A; --cream: #FBFAF7; --cream-warm: #F4EFE6; --line: rgba(43, 43, 43, 0.12); --line-dark: rgba(251, 250, 247, 0.14); --f-display: 'Fraunces', Georgia, serif; --f-body: 'Inter Tight', -apple-system, sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, monospace; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: auto; } body { margin: 0; background: var(--cream); color: var(--charcoal); font-family: var(--f-body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } body.modal-open { overflow: hidden; } ::selection { background: var(--orange); color: var(--cream); } /* ===== typography utilities ===== */ .serif { font-family: var(--f-display); font-weight: 400; letter-spacing: -0.02em; } .mono { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; } .eyebrow { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--charcoal); opacity: 0.6; } /* ===== layout shell ===== */ .wrap { max-width: 1140px; margin: 0 auto; padding: 0 40px; } @media (min-width: 901px) { /* On the homepage, shift content right so the side rail has room to expand on hover. Subpages don't have the rail (they use the top nav bar), so they stay at the centered default above. v6.7.12 — was previously global which silently shifted services and contact pages right, and shifted the new wrap-based footer on every non-homepage page. Now scoped to body.home-page only. */ body.home-page .wrap { padding-left: 280px; padding-right: 60px; max-width: 1280px; } } @media (max-width: 720px) { .wrap { padding: 0 22px; } } /* ===== logo theming ===== */ svg.mallen-logo { display: block; height: 48px; width: auto; } .on-light { --logo-outline: #F1F1F1; --logo-mallen: var(--indigo); --logo-services: var(--orange); --logo-cursor: #FFFFFF; } .on-dark { --logo-outline: rgba(251, 250, 247, 0.25); --logo-mallen: var(--cream); --logo-services: var(--orange); --logo-cursor: var(--cream); } /* ===== nav: SIDE RAIL (desktop) + HAMBURGER OVERLAY (mobile) ===== */ /* Top bar — used on subpages (support, privacy, terms, surveillance). Hidden on the homepage (which has the side rail instead). */ nav.top { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 18px 32px; display: none; /* default: hidden — homepage doesn't render this nav */ justify-content: space-between; align-items: center; transition: background 0.4s ease, backdrop-filter 0.4s ease, padding 0.3s ease; } /* Subpages opt-in to showing the top bar by adding .has-top-nav to — see body.support-page / body.legal-page rules */ body.support-page nav.top, body.legal-page nav.top { display: flex; } nav.top.scrolled { background: rgba(251, 250, 247, 0.88); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); padding: 12px 32px; } nav.top .brand { text-decoration: none; display: flex; align-items: center; } nav.top .brand svg.mallen-logo { height: 36px; transition: height 0.3s ease; } nav.top.scrolled .brand svg.mallen-logo { height: 30px; } /* Subpage "Back to home" text link */ nav.top .nav-links { display: flex; align-items: center; } nav.top .nav-back-home { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--charcoal); font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 10px 6px; transition: color 0.2s ease, gap 0.2s ease; } nav.top .nav-back-home svg { width: 18px; height: 18px; transition: transform 0.2s ease; } nav.top .nav-back-home:hover { color: var(--orange); } nav.top .nav-back-home:hover svg { transform: translateX(-3px); } nav.top .nav-back-home:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 4px; } @media (max-width: 720px) { nav.top { padding: 14px 20px; } nav.top.scrolled { padding: 10px 20px; } nav.top .brand svg.mallen-logo { height: 30px; } nav.top.scrolled .brand svg.mallen-logo { height: 26px; } nav.top .nav-back-home { font-size: 0.72rem; gap: 6px; padding: 8px 4px; } nav.top .nav-back-home svg { width: 16px; height: 16px; } } /* Hamburger button */ .hamburger { width: 44px; height: 44px; background: var(--charcoal); color: var(--cream); border: none; border-radius: 50%; cursor: pointer; display: grid; place-items: center; transition: background 0.2s, transform 0.2s; } .hamburger:hover { background: var(--indigo); } .hamburger svg { width: 18px; height: 18px; } /* Side rail (desktop) — single expanding pill: icons always visible, labels reveal on hover */ nav.rail { position: fixed; left: 24px; top: 50%; transform: translateY(-50%); z-index: 50; pointer-events: none; } /* The pill — expands sideways on hover */ nav.rail .rail-items { display: flex; flex-direction: column; gap: 2px; padding: 8px; pointer-events: auto; background: rgba(43, 43, 43, 0.94); backdrop-filter: blur(12px); border-radius: 22px; box-shadow: 0 12px 40px -12px rgba(0,0,0,0.3), 0 0 0 1px rgba(251,250,247,0.06); transition: border-radius 0.3s ease; } /* Each item is a single horizontal row: [icon][label] */ nav.rail .rail-item { display: flex; align-items: center; gap: 0; width: 44px; height: 44px; padding: 0; border-radius: 14px; cursor: pointer; text-decoration: none; color: rgba(251, 250, 247, 0.6); transition: width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), gap 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), padding 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.2s ease, background 0.25s ease; overflow: hidden; white-space: nowrap; } nav.rail .rail-item .rail-icon-wrap { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; } nav.rail .rail-item svg { width: 20px; height: 20px; } nav.rail .rail-item .rail-label { font-family: var(--f-display); font-size: 0.95rem; font-weight: 400; letter-spacing: -0.01em; opacity: 0; transform: translateX(-8px); transition: opacity 0.25s ease 0.05s, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s; color: inherit; pointer-events: none; } /* Hover state: pill expands, labels reveal */ nav.rail:hover .rail-item, nav.rail.expanded .rail-item { width: 240px; padding-right: 18px; } nav.rail:hover .rail-item .rail-label, nav.rail.expanded .rail-item .rail-label { opacity: 1; transform: translateX(0); } /* Per-item hover (after the pill is expanded) */ nav.rail .rail-item:hover { color: var(--cream); } /* Active state: orange inner pill */ nav.rail .rail-item.active { color: var(--cream); background: var(--orange); box-shadow: 0 4px 14px -4px rgba(255, 69, 0, 0.6); } /* Brand at top-left — single Mallen Services logo with selective fade-in-place. Inside the SVG, paths are tagged either .ms-keep (the M and S letterforms) or .ms-fade (the "allen" + "ervices" letters and mouse cursor). When the user scrolls past the hero, .ms-fade paths transition opacity 1 → 0, leaving only the M and S visible. The remaining paths cannot move because they're the same DOM nodes throughout — zero pixel jump. */ nav.rail-brand { position: fixed; top: 24px; left: 24px; pointer-events: auto; text-decoration: none; z-index: 51; } nav.rail-brand a { display: flex; align-items: center; text-decoration: none; } nav.rail-brand .brand-full { display: flex; align-items: center; } nav.rail-brand svg.mallen-logo { height: 60px; width: auto; display: block; } /* The fade group: all paths NOT part of the M+S letterforms */ nav.rail-brand svg.mallen-logo .ms-fade { transition: opacity 0.55s ease; } body.brand-scrolled nav.rail-brand svg.mallen-logo .ms-fade { opacity: 0; pointer-events: none; } /* Hide rail components on mobile */ @media (max-width: 900px) { nav.rail, nav.rail-brand { display: none; } } /* Hide rail on mobile */ @media (max-width: 900px) { nav.rail { display: none; } nav.top { display: flex; } body { padding-top: 0; } /* mobile content starts at top */ } /* Mobile full-screen overlay menu */ .mobile-menu { position: fixed; inset: 0; z-index: 60; background: var(--charcoal); color: var(--cream); display: none; flex-direction: column; padding: 80px 32px 40px; overflow-y: auto; } .mobile-menu.open { display: flex; } .mobile-menu .mobile-menu-close { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; background: rgba(251, 250, 247, 0.08); color: var(--cream); border: 1px solid var(--line-dark); border-radius: 50%; cursor: pointer; display: grid; place-items: center; transition: background 0.2s; } .mobile-menu .mobile-menu-close:hover { background: rgba(251, 250, 247, 0.15); } .mobile-menu .mobile-menu-close svg { width: 18px; height: 18px; } .mobile-menu-title { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.5; margin-bottom: 24px; } .mobile-menu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; flex: 1; } .mobile-menu-list a { display: flex; align-items: baseline; gap: 16px; color: var(--cream); text-decoration: none; font-family: var(--f-display); font-size: clamp(1.4rem, 4vw, 1.9rem); font-weight: 300; letter-spacing: -0.02em; padding: 14px 0; border-bottom: 1px solid var(--line-dark); transition: color 0.2s ease, padding-left 0.2s ease; } .mobile-menu-list a:hover { color: var(--orange); padding-left: 8px; } .mobile-menu-list a.active { color: var(--orange); } .mobile-menu-list a .num { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.15em; opacity: 0.5; width: 28px; flex-shrink: 0; } .mobile-menu-list a em { font-style: italic; color: var(--orange); font-weight: 400; } /* Current-page indicator on subpages. Mirrors the .mobile-menu-list a styling (same layout/font/sizing/borders) but uses a span — visually distinct (orange) and not clickable. Pattern matches the desktop nav's . */ .mobile-menu-list .nav-current { display: flex; align-items: baseline; gap: 16px; color: var(--orange); font-family: var(--f-display); font-size: clamp(1.4rem, 4vw, 1.9rem); font-weight: 400; letter-spacing: -0.02em; padding: 14px 0; border-bottom: 1px solid var(--line-dark); cursor: default; } .mobile-menu-list .nav-current .num { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.15em; opacity: 0.7; width: 28px; flex-shrink: 0; color: var(--orange); } .mobile-menu-cta { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; } @media (min-width: 901px) { .mobile-menu { display: none !important; } body.mobile-menu-open { overflow: auto; } } /* ===== Stack section (NEW in v6.1a — placeholder visual until v6.1c) ===== */ section.stack { background: var(--cream-warm); padding: 96px 0; position: relative; } section.stack .section-num { color: var(--orange); } .stack-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .stack-copy { max-width: 52ch; } .stack-copy p { font-size: 1.08rem; color: var(--charcoal-soft); margin: 0 0 18px; line-height: 1.55; } .stack-copy p em { font-style: italic; color: var(--indigo); } .stack-copy ul { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; } .stack-copy ul li { display: flex; gap: 14px; align-items: baseline; font-size: 0.96rem; color: var(--charcoal); } .stack-copy ul li::before { content: ''; width: 6px; height: 6px; background: var(--orange); border-radius: 50%; flex-shrink: 0; margin-top: 8px; } /* Placeholder visual — distinct enough from hero/method to avoid duplication */ /* Stack scene wrapper (v6.1c) */ .stack-scene-wrap { position: relative; } svg.stack-scene { display: block; width: 100%; height: auto; max-width: 640px; margin: 0 auto; } /* Pulse rings emanating from the appliance (suggests "always running") */ svg.stack-scene .pulse-ring { transform-origin: 0 0; animation: stack-pulse 3.6s cubic-bezier(0.2, 0.7, 0.2, 1) infinite; opacity: 0; } svg.stack-scene .pulse-ring-2 { animation-delay: 1.8s; } @keyframes stack-pulse { 0% { r: 50; opacity: 0.6; } 100% { r: 90; opacity: 0; } } /* Data packets traveling along the connection paths */ svg.stack-scene .stack-packet { opacity: 0; } /* Inbound packets: devices → appliance */ svg.stack-scene .stack-packet-in { animation: stack-packet-in 4.5s ease-in infinite; } svg.stack-scene .stack-packet-1 { animation-delay: 0s; offset-path: path("M 95 95 Q 180 130 245 260"); } svg.stack-scene .stack-packet-2 { animation-delay: 1.5s; offset-path: path("M 78 160 Q 170 175 245 260"); } svg.stack-scene .stack-packet-3 { animation-delay: 3.0s; offset-path: path("M 98 420 Q 180 360 245 290"); } /* Tunnel packet: appliance → stack (the single encrypted outbound path) */ svg.stack-scene .stack-packet-tunnel { animation: stack-packet-tunnel 3.8s ease-in-out infinite; animation-delay: 1.2s; offset-path: path("M 320 270 L 540 270"); } @keyframes stack-packet-in { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } } @keyframes stack-packet-tunnel { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } } /* Reduced-motion: kill the animations but keep the static scene visible */ @media (prefers-reduced-motion: reduce) { svg.stack-scene .pulse-ring, svg.stack-scene .stack-packet { animation: none; opacity: 0; } } @media (max-width: 820px) { .stack-grid { grid-template-columns: 1fr; gap: 40px; } svg.stack-scene { max-width: 100%; } } /* ===== buttons (shared) ===== */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 100px; text-decoration: none; font-size: 0.96rem; font-weight: 500; transition: all 0.25s ease; cursor: pointer; border: none; font-family: var(--f-body); } .btn-primary { background: var(--charcoal); color: var(--cream); } .btn-primary:hover { background: var(--indigo); transform: translateY(-1px); } .btn-primary .arrow { transition: transform 0.25s; } .btn-primary:hover .arrow { transform: translateX(4px); } .btn-ghost { color: var(--charcoal); background: transparent; border: 1px solid var(--line); } .btn-ghost:hover { border-color: var(--charcoal); } .btn-light { background: var(--cream); color: var(--charcoal); } .btn-light:hover { background: var(--orange); color: var(--cream); } .btn-light-ghost { background: transparent; color: var(--cream); border: 1px solid var(--line-dark); } .btn-light-ghost:hover { border-color: var(--orange); color: var(--orange); } /* ===== hero ===== */ section.hero { position: relative; min-height: 100vh; padding: 96px 0 100px; overflow: hidden; } .hero-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse at 30% 40%, black 0%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 30% 40%, black 0%, transparent 70%); opacity: 0.7; } .hero-topology { position: absolute; top: 0; right: -10%; width: 70%; height: 100%; opacity: 0.9; pointer-events: none; } @media (max-width: 980px) { .hero-topology { opacity: 0.22; right: -30%; width: 100%; } } .hero-inner { position: relative; z-index: 2; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 100px; background: rgba(251, 250, 247, 0.7); backdrop-filter: blur(4px); margin-bottom: 40px; } .hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 0 var(--orange); animation: pulse 2.2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 69, 0, 0.55); } 70% { box-shadow: 0 0 0 10px rgba(255, 69, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 69, 0, 0); } } h1.hero-h { font-family: var(--f-display); font-weight: 300; font-size: clamp(2.4rem, 6.4vw, 5.8rem); line-height: 0.98; letter-spacing: -0.035em; margin: 0 0 16px; max-width: 16ch; } h1.hero-h em { font-style: italic; color: var(--indigo); font-weight: 400; } .hero-subhead { max-width: 50ch; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(1.05rem, 1.8vw, 1.32rem); line-height: 1.4; color: var(--indigo); margin: 0 0 26px; letter-spacing: -0.005em; } .hero-lede { max-width: 54ch; font-size: 1.16rem; line-height: 1.5; color: var(--charcoal-soft); margin: 0 0 44px; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .scroll-cue { position: absolute; bottom: 38px; left: 40px; z-index: 2; display: flex; align-items: center; gap: 12px; color: var(--charcoal); opacity: 0.7; } @media (max-width: 720px) { .scroll-cue { left: 22px; bottom: 24px; } } .scroll-cue .line { width: 28px; height: 1px; background: var(--charcoal); animation: scrollline 2.2s infinite; transform-origin: left; } @keyframes scrollline { 0% { transform: scaleX(0); } 50% { transform: scaleX(1); } 100% { transform: scaleX(0); transform-origin: right; } } /* ===== section scaffolding ===== */ section { padding: 96px 0; position: relative; } @media (max-width: 720px) { section { padding: 80px 0; } } .section-head { margin-bottom: 64px; } .section-title { font-family: var(--f-display); font-size: clamp(1.9rem, 4.2vw, 3.6rem); font-weight: 400; letter-spacing: -0.025em; line-height: 1.05; margin: 0; max-width: 20ch; } .section-title em { font-style: italic; color: var(--indigo); } @media (max-width: 720px) { .section-head { margin-bottom: 40px; } } /* ===== problem ===== */ section.problem { background: var(--cream); } .problem-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; } .problem-text p { font-size: 1.15rem; line-height: 1.55; max-width: 44ch; margin: 0 0 20px; color: var(--charcoal-soft); } .problem-text p:first-child { font-family: var(--f-display); font-size: 1.7rem; line-height: 1.25; color: var(--charcoal); letter-spacing: -0.02em; font-weight: 300; } .problem-text p em { font-style: italic; color: var(--indigo); } .problem-contrast { border-left: 1px solid var(--line); padding-left: 40px; } .problem-contrast h3 { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 18px; color: var(--charcoal); opacity: 0.6; } .contrast-item { padding: 20px 0; border-bottom: 1px solid var(--line); } .contrast-item:last-child { border-bottom: none; } .contrast-item .before { font-size: 0.82rem; color: var(--charcoal); opacity: 0.55; margin-bottom: 6px; display: block; } .contrast-item .after { font-size: 1.02rem; color: var(--charcoal); } .contrast-item .after em { font-style: italic; color: var(--indigo); } @media (max-width: 980px) { .problem-grid { grid-template-columns: 1fr; } .problem-contrast { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 32px; margin-top: 20px; } } /* ===== pullquotes ===== */ .pullquote { background: var(--cream-warm); padding: 120px 0; position: relative; } .pullquote-inner { max-width: 960px; margin: 0 auto; position: relative; } .pullquote-mark { font-family: var(--f-display); font-weight: 400; font-size: 10rem; line-height: 0.8; color: var(--orange); opacity: 0.22; position: absolute; top: -40px; left: -20px; font-style: italic; user-select: none; } .pullquote-text { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.6rem, 3.4vw, 2.7rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--charcoal); margin: 0 0 40px; position: relative; z-index: 2; } .pullquote-text em { font-style: italic; color: var(--indigo); } .pullquote-attr { display: flex; gap: 14px; align-items: center; border-top: 1px solid var(--line); padding-top: 24px; } .pullquote-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--indigo); color: var(--cream); display: grid; place-items: center; font-family: var(--f-display); font-size: 1.1rem; flex: 0 0 48px; } .pullquote-meta { font-size: 0.9rem; color: var(--charcoal-soft); line-height: 1.45; } .pullquote-meta strong { font-family: var(--f-body); font-weight: 600; color: var(--charcoal); display: block; font-size: 0.98rem; } .pullquote-meta .role { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.65; margin-top: 4px; display: block; } section.pullquote-2 { background: var(--cream); padding: 120px 0; border-top: 1px solid var(--line); } .pullquote-2 .pullquote-inner { max-width: 960px; } .pullquote-2 .pullquote-text { font-size: clamp(1.5rem, 3vw, 2.4rem); } /* ===== Method section: redesign-in-progress banner (temporary, removed in v6.1b) ===== */ .method-redesign-banner { background: rgba(255, 69, 0, 0.08); border: 1px dashed rgba(255, 69, 0, 0.4); border-radius: 8px; padding: 14px 20px; margin-bottom: 48px; font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.05em; color: var(--orange); text-align: center; } .method-redesign-banner strong { color: var(--cream); font-weight: 600; } /* ===== Method section ===== */ section.method { background: var(--charcoal); color: var(--cream); padding: 96px 0; overflow: hidden; } section.method .section-num { color: var(--orange); } section.method .section-title { color: var(--cream); } section.method .section-title em { color: var(--cream); opacity: 0.7; } .method-diagram { width: 100%; max-width: 1080px; margin: 0 auto; display: block; } .method-path { stroke-dasharray: 1200; stroke-dashoffset: 1200; } .method-stage-svg { opacity: 0.2; transition: opacity 0.6s ease; } .method-stage-svg.lit { opacity: 1; } .method-stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 70px; } .method-stage { opacity: 0.35; transition: opacity 0.6s ease; } .method-stage.lit { opacity: 1; } .method-stage .stage-num { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--orange); margin-bottom: 14px; } .method-stage h4 { font-family: var(--f-display); font-size: 1.45rem; font-weight: 400; margin: 0 0 12px; letter-spacing: -0.02em; } .method-stage p { font-size: 0.94rem; line-height: 1.5; color: rgba(251, 250, 247, 0.75); margin: 0; } @media (max-width: 820px) { .method-stages { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 520px) { .method-stages { grid-template-columns: 1fr; } } /* ===== audiences ===== */ section.audiences { background: var(--cream); padding: 96px 0; } .audiences-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .audience-card { padding: 42px 32px; border: 1px solid var(--line); border-radius: 16px; background: var(--cream); transition: all 0.4s ease; position: relative; overflow: hidden; } .audience-card::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 2px; background: var(--orange); transition: width 0.5s ease; } .audience-card:hover { border-color: var(--charcoal); transform: translateY(-2px); } .audience-card:hover::before { width: 100%; } .audience-icon { width: 44px; height: 44px; margin-bottom: 24px; color: var(--indigo); } .audience-card h4 { font-family: var(--f-display); font-size: 1.5rem; font-weight: 400; letter-spacing: -0.02em; margin: 0 0 12px; } .audience-card h4 em { font-style: italic; color: var(--indigo); } .audience-card p { margin: 0; color: var(--charcoal-soft); font-size: 0.98rem; line-height: 1.5; } @media (max-width: 820px) { .audiences-grid { grid-template-columns: 1fr; gap: 20px; } .audience-card { padding: 32px 28px; } } /* ===== services ===== */ section.services { background: var(--cream-warm); padding: 150px 0 140px; } .services-intro { max-width: 62ch; font-family: var(--f-display); font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.3; font-weight: 300; letter-spacing: -0.015em; margin: 0 0 56px; color: var(--charcoal); } .services-intro em { font-style: italic; color: var(--indigo); } /* Tab + panel component (v6.1b.5) — replaces the long vertical service list */ .services-component { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .services-tabs { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .services-tabs::-webkit-scrollbar { display: none; } .services-tab { flex: 1 1 0; min-width: 130px; padding: 16px 18px; background: transparent; border: 0; border-right: 1px solid var(--line); cursor: pointer; text-align: center; display: flex; align-items: center; justify-content: center; position: relative; transition: background 0.25s ease, color 0.25s ease; font-family: var(--f-body); color: var(--charcoal); } .services-tab:last-child { border-right: 0; } .services-tab:hover { background: rgba(75,0,130,0.04); } .services-tab:focus-visible { outline: 2px solid var(--indigo); outline-offset: -2px; } .services-tab .srv-label { font-family: var(--f-display); font-size: 1.05rem; font-weight: 400; letter-spacing: -0.01em; color: var(--charcoal); transition: color 0.25s ease; } .services-tab.active { background: rgba(75,0,130,0.06); } .services-tab.active .srv-label { color: var(--indigo); } /* Active-tab indicator strip at the bottom of each tab */ .services-tab::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: transparent; transition: background 0.2s ease; } .services-tab.active::after { background: var(--orange); } /* Active-panel area — fixed minimum height so the panel doesn't jump as content varies */ .services-panels { position: relative; min-height: 220px; padding: 40px 32px 48px; background: var(--cream); } .services-panel { display: grid; grid-template-columns: 1fr 1.2fr; gap: 50px; align-items: start; animation: panel-fade-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; } .services-panel[hidden] { display: none; } @keyframes panel-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .services-panel .service-title { font-family: var(--f-display); font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 400; letter-spacing: -0.02em; margin: 0; line-height: 1.1; color: var(--charcoal); } .services-panel .service-title em { font-style: italic; color: var(--indigo); } .services-panel .service-body { color: var(--charcoal-soft); font-size: 1rem; line-height: 1.6; } .services-panel .service-body p { margin: 0; } .services-panel .service-body strong { color: var(--charcoal); font-weight: 500; } /* Auto-rotation progress bar at the bottom of the panel area */ .services-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(43,43,43,0.06); overflow: hidden; } .services-progress-bar { height: 100%; width: 0; background: var(--orange); transform-origin: left center; transition: none; } /* When .rotating is on the component, animate the bar */ .services-component.rotating .services-progress-bar { width: 100%; animation: srv-progress 7s linear forwards; } @keyframes srv-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Respect reduced motion: no auto-rotation animation */ @media (prefers-reduced-motion: reduce) { .services-component.rotating .services-progress-bar { animation: none; } } @media (max-width: 820px) { .services-panel { grid-template-columns: 1fr; gap: 24px; } .services-tab { min-width: 110px; padding: 14px 14px; } .services-tab .srv-label { font-size: 0.95rem; } .services-panels { padding: 32px 22px 40px; } } .service-body strong { color: var(--charcoal); font-weight: 500; } @media (max-width: 820px) { .service-row { grid-template-columns: 1fr; gap: 10px; padding: 32px 0; } .service-row:hover { padding-left: 0; } } /* ===== stats ===== */ section.stats { background: var(--indigo-deep); color: var(--cream); padding: 96px 0; position: relative; overflow: hidden; } .stats-bg { position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 30%, rgba(255, 69, 0, 0.12), transparent 40%), radial-gradient(circle at 80% 70%, rgba(75, 0, 130, 0.3), transparent 50%); pointer-events: none; } .stats-head { position: relative; z-index: 2; margin-bottom: 72px; } .stats-head .eyebrow { color: var(--orange); opacity: 1; } .stats-head h2 { font-family: var(--f-display); font-size: clamp(1.9rem, 4vw, 3.2rem); font-weight: 300; letter-spacing: -0.025em; margin: 20px 0 0; max-width: 22ch; line-height: 1.05; color: var(--cream); } .stats-head h2 em { font-style: italic; color: var(--orange); } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; position: relative; z-index: 2; } .stat { border-top: 1px solid var(--line-dark); padding-top: 22px; } .stat-label { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; margin-bottom: 20px; } .stat-num { font-family: var(--f-display); font-size: clamp(2.8rem, 5.8vw, 5rem); font-weight: 300; letter-spacing: -0.04em; line-height: 1; margin-bottom: 8px; color: var(--cream); } .stat-sub { font-size: 0.88rem; opacity: 0.6; } @media (max-width: 820px) { .stats-grid { grid-template-columns: 1fr 1fr; gap: 32px; } } /* ===== calculator CTA ===== */ section.calc-cta { background: var(--cream-warm); padding: 96px 0; } .calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .calc-copy h2 { font-family: var(--f-display); font-size: clamp(1.9rem, 4vw, 3.3rem); font-weight: 300; letter-spacing: -0.025em; line-height: 1.05; margin: 20px 0 24px; max-width: 16ch; } .calc-copy h2 em { font-style: italic; color: var(--indigo); } .calc-copy p { font-size: 1.08rem; color: var(--charcoal-soft); max-width: 44ch; margin: 0 0 20px; } .calc-visual { background: var(--charcoal); color: var(--cream); border-radius: 16px; padding: 34px; font-family: var(--f-mono); font-size: 0.82rem; box-shadow: 0 30px 60px -20px rgba(43, 43, 43, 0.3); transform: rotate(-1deg); transition: transform 0.5s ease; position: relative; } .calc-visual:hover { transform: rotate(0deg); } .calc-header { display: flex; justify-content: space-between; margin-bottom: 22px; opacity: 0.75; padding-bottom: 14px; border-bottom: 1px solid var(--line-dark); align-items: center; } .calc-live { color: var(--orange); display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; } .calc-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); animation: pulse-small 1.8s infinite; } @keyframes pulse-small { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .calc-lock-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; background: rgba(43, 43, 43, 0.92); border: 1px solid var(--orange); border-radius: 100px; padding: 10px 20px; display: inline-flex; align-items: center; gap: 10px; font-size: 0.78rem; color: var(--orange); box-shadow: 0 0 0 6px rgba(43, 43, 43, 0.4); letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--f-body); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, transform 0.25s ease; } .calc-lock-overlay:hover { background: var(--orange); color: var(--cream); transform: translate(-50%, -50%) scale(1.04); } .calc-lock-overlay svg { width: 14px; height: 14px; } .calc-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line-dark); } .calc-row:last-of-type { border-bottom: none; } .calc-row .label { opacity: 0.85; } .skel { display: inline-block; height: 10px; background: linear-gradient(90deg, rgba(255, 69, 0, 0.3) 0%, rgba(255, 69, 0, 0.6) 50%, rgba(255, 69, 0, 0.3) 100%); background-size: 200% 100%; border-radius: 3px; animation: shimmer 2.2s linear infinite; opacity: 0.7; } .skel.w-xs { width: 36px; } .skel.w-sm { width: 48px; } .skel.w-md { width: 60px; } .skel.w-lg { width: 72px; } .skel.w-xl { width: 120px; height: 22px; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .calc-total { border-top: 2px solid var(--orange); margin-top: 14px; padding-top: 16px; display: flex; justify-content: space-between; align-items: center; } .calc-total .t-label { font-size: 0.95rem; opacity: 0.85; } .calc-note { margin-top: 18px; font-size: 0.7rem; opacity: 0.55; text-align: center; letter-spacing: 0.08em; } @media (max-width: 820px) { .calc-grid { grid-template-columns: 1fr; gap: 40px; } } /* ===== proof / specialisations & memberships (v6.1c.3) ===== */ section.proof { background: var(--cream); padding: 80px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .proof-head { text-align: center; margin-bottom: 48px; } .proof-eyebrow { display: inline-block; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange); margin-bottom: 14px; } .proof-title { font-family: var(--f-display); font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 300; letter-spacing: -0.02em; line-height: 1.15; margin: 0; color: var(--charcoal); } .proof-title em { font-style: italic; color: var(--indigo); } .proof-logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; align-items: stretch; } .proof-chip { background: var(--cream-warm); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; display: flex; align-items: center; justify-content: center; min-height: 96px; transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease; } .proof-chip:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -16px rgba(75, 0, 130, 0.25); border-color: rgba(75, 0, 130, 0.25); } .proof-chip img { display: block; max-width: 100%; max-height: 50px; width: auto; height: auto; object-fit: contain; /* Logos all rendered at 120px source height; display height is capped via max-height. This keeps them crisp on retina while maintaining a uniform visual size. */ } @media (max-width: 1100px) { .proof-logos { grid-template-columns: repeat(3, 1fr); gap: 14px; } } @media (max-width: 540px) { .proof-logos { grid-template-columns: repeat(2, 1fr); } .proof-chip { min-height: 80px; padding: 14px 16px; } .proof-chip img { max-height: 40px; } } /* ===== contact ===== */ section.contact { background: var(--charcoal); color: var(--cream); padding: 96px 0 100px; position: relative; overflow: hidden; /* Make contact + footer combined fill the viewport. Footer is roughly 180-200px tall (padding 64+56 + content). Setting min-height ensures that when scrolled to the bottom, no other section bleeds into view. */ min-height: calc(100vh - 200px); display: flex; align-items: center; } section.contact > .wrap { width: 100%; } @media (max-width: 720px) { /* On mobile/short viewports, don't force min-height — let content drive size */ section.contact { min-height: 0; display: block; } } .contact-accent { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--orange), transparent); } .contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 80px; align-items: start; } .contact-h { font-family: var(--f-display); font-size: clamp(2.4rem, 5.6vw, 5rem); font-weight: 300; letter-spacing: -0.03em; line-height: 0.98; margin: 20px 0 28px; max-width: 14ch; } .contact-h em { font-style: italic; color: var(--orange); } .contact-lede { font-size: 1.08rem; color: rgba(251, 250, 247, 0.75); max-width: 48ch; margin: 0 0 42px; } .contact-actions { display: flex; gap: 14px; flex-wrap: wrap; } .contact-card { border: 1px solid var(--line-dark); border-radius: 14px; padding: 34px; background: rgba(251, 250, 247, 0.02); } .contact-card h4 { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange); margin: 0 0 22px; font-weight: 500; } .contact-item { padding: 15px 0; border-bottom: 1px solid var(--line-dark); } .contact-item:last-child { border-bottom: none; } .contact-item .label { font-family: var(--f-mono); font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.5; margin-bottom: 4px; } .contact-item a, .contact-item .val { color: var(--cream); text-decoration: none; font-size: 1.04rem; font-family: var(--f-display); } .contact-item a:hover { color: var(--orange); } @media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } } /* ===== footer (v6.7.10) ===== Two sections wrapped in a .wrap container so they line up with body content on every page (homepage gets the rail offset; subpages get centered). Top section: 3 columns (logo | 3-row menu | ASIAL). Bottom section: 2 columns (copyright | abn+licence). Each column's contents are centered within itself. Mobile collapses both sections to single-column stacks. */ footer { background: #141414; padding: 56px 0 40px; } footer .footer-top { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 32px; align-items: center; } footer .footer-col { display: flex; align-items: center; justify-content: center; } footer .footer-col--menu { flex-direction: column; gap: 12px; } footer .footer-logo { display: block; height: 56px; width: auto; max-width: 100%; } footer .footer-menu-row { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; } footer .footer-menu-row li { margin: 0; padding: 0; } footer .footer-menu-row a { color: rgba(251, 250, 247, 0.6); text-decoration: none; font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; transition: color 0.2s ease; white-space: nowrap; } footer .footer-menu-row a:hover { color: var(--orange); } footer .footer-divider { height: 1px; background: rgba(251, 250, 247, 0.08); margin: 36px 0 24px; } footer .footer-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; } footer .footer-bottom-col { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.08em; color: rgba(251, 250, 247, 0.5); line-height: 1.5; text-align: center; } @media (max-width: 900px) { footer .footer-top { grid-template-columns: 1fr; gap: 36px; } footer .footer-bottom { grid-template-columns: 1fr; gap: 8px; } footer .footer-divider { margin: 28px 0 18px; } } @media (max-width: 720px) { footer { padding: 40px 0 28px; } footer .footer-logo { height: 44px; } } /* ===== reveal animations ===== */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 1s cubic-bezier(0.2, 0.7, 0.2, 1), transform 1s cubic-bezier(0.2, 0.7, 0.2, 1); } .reveal.in { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } /* ===== topology background animations ===== */ .topo-line { stroke-dasharray: 4 4; animation: dashflow 6s linear infinite; } @keyframes dashflow { to { stroke-dashoffset: -80; } } .topo-node { animation: nodepulse 3s ease-in-out infinite; transform-origin: center; transform-box: fill-box; } .topo-node:nth-child(2) { animation-delay: 0.5s; } .topo-node:nth-child(3) { animation-delay: 1s; } .topo-node:nth-child(4) { animation-delay: 1.5s; } .topo-node:nth-child(5) { animation-delay: 2s; } @keyframes nodepulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } /* ========================================================= FORM STYLES (used in modals on index.html and inline on support.html) ========================================================= */ .form-row { margin-bottom: 16px; } .form-row label { display: block; font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.7; margin-bottom: 6px; color: var(--charcoal); font-weight: 500; } .form-row label .req { color: var(--orange); margin-left: 4px; } .form-row label .hint { display: block; margin-top: 2px; font-family: var(--f-body); font-size: 0.78rem; letter-spacing: 0; text-transform: none; opacity: 0.7; font-weight: 400; } .form-row input, .form-row textarea, .form-row select { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; font-family: var(--f-body); font-size: 0.98rem; color: var(--charcoal); background: #fff; transition: border-color 0.2s; } .form-row input:focus, .form-row textarea:focus, .form-row select:focus { outline: none; border-color: var(--indigo); } .form-row textarea { resize: vertical; min-height: 100px; font-family: var(--f-body); } .form-row select { appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; } .form-row-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 560px) { .form-row-grid { grid-template-columns: 1fr; } } .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-submit { width: 100%; background: var(--charcoal); color: var(--cream); border: none; padding: 14px 22px; border-radius: 100px; font-family: var(--f-body); font-size: 0.96rem; font-weight: 500; cursor: pointer; transition: all 0.25s ease; margin-top: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; } .form-submit:hover { background: var(--indigo); } .form-submit:disabled { opacity: 0.5; cursor: wait; } .form-submit .spinner { display: none; width: 14px; height: 14px; border: 2px solid rgba(251, 250, 247, 0.3); border-top-color: var(--cream); border-radius: 50%; animation: spin 0.7s linear infinite; } .form-submit.loading .spinner { display: block; } @keyframes spin { to { transform: rotate(360deg); } } .form-note { margin-top: 20px; font-size: 0.78rem; color: var(--charcoal-soft); text-align: center; line-height: 1.4; } .form-info-banner { background: rgba(75, 0, 130, 0.05); border: 1px solid rgba(75, 0, 130, 0.15); border-radius: 10px; padding: 14px 18px; margin-bottom: 28px; font-size: 0.9rem; line-height: 1.5; color: var(--charcoal-soft); display: flex; gap: 12px; align-items: flex-start; } .form-info-banner svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--indigo); margin-top: 2px; } .form-success, .form-success-already, .form-error { display: none; padding: 20px; border-radius: 10px; margin-top: 16px; font-size: 0.95rem; line-height: 1.5; } .form-success, .form-success-already { background: rgba(75, 0, 130, 0.06); border: 1px solid rgba(75, 0, 130, 0.2); color: var(--indigo); } .form-success.show, .form-success-already.show { display: block; } .form-success strong, .form-success-already strong { display: block; font-family: var(--f-display); font-size: 1.2rem; margin-bottom: 6px; font-weight: 500; } .form-error { background: rgba(255, 69, 0, 0.08); border: 1px solid rgba(255, 69, 0, 0.3); color: var(--orange-warm); } .form-error.show { display: block; } /* After a successful submit wireForm() adds .submitted to the form. Hide all interactive children so only the .form-success / .form-success-already message remains. .submitted is doubled to bump specificity above .contact-page-form .form-row-grid (which sets display: grid). */ form.submitted.submitted .form-row, form.submitted.submitted .form-row-grid, form.submitted.submitted .cf-turnstile, form.submitted.submitted .form-submit, form.submitted.submitted .form-note, form.submitted.submitted .form-error, form.submitted.submitted .honeypot { display: none; } /* ===== modal ===== */ .modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(43, 43, 43, 0.6); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity 0.3s ease; } .modal-backdrop.open { display: flex; opacity: 1; } .modal { background: var(--cream); border-radius: 18px; max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 40px; position: relative; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.35); transform: translateY(16px); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); } .modal-backdrop.open .modal { transform: translateY(0); } .modal-close { position: absolute; top: 20px; right: 20px; width: 36px; height: 36px; border: 1px solid var(--line); background: transparent; border-radius: 50%; cursor: pointer; display: grid; place-items: center; transition: all 0.2s; color: var(--charcoal); } .modal-close:hover { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); } .modal-eyebrow { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); margin-bottom: 12px; } .modal h3 { font-family: var(--f-display); font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 14px; } .modal h3 em { font-style: italic; color: var(--indigo); } .modal-lede { font-size: 0.96rem; color: var(--charcoal-soft); margin: 0 0 28px; line-height: 1.5; } @media (max-width: 560px) { .modal { padding: 32px 24px; border-radius: 14px; } } /* ========================================================= SUPPORT PAGE (support.html) ========================================================= */ body.support-page { background: var(--cream-warm); } body.support-page main { padding: 96px 0 80px; min-height: calc(100vh - 120px); } @media (max-width: 720px) { body.support-page main { padding: 110px 0 60px; } } .support-shell { max-width: 1140px; margin: 0 auto; padding: 0 40px; } @media (max-width: 720px) { .support-shell { padding: 0 22px; } } /* Two-column body layout matching .contact-page-grid on contact.html. Form on the left, supporting cards (urgent contact, "what happens next", non-client note) in a right-rail aside. Collapses to single column on narrow viewports. */ .support-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: start; margin-bottom: 40px; } @media (max-width: 900px) { .support-grid { grid-template-columns: 1fr; gap: 40px; } } .support-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 100px; } @media (max-width: 900px) { .support-aside { position: static; } } .support-aside-card { background: var(--cream); border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px; font-size: 0.92rem; line-height: 1.55; color: var(--charcoal-soft); } .support-aside-card strong { display: block; margin-bottom: 8px; color: var(--charcoal); font-weight: 600; font-family: var(--f-display); font-size: 1.05rem; } .support-aside-card a { color: var(--indigo); font-weight: 500; text-decoration: none; } .support-aside-card a:hover { color: var(--orange); } .support-aside-urgent { border-left: 2px solid var(--orange); } .support-aside-list { margin: 0; padding-left: 20px; } .support-aside-list li { margin-bottom: 8px; } .support-aside-list li:last-child { margin-bottom: 0; } .support-intro { margin-bottom: 48px; } .support-intro .eyebrow { color: var(--orange); opacity: 1; margin-bottom: 14px; display: inline-block; } .support-intro h1 { font-family: var(--f-display); font-weight: 300; font-size: clamp(2.2rem, 5vw, 3.8rem); letter-spacing: -0.03em; line-height: 1.02; margin: 0 0 18px; } .support-intro h1 em { font-style: italic; color: var(--indigo); } .support-intro p { font-size: 1.1rem; color: var(--charcoal-soft); max-width: 54ch; line-height: 1.5; margin: 0; } .support-card { background: var(--cream); border: 1px solid var(--line); border-radius: 18px; padding: 40px; box-shadow: 0 20px 50px -20px rgba(43, 43, 43, 0.1); } @media (max-width: 720px) { .support-card { padding: 28px 24px; border-radius: 14px; } } .support-emergency { margin-top: 32px; padding: 22px 26px; background: transparent; border-left: 2px solid var(--orange); font-size: 0.95rem; color: var(--charcoal-soft); line-height: 1.55; } .support-emergency strong { color: var(--charcoal); font-weight: 600; } .support-emergency a { color: var(--indigo); font-weight: 500; text-decoration: none; } .support-emergency a:hover { color: var(--orange); } /* ========================================================= LEGAL PAGES (privacy.html, terms.html, surveillance.html) ========================================================= */ body.legal-page { background: var(--cream); } body.legal-page main { padding: 96px 0 80px; } @media (max-width: 720px) { body.legal-page main { padding: 110px 0 60px; } } .legal-shell { max-width: 780px; margin: 0 auto; padding: 0 40px; } @media (max-width: 720px) { .legal-shell { padding: 0 22px; } } .legal-intro { margin-bottom: 48px; } .legal-intro .eyebrow { color: var(--orange); opacity: 1; margin-bottom: 14px; display: inline-block; } .legal-intro h1 { font-family: var(--f-display); font-weight: 300; font-size: clamp(2.2rem, 5vw, 3.8rem); letter-spacing: -0.03em; line-height: 1.02; margin: 0 0 18px; } .legal-intro h1 em { font-style: italic; color: var(--indigo); } .legal-intro .legal-meta { display: flex; gap: 20px; flex-wrap: wrap; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.6; margin-top: 12px; } .legal-banner { border-left: 3px solid var(--orange); background: rgba(255, 69, 0, 0.04); padding: 20px 24px; border-radius: 0 8px 8px 0; margin-bottom: 56px; font-size: 0.95rem; line-height: 1.55; color: var(--charcoal-soft); } .legal-banner strong { color: var(--charcoal); font-weight: 600; display: block; margin-bottom: 6px; font-family: var(--f-body); } .legal-banner a { color: var(--indigo); text-decoration: underline; } .legal-banner a:hover { color: var(--orange); } .legal-body { font-size: 1.02rem; line-height: 1.65; color: var(--charcoal); max-width: 68ch; } .legal-body h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.02em; line-height: 1.15; margin: 56px 0 18px; color: var(--charcoal); } .legal-body h2:first-child { margin-top: 0; } .legal-body h2 em { font-style: italic; color: var(--indigo); } .legal-body h2 .section-ref { display: block; font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); font-weight: 500; margin-bottom: 6px; font-style: normal; } .legal-body h3 { font-family: var(--f-body); font-weight: 600; font-size: 1.08rem; margin: 32px 0 10px; color: var(--charcoal); } .legal-body p { margin: 0 0 18px; } .legal-body ul, .legal-body ol { margin: 0 0 20px; padding-left: 22px; } .legal-body li { margin-bottom: 8px; } .legal-body li::marker { color: var(--orange); } .legal-body strong { color: var(--charcoal); font-weight: 600; } .legal-body a { color: var(--indigo); text-decoration: underline; text-underline-offset: 3px; } .legal-body a:hover { color: var(--orange); } .legal-body .note { font-size: 0.92rem; color: var(--charcoal-soft); background: rgba(75, 0, 130, 0.04); padding: 14px 18px; border-radius: 8px; margin: 20px 0; border-left: 2px solid var(--indigo); } .legal-body dl { margin: 0 0 24px; } .legal-body dt { font-weight: 600; margin-top: 14px; color: var(--charcoal); } .legal-body dd { margin: 4px 0 14px 0; color: var(--charcoal-soft); } .legal-footer-note { margin-top: 72px; padding-top: 32px; border-top: 1px solid var(--line); font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--charcoal); opacity: 0.55; } /* ========================================================= HERO SCENE (isometric 'watched site') ========================================================= */ svg.hero-scene { position: absolute; top: 0; right: -8%; width: 82%; height: 100%; opacity: 0.95; pointer-events: none; overflow: visible; } @media (max-width: 980px) { svg.hero-scene { right: -20%; width: 100%; opacity: 0.35; } } /* Device ambient breathing glow */ svg.hero-scene .device-halo { animation: hero-halo-breathe 5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; } @keyframes hero-halo-breathe { 0%, 100% { opacity: 0; transform: scale(0.6); } 50% { opacity: 0.28; transform: scale(1.05); } } /* Connection lines softly animate their dash offset (stream feel) */ svg.hero-scene .hero-connection { animation: hero-conn-flow 9s linear infinite; } @keyframes hero-conn-flow { to { stroke-dashoffset: -40; } } /* Hub pulse rings - two offset rings expanding continuously */ svg.hero-scene .hub-ring { animation: hero-hub-ring 3.2s ease-out infinite; transform-origin: center; transform-box: fill-box; } svg.hero-scene .hub-ring-2 { animation-delay: 1.6s; } @keyframes hero-hub-ring { 0% { r: 15; opacity: 0.7; } 100% { r: 55; opacity: 0; } } /* Fault ripple state — activated programmatically by JS on specific devices */ svg.hero-scene .fault-ripple.active { animation: hero-fault-ripple 1.8s ease-out forwards; } @keyframes hero-fault-ripple { 0% { r: 0; opacity: 0.9; } 100% { r: 45; opacity: 0; } } /* When a device is mid-fault, brighten its connection line */ svg.hero-scene .hero-connection.fault-active { stroke: var(--orange); stroke-opacity: 0.85; stroke-width: 1.3; transition: stroke 0.3s ease, stroke-opacity 0.3s ease, stroke-width 0.3s ease; } /* ========================================================= METHOD SCENE (scroll-driven, 4 progressive overlays) ========================================================= */ svg.method-scene { width: 100%; max-width: 1100px; height: auto; margin: 0 auto; display: block; overflow: visible; } /* All overlays start hidden; JS adds .active to reveal based on scroll */ svg.method-scene .m-annotations, svg.method-scene .m-devices, svg.method-scene .m-connections, svg.method-scene .m-hub, svg.method-scene .m-fault-layer, svg.method-scene .m-resolve-layer { opacity: 0; transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); } /* Stage 1: Audit — annotations only */ svg.method-scene .m-annotations.active { opacity: 1; } /* Stage 2: Instrument — devices + connections + hub appear, annotations fade */ svg.method-scene .m-devices.active { opacity: 1; } svg.method-scene .m-connections.active { opacity: 1; } svg.method-scene .m-hub.active { opacity: 1; } svg.method-scene .m-annotations.fade { opacity: 0.25; } /* Stage 3: Detect — fault layer visible, one device glows red */ svg.method-scene .m-fault-layer.active { opacity: 1; } svg.method-scene .m-fault-layer.active .m-fault-ripple { animation: m-fault-ripple 1.6s ease-out infinite; } svg.method-scene .m-fault-layer.active .m-fault-device-ring { opacity: 1; animation: m-fault-ring 1.8s ease-in-out infinite; } svg.method-scene .m-fault-layer.active .m-fault-line { opacity: 1; animation: m-fault-line-flow 3s linear infinite; } @keyframes m-fault-ripple { 0% { r: 6; opacity: 0.9; } 100% { r: 30; opacity: 0; } } @keyframes m-fault-ring { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } @keyframes m-fault-line-flow { to { stroke-dashoffset: -28; } } /* Stage 4: Resolve — resolve layer visible, fault fades */ svg.method-scene .m-resolve-layer.active { opacity: 1; } svg.method-scene .m-resolve-layer.active .m-cycle-arrow { opacity: 0.85 !important; } svg.method-scene .m-resolve-layer.active .m-cycle-label { opacity: 0.75 !important; } svg.method-scene .m-fault-layer.dim { opacity: 0.15; } /* Hub pulse for method scene too */ svg.method-scene .m-hub.active .m-hub-rings circle { animation: m-hub-pulse 3s ease-in-out infinite; } /* Respect reduced motion — strip all looping animations */ @media (prefers-reduced-motion: reduce) { svg.hero-scene .device-halo, svg.hero-scene .hero-connection, svg.hero-scene .hub-ring, svg.hero-scene .fault-ripple, svg.method-scene .m-fault-ripple, svg.method-scene .m-fault-device-ring, svg.method-scene .m-fault-line { animation: none !important; } svg.hero-scene .device-halo { opacity: 0.15; } svg.method-scene .m-annotations, svg.method-scene .m-devices, svg.method-scene .m-connections, svg.method-scene .m-hub, svg.method-scene .m-fault-layer, svg.method-scene .m-resolve-layer { opacity: 1 !important; transition: none !important; } } /* ======================================================================== AUDIT SECTION (NEW IN v6.1b) Engineering-blueprint visual on a charcoal background ======================================================================== */ section.audit { background: var(--charcoal); color: var(--cream); padding: 96px 0; position: relative; overflow: hidden; } section.audit .section-num { color: var(--orange); } section.audit .section-title { color: var(--cream); } section.audit .section-title em { color: var(--orange); } .audit-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; margin-top: 40px; } .audit-blueprint-row { position: relative; } .audit-copy-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: start; } .audit-copy { max-width: 60ch; } .audit-copy p { font-size: 1.06rem; color: rgba(251,250,247,0.78); margin: 0 0 18px; line-height: 1.6; } .audit-copy p em { font-style: italic; color: var(--cream); } .audit-deliverables { margin: 0; padding: 24px 28px; background: rgba(251,250,247,0.04); border-left: 2px solid var(--orange); list-style: none; } .audit-deliverables li { font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.08em; color: rgba(251,250,247,0.85); padding: 6px 0; } .audit-deliverables li::before { content: '→'; color: var(--orange); margin-right: 12px; font-family: var(--f-mono); } .audit-engagement { margin-top: 40px; font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(251,250,247,0.5); padding: 16px 0 0; border-top: 1px solid var(--line-dark); } .audit-engagement strong { color: var(--orange); font-weight: 400; } /* ==================================================================== GENERIC ZOOM PATTERN (shared by Audit, Method, Stack scenes — v6.1c.2) - .zoom-trigger: wrapper that becomes clickable, lifts on hover, shows "Click to enlarge" tag in the corner - .zoom-modal: fullscreen overlay with backdrop, close button, and the scaled-up SVG inside .zoom-inner ==================================================================== */ .zoom-trigger { position: relative; cursor: zoom-in; transition: box-shadow 0.3s ease, transform 0.3s ease; } .zoom-trigger:hover { transform: translateY(-2px); } .zoom-trigger::after { content: 'Click to enlarge'; position: absolute; top: 12px; right: 16px; font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 6px 10px; border-radius: 4px; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; z-index: 2; } .zoom-trigger:hover::after { opacity: 1; } .zoom-trigger:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; } .zoom-modal { position: fixed; inset: 0; z-index: 100; background: rgba(20, 10, 35, 0.94); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; padding: 40px; cursor: zoom-out; } .zoom-modal.open { display: flex; animation: zoom-modal-in 0.3s ease both; } @keyframes zoom-modal-in { from { opacity: 0; } to { opacity: 1; } } .zoom-modal .zoom-inner { width: 100%; max-height: 92vh; position: relative; border-radius: 6px; padding: 12px; overflow: auto; } .zoom-modal .zoom-inner svg { display: block; width: 100%; height: auto; } .zoom-modal .zoom-close { position: absolute; top: 24px; right: 32px; width: 44px; height: 44px; background: rgba(251,250,247,0.12); border: 1px solid rgba(251,250,247,0.25); color: var(--cream); border-radius: 50%; cursor: pointer; display: grid; place-items: center; z-index: 2; transition: background 0.2s ease; } .zoom-modal .zoom-close:hover { background: rgba(251,250,247,0.22); } .zoom-modal .zoom-close svg { width: 18px; height: 18px; } .zoom-modal .zoom-hint { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(251,250,247,0.55); } @media (max-width: 820px) { .zoom-modal { padding: 16px; } .zoom-modal .zoom-inner { padding: 8px; } .zoom-modal .zoom-close { top: 12px; right: 16px; } } /* Audit-specific zoom appearance (purple gradient panel, hint badge has dark bg) */ .audit-scene-wrap { border-radius: 6px; overflow: hidden; background: linear-gradient(135deg, #2A0852 0%, #3D0769 100%); padding: 8px; width: 100%; } .audit-scene-wrap:hover { box-shadow: 0 24px 60px -20px rgba(75,0,130,0.5); } .audit-scene-wrap::after { color: rgba(251,250,247,0.55); background: rgba(43,43,43,0.7); } .audit-zoom-modal .zoom-inner { max-width: 1400px; background: linear-gradient(135deg, #2A0852 0%, #3D0769 100%); } .audit-zoom-modal .zoom-inner svg { min-width: 900px; } svg.audit-scene { display: block; width: 100%; height: auto; } /* Annotations: each starts hidden, revealed sequentially as user scrolls into view */ .audit-anno { opacity: 0; transform: translateY(6px); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); } .audit-anno.in { opacity: 1; transform: translateY(0); } .audit-runbook { opacity: 0; transition: opacity 0.6s ease 0.4s; } .audit-runbook.in { opacity: 1; } /* Method dial zoom appearance (matches Method section's indigo gradient bg) */ .method-dial-wrap { border-radius: 6px; padding: 8px; } .method-dial-wrap:hover { box-shadow: 0 24px 60px -20px rgba(255,69,0,0.35); } .method-dial-wrap::after { color: rgba(251,250,247,0.7); background: rgba(20,10,35,0.6); } .method-zoom-modal .zoom-inner { max-width: 920px; background: linear-gradient(135deg, #2A0852 0%, #4B0082 50%, #2B1B3E 100%); } .method-zoom-modal .zoom-inner svg { min-width: 600px; } /* Stack scene zoom appearance (cream/warm bg matching Stack section) */ .stack-scene-wrap { border-radius: 6px; padding: 8px; background: var(--cream); } .stack-scene-wrap:hover { box-shadow: 0 24px 60px -20px rgba(75,0,130,0.25); } .stack-scene-wrap::after { color: var(--charcoal); background: rgba(251,250,247,0.85); border: 1px solid rgba(75,0,130,0.18); } .stack-zoom-modal .zoom-inner { max-width: 1280px; background: var(--cream); } .stack-zoom-modal .zoom-inner svg { min-width: 900px; } @media (max-width: 820px) { .audit-copy-row { grid-template-columns: 1fr; gap: 32px; } } /* ======================================================================== METHOD DIAL (REDESIGN IN v6.1b) Indigo gradient background, cyclical clock-style dial ======================================================================== */ section.method { background: linear-gradient(135deg, #2A0852 0%, #4B0082 50%, #2B1B3E 100%); color: var(--cream); padding: 96px 0; position: relative; overflow: hidden; } section.method .section-num { color: var(--orange); } section.method .section-title { color: var(--cream); } section.method .section-title em { color: var(--orange); font-style: italic; } section.method .section-title sup { color: var(--orange); } section.method .section-lede { color: rgba(251,250,247,0.78); font-size: 1.08rem; line-height: 1.6; max-width: 50ch; margin: 0; } .method-redesign-banner { display: none !important; } /* obsolete from v6.1a */ /* New layout (v6.1b.2): - Title sits in .section-head full-width at top (handled by base styles) - .method-hero is a 2-col grid: lede on left, dial on right - .method-stages 4-col band sits underneath */ .method-hero { display: grid; grid-template-columns: 1fr 1.05fr; gap: 60px; align-items: center; margin-bottom: 56px; } .method-dial-wrap { display: flex; justify-content: center; } svg.method-dial { display: block; width: 100%; max-width: 540px; height: auto; } @media (max-width: 900px) { .method-hero { grid-template-columns: 1fr; gap: 36px; } } /* Sweep hand: continuously rotates clockwise around centre */ svg.method-dial .dial-hand { transform-origin: 300px 300px; animation: dial-sweep 16s linear infinite; } @keyframes dial-sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { svg.method-dial .dial-hand { animation: none; } } /* Active stage gets a brand orange border + scale pulse */ svg.method-dial .dial-stage circle:first-of-type { transition: stroke 0.4s ease, stroke-width 0.4s ease, fill 0.4s ease; } svg.method-dial .dial-stage.active circle:first-of-type { stroke: var(--orange); stroke-width: 2.5; fill: #1a1a1a; } /* Stage descriptors below the dial — same 4-card grid as before, but text is updated to match new stage names */ .method-stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; max-width: 1080px; margin: 0 auto; } .method-stage { padding: 24px 0; border-top: 1px solid rgba(251,250,247,0.18); transition: border-top-color 0.4s ease, opacity 0.4s ease; opacity: 0.55; } .method-stage.active { opacity: 1; border-top-color: var(--orange); } .method-stage .stage-num { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); margin-bottom: 10px; } .method-stage h4 { font-family: var(--f-display); font-size: 1.4rem; font-weight: 400; letter-spacing: -0.02em; margin: 0 0 10px; color: var(--cream); } .method-stage p { font-size: 0.92rem; line-height: 1.5; color: rgba(251,250,247,0.7); margin: 0; } @media (max-width: 820px) { .method-stages { grid-template-columns: 1fr 1fr; gap: 24px; } } @media (max-width: 540px) { .method-stages { grid-template-columns: 1fr; } } /* ======================================================================== AI SECTION (v6.1d) How we use AI — text-only, three-column layout against cream-warm bg ======================================================================== */ section.ai { background: var(--cream-warm); color: var(--charcoal); padding: 96px 0; position: relative; overflow: hidden; } section.ai .section-head { text-align: center; margin-bottom: 24px; } section.ai .section-title { margin: 0 auto; max-width: 28ch; text-align: center; } .ai-eyebrow { display: inline-block; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange); margin-bottom: 14px; } .ai-lede { max-width: 60ch; margin: 0 auto 64px; text-align: center; font-family: var(--f-display); font-size: clamp(1.05rem, 1.6vw, 1.22rem); line-height: 1.5; font-weight: 300; font-style: italic; letter-spacing: -0.005em; color: var(--charcoal-soft); } .ai-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: stretch; } .ai-col { background: var(--cream); border: 1px solid var(--line); border-radius: 8px; padding: 32px 28px; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .ai-col:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(75,0,130,0.18); border-color: rgba(75,0,130,0.18); } .ai-col-label { font-family: var(--f-mono); font-size: 0.72rem; font-weight: 500; margin: 0 0 22px; /* neutralize browser

top margin / letter-spacing: 0.18em; text-transform: uppercase; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .ai-col-label--do { color: var(--indigo); } .ai-col-label--dont { color: var(--charcoal-soft); } .ai-col-label--why { color: var(--orange); } .ai-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; } .ai-list li { font-size: 0.96rem; line-height: 1.55; color: var(--charcoal-soft); padding-left: 22px; position: relative; } .ai-list li strong { color: var(--charcoal); font-weight: 600; } .ai-list--do li::before { content: '+'; position: absolute; left: 0; top: 0; color: var(--indigo); font-family: var(--f-mono); font-weight: 600; } .ai-list--dont li::before { content: '−'; / unicode minus sign U+2212 / position: absolute; left: 0; top: 0; color: var(--charcoal-soft); font-family: var(--f-mono); font-weight: 600; } .ai-list--why li::before { content: '→'; / rightward arrow U+2192 / position: absolute; left: 0; top: 0; color: var(--orange); font-family: var(--f-mono); } @media (max-width: 900px) { .ai-grid { grid-template-columns: 1fr; gap: 20px; } .ai-col { padding: 26px 22px; } } / ======================================================================== FAQ SECTION (v6.1d) Native HTML
/
accordion, no JS needed ======================================================================== / section.faq { background: var(--cream); color: var(--charcoal); padding: 96px 0; } section.faq .section-head { margin-bottom: 56px; } .faq-eyebrow { display: inline-block; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange); margin-bottom: 14px; } .faq-list { max-width: 880px; margin: 0 auto; } .faq-item { border-top: 1px solid var(--line); transition: border-color 0.3s ease; } .faq-item:last-child { border-bottom: 1px solid var(--line); } .faq-item[open] { border-color: rgba(75, 0, 130, 0.25); } .faq-item summary { list-style: none; cursor: pointer; padding: 28px 8px; display: flex; align-items: center; justify-content: space-between; gap: 24px; transition: padding 0.3s ease; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { padding-left: 12px; } .faq-item summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; } .faq-q { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.05rem, 1.7vw, 1.32rem); line-height: 1.3; margin: 0; letter-spacing: -0.01em; color: var(--charcoal); flex: 1; } .faq-toggle { flex-shrink: 0; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--cream-warm); color: var(--indigo); transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.3s ease; } .faq-toggle svg { width: 16px; height: 16px; } .faq-item[open] .faq-toggle { transform: rotate(180deg); background: var(--indigo); color: var(--cream); } .faq-a { padding: 0 8px 28px; max-width: 70ch; } .faq-a p { font-size: 1rem; line-height: 1.65; color: var(--charcoal-soft); margin: 0; } @media (max-width: 720px) { .faq-item summary { padding: 22px 4px; } .faq-a { padding: 0 4px 22px; } } / PDF link inside pullquote attribution (v6.1d) / .pullquote-meta .pullquote-pdf-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--indigo); text-decoration: none; border-bottom: 1px solid rgba(75, 0, 130, 0.25); padding-bottom: 2px; transition: color 0.2s ease, border-color 0.2s ease, gap 0.2s ease; } .pullquote-meta .pullquote-pdf-link:hover { color: var(--orange); border-color: var(--orange); gap: 10px; } .pullquote-meta .pullquote-pdf-link svg { width: 14px; height: 14px; } / ======================================================================== STACK SECTION CTA (v6.1e) "How we use AI" button at the end of Stack section ======================================================================== / .stack-cta { display: flex; justify-content: center; margin-top: 56px; } .stack-cta .cta { display: inline-flex; align-items: center; gap: 12px; padding: 16px 28px; font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; border-radius: 4px; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, gap 0.2s ease; } .stack-cta .cta-primary { background: var(--orange); color: var(--cream); } .stack-cta .cta-primary:hover { background: #E63E00; transform: translateY(-1px); box-shadow: 0 12px 28px -12px rgba(255, 69, 0, 0.5); gap: 14px; } .stack-cta .cta svg { width: 18px; height: 18px; } / ======================================================================== FAQ "see all questions" link below the homepage teaser (v6.1e) ======================================================================== / .faq-more-link { display: flex; justify-content: center; margin-top: 40px; } .faq-more { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--indigo); text-decoration: none; border-bottom: 1px solid rgba(75, 0, 130, 0.3); padding-bottom: 4px; transition: color 0.2s ease, border-color 0.2s ease, gap 0.2s ease; } .faq-more:hover { color: var(--orange); border-color: var(--orange); gap: 14px; } .faq-more svg { width: 16px; height: 16px; } / ======================================================================== FAQ PAGE (/faq.html) (v6.1e) ======================================================================== / body.faq-page main { padding: 110px 0 80px; } @media (max-width: 720px) { body.faq-page main { padding: 110px 0 60px; } } .faq-shell { max-width: 880px; margin: 0 auto; padding: 0 40px; } @media (max-width: 720px) { .faq-shell { padding: 0 22px; } } .faq-page-intro { text-align: center; margin-bottom: 56px; } .faq-page-intro .eyebrow { display: inline-block; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange); margin-bottom: 16px; } .faq-page-intro h1 { font-family: var(--f-display); font-weight: 300; font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 24px; color: var(--charcoal); } .faq-page-intro h1 em { font-style: italic; color: var(--indigo); } .faq-page-intro p { max-width: 60ch; margin: 0 auto; font-size: 1.08rem; line-height: 1.55; color: var(--charcoal-soft); } .faq-page-cta { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); text-align: center; } .faq-page-cta p { font-size: 1.02rem; line-height: 1.55; color: var(--charcoal-soft); margin: 0; } / When FAQ accordion is on the dedicated page, questions are h2s (more semantic weight than the homepage teaser's h3s). Style them similarly. / body.faq-page .faq-q { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.1rem, 1.8vw, 1.36rem); line-height: 1.3; margin: 0; letter-spacing: -0.01em; color: var(--charcoal); flex: 1; } / Inline links (used in FAQ answers + AI page closing CTAs) / .inline-link { color: var(--indigo); text-decoration: none; border-bottom: 1px solid rgba(75, 0, 130, 0.3); padding-bottom: 1px; transition: color 0.2s ease, border-color 0.2s ease; } .inline-link:hover { color: var(--orange); border-color: var(--orange); } / on-dark variant: used in audit section and any future dark-background prose / .on-dark .inline-link, section.audit .inline-link { color: var(--orange); border-bottom-color: rgba(255, 69, 0, 0.4); } .on-dark .inline-link:hover, section.audit .inline-link:hover { color: var(--cream); border-color: var(--cream); } / ======================================================================== AI PAGE (/ai.html) (v6.1e) Intro → Flow diagram → Three-pillar grid → Closing CTA ======================================================================== / body.ai-page main { padding: 110px 0 80px; } @media (max-width: 720px) { body.ai-page main { padding: 110px 0 60px; } } .ai-shell { max-width: 1080px; margin: 0 auto; padding: 0 40px; } @media (max-width: 720px) { .ai-shell { padding: 0 22px; } } .ai-page-intro { text-align: center; margin-bottom: 64px; max-width: 760px; margin-left: auto; margin-right: auto; } .ai-page-intro .eyebrow { display: inline-block; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange); margin-bottom: 16px; } .ai-page-intro h1 { font-family: var(--f-display); font-weight: 300; font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 24px; color: var(--charcoal); } .ai-page-intro h1 em { font-style: italic; color: var(--indigo); } .ai-page-lede { font-family: var(--f-display); font-style: italic; font-weight: 300; font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.5; color: var(--charcoal-soft); margin: 0; } / Flow diagram / .ai-flow-wrap { margin: 0 0 80px; padding: 32px 24px 16px; background: var(--cream-warm); border: 1px solid var(--line); border-radius: 8px; text-align: center; } .ai-flow { display: block; width: 100%; height: auto; max-width: 1000px; margin: 0 auto; } .ai-flow-caption { margin: 12px auto 0; max-width: 56ch; font-family: var(--f-display); font-style: italic; font-size: 0.98rem; line-height: 1.5; color: var(--charcoal-soft); } @media (max-width: 720px) { .ai-flow-wrap { padding: 20px 12px 12px; } } / Three-pillar grid (re-uses .ai-col / .ai-list from the original section CSS) / .ai-page-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 80px; } @media (max-width: 900px) { .ai-page-grid { grid-template-columns: 1fr; gap: 20px; } } / Closing section / .ai-page-close { padding: 40px 32px; border-top: 1px solid var(--line); text-align: center; } .ai-page-close h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.2; margin: 0 0 16px; color: var(--charcoal); } .ai-page-close p { font-size: 1.02rem; line-height: 1.6; color: var(--charcoal-soft); margin: 0 auto 12px; max-width: 60ch; } .ai-page-close p:last-child { margin-bottom: 0; } @media (prefers-reduced-motion: reduce) { .ai-flow circle[r="56"] + circle[r="56"] { animation: none !important; } } / ============================================================ v6.2 — Cross-page top nav menu + Services page Adds a full menu (Home, AI, Services, FAQ, Blog) to every page's nav.top. Replaces the old "Back to home" pattern. The current page is rendered as a non-clickable highlighted item so widths don't shift between pages. ============================================================ / / Subpages now have a full menu — keep nav.top showing on subpages (existing rule) and also add a class hook for homepage's mobile bar. / nav.top .nav-menu { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } nav.top .nav-menu li { margin: 0; padding: 0; } nav.top .nav-menu a, nav.top .nav-menu .nav-current { display: inline-flex; align-items: center; text-decoration: none; color: var(--charcoal); font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 10px 14px; border-radius: 4px; transition: color 0.2s ease, background 0.2s ease; white-space: nowrap; } nav.top .nav-menu a:hover { color: var(--orange); } nav.top .nav-menu a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } / Current page: rendered as a span (not a link), shown as inactive / nav.top .nav-menu .nav-current { color: var(--indigo); cursor: default; position: relative; } nav.top .nav-menu .nav-current::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1.5px; background: var(--orange); border-radius: 2px; } / Hide the desktop menu items on smaller viewports — hamburger handles them / @media (max-width: 900px) { nav.top .nav-menu { display: none; } } / On homepage, nav.top is the mobile bar only — already handled by existing rules. On subpages (legal-page, support-page, ai-page, faq-page, services-page), nav.top is visible at all widths. The menu sits beside the brand logo. / body.ai-page nav.top, body.faq-page nav.top, body.services-page nav.top { display: flex; } / When on subpages, the menu should sit on the right; brand on the left. nav.top already uses justify-content: space-between so this works. / / Mobile menu: nested section sub-list (homepage only) / .mobile-menu .mobile-menu-section-toggle { background: none; border: none; width: 100%; display: flex; align-items: center; justify-content: space-between; color: var(--cream); font-family: var(--f-display); font-weight: 400; font-size: clamp(1.6rem, 4vw, 2.2rem); letter-spacing: -0.01em; text-align: left; padding: 12px 0; cursor: pointer; transition: color 0.2s ease; } .mobile-menu .mobile-menu-section-toggle:hover { color: var(--orange); } .mobile-menu .mobile-menu-section-toggle .num { font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.16em; color: rgba(251, 250, 247, 0.45); margin-right: 18px; font-weight: 400; } .mobile-menu .mobile-menu-section-toggle .chev { width: 18px; height: 18px; margin-left: auto; transition: transform 0.25s ease; } .mobile-menu .mobile-menu-section-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); } .mobile-menu .mobile-submenu { list-style: none; margin: 0 0 8px 0; padding: 4px 0 8px 28px; border-left: 1px solid rgba(251,250,247,0.12); display: none; } .mobile-menu .mobile-submenu[data-open="true"] { display: block; } .mobile-menu .mobile-submenu li { margin: 0; } .mobile-menu .mobile-submenu a { display: flex; align-items: center; gap: 14px; padding: 8px 0; text-decoration: none; color: rgba(251, 250, 247, 0.78); font-family: var(--f-body); font-weight: 400; font-size: 1rem; letter-spacing: 0; text-transform: none; transition: color 0.2s ease, padding-left 0.2s ease; } .mobile-menu .mobile-submenu a:hover { color: var(--orange); padding-left: 4px; } .mobile-menu .mobile-submenu a .sub-num { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.14em; color: rgba(251,250,247,0.4); min-width: 22px; } .mobile-menu .mobile-menu-list .mobile-current { color: rgba(251, 250, 247, 0.4); cursor: default; } .mobile-menu .mobile-menu-list .mobile-current:hover { color: rgba(251, 250, 247, 0.4); padding-left: 0; } / ============================================================ Services page (services.html) ============================================================ / .services-page-hero { padding: 140px 0 60px; background: var(--cream); border-bottom: 1px solid var(--line); } .services-page-hero .wrap { max-width: 1100px; } .services-page-hero .eyebrow { color: var(--indigo); } .services-page-hero h1 { font-family: var(--f-display); font-weight: 300; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.05; letter-spacing: -0.02em; margin: 18px 0 24px; color: var(--charcoal); } .services-page-hero h1 em { font-style: italic; color: var(--orange); font-weight: 400; } .services-page-hero .lede { font-size: 1.18rem; line-height: 1.6; color: var(--charcoal-soft); max-width: 64ch; } .services-grid-section { padding: 80px 0 40px; background: var(--cream); } .services-grid-section .wrap { max-width: 1100px; } .services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 40px; } @media (max-width: 760px) { .services-grid { grid-template-columns: 1fr; gap: 20px; } .services-page-hero { padding: 110px 0 40px; } .services-grid-section { padding: 50px 0 30px; } } .service-card { background: var(--cream-warm); border: 1px solid var(--line); border-radius: 8px; padding: 32px 30px; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; display: flex; flex-direction: column; } .service-card:hover { transform: translateY(-2px); border-color: var(--indigo); box-shadow: 0 12px 32px rgba(75, 0, 130, 0.08); } .service-card .service-num { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.18em; color: var(--orange); text-transform: uppercase; margin-bottom: 12px; } .service-card h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.4rem, 2.4vw, 1.7rem); line-height: 1.2; margin: 0 0 16px; color: var(--charcoal); } .service-card h2 em { font-style: italic; color: var(--indigo); font-weight: 400; } .service-card p { font-size: 1rem; line-height: 1.6; color: var(--charcoal-soft); margin: 0 0 12px; } .service-card p:last-child { margin-bottom: 0; } .service-card strong { color: var(--charcoal); font-weight: 600; } .service-card .service-meta { margin-top: auto; padding-top: 18px; border-top: 1px dashed var(--line); font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--charcoal-soft); text-transform: uppercase; } .services-page-cta { padding: 60px 0 100px; background: var(--cream-warm); text-align: center; } .services-page-cta .wrap { max-width: 720px; } .services-page-cta h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.2; margin: 0 0 16px; color: var(--charcoal); } .services-page-cta h2 em { font-style: italic; color: var(--orange); font-weight: 400; } .services-page-cta p { font-size: 1.05rem; line-height: 1.6; color: var(--charcoal-soft); margin: 0 0 28px; } .services-page-cta .cta-row { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; } / ============================================================ Combined Services + FAQ teaser block on homepage (v6.2) ============================================================ / .faq .services-teaser-row { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 36px; padding: 28px 30px; background: var(--cream-warm); border: 1px solid var(--line); border-radius: 8px; } .faq .services-teaser-row .st-eyebrow { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.18em; color: var(--orange); text-transform: uppercase; margin-bottom: 8px; } .faq .services-teaser-row h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.2; margin: 0 0 12px; color: var(--charcoal); } .faq .services-teaser-row h3 em { font-style: italic; color: var(--indigo); font-weight: 400; } .faq .services-teaser-row p { font-size: 1rem; line-height: 1.6; color: var(--charcoal-soft); margin: 0 0 14px; } .faq .services-teaser-row .st-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.14em; color: var(--indigo); text-transform: uppercase; text-decoration: none; font-weight: 500; } .faq .services-teaser-row .st-link:hover { color: var(--orange); } .faq .services-teaser-row .st-link svg { width: 16px; height: 16px; transition: transform 0.2s ease; } .faq .services-teaser-row .st-link:hover svg { transform: translateX(3px); } / ============================================================ v6.2.1 — Homepage top menu (desktop only) The homepage already has a side rail for in-page section nav. This adds the same cross-page menu (Home/AI/Services/FAQ/Blog) to the top-right of the homepage so visitors can immediately see and reach the other pages. Constraints: - On homepage desktop (>900px): show nav.top, but only the menu (the brand logo is duplicated by nav.rail-brand at top-left, so we hide nav.top's own brand). Hide the hamburger. - On homepage mobile (<=900px): existing behaviour — show brand and hamburger; hide menu. - Subpages: existing behaviour — show brand + menu; hide hamburger on desktop, show hamburger and hide menu on mobile. ============================================================ / / Homepage: show nav.top on desktop, but as a right-anchored element rather than a full-width bar. Avoids visual conflict with nav.rail-brand at top-left. / @media (min-width: 901px) { body.home-page nav.top { display: flex; background: transparent; border-bottom: none; padding: 22px 32px; / Position: stay fixed at top, but only span right portion of viewport / left: auto; right: 0; width: auto; justify-content: flex-end; } body.home-page nav.top .brand { display: none; } body.home-page nav.top .hamburger { display: none; } body.home-page nav.top.scrolled { / Pill-style scrolled state — no full-width band, just a soft backdrop around the menu pill itself / background: rgba(251, 250, 247, 0.88); backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; margin: 14px 22px 0 0; top: 0; } / When scrolled, give items a touch more breathing room inside the pill / body.home-page nav.top.scrolled .nav-menu { gap: 2px; } } / Subpage mobile (<=900px): hamburger handles everything (v6.7.2+). Previously this block had a horizontal-scroll fallback that displayed the desktop nav-menu items as a scrolling strip — that was needed when subpages didn't have hamburger markup. v6.7.2 added hamburger buttons to all subpages, so the fallback is gone. The default `@media (max-width: 900px) { nav.top .nav-menu { display: none } }` rule above now correctly applies to subpages too. / / Subpage desktop (>900px): hide the hamburger — the desktop menu handles navigation here, hamburger is for mobile only. Without this rule, both the menu AND the hamburger render side-by-side at desktop widths on subpages (homepage is fine because line ~2645 already hides hamburger for body.home-page; subpages had no equivalent). v6.7.4 fix. / @media (min-width: 901px) { body.legal-page nav.top .hamburger, body.support-page nav.top .hamburger { display: none; } } / ============================================================ v6.2.3 — Radio button group (calculator modal Purpose field) Replaces the inline-styled label hack. Robust layout: radio on left at fixed width, label text flowing naturally to its right. ============================================================ / .radio-group { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } .radio-option { / Override .form-row label rules from line 960 / display: flex !important; align-items: flex-start; gap: 10px; font-family: var(--f-body) !important; font-size: 0.95rem !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; opacity: 1 !important; margin-bottom: 0 !important; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255, 255, 255, 0.5); color: var(--charcoal); cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease; } .radio-option:hover { border-color: var(--indigo); background: rgba(255, 255, 255, 0.85); } .radio-option input[type="radio"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0 0; accent-color: var(--indigo); cursor: pointer; } .radio-option span { flex: 1 1 auto; line-height: 1.4; text-align: left; } .radio-option:has(input:checked) { border-color: var(--indigo); background: rgba(75, 0, 130, 0.04); } / ============================================================ v6.2.4 — Cloudflare Turnstile widget The widget renders as flexible (full-width) inside form-rows. We add a margin so it sits cleanly above the submit button. ============================================================ / .cf-turnstile { margin: 12px 0 18px; min-height: 65px; / prevents layout shift while widget loads / } / ============================================================ v6.2.6 — Method dial: bigger, tighter, no zoom ============================================================ / / Remove zoom-trigger affordances on the method dial wrapper. The class is gone from HTML but ::after hover hint inherited from .zoom-trigger could still apply if any CSS targets it via [class]. / .method-dial-wrap::after { content: none; } .method-dial-wrap { cursor: default; } .method-dial-wrap:hover { box-shadow: none; transform: none; } / Bigger dial. The original max-width was 540px; 25% bigger = 675px. / svg.method-dial { max-width: 675px; } / Give the dial column more visual weight in the 2-col grid. Was 1fr 1.05fr (lede : dial). New 1fr 1.35fr lets the dial breathe horizontally while still leaving plenty of room for the lede text. / .method-hero { grid-template-columns: 1fr 1.35fr; gap: 48px; / was 60px — tighter / margin-bottom: 40px; / was 56px / } / On smaller viewports we already drop to single column. Make the dial slightly smaller there so it doesn't dominate the mobile screen. / @media (max-width: 900px) { svg.method-dial { max-width: 580px; } } / ============================================================ v6.2.7 — Method section: tighten vertical rhythm so the whole section (title + lede/dial + 4 stage cards) fits in roughly one viewport on a typical laptop. Changes (desktop only, mobile single-column flow unchanged): - Reduce top/bottom section padding 96 -> 56 - Reduce title -> hero gap (.section-head margin-bottom) 64 -> 28 - Reduce hero -> stages gap (.method-hero margin-bottom) 40 -> 28 - Reduce stages top margin 70 -> 28 - Trim .section-lede line-height a touch for density The dial size (675px) is unchanged. The SVG viewBox is also cropped in the markup to remove dead vertical space. ============================================================ / @media (min-width: 901px) { section.method { padding: 56px 0; } section.method .section-head { margin-bottom: 28px; } .method-hero { margin-bottom: 28px; } .method-stages { margin-top: 28px; } section.method .section-lede { line-height: 1.55; } } / ============================================================= CONTACT PAGE (v6.4.0) — /contact.html Standalone page version of the contact form, with reference sidebar (direct email/phone, response-time expectation, support routing, credentials). ============================================================= / .contact-page-section { padding: 60px 0 100px; background: var(--cream); } .contact-page-section .wrap { max-width: 1100px; } .contact-page-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: start; } @media (max-width: 900px) { .contact-page-grid { grid-template-columns: 1fr; gap: 40px; } } / Form column ----------------------------------------------- / .contact-page-form { background: var(--cream-warm); padding: 36px 38px; border-radius: 8px; border: 1px solid var(--line); } .contact-page-form .form-row { margin-bottom: 16px; } .contact-page-form .form-row-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 0; } .contact-page-form .form-row-grid .form-row { margin-bottom: 16px; } @media (max-width: 600px) { .contact-page-form .form-row-grid { grid-template-columns: 1fr; gap: 0; } } .contact-page-form label { display: block; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; color: var(--charcoal-soft); } .contact-page-form input[type="text"], .contact-page-form input[type="email"], .contact-page-form input[type="tel"], .contact-page-form textarea { width: 100%; padding: 11px 14px; border: 1px solid rgba(43, 43, 43, 0.32); border-radius: 4px; font-family: var(--f-body); font-size: 0.95rem; background: white; color: var(--charcoal); transition: border-color 0.2s ease, box-shadow 0.2s ease; box-sizing: border-box; } .contact-page-form input:focus, .contact-page-form textarea:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(75, 0, 130, 0.10); } .contact-page-form textarea { resize: vertical; min-height: 120px; } .contact-page-form .cf-turnstile { margin: 18px 0; } .contact-page-form .form-submit { background: var(--charcoal); color: var(--cream); border: 0; padding: 14px 30px; border-radius: 100px; font-family: var(--f-body); font-weight: 500; font-size: 0.95rem; cursor: pointer; transition: background 0.2s ease; } .contact-page-form .form-submit:hover { background: var(--orange); } .contact-page-form .form-note { font-size: 0.78rem; color: var(--charcoal-soft); margin-top: 14px; line-height: 1.5; } .contact-page-form .form-success, .contact-page-form .form-error { display: none; margin-top: 16px; padding: 14px 16px; border-radius: 4px; font-size: 0.92rem; line-height: 1.5; } .contact-page-form .form-success { background: rgba(75, 0, 130, 0.06); border: 1px solid rgba(75, 0, 130, 0.18); color: var(--indigo); } .contact-page-form .form-error { background: rgba(255, 69, 0, 0.06); border: 1px solid rgba(255, 69, 0, 0.22); color: var(--orange); } .contact-page-form.success-shown .form-success { display: block; } .contact-page-form.error-shown .form-error { display: block; } / Reference column / aside ---------------------------------- / .contact-page-card { background: white; padding: 32px 30px; border-radius: 8px; border: 1px solid var(--line); box-shadow: 0 2px 12px rgba(43, 43, 43, 0.04); } .contact-page-card h2 { font-family: var(--f-display); font-weight: 400; font-size: 1.4rem; color: var(--charcoal); margin: 0 0 16px; } .contact-page-card hr { margin: 22px 0; border: 0; border-top: 1px solid var(--line); } .contact-page-dl { margin: 0; } .contact-page-dl dt { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--charcoal-soft); margin-top: 12px; } .contact-page-dl dt:first-child { margin-top: 0; } .contact-page-dl dd { margin: 4px 0 0; font-size: 1rem; color: var(--charcoal); line-height: 1.5; } .contact-page-dl dd a { color: var(--indigo); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .contact-page-dl dd a:hover { color: var(--orange); } .contact-page-dl .dim { color: var(--charcoal-soft); font-size: 0.88rem; } .contact-page-routing { font-size: 0.95rem; color: var(--charcoal); line-height: 1.55; margin: 0; } .contact-page-routing a { color: var(--indigo); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .contact-page-routing a:hover { color: var(--orange); } .contact-page-creds { font-family: var(--f-mono); font-size: 0.78rem; color: var(--charcoal-soft); line-height: 1.7; margin: 0; letter-spacing: 0.04em; } / ==================================================================== v6.7.6 — Documentation scatter (replaces audit-blueprint-row's single isometric SVG) - 4 stylised document cards in a horizontal scatter on desktop - Each card is a button: hover lifts + scales + reveals caption, and dims its neighbours - Click opens .doc-modal with full-size SVG + descriptive copy - Mobile: stacks vertically, no rotation, caption always visible ==================================================================== / .docs-scatter { position: relative; width: 100%; max-width: 1100px; aspect-ratio: 1100 / 470; margin: 0 auto; padding-bottom: 36px; / room for the click hint and caption / } .doc-card { position: absolute; appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; width: 22%; transform-origin: center; transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.3s ease; } / Per-card scatter positions and rotations / .doc-card-1 { left: 4%; top: 12%; transform: rotate(-7deg); z-index: 2; } .doc-card-2 { left: 28%; top: 2%; transform: rotate(4deg); z-index: 3; } .doc-card-3 { left: 50%; top: 12%; transform: rotate(-3deg); z-index: 2; } .doc-card-4 { left: 74%; top: 2%; transform: rotate(6deg); z-index: 3; } .doc-paper { display: block; width: 100%; aspect-ratio: 240 / 340; background: #FBFAF7; box-shadow: 0 4px 16px -4px rgba(0,0,0,0.45), 0 12px 32px -16px rgba(0,0,0,0.35); transition: box-shadow 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); border-radius: 1px; overflow: hidden; } .doc-svg { display: block; width: 100%; height: 100%; } .doc-caption { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 14px; font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(251,250,247,0); text-align: center; white-space: nowrap; transition: color 0.3s ease; pointer-events: none; } / Hover / focus state: lift, square up, dim siblings / .doc-card:hover, .doc-card:focus-visible { transform: translateY(-14px) scale(1.06) rotate(0deg); z-index: 10; } .doc-card:hover .doc-paper, .doc-card:focus-visible .doc-paper { box-shadow: 0 14px 40px -8px rgba(0,0,0,0.55), 0 28px 64px -24px rgba(75,0,130,0.45); } .doc-card:hover .doc-caption, .doc-card:focus-visible .doc-caption { color: rgba(251,250,247,0.9); } .docs-scatter:hover .doc-card:not(:hover) { filter: brightness(0.6) saturate(0.85); } .doc-card:focus-visible { outline: none; } .doc-card:focus-visible .doc-paper { outline: 2px solid var(--orange); outline-offset: 6px; } / "Click any document for detail" hint at bottom of scatter / .docs-scatter::after { content: 'Click any document for detail'; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(251,250,247,0.32); pointer-events: none; } / Mobile: vertical stack, no rotations, captions always visible / @media (max-width: 720px) { .docs-scatter { aspect-ratio: auto; display: flex; flex-direction: column; gap: 26px; padding: 0 8px 24px; } .doc-card, .doc-card-1, .doc-card-2, .doc-card-3, .doc-card-4 { position: static; width: 100%; transform: none; } .doc-paper { max-width: 360px; margin: 0 auto; } .doc-caption { position: static; transform: none; margin-top: 10px; color: rgba(251,250,247,0.82); white-space: normal; } .docs-scatter:hover .doc-card:not(:hover) { filter: none; } .docs-scatter::after { font-size: 0.6rem; } .doc-card:hover, .doc-card:focus-visible { transform: scale(1.02); } } / Reduced-motion users: skip the lift + dim animation / @media (prefers-reduced-motion: reduce) { .doc-card { transition: none; } .doc-card:hover, .doc-card:focus-visible { transform: none; } .docs-scatter:hover .doc-card:not(:hover) { filter: none; } .doc-card:hover .doc-caption, .doc-card:focus-visible .doc-caption { color: rgba(251,250,247,0.9); } } / Hover hint text (shown next to audit-copy, hidden on mobile) / .audit-hint { display: inline; font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.06em; color: rgba(251,250,247,0.55); } @media (max-width: 720px) { .audit-hint { display: none; } } / ==================================================================== v6.7.6 — Documentation modal Inherits .zoom-modal base; adds two-column layout for paper + copy, plus prev/next nav and indicator dots. ==================================================================== / .doc-modal-stage { position: relative; width: 100%; max-width: 1100px; height: 88vh; max-height: 760px; display: flex; align-items: center; justify-content: center; } .doc-modal-panel { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(280px, 1fr) 1fr; gap: 56px; align-items: center; padding: 24px 80px; / leave horizontal room for prev/next nav / } .doc-modal-panel[hidden] { display: none; } .doc-modal-paper { background: #FBFAF7; box-shadow: 0 24px 80px -20px rgba(0,0,0,0.6); width: 100%; max-width: 520px; aspect-ratio: 240 / 340; margin: 0 auto; border-radius: 2px; overflow: hidden; } .doc-svg-modal { display: block; width: 100%; height: 100%; } .doc-modal-info { color: var(--cream); max-width: 480px; } .doc-modal-eyebrow { display: block; font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--orange); margin-bottom: 14px; } .doc-modal-title { font-family: var(--f-display); font-size: 2rem; font-weight: 500; line-height: 1.18; color: var(--cream); margin: 0 0 10px; } .doc-modal-sub { font-family: var(--f-display); font-style: italic; font-size: 1.1rem; color: rgba(251,250,247,0.72); margin: 0 0 22px; } .doc-modal-body { font-size: 1rem; color: rgba(251,250,247,0.82); line-height: 1.65; margin: 0; } .doc-modal-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(251,250,247,0.08); border: 1px solid rgba(251,250,247,0.22); color: var(--cream); cursor: pointer; display: grid; place-items: center; z-index: 5; transition: background 0.2s ease, transform 0.2s ease; } .doc-modal-prev { left: 24px; } .doc-modal-next { right: 24px; } .doc-modal-nav svg { width: 24px; height: 24px; } .doc-modal-nav:hover { background: rgba(251,250,247,0.18); transform: translateY(-50%) scale(1.06); } .doc-modal-nav:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; } .doc-modal-dots { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 5; } .doc-modal-dot { appearance: none; -webkit-appearance: none; background: rgba(251,250,247,0.25); border: 0; width: 9px; height: 9px; border-radius: 50%; cursor: pointer; padding: 0; transition: background 0.25s ease, transform 0.25s ease; } .doc-modal-dot:hover { background: rgba(251,250,247,0.5); } .doc-modal-dot.active { background: var(--orange); transform: scale(1.3); } .doc-modal-dot:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; } @media (max-width: 820px) { .doc-modal-stage { height: auto; max-height: 92vh; overflow-y: auto; padding: 8px 0; } .doc-modal-panel { position: static; grid-template-columns: 1fr; gap: 18px; padding: 60px 12px 70px; } .doc-modal-panel[hidden] { display: none; } .doc-modal-paper { max-width: 280px; } .doc-modal-title { font-size: 1.5rem; } .doc-modal-sub { font-size: 1rem; margin-bottom: 14px; } .doc-modal-body { font-size: 0.94rem; } .doc-modal-nav { width: 44px; height: 44px; } .doc-modal-prev { left: 8px; } .doc-modal-next { right: 8px; } .doc-modal-nav svg { width: 18px; height: 18px; } } / ==================================================================== v6.7.6 — Logo marquee (replaces 6-logo grid) Continuous horizontal scroll, 80s loop, pause on hover, fade edges. Track contains the logo set duplicated so the loop is seamless. ==================================================================== / .proof-marquee { position: relative; margin-top: 32px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); } .proof-marquee-track { display: flex; gap: 18px; width: max-content; animation: proof-scroll 80s linear infinite; will-change: transform; } .proof-marquee:hover .proof-marquee-track, .proof-marquee:focus-within .proof-marquee-track { animation-play-state: paused; } @keyframes proof-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } / Override the original .proof-chip grid behaviour for marquee context / .proof-marquee .proof-chip { flex: 0 0 auto; width: 168px; / All other chip styles inherited from base .proof-chip / } / Soft fade fallback for browsers without mask-image support (kept in markup; hidden when mask-image works) / .proof-marquee-fade { position: absolute; top: 0; bottom: 0; width: 60px; pointer-events: none; z-index: 2; } .proof-marquee-fade-l { left: 0; background: linear-gradient(to right, var(--cream), transparent); } .proof-marquee-fade-r { right: 0; background: linear-gradient(to left, var(--cream), transparent); } @supports (mask-image: linear-gradient(0deg, transparent, black)) or (-webkit-mask-image: linear-gradient(0deg, transparent, black)) { .proof-marquee-fade { display: none; } } @media (prefers-reduced-motion: reduce) { .proof-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; } } @media (max-width: 540px) { .proof-marquee .proof-chip { width: 140px; min-height: 70px; padding: 12px 14px; } .proof-marquee .proof-chip img { max-height: 36px; } } / ==================================================================== v6.7.10 — Footer credentials card (now lives inside footer-col--cred, the rightmost column of the 3-column footer top section). ASIAL Member is the sole credential. Card sits centered in its column. ==================================================================== */ .footer-cred-card { background: var(--cream); border-radius: 6px; padding: 16px 24px; display: flex; align-items: center; justify-content: center; } .footer-cred-card img { display: block; height: 56px; width: auto; max-width: 100%; } .footer-cred-card--asial img { height: 68px; } @media (max-width: 540px) { .footer-cred-card { padding: 12px 18px; } .footer-cred-card img { height: 44px; } .footer-cred-card--asial img { height: 54px; } }