/* styles.css — casa-estatica's own stylesheet. NOT a vendored kit file (no @spine-kit tag) — this is the stack's own layout, built on top of tokens.css + motion.css + params-panel.css, which are linked before this file in every page's . Rule: every color, radius, and font in this file is read from a token declared in tokens.css (var(--...)). Nothing here redefines a --tp-* or Night Shift value — see tokens.css's own STACK-LOCAL LAYOUT VARIABLES block for the three layout variables this stack reuses (--wrap-narrow, --section-rhythm, --header-height). This stack uses Context A (Night Shift) alone, per tokens/CONTEXTS.md's own rule of thumb: a stack that is not one of the two rebuilt outward sites defaults to Context A alone. No --tp-* token is read anywhere below. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--font-sans); } img, svg { max-width: 100%; display: block; } a { color: inherit; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } .wrap-narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 24px; } /* ── skip link ─────────────────────────────────────────────────── */ .skip-link { position: absolute; left: 12px; top: -48px; background: var(--accent); color: var(--bg); padding: 10px 16px; border-radius: var(--r-badge); font: 600 14px var(--font-sans); text-decoration: none; z-index: 100; transition: top 160ms ease; } .skip-link:focus { top: 12px; } /* ── header / nav ──────────────────────────────────────────────── */ .site-head { position: sticky; top: 0; z-index: 20; min-height: var(--header-height); display: flex; align-items: center; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .nav { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 800; font-size: 18px; letter-spacing: -0.01em; color: var(--text); } .brand-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--grad); flex: none; } .nav-links { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .nav-links a { text-decoration: none; color: var(--muted); font-size: 14.5px; font-weight: 600; } .nav-links a:hover, .nav-links a:focus-visible { color: var(--text); } .lang-pair { font: 600 13px var(--font-mono); color: var(--muted); letter-spacing: 0.02em; } .lang-pair .lang-sep { padding: 0 4px; opacity: 0.5; } .lang-link { color: var(--muted); text-decoration: none; } .lang-link:hover, .lang-link:focus-visible { color: var(--accent); } .btn-nav { background: var(--accent); color: var(--bg) !important; padding: 9px 16px; border-radius: var(--r-chip); font-weight: 700 !important; } /* ── generic buttons ───────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: var(--r-chip); font-weight: 700; font-size: 15px; text-decoration: none; border: 1px solid transparent; cursor: pointer; } /* color: var(--bg), not a literal hex — chosen for contrast against the WORST stop of --grad-cta's three-color sweep (the purple end), which a token-name-only audit can't see since it never resolves a gradient's individual color stops. Verified by hand: text vs each stop is 13.14:1 (amber) / 7.15:1 (pink) / 4.66:1 (purple) — all >=4.5:1 AA- normal at this button's 15px/700 weight (which does not qualify for the 3:1 large-text threshold; that needs >=18.66px bold). */ .btn-primary { background: var(--grad-cta); color: var(--bg); } .btn-primary:hover, .btn-primary:focus-visible { filter: brightness(1.06); } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); } .btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--accent); color: var(--accent); } /* ── layout rhythm ─────────────────────────────────────────────── */ main section, main > .band { padding-block: var(--section-rhythm); border-bottom: 1px solid var(--border); } main section:last-of-type { border-bottom: none; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 700 12.5px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0 0 14px; } .eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; } h1, h2, h3 { line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 14px; } h1 { font-size: clamp(34px, 5.4vw, 56px); background: var(--grad-title); -webkit-background-clip: text; background-clip: text; color: transparent; } h2 { font-size: clamp(26px, 3.6vw, 36px); color: var(--text); } h3 { font-size: 19px; color: var(--text); } p { color: var(--muted); margin: 0 0 16px; } .lede { font-size: 17px; max-width: 62ch; } /* ── hero ──────────────────────────────────────────────────────── */ .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 260px); gap: 48px; align-items: center; } .hero-copy .thesis { font-size: 18px; color: var(--muted); max-width: 56ch; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; } .hero-mark { display: flex; justify-content: center; } .hero-mark svg { width: 100%; height: auto; } .demo-note { display: inline-block; font-size: 13px; color: var(--subtle); border: 1px dashed var(--border-strong); border-radius: var(--r-badge); padding: 10px 14px; margin: 4px 0 0; } @media (max-width: 760px) { .hero-grid { grid-template-columns: 1fr; } .hero-mark { max-width: 200px; margin: 0 auto; order: -1; } } /* ── session cards ─────────────────────────────────────────────── */ .session-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 32px; } .session-grid[hidden] { display: none; } .session-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 24px; } .session-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .session-date { font: 700 12.5px var(--font-mono); color: var(--accent); letter-spacing: 0.02em; } .session-format { display: inline-block; font: 700 11px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-badge); background: var(--raised); color: var(--live); } .session-format[data-format="hybrid"] { color: var(--info); } .session-card h3 { margin-bottom: 8px; font-size: 17px; } .session-card p { font-size: 14.5px; margin-bottom: 0; } /* ── proof / about ─────────────────────────────────────────────── */ .about-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: start; } .about-copy .textlink { color: var(--accent); font-weight: 700; text-decoration: none; } .about-copy .textlink:hover, .about-copy .textlink:focus-visible { text-decoration: underline; } .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 18px 16px; text-align: center; } .stat-num { display: block; font: 800 30px var(--font-mono); color: var(--accent); } .stat-label { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; } @media (max-width: 640px) { .about-grid { grid-template-columns: 1fr; } .stat-row { grid-template-columns: 1fr; } } /* ── contact / join ────────────────────────────────────────────── */ .join-steps { padding-left: 1.25em; margin: 0 0 20px; max-width: 62ch; } .join-steps li { margin-bottom: 8px; } .contact-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .contact-meta { font-size: 14px; color: var(--muted); } /* ── footer ────────────────────────────────────────────────────── */ .site-foot { padding-block: 56px 40px; } .foot-grid { display: flex; flex-direction: column; gap: 28px; } .foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; align-items: flex-start; } .foot-brand p { margin: 0; } .foot-name { font-weight: 800; color: var(--text); } .foot-line { font-size: 13.5px; max-width: 34ch; } .foot-links { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; margin: 0; padding: 0; } .foot-links a { text-decoration: none; color: var(--muted); font-size: 14px; } .foot-links a:hover, .foot-links a:focus-visible { color: var(--text); } .foot-legal { font: 12.5px var(--font-mono); color: var(--muted); margin: 0; } /* ── reveal stagger helper (unitless --d, per motion.css's calc) ─── */ .reveal[style*="--d"] { /* no-op selector kept for clarity; --d is read by motion.css */ } /* ── 404 ───────────────────────────────────────────────────────── */ .error-wrap { min-height: calc(100svh - var(--header-height)); display: flex; align-items: center; } .error-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; } .error-code { font: 700 13px var(--font-mono); letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; } .error-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; } .error-mark { width: min(30vw, 180px); } @media (max-width: 640px) { .error-grid { grid-template-columns: 1fr; } .error-mark { width: min(48vw, 150px); } } /* ── generic small-screen check: 375px, nothing overflows ────────── */ @media (max-width: 400px) { .wrap, .wrap-narrow { padding: 0 16px; } .nav-links { gap: 14px; } }