/* ===================================================== HEKA — LOGO PROMINENCE OVERRIDES Layered on top of style.css. Variants are switched by [data-logo-treatment] and [data-topbar-size] on . ===================================================== */ /* ---------- shared tokens ---------- */ :root { --hero-mark-max: 720px; --hero-mark-color: var(--ink, #260c06); } /* ---------- TOPBAR sizing ---------- */ /* Default in style.css: 56px desktop / 44px mobile. We bump it. */ body[data-topbar-size="large"] .topbar { padding: 22px 36px; } body[data-topbar-size="large"] .brand-logo { height: 76px; } body[data-topbar-size="xl"] .topbar { padding: 28px 40px; } body[data-topbar-size="xl"] .brand-logo { height: 104px; } body[data-topbar-size="default"] .topbar { padding: 16px 32px; } body[data-topbar-size="default"] .brand-logo { height: 56px; } @media (max-width: 640px) { body[data-topbar-size="large"] .topbar { padding: 14px 18px; } body[data-topbar-size="large"] .brand-logo { height: 56px; } body[data-topbar-size="xl"] .topbar { padding: 16px 20px; } body[data-topbar-size="xl"] .brand-logo { height: 72px; } } /* Logo color treatment in topbar — keep crisp ink. The PNG is already dark. */ .brand-logo { image-rendering: -webkit-optimize-contrast; } /* ---------- HERO MARK lockup ---------- */ /* The new hero element. Sits above the existing landing-hero copy. */ .hero-mark { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; padding: 64px 0 8px; margin: 0; } .hero-mark-logo { height: clamp(140px, 18vw, 240px); width: auto; display: block; margin-left: -10px; /* optical: the rounded h sidebearing reads inset */ } .hero-mark-rule { display: block; width: 56px; height: 1px; background: var(--ink-soft, #260c06); opacity: 0.5; } .hero-mark-tagline { font-family: var(--font-sans); font-size: 14px; letter-spacing: 0.04em; color: var(--ink-muted, #6e6e73); font-weight: 500; } /* When the hero mark is shown, the eyebrow above the headline becomes redundant — hide it so the lockup doesn't compete with itself. */ body[data-logo-treatment="hero-mark"] .landing-hero .eyebrow, body[data-logo-treatment="hero-mark-centered"] .landing-hero .eyebrow, body[data-logo-treatment="hero-mark-xl"] .landing-hero .eyebrow, body[data-logo-treatment="watermark"] .landing-hero .eyebrow { display: none; } /* And tighten the gap between mark and headline */ body[data-logo-treatment="hero-mark"] .landing-hero, body[data-logo-treatment="hero-mark-centered"] .landing-hero, body[data-logo-treatment="hero-mark-xl"] .landing-hero { padding-top: 24px; } /* ---------- variant: hero-mark (default) ---------- Already matches the base .hero-mark styles above. */ /* ---------- variant: hero-mark-centered ---------- */ body[data-logo-treatment="hero-mark-centered"] .hero-mark { align-items: center; text-align: center; padding: 88px 0 16px; } body[data-logo-treatment="hero-mark-centered"] .hero-mark-logo { margin-left: 0; } body[data-logo-treatment="hero-mark-centered"] .landing-hero { text-align: center; } body[data-logo-treatment="hero-mark-centered"] .landing-hero .display, body[data-logo-treatment="hero-mark-centered"] .landing-hero .lede { margin-left: auto; margin-right: auto; } body[data-logo-treatment="hero-mark-centered"] .landing-hero .display-xl { max-width: 18ch; } body[data-logo-treatment="hero-mark-centered"] .landing-hero .cta-row { justify-content: center; } /* ---------- variant: hero-mark-xl (oversized full-bleed wordmark) ---------- */ body[data-logo-treatment="hero-mark-xl"] .hero-mark { padding: 80px 0 24px; align-items: stretch; } body[data-logo-treatment="hero-mark-xl"] .hero-mark-logo { height: auto; width: 100%; max-width: 100%; } body[data-logo-treatment="hero-mark-xl"] .hero-mark-rule, body[data-logo-treatment="hero-mark-xl"] .hero-mark-tagline { align-self: flex-end; } body[data-logo-treatment="hero-mark-xl"] .landing-hero { padding-top: 8px; border-top: 1px solid var(--border, #e5e5e7); margin-top: 16px; padding-top: 32px; } /* ---------- variant: watermark (faint giant logo behind hero) ---------- */ body[data-logo-treatment="watermark"] .hero-mark { display: none; } body[data-logo-treatment="watermark"] .screen-landing { position: relative; } body[data-logo-treatment="watermark"] .landing-hero { position: relative; padding-top: 64px; } body[data-logo-treatment="watermark"] .landing-hero::before { content: ""; position: absolute; top: -40px; right: -8%; width: min(900px, 90vw); aspect-ratio: 1285 / 481; background-image: url("heka-logo.png"); background-size: contain; background-repeat: no-repeat; background-position: top right; opacity: 0.06; pointer-events: none; z-index: 0; } body[data-logo-treatment="watermark"] .landing-hero > * { position: relative; z-index: 1; } /* ---------- variant: minimal (no hero mark — original behavior) ---------- */ body[data-logo-treatment="minimal"] .hero-mark { display: none; } body[data-logo-treatment="minimal"] .signoff-mark { display: none; } /* ---------- SIGNOFF mark ---------- */ /* Big subtle wordmark before the footer. A nice closing beat. */ .signoff-mark { margin: 64px 0 16px; padding: 48px 0 8px; display: flex; justify-content: center; align-items: center; border-top: 1px solid var(--border, #e5e5e7); } .signoff-mark img { height: clamp(80px, 10vw, 140px); width: auto; opacity: 0.92; } body[data-logo-treatment="hero-mark-xl"] .signoff-mark img { height: clamp(120px, 16vw, 200px); } /* Hide signoff entirely if user picks minimal */ body[data-logo-treatment="minimal"] .signoff-mark { display: none; } /* ---------- mobile tightening ---------- */ @media (max-width: 720px) { .hero-mark { padding: 32px 0 0; gap: 18px; } .hero-mark-logo { height: clamp(96px, 26vw, 140px); margin-left: -4px; } body[data-logo-treatment="hero-mark-xl"] .hero-mark { padding: 32px 0 12px; } body[data-logo-treatment="watermark"] .landing-hero::before { width: 110vw; right: -10%; top: -20px; opacity: 0.05; } .signoff-mark { margin: 40px 0 8px; padding: 32px 0 4px; } } /* ---------- entrance — rely on parent .screen screenIn; explicit visible state here. ---------- */ .hero-mark, .hero-mark-logo { opacity: 1; }