/* ============================================================ Amura Audit — layout & style variants Applied as classes on element — combine freely with any theme. Each row in the dev switcher maps to one group. ============================================================ */ /* ============================================================ HERO LAYOUT VARIANTS Default (no class): two-column split, scope panel visible. ============================================================ */ /* --- Full: headline bleeds full width, scope panel removed --- */ html.lyt-full .hero-inner { grid-template-columns: 1fr; gap: 0; } html.lyt-full .hero-scope { display: none; } html.lyt-full .hero-content { max-width: none; } html.lyt-full .hero-title { font-size: clamp(4rem, 9.5vw, 9.5rem); letter-spacing: -0.055em; line-height: 0.9; margin-bottom: .5em; } html.lyt-full .hero-sub { max-width: 540px; } html.lyt-full .hero { padding-bottom: clamp(56px, 8vw, 100px); } /* --- Minimal: focused one-column hero, no scope panel --- */ html.lyt-minimal .hero { min-height: calc(68vh - var(--header-h)); display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(80px, 10vw, 140px) 0 clamp(56px, 7vw, 92px); } html.lyt-minimal .hero-inner { grid-template-columns: 1fr; gap: 0; } html.lyt-minimal .hero-scope { display: none; } html.lyt-minimal .hero-content { max-width: 980px; } html.lyt-minimal .hero-kicker { margin-bottom: 1rem; } html.lyt-minimal .hero-title { font-size: clamp(3.2rem, 6.6vw, 7.5rem) !important; letter-spacing: -0.045em; line-height: 0.95; margin-bottom: .42em; } html.lyt-minimal .hero-sub { font-size: 1.04rem; max-width: 520px; margin-bottom: 2.2rem; line-height: 1.65; } /* ============================================================ SERVICES LAYOUT VARIANTS Default (no class): two-column grid (Licensing | Commercial). ============================================================ */ /* --- List: sequential single-column, no group headers --- */ html.svc-list .practice-grid { grid-template-columns: 1fr; gap: 0; } html.svc-list .practice-col + .practice-col { margin-top: 0; } html.svc-list .practice-col-label { display: none; } html.svc-list .practice-col:first-child .practice-index { border-top: 1.5px solid var(--line-strong); } /* ============================================================ TYPOGRAPHY VARIANTS Default (no class): Hanken Grotesk 800, tight tracking. ============================================================ */ /* --- Condensed: Barlow Condensed, extreme height, ultra-tight --- */ html.type-condensed h1, html.type-condensed h2, html.type-condensed .diff-statement, html.type-condensed .about-name { font-family: 'Barlow Condensed', system-ui, sans-serif !important; font-style: normal !important; font-weight: 800; letter-spacing: -0.01em; line-height: 0.91; } html.type-condensed h1 { font-size: clamp(4rem, 11vw, 12rem); } html.type-condensed h2 { font-size: clamp(2.4rem, 5.5vw, 6rem); } /* --- Refined: 600 weight, less aggressive, more editorial --- */ html.type-refined h1, html.type-refined h2, html.type-refined .diff-statement, html.type-refined .about-name { font-weight: 600 !important; letter-spacing: -0.025em; } html.type-refined h1 { font-size: clamp(2.6rem, 5vw, 5.2rem); } html.type-refined h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); } /* ============================================================ ACCENT COLOUR VARIANTS --accent-alt and --accent-alt-dark defined per theme file. Default (no class): main theme accent. ============================================================ */ html.acc-alt { --accent: var(--accent-alt, #1d5c3a); --accent-dark: var(--accent-alt-dark, #134029); } /* Manually re-declare rules that use hardcoded colours (Signal button) */ html.acc-alt .btn-primary { background: var(--accent); border-color: var(--accent); } html.acc-alt .btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); } /* ============================================================ MARGIN COLUMN VARIANT ============================================================ */ /* --- No margin column: collapse it (useful for minimal look) --- */ html.no-margin .margin-col { display: none; } html.no-margin .page-body { grid-template-columns: 1fr; } /* ============================================================ RESPONSIVE GUARDS Variants only apply above mobile breakpoint where relevant. ============================================================ */ @media (max-width: 720px) { html.lyt-full .hero-title, html.lyt-minimal .hero-title, html.type-condensed h1 { font-size: clamp(2.55rem, 10.5vw, 4rem) !important; } html.lyt-minimal .hero { min-height: 0; padding: 56px 0 44px; } html.lyt-minimal .hero-sub { font-size: 1rem; line-height: 1.55; margin-bottom: 2rem; } }