/* ===== FONTS ===== */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ===== RESET & BASE ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } /* ===== COLOR SYSTEM ===== Same design system as rotecompliance.com, different job. The structure, spacing and component CSS below are shared; only these tokens differ. Rote is indigo + emerald and sells software. This is navy + brass and sells a practitioner's time — the palette should read as counsel, not as a product. Nothing below this block hardcodes a color. Keep it that way. */ :root { --bg: #0a1420; --surface: #111e2e; --surface-2: #18293c; --border: rgba(58, 146, 201, 0.16); --border-accent: rgba(200, 145, 47, 0.28); --brand-900: #0f2a43; --brand-700: #14456d; --brand-500: #1d6fa5; --brand-400: #3a92c9; --brand-300: #6fb3dd; /* Channel triplets for the rgba() literals below — same colors as the hex tokens above, in a form rgba() can take an alpha with. */ --brand-rgb: 58, 146, 201; --accent-rgb: 200, 145, 47; --accent: #c8912f; /* Text drawn ON an accent fill (buttons, chips). 6.9:1 against #c8912f. */ --on-accent: #14100a; --accent-dim: #3f2c0d; --accent-glow: rgba(200, 145, 47, 0.12); /* Glass surfaces. The depth treatment on .rl-card/.rote-card/.persona needs a translucent card fill, and it has to invert between themes: dark glass over a dark ground, light glass over a light one. Everything else in the effect (blur, lift, brass hover) is theme-independent and stays in the rule. */ --glass-bg: rgba(17, 30, 46, 0.6); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.1); /* Neutral shadow channel. Was rgba(20, 21, 42, ...) hardcoded in four card shadows — that value is rotecompliance.com's light --text, copied in with the ladder components. */ --shadow-rgb: 0, 0, 0; /* Form error text. 6.70:1 on --bg #0a1420. */ --danger: #f87171; --text: #e6edf3; --text-muted: #9bacbd; --text-dim: #7488a0; /* translucent nav/menu surfaces (theme-aware) */ --nav-bg: rgba(10, 20, 32, 0.92); --menu-bg: rgba(17, 30, 46, 0.98); --menu-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); --menu-inset: rgba(0, 0, 0, 0.18); --font-mono: 'JetBrains Mono', 'Courier New', monospace; --font-sans: 'Inter', system-ui, sans-serif; --max-w: 1100px; --radius: 6px; } /* ===== LIGHT THEME — the site default (set via in Base.astro) ===== Token-only override so the whole site reskins without touching component CSS. Tuned for contrast on light backgrounds; brand navy/brass deepened so they read on white. The dark `:root` palette above is retained as an alternate (activate with data-theme="dark"). The .sample-output terminal block stays intentionally dark in both themes. */ :root[data-theme="light"] { --bg: #f7f8fa; --surface: #ffffff; --surface-2: #eef1f5; --border: rgba(20, 86, 138, 0.20); --border-accent: rgba(143, 98, 16, 0.30); --brand-900: #0b2136; --brand-700: #0f3a5c; --brand-500: #14568a; --brand-400: #1d6fa5; /* Deepened from #2a83bd, which was 4.13:1 on --surface and 3.89:1 on --bg — under AA, and this token is text in 16 places (route links, contact links, section labels). Now 5.21:1 and 4.90:1. */ --brand-300: #2472a6; --brand-rgb: 20, 86, 138; --accent-rgb: 143, 98, 16; /* Deepened from #a06e12: this brass carries both jobs — 5.1:1 as text on the page ground, and 5.4:1 under white as a button fill. #a06e12 was 4.2:1 as text, under AA. */ --accent: #8f6210; --on-accent: #ffffff; --accent-dim: #fdf0d5; --accent-glow: rgba(143, 98, 16, 0.10); /* Light glass: the card sits ABOVE the page ground, so the fill lightens toward white rather than darkening. The top inset highlight has to be stronger here than on dark to survive against a light fill. */ --glass-bg: rgba(255, 255, 255, 0.62); --glass-shadow: 0 8px 32px rgba(16, 26, 36, 0.10); --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6); --shadow-rgb: 16, 26, 36; /* Deepened from #f87171, which was 2.60:1 on --bg #f7f8fa and failed AA outright. This is 6.19:1. */ --danger: #b42318; --text: #101a24; --text-muted: #46586b; --text-dim: #66788c; --nav-bg: rgba(247, 248, 250, 0.92); --menu-bg: rgba(255, 255, 255, 0.98); --menu-shadow: 0 24px 60px rgba(16, 26, 36, 0.14); --menu-inset: rgba(16, 26, 36, 0.05); } body { background: var(--bg); color: var(--text); font-family: var(--font-sans); line-height: 1.6; -webkit-font-smoothing: antialiased; } /* ===== UTILITIES ===== */ .container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; } .mono { font-family: var(--font-mono); } .accent { color: var(--accent); } .muted { color: var(--text-muted); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* ===== NAVIGATION ===== */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--nav-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); padding: 0 24px; height: 60px; display: flex; align-items: center; justify-content: space-between; } .nav-inner { max-width: var(--max-w); margin: 0 auto; width: 100%; display: flex; align-items: center; justify-content: space-between; } .nav-logo { font-family: var(--font-mono); font-size: 18px; font-weight: 600; color: var(--text); text-decoration: none; letter-spacing: -0.02em; } .nav-logo span { color: var(--accent); } .nav-links { display: flex; align-items: center; gap: 28px; } .nav-links a { font-size: 13px; font-weight: 500; color: var(--text-muted); text-decoration: none; letter-spacing: 0.02em; transition: color 0.2s; } .nav-links a:hover, .nav-links a.nav-active { color: var(--text); } .nav-login { color: var(--text-muted) !important; border: 1px solid var(--border) !important; padding: 6px 14px !important; border-radius: var(--radius) !important; font-size: 13px !important; font-weight: 500 !important; transition: border-color 0.2s, color 0.2s !important; } .nav-login:hover { border-color: var(--brand-500) !important; color: var(--text) !important; } .nav-cta { background: var(--accent) !important; color: var(--on-accent) !important; padding: 7px 16px !important; border-radius: var(--radius) !important; font-weight: 600 !important; font-size: 13px !important; transition: opacity 0.2s !important; } .nav-cta:hover { opacity: 0.9 !important; } /* ===== NAV DROPDOWN (Solutions) ===== */ .nav-dropdown { position: relative; display: inline-flex; align-items: center; } .nav-dropdown-trigger { font-family: inherit; font-size: 13px; font-weight: 500; color: var(--text-muted); background: none; border: none; cursor: pointer; padding: 0; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 5px; transition: color 0.2s; } .nav-dropdown-trigger:hover, .nav-dropdown-trigger.nav-active, .nav-dropdown.is-open .nav-dropdown-trigger { color: var(--text); } .nav-caret { font-size: 9px; line-height: 1; transition: transform 0.2s; } .nav-dropdown.is-open .nav-caret { transform: rotate(180deg); } /* Invisible hover bridge so the pointer can cross from trigger to menu. */ .nav-dropdown::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 10px; } .nav-dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 10px; display: none; flex-direction: column; gap: 4px; min-width: 320px; background: var(--menu-bg); backdrop-filter: blur(12px); border: 1px solid var(--border); border-radius: 10px; padding: 10px; box-shadow: var(--menu-shadow); } .nav-dropdown.is-open .nav-dropdown-menu { display: flex; } .nav-dropdown-group { padding: 8px 10px; border-radius: 8px; } .nav-dropdown-group + .nav-dropdown-group { border-top: 1px solid var(--border); margin-top: 2px; padding-top: 12px; } .nav-dropdown-heading { display: block; font-size: 14px !important; font-weight: 600 !important; color: var(--text) !important; letter-spacing: 0 !important; margin-bottom: 4px; } .nav-dropdown-heading:hover { color: var(--accent) !important; } .nav-dropdown-blurb { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin: 0 0 8px; } .nav-dropdown-sublinks { display: flex; flex-direction: column; gap: 2px; } .nav-dropdown-sublink { font-size: 12.5px !important; color: var(--text-muted) !important; padding: 5px 0 5px 12px !important; border-left: 1px solid var(--border); letter-spacing: 0.02em; } .nav-dropdown-sublink:hover { color: var(--text) !important; border-left-color: var(--accent); } /* ===== HERO ===== */ #hero { min-height: 100vh; padding: 120px 24px 80px; display: flex; align-items: center; position: relative; overflow: hidden; } #hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(var(--brand-rgb), 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--brand-rgb), 0.04) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; } #hero::after { content: ''; position: absolute; top: -200px; left: 50%; transform: translateX(-50%); width: 800px; height: 600px; background: radial-gradient(ellipse at center, rgba(var(--brand-rgb), 0.08) 0%, transparent 70%); pointer-events: none; } .hero-inner { max-width: var(--max-w); margin: 0 auto; width: 100%; position: relative; z-index: 1; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); background: var(--accent-glow); border: 1px solid var(--border-accent); padding: 6px 14px; border-radius: 100px; margin-bottom: 32px; } .hero-badge::before { content: '●'; font-size: 8px; } .beta-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); background: var(--accent-glow); border: 1px solid var(--border-accent); padding: 4px 10px; border-radius: 100px; vertical-align: middle; } /* Headings are sans here and monospace on Rote — the one typographic difference between the two sites, and it does real work. Rote's 80px monospace headline reads as "software". This practice sells a person's judgment, so the headline reads as counsel: sans, tighter, smaller, and able to carry a full sentence without wrapping to five lines. Monospace is retained for labels, prices, nav and footer marks, which keeps the two sites visibly related. */ h1 { font-family: var(--font-sans); font-size: clamp(34px, 5vw, 58px); font-weight: 600; line-height: 1.12; letter-spacing: -0.025em; color: var(--text); margin-bottom: 24px; } h1 em { font-style: normal; color: var(--accent); } .hero-sub { font-size: clamp(16px, 2vw, 20px); color: var(--text-muted); font-weight: 400; max-width: 620px; line-height: 1.6; margin-bottom: 48px; } .hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .hero-proof { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 40px; flex-wrap: wrap; } .proof-item { display: flex; flex-direction: column; gap: 2px; } .proof-num { font-family: var(--font-mono); font-size: 24px; font-weight: 600; color: var(--text); letter-spacing: -0.02em; } .proof-num span { color: var(--accent); } .proof-label { font-size: 12px; color: var(--text-dim); letter-spacing: 0.04em; text-transform: uppercase; } /* ===== BUTTONS ===== */ .btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--on-accent); padding: 14px 28px; border-radius: var(--radius); font-weight: 700; font-size: 15px; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.25); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 40px rgba(var(--accent-rgb), 0.35); } .btn-primary::after { content: '→'; } .btn-secondary { display: inline-flex; align-items: center; gap: 8px; /* --text-muted here read as a disabled control beside the filled primary. Full text color plus a brand-tinted border keeps it clearly secondary without looking inert. */ color: var(--text); font-weight: 500; border-color: var(--border) !important; background: var(--surface); font-size: 15px; text-decoration: none; border: 1px solid var(--border); padding: 14px 28px; border-radius: var(--radius); transition: color 0.2s, border-color 0.2s; } .btn-secondary:hover { color: var(--text); border-color: var(--brand-500); } .btn-login { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 15px; text-decoration: none; padding: 14px 0; transition: color 0.2s; } .btn-login:hover { color: var(--text); } /* ===== SECTION COMMON ===== */ section { padding: 100px 24px; } .section-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; } h2 { font-family: var(--font-sans); font-size: clamp(24px, 3vw, 34px); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 20px; } h3 { font-family: var(--font-mono); font-size: clamp(20px, 3vw, 28px); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 16px; } .section-desc { font-size: 18px; color: var(--text-muted); max-width: 580px; line-height: 1.6; margin-bottom: 64px; } /* ===== PAGE HEADER (non-hero pages) ===== */ .page-header { padding: 120px 24px 64px; border-bottom: 1px solid var(--border); } .page-header .container { max-width: 800px; } /* ===== ACCESS MODES ===== */ #access { border-top: 1px solid var(--border); } .access-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .access-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 40px 36px; transition: border-color 0.2s; } .access-card:hover { border-color: var(--border-accent); } .access-card.featured { border-left: 3px solid var(--accent); } .access-type { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; } .access-title { font-family: var(--font-mono); font-size: 22px; font-weight: 600; color: var(--text); margin-bottom: 12px; } .access-desc { font-size: 15px; color: var(--text-muted); line-height: 1.65; margin-bottom: 28px; } .access-list { list-style: none; margin-bottom: 32px; display: flex; flex-direction: column; gap: 10px; } .access-list li { font-size: 14px; color: var(--text-muted); display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; } .access-list li::before { content: '→'; color: var(--accent); font-family: var(--font-mono); font-size: 12px; margin-top: 2px; flex-shrink: 0; } .access-code { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 12px 16px; font-family: var(--font-mono); font-size: 12px; color: var(--brand-300); overflow-x: auto; } .access-code .comment { color: var(--text-dim); } /* ===== SKILLS GRID ===== */ #skills { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .skill-card { background: var(--surface); padding: 36px 32px; transition: background 0.2s; position: relative; } .skill-card:hover { background: var(--surface-2); } .skill-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); opacity: 0; transition: opacity 0.2s; } .skill-card:hover::before { opacity: 1; } .skill-id { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 20px; display: flex; align-items: center; gap: 8px; } .skill-badge { background: rgba(var(--brand-rgb), 0.12); border: 1px solid rgba(var(--brand-rgb), 0.25); color: var(--brand-300); font-size: 9px; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 4px; text-transform: uppercase; } .skill-badge-start { background: rgba(var(--accent-rgb), 0.12); border: 1px solid rgba(var(--accent-rgb), 0.3); color: var(--accent); font-size: 9px; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 4px; text-transform: uppercase; } .skill-icon { font-size: 28px; margin-bottom: 16px; } .skill-name { font-family: var(--font-mono); font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: 12px; letter-spacing: -0.01em; } .skill-desc { font-size: 14px; color: var(--text-muted); line-height: 1.65; margin-bottom: 20px; } .skill-meta { display: flex; align-items: center; gap: 16px; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); flex-wrap: wrap; } .skill-meta .tag { background: rgba(var(--brand-rgb), 0.1); border: 1px solid rgba(var(--brand-rgb), 0.2); color: var(--brand-300); padding: 3px 8px; border-radius: 4px; } .skill-card-featured { background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; padding: 40px 36px; margin-bottom: 24px; position: relative; } .skills-connector { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); letter-spacing: 0.08em; text-transform: uppercase; padding: 16px 0 16px 4px; display: flex; align-items: center; gap: 8px; } /* ===== HOW IT WORKS ===== */ #how { position: relative; } .steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 48px; counter-reset: step; } .step { counter-increment: step; position: relative; } .step::before { content: '0' counter(step); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--accent); display: block; margin-bottom: 20px; } .step-title { font-family: var(--font-mono); font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: 12px; letter-spacing: -0.01em; } .step-desc { font-size: 15px; color: var(--text-muted); line-height: 1.65; } /* ===== PERSONAS ===== */ #for { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .personas { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; } .persona { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 36px 32px; transition: border-color 0.2s; text-decoration: none; display: block; } .persona:hover { border-color: var(--border-accent); } .persona-role { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--accent); margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.06em; } .persona-stage { font-family: var(--font-mono); font-size: 10px; font-weight: 500; color: var(--text-dim); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; } .persona-headline { font-size: 20px; font-weight: 600; color: var(--text); margin-bottom: 12px; line-height: 1.3; } .persona-desc { font-size: 14px; color: var(--text-muted); line-height: 1.65; } .persona-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--accent); text-decoration: none; margin-top: 20px; letter-spacing: 0.04em; } /* ===== FAQ ===== */ #faq { border-top: 1px solid var(--border); } .faq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 40px; } .faq-item {} .faq-q { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 10px; line-height: 1.4; } .faq-a { font-size: 15px; color: var(--text-muted); line-height: 1.7; } .faq-a a { color: var(--brand-300); text-decoration: none; border-bottom: 1px solid rgba(var(--brand-rgb), 0.3); transition: color 0.2s, border-color 0.2s; } .faq-a a:hover { color: var(--text); border-color: var(--text-muted); } /* ===== CTA ===== */ #cta { text-align: center; background: linear-gradient(135deg, var(--brand-900) 0%, var(--bg) 100%); border-top: 1px solid var(--border); padding: 120px 24px; position: relative; overflow: hidden; } #cta::before { content: ''; position: absolute; bottom: -100px; left: 50%; transform: translateX(-50%); width: 600px; height: 400px; background: radial-gradient(ellipse, rgba(var(--accent-rgb), 0.08) 0%, transparent 70%); pointer-events: none; } .cta-inner { max-width: 600px; margin: 0 auto; position: relative; z-index: 1; } #cta h2 { font-size: clamp(32px, 5vw, 52px); margin-bottom: 20px; } #cta p { font-size: 18px; color: var(--text-muted); margin-bottom: 48px; line-height: 1.6; } .cta-actions { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; } .cta-already { margin-top: 28px; font-size: 14px; color: var(--text-dim); } .cta-already a { color: var(--text-muted); text-decoration: none; border-bottom: 1px solid var(--border); transition: color 0.2s, border-color 0.2s; } .cta-already a:hover { color: var(--text); border-color: var(--text-muted); } /* ===== FOUNDER ===== */ .founder-block { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; padding: 40px 36px; max-width: 680px; } .founder-block p { font-size: 16px; color: var(--text-muted); line-height: 1.75; margin-bottom: 20px; } .founder-block p:last-child { margin-bottom: 0; } .founder-sig { font-family: var(--font-mono); font-size: 13px; color: var(--text-dim); } /* ===== CONTENT PROSE ===== */ .prose { max-width: 720px; } .prose p { font-size: 16px; color: var(--text-muted); line-height: 1.75; margin-bottom: 20px; } /* Prose subsections are

so the document outline runs h1 -> h2 with no skipped level (screen readers and search both read that outline), but they should still look like subsections rather than page headings. This matches the h3 appearance they had when they were tagged h3. */ .prose h2 { font-family: var(--font-mono); font-size: clamp(20px, 3vw, 28px); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; color: var(--text); margin-top: 40px; margin-bottom: 16px; } .prose h3 { color: var(--text); margin-top: 40px; margin-bottom: 16px; } .prose a { color: var(--brand-300); text-decoration: none; border-bottom: 1px solid rgba(var(--brand-rgb), 0.3); } .prose a:hover { color: var(--text); border-color: var(--text-muted); } .prose ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; } .prose ul li { font-size: 15px; color: var(--text-muted); display: flex; align-items: flex-start; gap: 10px; line-height: 1.6; } .prose ul li::before { content: '→'; color: var(--accent); font-family: var(--font-mono); font-size: 12px; margin-top: 3px; flex-shrink: 0; } /* ===== FORM ELEMENTS ===== */ .form-group { display: flex; flex-direction: column; gap: 6px; } .form-label { font-size: 13px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.02em; } .form-input, .form-textarea, .form-select { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 12px 16px; border-radius: var(--radius); font-size: 15px; font-family: var(--font-sans); outline: none; transition: border-color 0.2s; width: 100%; } .form-input::placeholder, .form-textarea::placeholder { color: var(--text-dim); } .form-input:focus, .form-textarea:focus { border-color: var(--accent); } .form-textarea { resize: vertical; min-height: 120px; line-height: 1.6; } .form-checkbox-row { display: flex; align-items: flex-start; gap: 12px; } .form-checkbox-row input[type="checkbox"] { margin-top: 3px; accent-color: var(--accent); flex-shrink: 0; } .form-checkbox-label { font-size: 14px; color: var(--text-muted); line-height: 1.5; } .form-note { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); margin-top: 12px; } .form-success { background: var(--accent-glow); border: 1px solid var(--border-accent); border-radius: 8px; padding: 32px 36px; } .form-success p { font-size: 16px; color: var(--text-muted); line-height: 1.65; } .form-error { font-size: 14px; color: var(--danger); margin-top: 8px; } /* ===== DIVIDER ===== */ .divider { width: 40px; height: 1px; background: var(--accent); margin: 24px 0; opacity: 0.5; } /* ===== FOOTER ===== */ footer { border-top: 1px solid var(--border); padding: 48px 24px; background: var(--surface); } .footer-inner { max-width: var(--max-w); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; } .footer-logo { font-family: var(--font-mono); font-size: 16px; font-weight: 600; color: var(--text); } .footer-logo span { color: var(--accent); } .footer-links { display: flex; gap: 28px; flex-wrap: wrap; } .footer-links a { font-size: 13px; color: var(--text-dim); text-decoration: none; transition: color 0.2s; } .footer-links a:hover { color: var(--text-muted); } .footer-legal { font-size: 12px; color: var(--text-dim); width: 100%; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); } .footer-legal a { color: var(--text-dim); text-decoration: none; transition: color 0.2s; } .footer-legal a:hover { color: var(--text-muted); } /* ===== SAMPLE OUTPUT ===== */ .sample-output { background: #0a0a14; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; max-width: 720px; } .sample-output-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--border); } .sample-output-title { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; } .copy-btn { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); background: none; border: 1px solid var(--border); border-radius: 3px; padding: 3px 8px; cursor: pointer; transition: color 0.15s, border-color 0.15s; } .copy-btn:hover { color: var(--accent); border-color: var(--border-accent); } .copy-btn.copied { color: var(--accent); border-color: var(--border-accent); } .sample-output pre { padding: 20px; font-family: var(--font-mono); font-size: 12px; color: var(--brand-300); line-height: 1.7; overflow-x: auto; white-space: pre; } /* ===== ASSESSMENT ===== */ .assessment-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 32px; margin-bottom: 24px; } .assessment-card-title { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 6px; } .assessment-card-desc { font-size: 14px; color: var(--text-muted); margin-bottom: 20px; font-style: italic; } .assessment-subtotal { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); margin-bottom: 16px; } .assessment-question { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); } .assessment-question:last-child { border-bottom: none; } .assessment-question input[type="checkbox"] { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; } .assessment-question label { font-size: 14px; color: var(--text-muted); line-height: 1.5; cursor: pointer; } .assessment-question input:checked + label { color: var(--text); } .assessment-submit { position: sticky; bottom: 32px; display: flex; justify-content: center; padding: 16px 0; } .assessment-results { display: none; } .assessment-results.visible { display: block; } .assessment-questions.hidden { display: none; } .result-card { background: var(--surface); border: 1px solid var(--border-accent); border-radius: 8px; padding: 32px; margin-bottom: 24px; } .result-stage-title { font-family: var(--font-mono); font-size: 22px; font-weight: 600; color: var(--text); margin-bottom: 4px; } .result-stage-subtitle { font-size: 13px; color: var(--accent); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 20px; } .result-profile { font-size: 14px; color: var(--text-muted); font-style: italic; margin-bottom: 24px; } .score-breakdown { margin-bottom: 24px; } .score-row { margin-bottom: 12px; } .score-row-label { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-muted); margin-bottom: 4px; } .score-row-label.dominant { color: var(--text); font-weight: 600; } .score-bar-track { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; } .score-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.4s ease; } .result-section-label { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px; } .result-description { font-size: 14px; color: var(--text-muted); line-height: 1.65; margin-bottom: 20px; } .result-next-steps { list-style: none; display: flex; flex-direction: column; gap: 8px; } .result-next-steps li { font-size: 14px; color: var(--text-muted); padding-left: 20px; position: relative; line-height: 1.5; } .result-next-steps li::before { content: '→'; position: absolute; left: 0; color: var(--accent); } .methodology-note { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 24px 32px; font-size: 13px; color: var(--text-muted); line-height: 1.65; } .methodology-note p + p { margin-top: 12px; } .methodology-note strong { color: var(--text); } .methodology-note ul { margin: 8px 0 0 16px; display: flex; flex-direction: column; gap: 4px; } /* ===== KIT CARDS ===== */ .kit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .kit-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 32px 28px; display: flex; flex-direction: column; gap: 0; transition: border-color 0.2s; position: relative; } .kit-card:hover { border-color: rgba(var(--brand-rgb), 0.35); } .kit-card.add-on { border-color: rgba(var(--accent-rgb), 0.2); } .kit-card.add-on:hover { border-color: var(--border-accent); } .kit-number { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 12px; } .kit-name { font-family: var(--font-mono); font-size: 20px; font-weight: 600; color: var(--text); margin-bottom: 8px; letter-spacing: -0.01em; line-height: 1.2; } .kit-situation { font-size: 13px; color: var(--text-muted); font-style: italic; margin-bottom: 20px; line-height: 1.5; } .kit-desc { font-size: 14px; color: var(--text-muted); line-height: 1.65; margin-bottom: 20px; } .kit-components { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-bottom: 24px; flex: 1; } .kit-components li { font-size: 13px; color: var(--text-muted); display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; } .kit-components li::before { content: '→'; color: var(--accent); font-family: var(--font-mono); font-size: 11px; margin-top: 1px; flex-shrink: 0; } .kit-footer { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; } .kit-price { font-family: var(--font-mono); font-size: 22px; font-weight: 600; color: var(--text); letter-spacing: -0.02em; } .kit-price-note { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); } .kit-timeline { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; } .prerequisite-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(var(--accent-rgb), 0.08); border: 1px solid rgba(var(--accent-rgb), 0.2); color: var(--accent); font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 4px; text-transform: uppercase; } .prerequisite-badge::before { content: '↳'; font-size: 11px; } /* ===== FOUNDATION STEPS ===== */ .foundation-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .foundation-step { background: var(--surface); padding: 32px 28px; position: relative; } .foundation-step-num { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--accent); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px; } .foundation-step-title { font-family: var(--font-mono); font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: 10px; letter-spacing: -0.01em; } .foundation-step-desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; } /* ===== COMPONENT MENU ===== */ .component-menu { display: flex; flex-direction: column; gap: 40px; } .component-category {} .component-category-title { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .component-list { display: flex; flex-direction: column; gap: 0; } .component-item { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--border); gap: 16px; } .component-item:last-child { border-bottom: none; } .component-name { font-size: 15px; color: var(--text); font-weight: 500; line-height: 1.4; } .component-note { font-size: 12px; color: var(--text-dim); font-style: italic; } .component-price { font-family: var(--font-mono); font-size: 14px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; } .component-price.free { color: var(--accent); } /* ===== ASSESSMENT SPRINT CALLOUT ===== */ .assessment-sprint-callout { background: var(--surface-2); border: 1px solid var(--border-accent); border-left: 3px solid var(--accent); border-radius: 8px; padding: 36px 40px; } .assessment-sprint-callout .sprint-label { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } .assessment-sprint-callout h3 { font-size: 20px; font-weight: 600; color: var(--text); margin-bottom: 12px; } .assessment-sprint-callout p { font-size: 15px; color: var(--text-muted); line-height: 1.7; margin-bottom: 16px; } .assessment-sprint-callout p:last-of-type { margin-bottom: 0; } .sprint-pricing { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); margin-top: 20px; display: flex; flex-direction: column; gap: 4px; } .sprint-pricing strong { color: var(--text); } /* ===== VIGNETTE ===== */ .vignette { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 40px 44px; max-width: 780px; position: relative; } .vignette::before { content: '"'; position: absolute; top: 20px; left: 28px; font-family: var(--font-mono); font-size: 48px; color: var(--border-accent); line-height: 1; } .vignette p { font-size: 17px; color: var(--text-muted); line-height: 1.75; } .vignette-cta { margin-top: 20px; font-family: var(--font-mono); font-size: 12px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; } /* ===== KIT RECOMMENDATION ===== */ .kit-rec-section { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 40px; } .kit-rec-section .kit-rec-label { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; } .kit-rec-cards { display: flex; gap: 24px; flex-wrap: wrap; } .kit-rec-card { flex: 1; min-width: 260px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 24px 28px; } .kit-rec-card.primary { border-color: rgba(var(--brand-rgb), 0.3); } .kit-rec-card-label { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 10px; } .kit-rec-card-name { font-family: var(--font-mono); font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: 8px; } .kit-rec-card-desc { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin-bottom: 16px; } .kit-rec-card-price { font-family: var(--font-mono); font-size: 16px; color: var(--text); margin-bottom: 16px; } /* ===== RESPONSIVE ===== */ @media (max-width: 1024px) { .kit-grid { grid-template-columns: repeat(2, 1fr); } .foundation-steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .access-grid { grid-template-columns: 1fr; } .faq-grid { grid-template-columns: 1fr; } .kit-grid { grid-template-columns: 1fr; } .foundation-steps { grid-template-columns: 1fr; } .kit-rec-cards { flex-direction: column; } .assessment-sprint-callout { padding: 28px 24px; } .vignette { padding: 32px 28px; } } /* ===== HAMBURGER ===== */ .nav-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; margin: -8px; color: var(--text); } .nav-hamburger span { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; } .nav-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-hamburger.is-open span:nth-child(2) { opacity: 0; } .nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 640px) { .site-nav { padding: 0 16px; } .nav-hamburger { display: flex; } .nav-links { display: none; flex-direction: column; gap: 0; position: absolute; top: 60px; left: 0; right: 0; background: var(--nav-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); padding: 8px 0 16px; z-index: 99; } .nav-links.is-open { display: flex; } .nav-links a { font-size: 15px; padding: 12px 20px; border-bottom: 1px solid var(--border); } .nav-links a:last-child { border-bottom: none; margin: 8px 16px 0; text-align: center; } /* Solutions dropdown becomes a tap-to-expand accordion inside the panel. */ .nav-dropdown { width: 100%; flex-direction: column; align-items: stretch; } .nav-dropdown::after { display: none; } .nav-dropdown-trigger { width: 100%; justify-content: space-between; font-size: 15px; padding: 12px 20px; border-bottom: 1px solid var(--border); } .nav-dropdown-menu { position: static; transform: none; margin-top: 0; min-width: 0; padding: 4px 0 8px; border: none; border-radius: 0; box-shadow: none; background: var(--menu-inset); } .nav-dropdown-group { padding: 8px 20px 10px; } .nav-dropdown-sublink { padding: 8px 0 8px 12px !important; font-size: 14px !important; border-bottom: none; } /* Neutralize the panel's last-child CTA centering for dropdown links. */ .nav-dropdown a:last-child { margin: 0; text-align: left; } #hero { padding: 100px 16px 60px; } .hero-proof { gap: 24px; } .footer-inner { flex-direction: column; align-items: flex-start; } section { padding: 64px 16px; } .page-header { padding: 100px 16px 48px; } } /* ========================================================================= PART 2 MOTION — components for /part-2/ and /research/ (added 2026-06) ------------------------------------------------------------------------- Design discipline for these high-stakes surfaces (see plan synthesis): - Extend the existing dark navy+brass system; do NOT restyle other pages. - One accent does the work: navy is structural; BRASS is reserved for the single affirmative / "current" role (compliant tier, verified state). - No new glow/gradient here. Flat surfaces, borders, generous whitespace. - Citations/dates render in mono as first-class content, not chrome. - Exposure badges use a NEUTRAL severity ramp (text/border weights), never a third brand color — brass stays meaningful. ========================================================================= */ /* --- Pricing ladder (table on wide, stacked cards on narrow) --- */ .ladder-table { width: 100%; border-collapse: collapse; font-size: 15px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .ladder-table thead th { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); text-align: left; padding: 16px 20px; background: var(--surface-2); border-bottom: 1px solid var(--border); } .ladder-table tbody td { padding: 22px 20px; border-bottom: 1px solid var(--border); color: var(--text-muted); line-height: 1.6; vertical-align: top; } .ladder-table tbody tr:last-child td { border-bottom: none; } .ladder-table tbody tr:hover td { background: var(--surface); } /* Three-column offer tables: Offer | Price | What you get. Scoped two ways on purpose. Only .ladder-table--offers, because /legal/order-terms/ reuses .ladder-table for TWO-column definition tables with an inline width:220px on the first cell, and a bare nth-child rule would squash their content column. And only above 720px, because the stacked-card mode below that sets `width: 100%` on every td; these selectors outrank it, so unscoped they would break the mobile layout. Without fixed widths the browser sizes to the longest cell, and one Part 2 price ran long enough to crush the "What you get" column against the edge. */ @media (min-width: 721px) { .ladder-table--offers { table-layout: fixed; } .ladder-table--offers th:nth-child(1), .ladder-table--offers td:nth-child(1) { width: 26%; } .ladder-table--offers th:nth-child(2), .ladder-table--offers td:nth-child(2) { width: 18%; } .ladder-table--offers th:nth-child(3), .ladder-table--offers td:nth-child(3) { width: 56%; } } .ladder-rung { font-family: var(--font-mono); font-size: 16px; font-weight: 600; color: var(--text); white-space: nowrap; } .ladder-price { font-family: var(--font-mono); font-size: 14px; color: var(--brand-300); white-space: nowrap; } .ladder-price.is-free { color: var(--accent); } .ladder-note { display: block; margin-top: 6px; font-size: 13px; color: var(--text-dim); } /* --- Exposure badge: neutral severity ramp (no third brand color) --- */ .badge-exposure { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 9px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface-2); } /* Severity ramp carried by border weight, not text color, so every label stays above the WCAG AA 4.5:1 floor (text-dim on surface-2 was ~4.3:1 — too low). */ .badge-exposure[data-level="public"] { color: var(--text); border-color: var(--text-muted); } .badge-exposure[data-level="complaint"] { color: var(--text-muted); border-color: var(--text-dim); } .badge-exposure[data-level="internal"] { color: var(--text-muted); border-color: var(--border); } /* --- Callout: scope notes, No-PHI, gate reminders --- */ .callout { border: 1px solid var(--border); border-left: 3px solid var(--brand-500); border-radius: var(--radius); background: var(--surface); padding: 20px 24px; font-size: 15px; color: var(--text-muted); line-height: 1.65; } .callout.is-affirmative { border-left-color: var(--accent); } /* Scope statement — the load-bearing sentence; reads like a primary source */ .scope-note { font-family: var(--font-mono); font-size: 13px; line-height: 1.7; color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 22px; background: var(--bg); } /* --- Chart card for the research page --- */ .chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 28px; } .chart-card-title { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: var(--text); margin-bottom: 4px; } .chart-card-meta { font-size: 12px; color: var(--text-dim); margin-bottom: 24px; } /* Horizontal bar rows for tier / element-frequency charts (inline, no JS dep) */ .bar-row { display: grid; grid-template-columns: 160px 1fr 56px; align-items: center; gap: 14px; margin-bottom: 14px; } .bar-row:last-child { margin-bottom: 0; } .bar-label { font-size: 13px; color: var(--text-muted); } .bar-track { height: 22px; background: var(--surface-2); border-radius: 4px; overflow: hidden; } .bar-fill { height: 100%; background: var(--brand-500); border-radius: 4px; } .bar-fill.is-affirmative { background: var(--accent); } .bar-value { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); text-align: right; } /* Gate token — makes unresolved {{VERIFY}}/placeholder copy visible in dev, neutral in print. Wrap inline gated values in */ .gate { font-family: var(--font-mono); font-size: 0.92em; color: var(--brand-300); background: rgba(var(--brand-rgb), 0.1); border: 1px dashed var(--border); border-radius: 3px; padding: 0 5px; } @media (max-width: 720px) { /* Ladder collapses to stacked rows */ .ladder-table, .ladder-table thead, .ladder-table tbody, .ladder-table tr, .ladder-table td { display: block; width: 100%; } .ladder-table thead { display: none; } .ladder-table tbody tr { border-bottom: 1px solid var(--border); padding: 8px 0; } .ladder-table tbody td { border-bottom: none; padding: 6px 20px; } .bar-row { grid-template-columns: 1fr 48px; } .bar-label { grid-column: 1 / -1; margin-bottom: 2px; } } /* ========================================================================= RUNG LADDER + REFINED CARD LANGUAGE (used on /hipaa/ and /part-2/) (added 2026-06; supersedes the earlier flat maturity-map) ------------------------------------------------------------------------- A deliberate step past the original flat/minimal system toward depth and character, kept inside the brand: mono labels, single brass affirmative accent, navy structural. Tokens only — re-themes with data-theme. The ladder is glanceable at a glance, not read: price is the hero, a MAGNITUDE bar shows relative spend, FLAGS encode entry (start free / most start here / recurring), the recommended rung is physically lifted, and an brass CREDIT thread carries "you don't pay twice to climb." The detail table beneath each ladder carries the words. Page sets --cols on .rl-grid. Shared inline-SVG icon sizing (sprite lives on the page). ============== */ .ic { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; display: block; } .rl-lead { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 18px; } .rl-grid { --cols: 4; display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 16px; align-items: start; padding-top: 10px; /* room for the lifted featured rung */ } /* Let the visual ladder break out wider than a narrow prose column (e.g. the 820px Part 2 sections) so 5 rungs breathe. Centered on the viewport. */ .rl-breakout { position: relative; left: 50%; transform: translateX(-50%); width: min(1040px, calc(100vw - 48px)); max-width: 100vw; } @media (max-width: 720px) { .rl-breakout { position: static; left: auto; transform: none; width: auto; } } .rl-card { position: relative; min-width: 0; /* allow the card to shrink inside its grid track (no overflow) */ display: flex; flex-direction: column; gap: 11px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 22px 18px 18px; box-shadow: 0 1px 2px rgba(var(--shadow-rgb), 0.04), 0 10px 24px -18px rgba(var(--shadow-rgb), 0.30); overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .rl-top { min-width: 0; } .rl-name, .rl-price, .rl-who { min-width: 0; overflow-wrap: anywhere; } /* signature top accent hairline — the motif that gives the system character */ .rl-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--brand-500); } .rl-card:hover { transform: translateY(-3px); border-color: var(--brand-500); } /* Card-as-link: whole rung/card is clickable (to a resource or a checkout). */ a.rl-card, a.rote-card { text-decoration: none; color: inherit; cursor: pointer; } a.rl-card:focus-visible, a.rote-card:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 3px; } /* Always-visible arrow affordance (touch has no hover), brightens on hover. */ a.rl-card::after { content: "→"; position: absolute; right: 14px; bottom: 12px; font-family: var(--font-mono); font-size: 13px; color: var(--text-dim); opacity: 0.5; transition: opacity 0.18s ease, transform 0.18s ease; } a.rl-card:hover::after { opacity: 1; transform: translateX(2px); } a.rl-card.is-free::after { color: var(--accent); } .rl-card.is-free::before { background: var(--accent); } .rl-card.is-recurring::before { background: linear-gradient(90deg, var(--brand-700), var(--brand-400)); } .rl-card.is-featured { border-color: var(--brand-500); box-shadow: 0 2px 4px rgba(var(--brand-rgb), 0.10), 0 22px 44px -22px rgba(var(--brand-rgb), 0.45); transform: translateY(-10px); } .rl-card.is-featured:hover { transform: translateY(-13px); } .rl-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .rl-chip { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--brand-700); background: var(--surface-2); border: 1px solid var(--border); } .rl-card.is-free .rl-chip { color: var(--accent); background: var(--accent-dim); border-color: var(--border-accent); } .rl-flag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; /* White stays here: 9.99:1 on dark --brand-700, 11.80:1 on light. */ color: #fff; background: var(--brand-700); padding: 3px 8px; border-radius: 999px; white-space: nowrap; } /* Brass fill needs --on-accent, not the inherited white: white on brass is 2.78:1 in dark theme. --on-accent is 6.81:1 dark, 5.35:1 light. */ .rl-flag.is-free { background: var(--accent); color: var(--on-accent); } .rl-name { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--text); } .rl-price { font-family: var(--font-mono); font-size: 21px; font-weight: 600; color: var(--text); letter-spacing: -0.02em; line-height: 1.1; } .rl-price small { font-size: 12px; color: var(--text-dim); font-weight: 400; letter-spacing: 0; } .rl-card.is-free .rl-price { color: var(--accent); } .rl-mag { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .rl-mag > i { display: block; height: 100%; border-radius: 999px; background: var(--brand-500); width: var(--mag, 20%); } .rl-card.is-free .rl-mag > i { background: var(--accent); } /* the maturity cue: who steps on here (kept to a few words) */ .rl-who { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); } /* --- Credit thread: the "you don't pay twice to climb" lever --- */ .rl-credit { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 13px 18px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--surface); } .rl-credit-text { font-size: 13px; color: var(--text-muted); line-height: 1.5; } .rl-credit-text b { color: var(--accent); font-weight: 600; } .rl-credit-line { flex: 1; min-width: 40px; height: 0; border-top: 2px dashed var(--accent); opacity: 0.85; position: relative; } .rl-credit-line::after { content: ""; position: absolute; right: -2px; top: 50%; transform: translateY(-50%) rotate(45deg); width: 8px; height: 8px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); } /* ========================================================================= REFINED CARD — replaces the flat/dashed boxes on /hipaa/ and /part-2/. Icon chip + left accent spine + elevation + real hierarchy. Primary vs. secondary distinguished by accent weight, never by a dashed border. ========================================================================= */ .rote-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .rote-card { position: relative; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 22px 22px 20px 26px; box-shadow: 0 1px 2px rgba(var(--shadow-rgb), 0.04), 0 10px 24px -18px rgba(var(--shadow-rgb), 0.28); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .rote-card::before { /* left accent spine — the signature motif */ content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--brand-500); } .rote-card.is-secondary::before { background: var(--text-dim); opacity: 0.45; } /* Links inside a card had no rule and fell through to the browser default blue/visited-purple — the one place on the site that was off-palette. */ .rote-card a { color: var(--accent); text-decoration: none; font-weight: 500; } .rote-card a:hover { text-decoration: underline; } /* Same for prose bodies and step descriptions, which carry inline links. */ .prose a, .step-desc a, .faq-a a { color: var(--accent); text-decoration: none; font-weight: 500; } .prose a:hover, .step-desc a:hover, .faq-a a:hover { text-decoration: underline; } /* 036f911 fixed links inside .rote-card, .prose, .step-desc and .faq-a, but it missed the commonest case: inline links in bare

bodies. 15 of those across 12 pages were still rendering browser blue and visited-purple. No button is ever inside a

on this site, so scoping to paragraphs and list items within

catches the rest without touching the nav, the footer, or any CTA. */ main p a, main li a { color: var(--accent); text-decoration: none; font-weight: 500; } main p a:hover, main li a:hover { text-decoration: underline; } /* The promoted "what I build" block puts a link inside its

. That one keeps the heading colour and takes a rule underneath, so it still reads as a heading. */ .build-block h2 a { color: inherit; font-weight: inherit; text-decoration: none; border-bottom: 2px solid var(--brand-500); padding-bottom: 1px; } .build-block h2 a:hover { border-bottom-color: var(--accent); text-decoration: none; } .rote-card:hover { transform: translateY(-3px); border-color: var(--brand-500); box-shadow: 0 2px 4px rgba(var(--shadow-rgb), 0.06), 0 18px 36px -20px rgba(var(--brand-rgb), 0.40); } .rc-top { display: flex; align-items: center; gap: 12px; } .rc-chip { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--brand-700); background: var(--surface-2); border: 1px solid var(--border); } .rote-card.is-secondary .rc-chip { color: var(--text-muted); } .rc-cite { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); } .rc-name { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--text); } .rc-desc { font-size: 13px; color: var(--text-muted); line-height: 1.55; } .rc-link { font-family: var(--font-mono); font-size: 12px; color: var(--accent); text-decoration: none; margin-top: auto; padding-top: 4px; } .rc-link:hover { text-decoration: underline; } @media (prefers-reduced-motion: reduce) { .rl-card, .rote-card, a.rl-card::after { transition: none; } .rl-card:hover, .rl-card.is-featured:hover, .rote-card:hover { transform: none; } a.rl-card:hover::after { transform: none; } .rl-card.is-featured { transform: none; } } @media (max-width: 960px) { .rl-grid { grid-template-columns: repeat(2, 1fr); padding-top: 0; } .rl-card.is-featured, .rl-card.is-featured:hover { transform: none; } .rote-card-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .rl-grid { grid-template-columns: 1fr; } .rote-card-grid { grid-template-columns: 1fr; } .rl-credit { flex-direction: column; align-items: flex-start; gap: 8px; } .rl-credit-line { width: 100%; } } /* ========================================================================= PREMIUM REDESIGN CSS ========================================================================= */ .hero-premium { position: relative; overflow: hidden; padding: 80px 24px; background: var(--bg); /* No border-bottom: the section immediately after carries its own inline border-top, and the pair rendered as a doubled 2px rule. */ } .hero-bg-glow { position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 800px; height: 400px; background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%); z-index: 0; pointer-events: none; } .hero-inner-premium { position: relative; z-index: 1; width: 100%; /* #hero is display:flex; without this the container shrink-wraps */ display: flex; flex-direction: row; align-items: center; gap: 40px; } .hero-content { flex: 1; } .hero-visual { flex: 1; display: flex; justify-content: center; align-items: center; } .visual-wrapper { position: relative; } .visual-wrapper::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120%; height: 120%; background: radial-gradient(circle, rgba(var(--accent-rgb), 0.15) 0%, transparent 60%); z-index: -1; filter: blur(20px); } .hero-logo-img { max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 10px 40px rgba(var(--shadow-rgb), 0.28); } /* The gradient heading is gone. It ran brass into an off-palette green, and recolouring it to brass -> brand-400 only traded the green for a dead grey midpoint (sRGB and oklab both) because the phrase wraps across two lines. h1 em already carries this site's emphasis treatment: solid brass. */ .btn-glow { box-shadow: 0 0 15px var(--accent-glow); transition: box-shadow 0.2s ease, transform 0.2s ease; } .btn-glow:hover { box-shadow: 0 0 25px rgba(var(--accent-rgb), 0.4); transform: translateY(-2px); } @media (max-width: 960px) { .hero-inner-premium { flex-direction: column; text-align: center; } .hero-actions { justify-content: center; } .hero-proof { justify-content: center; } } /* ========================================================================= EXTREME DEPTH & GLASSMORPHISM ------------------------------------------------------------------------- The effect is deliberate — it answered "still quite flat". What changed on 2026-09-06 is that every colour in it was a dark-theme literal, so the glass only rendered correctly on one theme and the hover borrowed an off-palette green. Same blur, same lift, same glow: tokens instead of literals. ========================================================================= */ /* Sections establish a stacking context so the depth orbs sit behind content. #hero declares its own position: relative, so its grid overlay is unaffected. */ section { position: relative; z-index: 1; } /* Glassmorphism for ladder, Rote and persona cards. The !important is load-bearing: .rl-card.is-featured (0,2,0) is defined earlier and would otherwise win border-color back off this rule. */ .rl-card, .rote-card, .persona { background: var(--glass-bg) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(var(--brand-rgb), 0.3) !important; box-shadow: var(--glass-shadow), var(--glass-inset) !important; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease, border-color 0.3s ease !important; } .rl-card:hover, .rote-card:hover, .persona:hover { transform: translateY(-8px) scale(1.02) !important; border-color: rgba(var(--accent-rgb), 0.6) !important; box-shadow: 0 20px 40px rgba(var(--shadow-rgb), 0.55), 0 0 20px rgba(var(--accent-rgb), 0.2), var(--glass-inset) !important; z-index: 10; } /* Glowing orbs behind sections, for depth in the page background. These are also what backdrop-filter has to blur — without something behind the card, the glass reads as flat fill. */ section:nth-of-type(even)::before { content: ''; position: absolute; top: 50%; left: -200px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(var(--brand-rgb), 0.08) 0%, transparent 60%); transform: translateY(-50%); z-index: -1; pointer-events: none; } section:nth-of-type(odd)::before { content: ''; position: absolute; top: 50%; right: -200px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(var(--accent-rgb), 0.08) 0%, transparent 60%); transform: translateY(-50%); z-index: -1; pointer-events: none; } /* The featured card pops harder: brass border, brass glow, fill pulled toward the page ground so it reads as heavier glass than its neighbours. */ .rl-card.is-featured { background: linear-gradient(180deg, var(--glass-bg) 0%, var(--bg) 100%) !important; border: 1px solid rgba(var(--accent-rgb), 0.5) !important; box-shadow: 0 12px 40px rgba(var(--shadow-rgb), 0.45), var(--glass-inset), 0 0 30px rgba(var(--accent-rgb), 0.15) !important; } .rl-card.is-featured:hover { transform: translateY(-12px) scale(1.03) !important; border-color: rgba(var(--accent-rgb), 0.9) !important; box-shadow: 0 25px 50px rgba(var(--shadow-rgb), 0.6), 0 0 40px rgba(var(--accent-rgb), 0.3), var(--glass-inset) !important; } /* The guard at the top of the file is overridden by the !important transitions above, so it has to be restated here at equal weight. Motion stops; the glass, blur and shadows are untouched. */ @media (prefers-reduced-motion: reduce) { .rl-card, .rote-card, .persona, .rl-card.is-featured { transition: none !important; } .rl-card:hover, .rote-card:hover, .persona:hover, .rl-card.is-featured, .rl-card.is-featured:hover { transform: none !important; } }