/* ========================================================================== AIBoomi ONE '27 — Early Interest Capture Design tokens sourced from design.md (AIBoomi Design System Reference) ========================================================================== */ /* ── Color tokens — Primitives + Semantic ────────────────────────────── */ :root { --neutral-0: #ffffff; --neutral-50: #f7f6f3; --neutral-100: #dedddb; --neutral-300: #adacaa; --neutral-600: #636261; --neutral-700: #3f3f3f; --neutral-800: #181818; --neutral-900: #000000; --green-50: #e6fff0; --green-400: #00e64a; --green-700: #00b33a; --purple-50: #f3ecfe; --purple-500: #8a3ff0; --purple-700: #7d54ba; --status-red: #cb4f4f; --background-default: var(--neutral-50); --background-dark: var(--neutral-900); --background-dark-subtle: var(--neutral-800); --text-primary: var(--neutral-900); --text-invert: var(--neutral-0); --text-secondary: var(--neutral-600); --text-tertiary: var(--neutral-300); --accent-green: var(--green-400); --accent-green-hover: var(--green-700); --accent-purple: var(--purple-500); --accent-purple-hover: var(--purple-700); --border-default: var(--neutral-100); --border-dark: var(--neutral-700); --status-error: var(--status-red); } /* ── Typography tokens ──────────────────────────────────────────────── Degular Variable + IvyJournal load via Typekit (see index.html ). CSS names per design.md: "degular" (display/UI), "ivyjournal" (editorial). Geist Mono loads via Google Fonts for labels. */ :root { --font-display: "degular", system-ui, sans-serif; --font-editorial: "ivyjournal", Georgia, serif; --font-mono: "Geist Mono", "SFMono-Regular", Consolas, monospace; } /* ── Spacing scale — base unit 4px ────────────────────────────────────── */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; } /* ── Grid & container ────────────────────────────────────────────────── Sections bleed full width; the container centers content and caps it at 1280px, matching the two-frame section pattern in design.md. */ :root { --container-width: 1280px; --container-margin: 80px; /* wide (≥1440px) */ } @media (max-width: 1439px) { :root { --container-margin: 48px; } } @media (max-width: 1023px) { :root { --container-margin: 32px; } } @media (max-width: 767px) { :root { --container-margin: 20px; } } /* ── Reset ─────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background-color: var(--background-default); color: var(--text-primary); font-family: var(--font-editorial); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } a { color: inherit; } /* Single, real focus-visible treatment for every interactive element — replaces the non-functional inline style-focus attribute from the original export. */ a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent-green); outline-offset: 2px; } /* ── Layout helpers ────────────────────────────────────────────────────── */ /* Two-frame pattern per design.md: .section is the full-bleed frame that owns the background; .container is the inner frame that caps and centers content. Never apply max-width to .section itself — that would break full-bleed backgrounds. */ .section { width: 100%; /* Establishes a new block formatting context so a child's margin-bottom (e.g. .editions__grid) can never collapse through this box and leak into the gap between sections — without it, sections with padding-bottom: 0 show the page background between them instead of their own background. */ display: flow-root; } .section--dark { background-color: var(--background-dark); color: var(--text-invert); } .container { width: 100%; max-width: var(--container-width); margin-inline: auto; padding-inline: var(--container-margin); } /* xwide (≥1920px): content width grows to 1716px, margin to 102px per design.md */ @media (min-width: 1920px) { :root { --container-width: 1716px; --container-margin: 102px; } } .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; } /* ── Reveal / entrance animation ──────────────────────────────────────── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .fade-up { opacity: 0; animation: fadeUp 0.8s cubic-bezier(.22,1,.36,1) forwards; } .d1 { animation-delay: .05s; } .d2 { animation-delay: .2s; } .d3 { animation-delay: .36s; } .d4 { animation-delay: .52s; } .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); } .reveal.visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .fade-up, .reveal { opacity: 1; transform: none; animation: none; transition: none; } } /* ── Masthead ──────────────────────────────────────────────────────────── */ .masthead { padding-block: 20px; border-bottom: 1px solid var(--border-dark); background: var(--background-dark); color: var(--text-invert); } .masthead__row { display: flex; justify-content: space-between; align-items: center; } .masthead__logo { display: block; width: auto; } .masthead__logo--wordmark { height: 18px; } .masthead__logo--mark { height: 24px; } @media (max-width: 767px) { .masthead__row { flex-direction: row; align-items: center; } .masthead__logo--wordmark { height: 14px; } .masthead__logo--mark { height: 20px; } } /* ── Hero ──────────────────────────────────────────────────────────────── */ .hero { padding-top: var(--space-24); padding-bottom: 0; } .hero__eyebrow { color: var(--neutral-600); margin-bottom: var(--space-8); } .hero__headline { font-family: var(--font-display); font-size: clamp(52px, 11vw, 148px); font-weight: 300; letter-spacing: -0.03em; line-height: 0.92; color: var(--neutral-0); } .rule-subhead { padding-top: var(--space-12); padding-bottom: 0; } .rule-subhead__rule { height: 1px; background: var(--border-dark); margin-bottom: 36px; } .rule-subhead__text { font-family: var(--font-editorial); font-size: clamp(18px, 2.2vw, 26px); font-style: italic; line-height: 1.4; color: var(--neutral-100); max-width: 720px; } /* ── Intro copy ────────────────────────────────────────────────────────── */ .intro { padding-top: 56px; padding-bottom: var(--space-24); } .intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); } .intro__body { display: flex; flex-direction: column; gap: var(--space-6); } .intro__body p { color: var(--neutral-300); } .intro__body p strong, .intro__body p .highlight { color: var(--neutral-0); font-weight: inherit; } .intro__aside { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-8); } .intro__quote { padding-left: 28px; border-left: 2px solid var(--border-dark); font-family: var(--font-editorial); font-size: clamp(18px, 1.8vw, 24px); font-style: italic; font-weight: 300; line-height: 1.45; color: var(--neutral-0); } .intro__quote .highlight { color: var(--accent-green); } .intro__cta { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--border-dark); } .intro__cta-note { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--neutral-600); line-height: 1.7; } @media (max-width: 900px) { .intro__grid { grid-template-columns: 1fr; gap: var(--space-12); } } /* ── Historical parallel ──────────────────────────────────────────────── */ .parallel { padding-block: var(--space-24); } .parallel__label { color: var(--neutral-600); margin-bottom: var(--space-6); } .parallel__intro { font-family: var(--font-editorial); font-size: clamp(22px, 2.5vw, 30px); font-style: italic; line-height: 1.4; color: var(--neutral-700); max-width: 680px; margin-bottom: var(--space-16); } .parallel__intro em { color: var(--neutral-900); font-style: italic; } /* Three equal-weight columns — a supporting reference, not a showcase, so scale stays well below the section's own intro quote. */ .parallel__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); } .parallel__card { display: flex; flex-direction: column; gap: var(--space-3); } /* Source photos are 1:1 — match the box to that ratio so object-fit:cover has nothing to crop; height simply follows the column's own width. */ .parallel__media { aspect-ratio: 1 / 1; border-radius: 4px; overflow: hidden; } .parallel__media img { width: 100%; height: 100%; object-fit: cover; } .parallel__heading { display: flex; flex-direction: column; gap: var(--space-1); } .parallel__name { font-family: var(--font-display); font-size: clamp(22px, 2vw, 28px); font-weight: 300; letter-spacing: -0.01em; line-height: 1.1; color: var(--neutral-900); } .parallel__meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--neutral-300); } .parallel__copy { font-family: var(--font-editorial); font-size: 15px; line-height: 1.6; color: var(--neutral-700); } .parallel__copy strong { color: var(--neutral-900); } @media (max-width: 900px) { .parallel__grid { grid-template-columns: 1fr; gap: var(--space-12); } } /* ── Seven editions ────────────────────────────────────────────────────── */ .editions { padding-top: var(--space-24); padding-bottom: 0; } .editions__label { color: var(--neutral-600); margin-bottom: var(--space-6); } .editions__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); margin-bottom: var(--space-20); } .editions__copy p { color: var(--neutral-300); margin-bottom: var(--space-6); } .editions__copy p:last-child { margin-bottom: 0; } .editions__copy .highlight { color: var(--neutral-0); } .editions__link-wrap { display: flex; align-items: flex-end; justify-content: flex-end; } @media (max-width: 900px) { .editions__grid { grid-template-columns: 1fr; gap: var(--space-8); margin-bottom: var(--space-8); } .editions__link-wrap { justify-content: center; } } /* ── Gallery ─────────────────────────────────────────────────────────────── Intentional full-bleed exception per design.md (no .container — gallery- section is one of only two sections, alongside event-hero, that ignore the centred-content pattern). A single fixed-height, horizontally draggable strip; each image keeps its natural aspect ratio, so portrait shots run narrow and landscape shots run wide. */ .gallery { padding-block: var(--space-24) 0; } .gallery-strip { display: flex; align-items: stretch; gap: var(--space-3); height: 480px; padding-inline: var(--container-margin); overflow-x: auto; overflow-y: hidden; cursor: grab; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .gallery-strip::-webkit-scrollbar { display: none; } .gallery-strip.is-dragging { cursor: grabbing; scroll-snap-type: none; } .gallery-strip.is-dragging * { user-select: none; } .gallery-strip__item { flex: 0 0 auto; height: 100%; border-radius: 4px; overflow: hidden; } .gallery-strip__item img { height: 100%; width: auto; max-width: none; display: block; -webkit-user-drag: none; } @media (max-width: 900px) { .gallery { padding-top: var(--space-8); } .gallery-strip { height: 320px; } } @media (max-width: 480px) { .gallery-strip { height: 220px; } } /* ── Image placeholder (replaces ) ────────────────────────── */ .img-slot { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 4px; background: repeating-linear-gradient( 135deg, var(--neutral-800), var(--neutral-800) 10px, var(--neutral-700) 10px, var(--neutral-700) 11px ); border: 1px solid var(--border-dark); } .img-slot span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--neutral-300); text-align: center; padding: var(--space-2) var(--space-4); background: rgba(0,0,0,0.5); border-radius: 4px; } /* Light-on-light context (historical parallel section) */ .parallel .img-slot { background: repeating-linear-gradient( 135deg, var(--neutral-100), var(--neutral-100) 10px, var(--neutral-0) 10px, var(--neutral-0) 11px ); border-color: var(--border-default); } .parallel .img-slot span { color: var(--neutral-600); background: rgba(255,255,255,0.7); } /* ── Buttons ───────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: 0.01em; padding: 16px 32px; border-radius: 9999px; border: none; cursor: pointer; text-decoration: none; transition: background 150ms ease-out, box-shadow 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out, opacity 150ms ease-out; } .btn-primary { background: var(--accent-purple); color: var(--neutral-0); } .btn-primary:hover { background: var(--accent-purple-hover); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } .btn-outline { background: transparent; color: var(--neutral-0); border: 1px solid var(--border-dark); } .btn-outline:hover { border-color: var(--accent-green); color: var(--accent-green); } /* ── Final CTA / sign-up form ─────────────────────────────────────────── */ .final-cta { border-top: 1px solid var(--border-dark); padding-block: var(--space-32); } .final-cta__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-20); align-items: start; } .final-cta__label { color: var(--neutral-600); margin-bottom: var(--space-6); } .final-cta__heading { font-family: var(--font-display); font-size: clamp(28px, 3vw, 44px); font-weight: 300; letter-spacing: -0.02em; line-height: 1.15; color: var(--neutral-0); margin-bottom: var(--space-6); } .final-cta__copy { color: var(--neutral-600); max-width: 480px; } @media (max-width: 900px) { .final-cta__grid { grid-template-columns: 1fr; gap: var(--space-12); } } .signup-form { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-2); } .form-field { display: flex; flex-direction: column; gap: var(--space-2); } .form-field label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--neutral-600); } .form-field input { background: var(--neutral-800); border: 1px solid var(--border-dark); border-radius: 4px; padding: 14px 16px; font-family: var(--font-editorial); font-size: 16px; color: var(--neutral-0); outline: none; width: 100%; transition: border-color 150ms ease-out; } .form-field input:focus { border-color: var(--accent-purple); } .form-field input:invalid:not(:placeholder-shown) { border-color: var(--status-error); } /* Honeypot — visually hidden but present in the DOM/tab order removed, so real users never see or reach it while simple bots still fill it. */ .form-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .signup-form__submit { margin-top: var(--space-2); } .signup-form__note { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--neutral-600); line-height: 1.7; } .signup-form__status { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; line-height: 1.6; min-height: 1.6em; } .signup-form__status[data-state="success"] { color: var(--accent-green); } .signup-form__status[data-state="error"] { color: var(--status-error); } /* Google's default reCAPTCHA v3 badge is intrusive on a dark hero — hide it visually but keep the required disclosure text in the form footer, per Google's terms of service. */ .grecaptcha-badge { visibility: hidden; } /* ── Footer ────────────────────────────────────────────────────────────── */ .site-footer { background: var(--neutral-900); padding-block: var(--space-6); border-top: 1px solid var(--border-dark); } .site-footer__row { display: flex; justify-content: space-between; align-items: center; } .site-footer .label:first-child { color: var(--neutral-700); } .site-footer .label:last-child { color: var(--neutral-700); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: none; } @media (max-width: 767px) { .site-footer__row { flex-direction: column; align-items: flex-start; gap: var(--space-2); } }