/* ============================================================ OTL TYPE LAB — typography exploration layer (dev tool) The floating "Aa" switcher (type-lab.js) sets data-type on . Hero row sizing is SELF-MEASURED by type-lab.js per font — no hardcoded factors here. To FINALIZE a non-Archivo choice: copy that variant's variables into :root in style.css, load its Google Font in each page head, set the .type-rows factors (read the inline em values the lab computes right off the hero rows in devtools), then delete type-lab.css + type-lab.js and their includes. Archivo is the default — finalizing it = just deleting the lab. ============================================================ */ /* 01 WIDE BLOCK — Archivo (current): defaults live in style.css */ /* 02 SQUARE BLOCK — Anybody expanded (closest to the logo's blocks) */ [data-type="anybody"] { --f-display: "Anybody", "Arial Black", sans-serif; --fw-dh: 800; --fw-db: 700; --ls-d: 0.005em; --row-lh: 0.94; --f-body: "Manrope", -apple-system, "Segoe UI", sans-serif; font-variation-settings: "wdth" 125; } /* 03 HEAVY GROTESK — Archivo Black (single weight) */ [data-type="archblack"] { --f-display: "Archivo Black", "Arial Black", sans-serif; --fw-dh: 400; --fw-db: 400; --ls-d: 0.005em; --row-lh: 0.94; --f-body: "Work Sans", -apple-system, "Segoe UI", sans-serif; } /* 05 MODERN GEOMETRIC — League Spartan */ [data-type="spartan"] { --f-display: "League Spartan", "Arial Black", sans-serif; --fw-dh: 800; --fw-db: 700; --ls-d: 0.012em; --row-lh: 0.98; --f-body: "Poppins", -apple-system, "Segoe UI", sans-serif; } /* 07 SOFT CONDENSED — Saira Condensed */ [data-type="saira"] { --f-display: "Saira Condensed", "Arial Narrow", sans-serif; --fw-dh: 700; --fw-db: 600; --ls-d: 0.025em; --row-lh: 0.92; --f-body: "Saira", -apple-system, "Segoe UI", sans-serif; } /* 08 MODERN PREMIUM — Sora */ [data-type="sora"] { --f-display: "Sora", "Arial", sans-serif; --fw-dh: 700; --fw-db: 600; --ls-d: 0em; --row-lh: 1.0; --f-body: "Sora", -apple-system, "Segoe UI", sans-serif; } /* 09 WARM GROTESK — Familjen Grotesk */ [data-type="familjen"] { --f-display: "Familjen Grotesk", "Arial", sans-serif; --fw-dh: 700; --fw-db: 600; --ls-d: 0.005em; --row-lh: 0.98; --f-body: "Familjen Grotesk", -apple-system, "Segoe UI", sans-serif; } /* 11 QUIET NEUTRAL — Instrument Sans */ [data-type="instr"] { --f-display: "Instrument Sans", "Arial", sans-serif; --fw-dh: 700; --fw-db: 600; --ls-d: 0.01em; --row-lh: 0.98; --f-body: "Instrument Sans", -apple-system, "Segoe UI", sans-serif; } /* keep body text the same optical size in every variant */ body { font-size-adjust: 0.545; } /* size-shuffle hooks — type-lab.js sets --tl-hero / --tl-heads on */ .hero h1 { font-size: calc(clamp(3.9rem, 8.3vw, 7.4rem) * var(--tl-hero, 1)); } @media (max-width: 560px) { .hero h1 { font-size: calc(19vw * var(--tl-hero, 1)); } } .page-hero h1 { font-size: calc(clamp(2.6rem, 6vw, 4.6rem) * var(--tl-heads, 1)); } /* ---------- floating switcher ---------- */ .type-lab-chip { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 160; display: inline-flex; align-items: center; gap: 0.55rem; background: var(--ink-950); color: var(--td-strong); border: 1px solid var(--line-dark); border-radius: 99px; padding: 0.55rem 1rem 0.55rem 0.75rem; font: 600 0.8rem/1 var(--f-body); letter-spacing: 0.04em; cursor: pointer; box-shadow: 0 10px 30px -12px rgba(0,0,0,.55); } .type-lab-chip .aa { font-family: var(--f-display); font-weight: var(--fw-dh, 800); color: var(--gold); font-size: 0.95rem; } .type-lab-chip:hover { border-color: var(--gold); } .type-lab-panel { position: fixed; right: 1.1rem; bottom: 3.9rem; z-index: 160; width: min(310px, calc(100vw - 2.2rem)); max-height: min(72vh, 620px); overflow-y: auto; overscroll-behavior: contain; background: var(--ink-950); border: 1px solid var(--line-dark); border-top: 3px solid var(--gold); border-radius: 6px; padding: 0.9rem; box-shadow: 0 24px 50px -18px rgba(0,0,0,.6); display: none; } .type-lab-panel.open { display: block; } .type-lab-panel h5 { margin: 0 0 0.7rem; font: 500 0.68rem var(--f-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--td-soft); } .type-lab-panel .opt { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: 4px; padding: 0.5rem 0.6rem; color: var(--td-body); cursor: pointer; } .type-lab-panel .opt:hover { border-color: var(--line-dark); color: var(--td-strong); } .type-lab-panel .opt[aria-pressed="true"] { border-color: var(--gold); color: var(--td-strong); } .type-lab-panel .opt .nm { font: 600 0.85rem var(--f-body); } .type-lab-panel .opt[aria-pressed="true"] .nm::before { content: "● "; color: var(--gold); font-size: 0.6rem; vertical-align: 2px; } .type-lab-panel .opt .ft { font: 400 0.66rem var(--f-mono); letter-spacing: 0.06em; color: var(--td-soft); white-space: nowrap; } .type-lab-panel .szrow { margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .type-lab-panel .szbtn { font: 600 0.72rem var(--f-body); color: var(--td-strong); background: none; border: 1px solid #5C5554; border-radius: 99px; padding: 0.35rem 0.8rem; cursor: pointer; } .type-lab-panel .szbtn:hover { border-color: var(--gold); } .type-lab-panel .szout { width: 100%; font: 400 0.62rem var(--f-mono); letter-spacing: 0.05em; color: var(--td-soft); } @media print { .type-lab-chip, .type-lab-panel { display: none !important; } }