/* ============================================================ ORPINGTON DESIGN SYSTEM Brand: Deep Slate Navy / Warm Parchment / Precision Emerald / Aged Gold Vertical: B2B ERP Consulting — Authority + Approachability Archetype: The Sage — wisdom, precision, trustworthy expertise ============================================================ */ :root { /* — PALETTE — */ --ink: #0C1521; /* near-black with blue undertone */ --navy: #152236; /* deep authority navy */ --navy-mid: #1C2F45; --navy-soft: #243750; --slate: #344E68; /* warm slate for cards */ --emerald: #1A6B45; --emerald-mid: #1F7D52; --emerald-glow: #24976A; --emerald-on-dark: #2FA97C; /* emerald-glow is 4.35:1 on navy — this clears AA */ --emerald-lite: rgba(36,151,106,0.12); --gold: #B8922A; /* aged gold — authority signal */ --gold-lite: #C9A84C; --parchment: #F6F2EB; /* warm editorial white */ --parchment-2: #EDE8DF; --parchment-3: #E0D9CE; --white: #FFFFFF; --text-primary: #1A2535; --text-mid: #4A5568; --text-soft: #718096; --text-ghost: #A0AEC0; /* — TYPOGRAPHY OPTION A (Playfair + DM Sans) — */ --font-display: "Playfair Display", Georgia, serif; --font-body: "DM Sans", system-ui, sans-serif; --font-mono: "DM Mono", monospace; /* — SPACING — */ --max-w: 1180px; --section-py: clamp(4.5rem, 9vw, 8rem); /* — EFFECTS — */ --shadow-sm: 0 2px 12px rgba(12,21,33,0.08); --shadow-md: 0 8px 32px rgba(12,21,33,0.12); --shadow-lg: 0 20px 60px rgba(12,21,33,0.18); --shadow-hero: 0 32px 80px rgba(12,21,33,0.28); --radius: 10px; --radius-lg: 18px; --radius-pill: 999px; --ease: cubic-bezier(0.4,0,0.2,1); --dur: 0.3s; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { font-family: var(--font-body); background: var(--parchment); color: var(--text-primary); font-size: 16px; line-height: 1.7; overflow-x: hidden; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } /* ============================================================ TYPOGRAPHY */ .eyebrow { display: inline-block; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--emerald-glow); } .eyebrow-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.38rem 1rem; background: rgba(36,151,106,0.1); border: 1px solid rgba(36,151,106,0.22); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--emerald-glow); } .eyebrow-pill-dark { background: rgba(36,151,106,0.15); border-color: rgba(36,151,106,0.28); color: var(--emerald-glow); } .eyebrow-dot { width: 5px; height: 5px; background: var(--emerald-glow); border-radius: 50%; display: inline-block; } h1, .h1 { font-family: var(--font-display); font-size: clamp(2.8rem, 5.5vw, 5rem); font-weight: 400; line-height: 1.06; letter-spacing: -0.02em; color: var(--white); } h1 em, .h1 em { font-style: italic; color: var(--emerald-glow); font-weight: 400; } h2, .h2 { font-family: var(--font-display); font-size: clamp(2rem, 3.8vw, 3.2rem); font-weight: 400; line-height: 1.1; letter-spacing: -0.015em; } h2 em, .h2 em { font-style: italic; } h3, .h3 { font-family: var(--font-display); font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; } .body-lg { font-size: 1.05rem; line-height: 1.78; color: var(--text-mid); } .body { font-size: 0.94rem; line-height: 1.72; color: var(--text-mid); } .mono { font-family: var(--font-mono); } .score-num { font-family: var(--font-mono); font-size: clamp(2.8rem, 5vw, 4.5rem); font-weight: 500; color: var(--emerald-glow); line-height: 1; } /* ============================================================ LAYOUT */ .container { max-width: var(--max-w); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); } .section { padding-block: var(--section-py); } .text-center { text-align: center; } /* ============================================================ NAV */ .nav { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 200; padding-block: 1rem; background: rgba(12,21,33,0.96); backdrop-filter: blur(16px) saturate(1.4); transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .nav.scrolled { box-shadow: 0 1px 0 rgba(255,255,255,0.06); } .nav-inner { display: flex; align-items: center; justify-content: space-between; max-width: var(--max-w); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); } .nav-logo { display: flex; align-items: center; gap: 0.65rem; } .nav-logo-img { height: 68px; width: auto; display: block; } .nav-links { display: flex; align-items: center; gap: 1.55rem; list-style: none; } .nav-links a { font-size: 0.83rem; font-weight: 500; letter-spacing: 0.04em; color: rgba(255,255,255,0.68); transition: color var(--dur); } .nav-links a:hover { color: var(--white); } .nav-btn { background: var(--emerald); color: var(--white) !important; padding: 0.52rem 1.3rem; border-radius: var(--radius-pill); font-size: 0.8rem !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase; transition: background var(--dur), transform var(--dur) !important; } .nav-btn:hover { background: var(--emerald-mid) !important; transform: translateY(-1px); } /* ============================================================ MOBILE NAV */ .mobile-menu-toggle { display: none; background: none; border: none; cursor: pointer; width: 40px; height: 40px; padding: 0; position: relative; z-index: 260; } .mobile-menu-toggle span { display: block; position: absolute; inset-inline-start: 8px; width: 24px; height: 2px; background: var(--white); border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), inset-block-start var(--dur) var(--ease); } .mobile-menu-toggle span:nth-child(1) { inset-block-start: 14px; } .mobile-menu-toggle span:nth-child(2) { inset-block-start: 20px; } .mobile-menu-toggle span:nth-child(3) { inset-block-start: 26px; } .mobile-menu-toggle.open span:nth-child(1) { inset-block-start: 20px; transform: rotate(45deg); } .mobile-menu-toggle.open span:nth-child(2) { opacity: 0; } .mobile-menu-toggle.open span:nth-child(3) { inset-block-start: 20px; transform: rotate(-45deg); } .mobile-menu-panel { position: fixed; inset-block: 0; inset-inline-end: 0; width: min(320px, 84vw); background: var(--navy); box-shadow: -12px 0 40px rgba(0,0,0,0.35); transform: translateX(100%); transition: transform 0.32s var(--ease); z-index: 250; display: flex; flex-direction: column; padding: 5.5rem 2rem 2rem; } .mobile-menu-panel.open { transform: translateX(0); } .mobile-menu-close { position: absolute; top: 1.3rem; right: 1.3rem; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 50%; cursor: pointer; color: var(--parchment); transition: background var(--dur), transform var(--dur); } .mobile-menu-close:hover { background: rgba(255,255,255,0.14); transform: rotate(90deg); } .mobile-menu-close svg { width: 16px; height: 16px; } .mobile-menu-panel a { display: block; padding: 1rem 0; font-size: 1.05rem; font-weight: 600; color: var(--parchment); border-bottom: 1px solid rgba(255,255,255,0.1); } .mobile-menu-panel .nav-btn { display: inline-block; margin-block-start: 1.5rem; text-align: center; } .mobile-menu-overlay { position: fixed; inset: 0; background: rgba(12,21,33,0.6); z-index: 240; opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); } .mobile-menu-overlay.open { opacity: 1; pointer-events: auto; } /* ============================================================ BUTTONS */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; border-radius: var(--radius-pill); cursor: pointer; transition: all var(--dur) var(--ease); border: none; } .btn-lg { font-size: 0.88rem; padding: 1rem 2.2rem; } .btn-md { font-size: 0.8rem; padding: 0.7rem 1.6rem; } .btn-sm { font-size: 0.74rem; padding: 0.52rem 1.2rem; } .btn-primary { background: var(--emerald); color: var(--white); box-shadow: 0 4px 20px rgba(26,107,69,0.28); } .btn-primary:hover { background: var(--emerald-mid); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(26,107,69,0.38); } .btn-ghost-light { background: transparent; color: rgba(255,255,255,0.75); border: 1.5px solid rgba(255,255,255,0.22); } .btn-ghost-light:hover { color: var(--white); border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.06); } .btn-outline-dark { background: transparent; color: var(--navy); border: 1.5px solid rgba(21,34,54,0.3); } .btn-outline-dark:hover { background: var(--navy); color: var(--white); border-color: var(--navy); } .btn-gold { background: var(--gold); color: var(--white); box-shadow: 0 4px 18px rgba(184,146,42,0.28); } .btn-gold:hover { background: var(--gold-lite); transform: translateY(-2px); } .btn-rescue { background: transparent; color: #8B2215; border: 1.5px solid rgba(139,34,21,0.3); } .btn-rescue:hover { background: #8B2215; color: var(--white); } .btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.5; } /* ============================================================ HERO */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; background: var(--ink); overflow: hidden; } /* Layered background atmosphere */ .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 75% 55% at 65% 35%, rgba(26,107,69,0.14) 0%, transparent 65%), radial-gradient(ellipse 40% 60% at 10% 80%, rgba(21,34,54,0.8) 0%, transparent 70%), linear-gradient(160deg, #0C1521 0%, #152236 50%, #0C1521 100%); pointer-events: none; } /* Fine grid texture */ .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.024) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.024) 1px, transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(ellipse 70% 80% at 60% 40%, black 0%, transparent 80%); } .hero-inner { position: relative; z-index: 2; width: 100%; } .hero-grid { display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; padding-block: clamp(7rem, 13vw, 11rem) clamp(4rem, 7vw, 6rem); } .hero-content { max-width: 720px; } .hero-pre { margin-block-end: 1.8rem; } .hero-title { margin-block: 1.4rem 1.6rem; } .hero-sub { font-size: 1.06rem; line-height: 1.76; color: rgba(246,242,235,0.65); max-width: 560px; margin-inline: auto; margin-block-end: 2.4rem; } .hero-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.9rem; margin-block-end: 2.4rem; } .hero-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; margin-block-end: 3rem; } .trust-item { display: flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(246,242,235,0.38); } .trust-dot { width: 3px; height: 3px; background: var(--emerald-glow); border-radius: 50%; flex-shrink: 0; } /* Hero confidence strip — inline score display (replaces the former photo panel) */ .hero-confidence-strip { display: flex; align-items: center; justify-content: center; gap: 1.4rem; flex-wrap: wrap; } .hero-score-card { background: var(--navy); border: 1px solid rgba(36,151,106,0.28); border-radius: var(--radius); padding: 1.1rem 1.6rem; box-shadow: var(--shadow-lg); min-width: 190px; text-align: start; } .score-card-label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-ghost); margin-block-end: 0.28rem; } .score-card-val { font-family: var(--font-mono); font-size: 2.4rem; font-weight: 500; color: var(--emerald-glow); line-height: 1; } .score-card-sub { font-size: 0.72rem; color: rgba(246,242,235,0.42); margin-block-start: 0.35rem; line-height: 1.4; } /* SVG ring badge */ .hero-ring { background: rgba(12,21,33,0.82); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius); padding: 0.9rem; flex-shrink: 0; } /* ============================================================ DIVIDER */ .section-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--parchment-3) 30%, var(--parchment-3) 70%, transparent); } .section-divider-dark { height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08) 30%, rgba(255,255,255,0.08) 70%, transparent); } /* ============================================================ NARRATIVE STORY SECTIONS */ /* Shared story section base */ .story-section { position: relative; overflow: hidden; } /* VIDEO — See it in action */ .section-video { background: var(--parchment); } .video-embed { position: relative; width: 100%; max-width: 860px; margin-inline: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--navy); } .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* PROBLEM — dark, tense */ .story-problem { background: var(--navy-mid); } .story-problem .h2 { color: var(--parchment); } /* RELIEF — light, warm */ .story-relief { background: var(--parchment); } .story-relief .h2 { color: var(--navy); } /* CONFIDENCE — dark, triumphant */ .story-confidence { background: var(--ink); } .story-confidence .h2 { color: var(--parchment); } /* DECISION — light parchment */ .story-decision { background: var(--parchment-2); } .story-decision .h2 { color: var(--navy); } /* Story grid layout */ .story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .story-grid-reverse { direction: rtl; } .story-grid-reverse > * { direction: ltr; } /* Story image */ .story-img-wrap { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); } .story-img-wrap img { width: 100%; height: 440px; object-fit: cover; display: block; transition: transform 0.8s var(--ease); } .story-img-wrap:hover img { transform: scale(1.025); } /* Overlay accent bar on images */ .story-img-accent { position: absolute; inset-inline-start: 0; inset-block-start: 0; inset-block-end: 0; width: 4px; background: linear-gradient(to bottom, var(--emerald-glow), transparent); } .story-img-accent-gold { background: linear-gradient(to bottom, var(--gold), transparent); } /* Scene label */ .scene-label { position: absolute; top: 1.1rem; left: 1.1rem; background: rgba(12,21,33,0.8); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-pill); padding: 0.32rem 0.85rem; font-family: var(--font-mono); font-size: 0.63rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(246,242,235,0.65); z-index: 5; } .scene-label-light { background: rgba(246,242,235,0.88); border-color: rgba(21,34,54,0.12); color: var(--text-mid); } /* Story content */ .story-content { } .story-content .eyebrow-pill { margin-block-end: 1.4rem; } .story-content .h2 { margin-block-end: 1.2rem; } .story-content .body-lg { margin-block-end: 1.6rem; max-width: 460px; } /* Pull quote */ .pull-quote { border-inline-start: 3px solid var(--emerald); padding: 0.8rem 1.4rem; margin-block: 1.6rem; } .pull-quote p { font-family: var(--font-display); font-size: 1.18rem; font-style: italic; font-weight: 400; line-height: 1.55; color: var(--parchment); } .pull-quote-dark p { color: var(--navy); } .pull-quote-gold { border-color: var(--gold); } /* Stat pills row */ .stat-row { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-block-start: 2rem; } .stat-pill { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius); padding: 1rem 1.3rem; min-width: 120px; } .stat-pill-light { background: var(--white); border-color: var(--parchment-3); box-shadow: var(--shadow-sm); } .stat-pill .num { font-family: var(--font-mono); font-size: 1.7rem; font-weight: 500; color: var(--emerald-glow); line-height: 1; margin-block-end: 0.2rem; } .stat-pill .lbl { font-size: 0.74rem; color: var(--text-soft); line-height: 1.35; } .stat-pill-light .num { color: var(--emerald); } .stat-pill-light .lbl { color: var(--text-mid); } /* ============================================================ COMPARE TABLE */ .section-compare { background: var(--white); } .compare-wrap { overflow-x: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border: 1px solid var(--parchment-3); margin-block-start: 2.5rem; } table { width: 100%; border-collapse: collapse; font-size: 0.88rem; background: var(--white); } thead tr { background: var(--navy); } thead th { padding: 1.1rem 1.4rem; text-align: left; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(246,242,235,0.55); font-weight: 500; } thead th:last-child { color: var(--emerald-on-dark); } tbody tr { border-bottom: 1px solid var(--parchment-2); transition: background var(--dur); } tbody tr:last-child { border-bottom: none; } tbody tr:hover { background: var(--parchment); } tbody td { padding: 0.95rem 1.4rem; color: var(--text-mid); vertical-align: top; line-height: 1.45; } tbody td:first-child { font-weight: 500; color: var(--navy); font-size: 0.83rem; } tbody td:last-child { color: var(--emerald); font-weight: 500; } .ck { color: var(--emerald-glow); } .cx { color: #C0392B; } /* ============================================================ DIAGNOSTIC CARDS */ .section-diagnostic { background: var(--navy); } .diag-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; margin-block-start: 3rem; } .diag-card { background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.065); border-radius: var(--radius-lg); padding: 1.9rem 1.7rem; position: relative; overflow: hidden; transition: border-color var(--dur), transform var(--dur); } .diag-card::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px; background: var(--emerald); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); } .diag-card:hover { border-color: rgba(36,151,106,0.28); transform: translateY(-4px); } .diag-card:hover::before { transform: scaleX(1); } .diag-num { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--emerald-glow); margin-block-end: 1.1rem; } .diag-title { font-family: var(--font-display); font-size: 1.32rem; font-weight: 500; color: var(--parchment); margin-block-end: 0.9rem; line-height: 1.25; } .diag-body { font-size: 0.88rem; line-height: 1.72; color: rgba(246,242,235,0.55); } /* ============================================================ SERVICE LADDER */ .section-services { background: var(--parchment-2); } .service-ladder { display: flex; flex-direction: column; gap: 1px; background: var(--parchment-3); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); margin-block-start: 3rem; } .svc-row { display: grid; grid-template-columns: 190px 1fr auto; gap: 2rem; align-items: start; background: var(--white); padding: 2rem 2.2rem; transition: background var(--dur); } .svc-row:hover { background: var(--parchment); } .tier-badge { display: inline-block; padding: 0.28rem 0.75rem; border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; margin-block-end: 0.5rem; } .t-free { background: rgba(26,107,69,0.1); color: var(--emerald); border: 1px solid rgba(26,107,69,0.2); } .t-report { background: var(--emerald); color: var(--white); border: 1px solid var(--emerald); } .t-adv { background: rgba(21,34,54,0.07); color: var(--navy); border: 1px solid rgba(21,34,54,0.15); } .t-consult { background: rgba(184,146,42,0.1); color: #7A5F10; border: 1px solid rgba(184,146,42,0.25); } .t-rescue { background: rgba(139,34,21,0.07); color: #7A1E10; border: 1px solid rgba(139,34,21,0.2); } .tier-sub { font-size: 0.78rem; color: var(--text-soft); } .svc-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; color: var(--navy); margin-block-end: 0.55rem; } .svc-desc { font-size: 0.87rem; line-height: 1.68; color: var(--text-mid); margin-block-end: 0.85rem; } .svc-desc a { color: var(--emerald); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .svc-desc a:hover { color: var(--emerald-mid); } .chip-row { display: flex; flex-wrap: wrap; gap: 0.38rem; } .chip { background: var(--parchment); border: 1px solid var(--parchment-3); border-radius: var(--radius-pill); padding: 0.18rem 0.68rem; font-family: var(--font-mono); font-size: 0.63rem; color: var(--navy); letter-spacing: 0.05em; font-weight: 500; } .svc-action { padding-block-start: 0.2rem; white-space: nowrap; } /* ============================================================ PLATFORMS */ .section-platforms { background: var(--white); } .plat-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 1rem; margin-block-start: 3rem; } .plat-card { background: var(--parchment); border: 1px solid var(--parchment-2); border-radius: var(--radius); padding: 1.5rem 1.1rem; text-align: center; transition: all var(--dur) var(--ease); } .plat-card:hover { background: var(--navy); border-color: var(--navy); transform: translateY(-4px); box-shadow: var(--shadow-lg); } .plat-card:hover .plat-abbr { background: rgba(255,255,255,0.08); color: var(--emerald-glow); } .plat-card:hover .plat-name { color: var(--white); } .plat-card:hover .plat-subs { color: rgba(246,242,235,0.5); } .plat-abbr { width: 46px; height: 46px; background: var(--parchment-2); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-inline: auto; margin-block-end: 0.9rem; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.08em; color: var(--navy); text-transform: uppercase; transition: all var(--dur); } .plat-name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--navy); margin-block-end: 0.35rem; transition: color var(--dur); } .plat-subs { font-size: 0.72rem; color: var(--text-soft); line-height: 1.45; transition: color var(--dur); } /* ============================================================ ICP */ .section-icp { background: var(--navy-mid); } .icp-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; margin-block-start: 3rem; } .icp-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-lg); padding: 2.1rem 1.8rem; transition: all var(--dur); } .icp-card:hover { background: rgba(255,255,255,0.055); border-color: rgba(36,151,106,0.22); } .icp-role { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--emerald-glow); margin-block-end: 0.75rem; } .icp-title { font-family: var(--font-display); font-size: 1.45rem; font-weight: 400; color: var(--parchment); margin-block-end: 1rem; line-height: 1.2; } .icp-body { font-size: 0.88rem; line-height: 1.72; color: rgba(246,242,235,0.55); } /* ============================================================ TESTIMONIALS */ .section-testimonials { background: var(--parchment); overflow: hidden; } .testi-track-wrap { margin-block-start: 3rem; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%); } .testi-track { display: flex; align-items: stretch; /* all cards share the tallest card's height */ width: max-content; animation: testiScroll 64s linear infinite; } /* The track holds the card set twice, so -50% lands exactly on the start of the copy. Spacing lives on each card's margin rather than flex `gap` — with `gap` the halfway point falls mid-gap and the loop visibly jumps. */ @keyframes testiScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .testi-track.paused { animation-play-state: paused; } /* Pause while reading or tabbing through, so links aren't moving targets */ .testi-track-wrap:hover .testi-track, .testi-track-wrap:focus-within .testi-track { animation-play-state: paused; } .testi-featured.in-marquee { flex: 0 0 auto; width: min(400px, 82vw); max-width: none; margin: 0 1.4rem 0 0; /* every card, including the last — keeps -50% exact */ padding: 1.9rem 1.7rem 1.4rem; /* Column layout pins the attribution and CTA to the bottom, so those rows line up across cards even when the quotes differ in length. */ display: flex; flex-direction: column; } .testi-featured.in-marquee + .testi-featured.in-marquee { margin-block-start: 0; } /* Quote uses the body face, not the display italic — an italic serif at this size is hard to read and sat oddly against the sans-serif attribution. */ .testi-featured.in-marquee .testi-feat-quote { font-family: var(--font-body); font-style: normal; font-size: 0.97rem; line-height: 1.62; color: var(--text-primary); margin: 0 0 1.1rem; flex: 1 1 auto; /* absorbs the slack so footers align */ } .testi-featured.in-marquee .testi-quote-mark { width: 26px; height: 26px; margin-block-end: 0.35rem; } .testi-featured.in-marquee .testi-feat-footer { /* At 400px the person block and the logo cannot share a row, so some cards wrapped and others did not. Stacking them makes every footer the same shape, and the reserved heights absorb 1- vs 2-line roles and the different logo aspect ratios. */ flex-direction: column; align-items: flex-start; gap: 0.85rem; padding-block-start: 1rem; min-height: 132px; } .testi-featured.in-marquee .testi-feat-person { min-height: 64px; } /* fits a 2-line role */ .testi-featured.in-marquee .testi-feat-logo-wrap { min-height: 56px; align-items: center; } .testi-featured.in-marquee .testi-feat-cta { min-height: 44px; } .testi-featured.in-marquee .testi-report-link { line-height: 1.35; } .testi-featured.in-marquee .testi-feat-name { font-size: 0.98rem; } .testi-featured.in-marquee .testi-feat-role { font-size: 0.76rem; line-height: 1.4; } .testi-featured.in-marquee .testi-feat-photo-wrap { width: 50px; height: 50px; } .testi-featured.in-marquee .testi-feat-cta { margin-block-start: 1.1rem; padding-block-start: 1rem; } .testi-featured.in-marquee .testi-report-link { font-size: 0.83rem; } .testi-featured.in-marquee .testi-report-note { font-size: 0.62rem; } /* logos scale down in step with the smaller card */ .testi-featured.in-marquee .testi-feat-logo { height: 34px; max-width: 150px; } .testi-featured.in-marquee .testi-feat-logo.is-stacked { height: 54px; } .testi-featured.in-marquee .testi-feat-logo.is-stacked-wide { height: 46px; } .testi-pause { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: none; border: 1px solid var(--parchment-3); border-radius: 999px; padding: 0.4rem 1.1rem; min-height: 44px; cursor: pointer; /* 44px = min touch target */ font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mid); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .testi-pause:hover { color: var(--navy); border-color: var(--gold); } .testi-pause svg { width: 12px; height: 12px; } .testi-pause .testi-play-icon { display: none; } .testi-pause[aria-pressed="true"] .testi-pause-icon { display: none; } .testi-pause[aria-pressed="true"] .testi-play-icon { display: inline; } /* Respect a reduced-motion preference: no auto-scroll at all. The marquee becomes a normal swipeable row and the duplicate set is dropped. */ @media (prefers-reduced-motion: reduce) { .testi-track { animation: none; } .testi-track-wrap { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; padding-inline: 1.5rem; } .testi-featured.in-marquee { scroll-snap-align: center; } .testi-featured.in-marquee[aria-hidden="true"] { display: none; } .testi-hint { display: none; } } .testi-card { flex: 0 0 auto; width: 320px; background: var(--white); border: 1px solid var(--parchment-3); border-radius: var(--radius-lg); padding: 1.8rem 1.7rem; box-shadow: var(--shadow-sm); cursor: pointer; transition: box-shadow var(--dur), border-color var(--dur); } .testi-card:hover { box-shadow: var(--shadow-md); border-color: rgba(184,146,42,0.3); } .testi-quote-lines { margin-block-end: 1.4rem; } .testi-skel-line { height: 0.62rem; border-radius: 999px; background: var(--parchment-2); margin-block-end: 0.6rem; } .testi-skel-line.w-full { width: 100%; } .testi-skel-line.w-90 { width: 90%; } .testi-skel-line.w-70 { width: 70%; } .testi-person { display: flex; align-items: center; gap: 0.85rem; padding-block-start: 1.1rem; border-block-start: 1px solid var(--parchment-2); } .testi-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--parchment-2); flex-shrink: 0; } .testi-person-lines { flex: 1; } .testi-skel-line.name { width: 60%; height: 0.68rem; } .testi-skel-line.role { width: 85%; height: 0.55rem; margin-block-end: 0; background: var(--parchment-3); } .testi-hint { text-align: center; margin-block-start: 1.6rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-ghost); } /* Featured single testimonial */ .testi-featured { position: relative; max-width: 760px; margin: 3rem auto 0; background: var(--white); border: 1px solid var(--parchment-3); border-radius: var(--radius-lg); padding: 2.8rem 2.6rem 2.2rem; box-shadow: var(--shadow-md); } .testi-quote-mark { width: 46px; height: 46px; color: var(--gold); opacity: 0.5; margin-block-end: 0.6rem; } .testi-feat-quote { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.5; color: var(--navy); margin: 0 0 2rem; font-style: italic; } .testi-feat-footer { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding-block-start: 1.6rem; border-block-start: 1px solid var(--parchment-2); } .testi-feat-person { display: flex; align-items: center; gap: 1rem; } .testi-feat-photo-wrap { position: relative; width: 60px; height: 60px; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: var(--navy); display: flex; align-items: center; justify-content: center; } .testi-feat-photo-wrap::before { content: attr(data-initials); font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--white); } .testi-feat-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; } .testi-feat-id { display: flex; flex-direction: column; } .testi-feat-name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--navy); } .testi-feat-role { font-size: 0.82rem; color: var(--text-mid); margin-block-start: 0.15rem; } .testi-feat-logo-wrap { flex-shrink: 0; display: flex; align-items: center; min-height: 44px; text-decoration: none; opacity: 0.92; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } a.testi-feat-logo-wrap:hover { opacity: 1; transform: translateY(-1px); } .testi-feat-logo { height: 42px; width: auto; max-width: 190px; object-fit: contain; } /* Stacked lockups (icon over wordmark) read far smaller than wide ones at the same height — give them room so their optical weight matches. */ .testi-feat-logo.is-stacked { height: 66px; } .testi-feat-logo.is-stacked-wide { height: 57px; } .testi-feat-logo-wrap.logo-fallback::after { content: attr(data-brand); font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--navy); letter-spacing: 0.01em; } /* Second and subsequent testimonials sit closer than the first */ .testi-featured + .testi-featured { margin-block-start: 1.6rem; } @media (max-width: 620px) { .testi-featured { padding: 2rem 1.5rem 1.7rem; } .testi-feat-quote { font-size: 1.22rem; } .testi-feat-footer { gap: 1.2rem; } } .testi-feat-cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem; margin-block-start: 1.5rem; padding-block-start: 1.4rem; border-block-start: 1px dashed var(--parchment-3); } .testi-report-link { display: inline-flex; align-items: center; gap: 0.6rem; background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font-body); font-size: 0.92rem; font-weight: 600; color: var(--emerald); border-block-end: 1px solid transparent; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .testi-report-link:hover { color: var(--emerald-mid); border-block-end-color: currentColor; } .testi-report-link svg { width: 17px; height: 17px; flex-shrink: 0; } .testi-report-note { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); } /* Brief glow on the contact form when arriving from the report link */ .contact-form.form-highlight input, .contact-form.form-highlight textarea { border-color: var(--emerald-glow); box-shadow: 0 0 0 3px rgba(16,185,129,0.12); } .contact-form.form-highlight input, .contact-form.form-highlight textarea { transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease); } /* ============================================================ FINAL CTA */ .section-cta { background: var(--ink); text-align: center; position: relative; overflow: hidden; } .section-cta::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 55% at 50% 0%, rgba(26,107,69,0.2) 0%, transparent 70%); } .cta-inner { position: relative; z-index: 1; max-width: 660px; margin-inline: auto; } .cta-inner .h2 { color: var(--parchment); margin-block: 0.9rem 1.3rem; } .cta-inner .body-lg { color: rgba(246,242,235,0.58); margin-block-end: 2.4rem; } .cta-actions { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; } .cta-reassure { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; color: rgba(246,242,235,0.3); } /* Contact block: Call Now, form, email — inside the final CTA section */ .contact-block { margin-block-start: 3rem; padding-block-start: 2.6rem; border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; align-items: center; gap: 1.6rem; } .contact-form { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 0.9rem; text-align: left; } .contact-form .form-row { display: flex; gap: 0.9rem; flex-wrap: wrap; } .contact-form input, .contact-form textarea { flex: 1; min-width: 180px; width: 100%; padding: 0.85rem 1rem; border-radius: var(--radius); border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.05); color: var(--parchment); font-family: var(--font-body); font-size: 0.88rem; transition: border-color var(--dur) var(--ease); } .contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(246,242,235,0.4); } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--emerald-glow); } .contact-form textarea { resize: vertical; min-height: 96px; } .contact-form button { justify-content: center; } .contact-email { font-size: 0.82rem; color: rgba(246,242,235,0.5); } .contact-email a { color: var(--emerald-glow); font-weight: 600; } .contact-regions { font-size: 0.8rem; line-height: 1.6; text-align: center; color: rgba(246,242,235,0.42); max-width: 540px; margin-block-start: 0.2rem; } .contact-regions strong { color: rgba(246,242,235,0.66); font-weight: 600; } .contact-status { font-size: 0.85rem; margin-block-start: 0.6rem; padding: 0.6rem 0.9rem; border-radius: 6px; } .contact-status-success { color: var(--emerald-glow); background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3); } .contact-status-error { color: #f87171; background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.3); } /* ============================================================ FOOTER */ .footer { background: #080E18; padding-block: 3rem 1.6rem; } .footer-cols { display: flex; gap: 2.4rem; border: none; } .footer-cols > .footer-col { flex: 1 1 0; min-width: 0; border: none; } .footer-brand { display: flex; align-items: flex-start; } .footer-logo-img { height: 40px; width: auto; display: block; } .footer-col-title { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(246,242,235,0.35); margin-block-end: 1rem; } .footer-menu { display: flex; flex-direction: column; gap: 0.75rem; list-style: none; border: none; } .footer-menu a { font-size: 0.83rem; color: rgba(246,242,235,0.55); transition: color var(--dur); } .footer-menu a:hover { color: rgba(246,242,235,0.9); } .footer-info p { font-size: 0.83rem; color: rgba(246,242,235,0.55); margin: 0 0 0.6rem; } .footer-info p:last-child { margin-block-end: 0; } .footer-info p strong { color: rgba(246,242,235,0.85); font-weight: 600; } .footer-info a { color: rgba(246,242,235,0.55); transition: color var(--dur); } .footer-info a:hover { color: rgba(246,242,235,0.9); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-block-start: 2.4rem; /* padding-block (not padding-block-start) so the Privacy Policy/Terms links and the social icons sit centered top-to-bottom between this rule's own top border and the next element's top border directly below (the first
, which is flush against this element and shows its own 1px border even while collapsed) -- equal padding above and below the content = equal gap to both lines. 0.8rem top+bottom (not the original 1.6rem top-only) keeps the total distance between the two lines the same as before this was made symmetric: half the padding on each side sums to the same 1.6rem. */ padding-block: 0.8rem; border-block-start: 1px solid rgba(246,242,235,0.08); } .footer-links { display: flex; gap: 1.6rem; list-style: none; flex-wrap: wrap; border: none; } .footer-links a { font-size: 0.76rem; color: rgba(246,242,235,0.28); transition: color var(--dur); } .footer-links a:hover { color: rgba(246,242,235,0.65); } .footer-social { display: flex; gap: 1rem; } /* The LinkedIn/Facebook marks are now full-color vector logos (their own official badge colors baked into the SVG -- see /assets/logo/), not currentColor line icons, so there's no color rule to apply here anymore; only the same dim/brighten-on-hover treatment as before. */ .footer-social a { opacity: 0.82; transition: opacity var(--dur); display: flex; } .footer-social a:hover { opacity: 1; } .footer-social img { width: 19px; height: 19px; display: block; } .footer-legal-trigger { /* Same font, size and color as the top nav's own links (.nav-links a) so "Privacy Policy"/"Terms" read as part of the same site typography, not a separate faint footer-only style. */ background: none; border: none; padding: 0; margin: 0; cursor: pointer; font-family: var(--font-body); font-size: 0.83rem; font-weight: 500; letter-spacing: 0.04em; color: rgba(255,255,255,0.68); transition: color var(--dur); } .footer-legal-trigger:hover, .footer-legal-trigger[aria-expanded="true"] { color: var(--white); } @media (max-width: 720px) { .footer-cols { flex-direction: column; gap: 2rem; } } /* .site-home-btn (bottom-left, site.css) and the live-chat launcher (bottom-right, widget/widget.js's .cw-launcher) both float at a fixed pixel offset from the viewport edges, not from .footer-bottom's own container -- so as the viewport narrows and .container's side inset shrinks toward its floor, the Privacy Policy/Terms links (left) and the LinkedIn/Facebook icons (right) end up underneath them. Because .container is centered with its own max-width, that inset only grows enough to clear both floating buttons on its own above ~1300px wide; below that, on everything from phones through most laptop screens, give the links extra room on the left and the icons extra room on the right so neither ever sits under a floating button. */ @media (max-width: 1300px) { .footer-links { margin-inline-start: 60px; } /* margin-inline-start:auto keeps these icons pinned to the right edge of their own flex line even on the narrowest phones, where the added margin-inline-end below is enough to make .footer-bottom's flex-wrap drop them to a line of their own -- without it, a lone wrapped item loses the row's space-between push and falls back to the left, landing right under .site-home-btn instead of clear of the chat launcher on the right. */ .footer-social { margin-inline-start: auto; margin-inline-end: 70px; } } /* Expandable legal panels */ .legal-panel { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); border-top: 1px solid rgba(255,255,255,0.06); } .legal-panel.open { max-height: 1400px; border-top-color: rgba(255,255,255,0.1); } .legal-panel-inner { padding-block: 2rem 1.4rem; max-width: 760px; } .legal-panel-inner h4 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; color: var(--parchment); margin-block-end: 0.9rem; } .legal-panel-inner p { font-size: 0.82rem; line-height: 1.7; color: rgba(246,242,235,0.55); margin-block-end: 0.9rem; } .legal-panel-inner a { color: var(--emerald-glow); text-decoration: underline; } /* Cookie consent banner */ .cookie-banner { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 300; background: var(--navy); border-top: 1px solid rgba(255,255,255,0.1); box-shadow: 0 -8px 32px rgba(0,0,0,0.3); transform: translateY(110%); transition: transform 0.4s var(--ease); } .cookie-banner.show { transform: translateY(0); } .cookie-banner-inner { max-width: var(--max-w); margin-inline: auto; padding: 1.2rem clamp(1.25rem, 4vw, 2.5rem); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .cookie-text { font-size: 0.82rem; line-height: 1.55; color: rgba(246,242,235,0.7); max-width: 640px; } .cookie-link { background: none; border: none; padding: 0; margin: 0; cursor: pointer; font: inherit; color: var(--emerald-glow); text-decoration: underline; } .cookie-actions { display: flex; gap: 0.7rem; flex-shrink: 0; } /* ============================================================ SCROLL REVEAL */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } .reveal.in { opacity: 1; transform: none; } .d1 { transition-delay: 0.1s; } .d2 { transition-delay: 0.2s; } .d3 { transition-delay: 0.3s; } .d4 { transition-delay: 0.4s; } /* Nine nav items no longer fit a narrow laptop bar — hand over to the hamburger before the row wraps. */ @media (max-width: 1180px) { .nav-links { display: none; } .nav-toggle, .mobile-menu-toggle, #mobileMenuToggle { display: flex; } } /* ============================================================ RESPONSIVE */ @media (max-width: 1024px) { .plat-grid { grid-template-columns: repeat(3,1fr); } } @media (max-width: 840px) { .story-grid, .story-grid-reverse { grid-template-columns: 1fr; gap: 2.5rem; direction: ltr; } .diag-grid, .icp-grid { grid-template-columns: 1fr; } .svc-row { grid-template-columns: 1fr; gap: 1rem; } .plat-grid { grid-template-columns: repeat(2,1fr); } .nav-links { display: none; } .mobile-menu-toggle { display: block; } } @media (max-width: 480px) { .plat-grid { grid-template-columns: 1fr 1fr; } .hero-actions { flex-direction: column; align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } * { transition-duration: 0.01ms !important; } } /* ============================================================ FREE CALCULATOR PANEL .calc-dock / .calc-tab (the floating vertical "Free Score Calculator" tab that used to sit at the right edge of the viewport) were removed at the user's request. .calc-panel stays -- it's still opened by every other "Get Your Score" / "Start Free" button on the page. */ .calc-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 92vw); background: var(--parchment); box-shadow: -12px 0 40px rgba(12,21,33,0.22); transform: translateX(100%); transition: transform 0.32s var(--ease); z-index: 901; display: flex; flex-direction: column; } .calc-panel.open { transform: translateX(0); } .calc-head { background: var(--navy); color: var(--parchment); padding: 1.2rem 1.3rem; display: flex; align-items: flex-start; justify-content: space-between; flex-shrink: 0; } .calc-head-eyebrow { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--emerald-glow); display: block; margin-bottom: 0.3rem; } .calc-head h3 { font-family: var(--font-display); font-size: 1.15rem; margin: 0; line-height: 1.25; } .calc-min-btn { background: rgba(255,255,255,0.08); border: none; color: var(--parchment); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; flex-shrink: 0; font-size: 1rem; line-height: 1; display: flex; align-items: center; justify-content: center; } .calc-min-btn:hover { background: rgba(255,255,255,0.18); } .calc-body { flex: 1; overflow-y: auto; padding: 1.3rem; } .calc-body::-webkit-scrollbar { width: 6px; } .calc-body::-webkit-scrollbar-thumb { background: var(--parchment-3); border-radius: 3px; } .calc-progress { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-soft); margin-bottom: 1rem; letter-spacing: 0.04em; } .calc-q { margin-bottom: 1.4rem; } .calc-q-cat { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--emerald-mid); font-weight: 500; display: block; margin-bottom: 0.35rem; } .calc-q-text { font-size: 0.87rem; color: var(--text-primary); font-weight: 500; margin: 0 0 0.6rem; line-height: 1.4; } .calc-opt { display: block; margin-bottom: 0.45rem; } .calc-opt input { position: absolute; opacity: 0; pointer-events: none; } .calc-opt span { display: block; padding: 0.6rem 0.8rem; border-radius: 8px; border: 1px solid var(--parchment-3); background: var(--white); font-size: 0.82rem; color: var(--text-mid); cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease); } .calc-opt input:checked + span { border-color: var(--emerald-mid); background: var(--emerald-lite); color: var(--text-primary); font-weight: 500; } .calc-opt span:hover { border-color: var(--emerald-mid); } .calc-submit { width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; opacity: 0.45; pointer-events: none; } .calc-submit.ready { opacity: 1; pointer-events: auto; } .calc-note { font-size: 0.7rem; color: var(--text-soft); text-align: center; margin-top: 0.7rem; line-height: 1.4; } /* Results */ .calc-results { display: none; } .calc-results.show { display: block; } .calc-score-wrap { text-align: center; padding: 0.6rem 0 1.5rem; } .calc-score-num { font-family: var(--font-display); font-size: 3rem; line-height: 1.2; font-weight: 600; } .calc-score-max { font-size: 1rem; color: var(--text-mid); font-weight: 400; } .calc-score-band { display: inline-block; margin-top: 0.85rem; padding: 0.28rem 0.8rem; border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; } .calc-confidence { text-align: center; font-size: 0.76rem; color: var(--text-mid); margin-bottom: 1.3rem; } .calc-flags-title, .calc-next-title { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mid); font-weight: 500; margin: 0 0 0.6rem; } .calc-flag { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.7rem 0; border-top: 1px solid var(--parchment-3); font-size: 0.82rem; color: var(--text-primary); line-height: 1.4; } .calc-flag:last-of-type { border-bottom: 1px solid var(--parchment-3); } .calc-flag-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 0.35rem; flex-shrink: 0; } .calc-next { list-style: none; padding: 0; margin: 0 0 1.3rem; } .calc-next li { font-size: 0.79rem; color: var(--text-mid); padding-left: 1.1rem; position: relative; margin-bottom: 0.5rem; line-height: 1.4; } .calc-next li::before { content: "→"; position: absolute; left: 0; color: var(--emerald-mid); } .calc-actions-row { display: flex; gap: 0.6rem; margin-top: 1rem; } .calc-actions-row .btn { flex: 1; justify-content: center; font-size: 0.76rem; padding: 0.7rem 0.9rem; } .calc-retake { display: block; text-align: center; font-size: 0.76rem; color: var(--text-mid); margin-top: 1rem; cursor: pointer; text-decoration: underline; background: none; border: none; width: 100%; } #calcCaptureArea { background: var(--parchment); padding: 0.4rem; border-radius: 10px; } .calc-report-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.7rem; margin-bottom: 0.8rem; border-bottom: 1px solid var(--parchment-3); } .calc-report-brand { font-family: var(--font-display); font-size: 0.92rem; font-weight: 600; color: var(--navy); } .calc-report-date { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); } .calc-explain { font-size: 0.82rem; line-height: 1.6; color: var(--text-mid); text-align: center; max-width: 340px; margin: 0 auto 1.2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--parchment-3); } .calc-chart { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 1rem; } .calc-chart-row { display: grid; grid-template-columns: 108px 1fr 32px; align-items: center; gap: 0.6rem; } .calc-chart-label { font-size: 0.68rem; color: var(--text-mid); font-weight: 500; } .calc-chart-track { background: var(--parchment-2); border-radius: var(--radius-pill); height: 8px; overflow: hidden; } .calc-chart-fill { display: block; height: 100%; border-radius: var(--radius-pill); transition: width 0.5s var(--ease); } .calc-chart-val { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-soft); text-align: right; } .calc-conclusion { font-size: 0.82rem; line-height: 1.65; color: var(--text-mid); margin-bottom: 0.4rem; } .calc-disclaimer { font-size: 0.66rem; line-height: 1.5; color: var(--text-soft); margin-top: 1.3rem; padding-top: 0.9rem; border-top: 1px solid var(--parchment-3); } @media (max-width: 480px) { .calc-panel { width: 100vw; } } @media (max-width: 380px) { .calc-body { padding: 1rem; } .calc-chart-row { grid-template-columns: 84px 1fr 30px; gap: 0.4rem; } .calc-chart-label { font-size: 0.62rem; line-height: 1.2; } .calc-score-num { font-size: 2.5rem; } .calc-actions-row { flex-direction: column; } .calc-actions-row .btn { width: 100%; } .calc-report-head { flex-wrap: wrap; gap: 0.3rem; } } /* ============================================================ INSIGHTS OVERLAY Hidden by default. All content lives in this single file, inside hidden panels, and is only shown when the "Insights" nav link is clicked. Nothing here is fetched or loaded separately. */ .insights-overlay { position: fixed; inset: 0; z-index: 500; background: var(--parchment); display: none; overflow-y: auto; -webkit-overflow-scrolling: touch; } .insights-overlay.open { display: block; } body.insights-lock { overflow: hidden; } .insights-overlay-topbar { position: sticky; inset-block-start: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; background: rgba(12,21,33,0.97); backdrop-filter: blur(16px) saturate(1.4); padding: 1rem clamp(1.25rem, 4vw, 2.5rem); } .insights-overlay-brand { font-family: var(--font-display); color: var(--white); font-size: 1.15rem; } .insights-overlay-close { background: none; border: none; cursor: pointer; color: var(--white); font-size: 1.5rem; line-height: 1; padding: 0.3rem 0.5rem; transition: opacity var(--dur); } .insights-overlay-close:hover { opacity: 0.7; } .insights-panel { display: none; } .insights-panel.active { display: block; } .insights-overlay .back-to-hub { display: inline-flex; align-items: center; gap: 0.4rem; background: none; border: none; cursor: pointer; padding: 0; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 1.1rem; transition: color var(--dur); } .insights-overlay .back-to-hub:hover { color: var(--white); } .site-home-btn { position: fixed; left: 24px; /* 31.5px, not a round 28/30px: at the page's natural resting scroll position (all the way down), this is what centers the button vertically between .footer-bottom's own top border and the next line below it (the first .legal-panel's top border) -- see the matching comment on .footer-bottom above. Measured, not guessed: (distance from the very bottom of