/* =========================================================================== Drinks on James — site stylesheet Derived from the Claude Design canvas in ../../design/, which is built on the "Industry" design system with the Drinks on James palette layered over the top (amber ground, blue accent, lime highlight). The canvas carried every value as an inline style across two fixed artboards (1280px desktop, 390px mobile). Here those values live in classes and a fluid type scale: each clamp() below resolves to the mobile artboard's value at 390px and the desktop artboard's value at 1280px, so both artboards are reproduced exactly and every width between them interpolates. ======================================================================== */ /* Fonts are linked from index.html so the preload scanner starts them in parallel with this file rather than after it parses. */ /* --- tokens ------------------------------------------------------------ */ :root { --color-bg: #FBDBA2; --color-surface: #FFF4DF; --color-text: #1B1B1B; --color-accent: #3F5FE0; --color-accent-2: #B4E85A; --color-divider: color-mix(in srgb, #1B1B1B 24%, transparent); --color-accent-100: #EEF1FE; --color-accent-200: #D9E0FC; --color-accent-300: #B8C6F8; --color-accent-400: #8CA1F2; --color-accent-500: #4F6DE8; --color-accent-600: #3450C8; --color-accent-700: #2A41A6; --color-accent-800: #1F3080; --color-accent-900: #162155; --color-accent-2-100: #F5FCE8; --color-accent-2-200: #E7F7C6; --color-accent-2-300: #D3F09B; --color-accent-2-400: #C3EC78; --color-accent-2-500: #B4E85A; --color-accent-2-600: #93C63E; --color-accent-2-700: #6F9A2A; --color-accent-2-800: #4E6D1C; --color-accent-2-900: #334712; --font-heading: "Barlow Condensed", system-ui, sans-serif; --font-body: "Barlow", system-ui, sans-serif; --radius-md: 4px; /* muted text — the canvas used these two mixes throughout */ --ink-72: color-mix(in srgb, var(--color-text) 72%, transparent); --ink-78: color-mix(in srgb, var(--color-text) 78%, transparent); /* --color-divider (24%) is for decorative hairlines. Interactive control boundaries need 3:1 against both the fill and the ground (WCAG 1.4.11). */ --color-border-control: color-mix(in srgb, #1B1B1B 55%, transparent); /* fluid scale: mobile artboard value @390px → desktop artboard value @1280px */ --fs-body: clamp(15px, calc(14.56px + 0.1124vw), 16px); --lh-body: clamp(22px, calc(21.12px + 0.2247vw), 24px); --fs-lede: clamp(16px, calc(15.12px + 0.2247vw), 18px); --fs-h1: clamp(50px, calc(35.10px + 3.8202vw), 84px); --lh-h1: clamp(50px, calc(34.22px + 4.0449vw), 86px); --fs-h2: clamp(34px, calc(29.62px + 1.1236vw), 44px); --fs-h2-cta: clamp(40px, calc(32.99px + 1.7978vw), 56px); --fs-h2-news: clamp(30px, calc(27.37px + 0.6742vw), 36px); --fs-stat: clamp(34px, calc(26.11px + 2.0225vw), 52px); --fs-james: clamp(38px, calc(34.49px + 0.8989vw), 46px); --fs-brand: clamp(18px, calc(16.25px + 0.4494vw), 22px); --fs-day: clamp(48px, calc(26.98px + 5.3933vw), 96px); --lh-day: clamp(44px, calc(28.23px + 4.0449vw), 80px); --fs-event-h3: clamp(24px, calc(18.74px + 1.3483vw), 36px); --fs-sub-h3: clamp(20px, calc(19.12px + 0.2247vw), 22px); /* descending: the mini event cards are LARGER on mobile than desktop */ --fs-mini-h3: clamp(22px, calc(24.88px - 0.2247vw), 24px); --pad-x: clamp(20px, calc(0.72px + 4.9438vw), 64px); } /* --- base -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; text-wrap: pretty; overflow-x: hidden; } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; margin: 0; } p { margin: 0; } img { display: block; max-width: 100%; } figure { margin: 0; } a { color: var(--color-accent-700); text-underline-offset: 3px; } a:hover { color: var(--color-accent-900); } :focus { outline: none; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Skip link — not in the mockup; a keyboard user on a one-page site with a six-item nav needs a way past it. */ .skip-link { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--color-accent); color: #fff; padding: 10px 16px; font-family: var(--font-heading); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: top .15s ease; } .skip-link:focus-visible { top: 8px; color: #fff; } /* --- shared type helpers ----------------------------------------------- */ .kicker { display: block; font-size: clamp(12px, calc(11.56px + 0.1124vw), 13px); line-height: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--color-accent-700); margin: 0 0 12px; } .rule { height: 1px; border: 0; margin: 0 0 28px; background: var(--color-divider); } .meta { font-size: clamp(12px, calc(11.56px + 0.1124vw), 13px); line-height: 20px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ink-72); } .meta-item { display: inline-flex; align-items: center; gap: 6px; } .lede { font-size: var(--fs-lede); line-height: 1.5; } .section { padding: 0 var(--pad-x) clamp(56px, calc(45.5px + 2.70vw), 80px); } /* the artboards disagree on the tail padding of these three */ .section-tall { padding-bottom: clamp(56px, calc(41.98px + 3.60vw), 88px); } .section-short { padding-bottom: clamp(48px, calc(33.98px + 3.60vw), 80px); } .section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; } /* --- blueprint frame (Industry) ---------------------------------------- */ .blueprint { position: relative; border: 1px solid var(--color-divider); border-radius: 0; } /* --- buttons (Industry, sized for this page) --------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font-family: var(--font-heading); font-weight: 600; font-size: 15px; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text); background: transparent; border: 1px solid transparent; padding: 12px 20px; min-height: 44px; border-radius: var(--radius-md); } .btn svg { display: block; flex: none; } .btn-primary { background: var(--color-accent); color: #fff; } .btn-primary:hover { background: var(--color-accent-600); color: #fff; } .btn-primary:active { background: var(--color-accent-700); } .btn-secondary { border-color: var(--color-divider); padding: 10px 16px; font-size: 14px; min-height: 0; } .btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } .btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); } .btn-ghost { color: var(--color-accent-700); padding-inline: 12px; } .btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent-900); } .btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); } .btn-sm { padding: 10px 16px; font-size: 14px; min-height: 0; } /* --- tag --------------------------------------------------------------- */ .tag { display: inline-flex; align-items: center; background: var(--color-accent-2); color: var(--color-text); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; padding: 4px 10px; border-radius: 3px; } /* --- card -------------------------------------------------------------- */ .card { display: flex; flex-direction: column; gap: var(--card-gap, 20px); background: var(--color-surface); padding: 24px; } /* --- input ------------------------------------------------------------- */ .input { width: 100%; min-height: 44px; padding: 8px 12px; font: inherit; font-size: 15px; color: var(--color-text); caret-color: var(--color-accent); background: var(--color-surface); border: 1px solid var(--color-border-control); border-radius: var(--radius-md); } .input:hover { border-color: color-mix(in srgb, var(--color-text) 75%, transparent); } .input:focus-visible { border-color: var(--color-accent); outline-offset: 0; } /* =========================================================================== Spotlight — the canvas's `spotlightOn` effect. A lime grid, a lime duplicate of the headline, an un-greyed James and the sponsor logos in full colour, all revealed inside a 220px radial mask that follows the pointer. app.js writes --rx / --ry; with no pointer (or with reduced motion, or on touch) they stay at -999px and nothing shows, which is exactly the resting state of the mockup. ======================================================================== */ .spotlight-mask { -webkit-mask-image: radial-gradient(circle 220px at var(--rx, -999px) var(--ry, -999px), #000 0%, #000 35%, transparent 100%); mask-image: radial-gradient(circle 220px at var(--rx, -999px) var(--ry, -999px), #000 0%, #000 35%, transparent 100%); } .spotlight-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle 220px at var(--rx, -999px) var(--ry, -999px), rgba(180,232,90,.5), rgba(180,232,90,0) 70%), linear-gradient(var(--color-accent-400) 1px, transparent 1px), linear-gradient(90deg, var(--color-accent-400) 1px, transparent 1px); background-size: auto, 24px 24px, 24px 24px; } /* The same highlight, painted OVER an image so the effect carries across the photo and the logos instead of stopping at their edges. The images themselves stay in full colour. */ .spotlight-highlight { position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: radial-gradient(circle 220px at var(--rx, -999px) var(--ry, -999px), rgba(180,232,90,.5), rgba(180,232,90,0) 70%), linear-gradient(var(--color-accent-400) 1px, transparent 1px), linear-gradient(90deg, var(--color-accent-400) 1px, transparent 1px); background-size: auto, 24px 24px, 24px 24px; } /* .page is the positioning context for the grid, so the grid spans the whole document rather than just the first viewport. Content sits above it. */ .page { position: relative; } .page-content { position: relative; z-index: 1; } /* The skip link moves focus to #doj-main programmatically; suppress the ring on that one element without touching :focus-visible anywhere else. */ #doj-main:focus { outline: none; } /* --- nav --------------------------------------------------------------- */ .nav { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(10px, calc(2.1px + 2.02vw), 28px); padding: clamp(12px, calc(8.5px + 0.90vw), 20px) var(--pad-x); border-bottom: 1px solid var(--color-divider); } .nav-brand { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-brand); letter-spacing: .03em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; margin-right: auto; } .nav-link { font-weight: 500; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; color: var(--color-accent-700); } .nav-link:hover { color: var(--color-accent-900); text-decoration: underline; } .nav .btn { padding: 10px 16px; font-size: 14px; min-height: 0; } /* --- hero -------------------------------------------------------------- */ .hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px 80px; align-items: start; padding: clamp(44px, calc(38.7px + 1.35vw), 56px) var(--pad-x) clamp(40px, calc(26px + 3.6vw), 72px); position: relative; } .hero-sparkle { position: absolute; color: var(--color-accent); pointer-events: none; } .hero-sparkle-1 { right: 72px; top: 36px; } .hero-sparkle-2 { left: 44%; bottom: 44px; } .hero-copy { margin-top: -6px; } .hero-headline-wrap { position: relative; } h1.hero-title, .hero-title-reveal { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: .01em; text-transform: uppercase; margin: 0 0 0 -.05em; } h1.hero-title span, .hero-title-reveal span { display: block; } .hero-title-reveal { position: absolute; inset: 0; pointer-events: none; color: var(--color-accent-2); } .hero-lede { font-size: var(--fs-lede); line-height: 1.5; max-width: 50ch; margin: 28px 0 0; } .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; } .hero-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--color-divider); } /* portrait */ .hero-figure { position: relative; } .hero-arrow { position: absolute; right: -14px; top: -10px; width: 136px; height: 136px; z-index: 3; pointer-events: none; color: var(--color-text); } .hero-badge { position: relative; z-index: 2; width: 78%; margin: 8px 0 -22px; padding: 22px 24px 20px; background: var(--color-accent); color: #fff; transform: rotate(-2deg); } .hero-badge-title { display: block; font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-james); line-height: .96; letter-spacing: .01em; text-transform: uppercase; } .hero-badge-sub { display: block; margin-top: 8px; font-size: 14px; line-height: 18px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; } .hero-portrait { aspect-ratio: 1 / 1; position: relative; z-index: 1; } .hero-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; } /* Photography runs in full colour. The cursor brings the highlight across it (.spotlight-highlight), it does not un-grey it. */ .hero-figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; } /* --- events ------------------------------------------------------------ */ .events-title { font-size: var(--fs-h2); line-height: 1.05; } .events-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; margin-top: 40px; align-items: stretch; } .event-main { --card-gap: 22px; padding: 32px; } .event-main-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .event-date { display: flex; align-items: baseline; gap: 16px; } .event-day { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-day); line-height: var(--lh-day); letter-spacing: -.02em; } .event-date-stack { display: flex; flex-direction: column; gap: 4px; } .event-weekday { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ink-72); } .event-month { font-family: var(--font-heading); font-weight: 600; font-size: clamp(24px, calc(21.4px + 0.67vw), 30px); line-height: 1; letter-spacing: .02em; text-transform: uppercase; } .event-title { font-size: var(--fs-event-h3); line-height: 1.05; } .event-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; } .event-specs span { display: flex; gap: 10px; align-items: center; } .event-note { color: var(--ink-78); max-width: 52ch; } .event-cta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: auto; } .event-side { display: flex; flex-direction: column; gap: 40px; } .event-mini { --card-gap: 12px; flex: 1; } .event-mini-head { display: flex; align-items: baseline; gap: 12px; } .event-mini-month { font-family: var(--font-heading); font-weight: 600; font-size: clamp(40px, calc(51.51px - 0.8989vw), 48px); line-height: clamp(36px, calc(47.51px - 0.8989vw), 44px); letter-spacing: -.01em; } .event-mini-when { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ink-72); } .event-mini-title { font-size: var(--fs-mini-h3); line-height: 1.1; } .event-mini-note { font-size: 14px; line-height: 21px; color: var(--ink-78); } .event-mini .btn { align-self: flex-start; margin-top: auto; } /* Luma calendar — `showLuma` in the canvas, switched on here so the live calendar is the source of truth for dates. */ .luma-embed { margin-top: 40px; padding: 8px; background: var(--color-surface); border: 1px solid var(--color-divider); } .luma-embed iframe { display: block; width: 100%; height: 520px; border: 0; } /* --- spec sheet -------------------------------------------------------- */ .sheet { border: 1px solid var(--color-divider); } .sheet-head { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--color-divider); font-size: 13px; line-height: 24px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; } .sheet-head span:first-child { flex: 1; min-width: 16ch; padding: 12px 24px; } .sheet-head .sheet-ref { padding: 12px 24px; border-left: 1px solid var(--color-divider); white-space: nowrap; color: var(--ink-72); } .sheet table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 15px; } .sheet th { text-align: left; font-size: 13px; line-height: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ink-72); padding: 14px 24px 12px 0; border-bottom: 1px solid var(--color-divider); } .sheet th:first-child, .sheet td:first-child { padding-left: 24px; } .sheet td { padding: 12px 24px 12px 0; line-height: 24px; vertical-align: middle; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); } .sheet tr:last-child td { border-bottom: 0; } .sheet .col-no { font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--color-accent-700); } .sheet .col-value { font-family: var(--font-heading); font-weight: 600; font-size: 24px; letter-spacing: .02em; white-space: nowrap; } .sheet .col-remark { color: var(--ink-78); } .sheet-foot { margin: 0; padding: 12px 24px; border-top: 1px solid var(--color-divider); font-size: 13px; line-height: 24px; color: var(--ink-72); } /* --- sponsors ---------------------------------------------------------- */ .sponsors-title { font-size: var(--fs-h2); line-height: 1.05; } .sponsors-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 40px; } .sponsor-title-card { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; padding: 32px; align-items: center; } .sponsor-title-logo { container-type: inline-size; width: 100%; height: 150px; display: flex; align-items: center; justify-content: center; } .sponsor-title-logo img { max-width: 100%; max-height: 150px; width: auto; height: auto; } .sponsor-title-name { font-size: clamp(26px, calc(23.37px + 0.6742vw), 32px); line-height: 1.05; } .sponsor-title-note { margin: 12px 0 0; color: var(--ink-78); max-width: 48ch; } .sponsor-title-card .btn { margin-top: 20px; } .sponsor-card { --card-gap: 20px; } .sponsor-logo { position: relative; height: 100px; } .sponsor-logo img { position: absolute; inset: 0; margin: auto; max-width: 72%; max-height: 96px; width: auto; height: auto; } .sponsor-logo .logo-wide { max-width: 80%; } /* Sponsor logos run in full colour too — see .spotlight-highlight. */ .sponsor-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--color-divider); padding-top: 14px; } .sponsor-name { font-family: var(--font-heading); font-weight: 600; font-size: 22px; letter-spacing: .02em; text-transform: uppercase; } .sponsor-role { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ink-72); } /* --- sponsor CTA (blue band) ------------------------------------------- */ .cta { background: var(--color-accent); color: #fff; padding: clamp(48px, calc(37.5px + 2.70vw), 72px) var(--pad-x); } .cta .kicker { color: #fff; } .cta .rule { background: rgba(255,255,255,.45); } .cta a { color: #fff; } .cta-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; align-items: end; } .cta-title { font-size: var(--fs-h2-cta); line-height: 1; color: #fff; } .cta-lede { margin: 0 0 4px; font-size: clamp(16px, calc(15.56px + 0.11vw), 17px); line-height: 1.53; max-width: 46ch; } .cta-tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 48px; } .tier { border: 1px solid rgba(255,255,255,.45); display: flex; flex-direction: column; } .tier-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; padding: 14px 24px; border-bottom: 1px solid rgba(255,255,255,.45); } .tier-no { font-size: 13px; line-height: 16px; letter-spacing: .08em; font-weight: 600; } .tier-name { font-family: var(--font-heading); font-weight: 600; font-size: clamp(22px, calc(20.25px + 0.4494vw), 26px); line-height: 28px; letter-spacing: .02em; text-transform: uppercase; } .tier-badge { margin-left: auto; font-size: 11px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; padding: 4px 10px; border: 1px solid rgba(255,255,255,.45); white-space: nowrap; } .tier-list { list-style: none; margin: 0; padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .tier-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 22px; } .tier-list svg { flex: none; margin-top: 3px; } .cta-stats { margin-top: 40px; } .cta-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.45); border-left: 1px solid rgba(255,255,255,.45); } .cta-stat { padding: 20px 24px; border-right: 1px solid rgba(255,255,255,.45); border-bottom: 1px solid rgba(255,255,255,.45); } .cta-stat-num { display: block; font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-stat); line-height: 1; letter-spacing: -.01em; } .cta-stat-label { display: block; margin-top: 8px; font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; } .cta-stat-note { display: block; font-size: 14px; line-height: 20px; margin-top: 4px; } .cta-math { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 40px; } .math-panel { border: 1px solid rgba(255,255,255,.45); display: flex; flex-direction: column; } .math-head { display: flex; align-items: center; gap: 12px; padding: 14px 24px; border-bottom: 1px solid rgba(255,255,255,.45); } .math-list { margin: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; } .math-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 24px; border-bottom: 1px solid rgba(255,255,255,.45); } .math-row dt { font-size: 15px; line-height: 22px; } .math-row dd { margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: 22px; line-height: 22px; letter-spacing: .02em; white-space: nowrap; } .math-total { background: rgba(0,0,0,.12); border-bottom: 0; } .math-total dt { font-weight: 600; } .price-panel { border: 1px solid rgba(255,255,255,.45); display: flex; flex-direction: column; padding: 24px; gap: 18px; } .price-head { display: flex; align-items: baseline; gap: 8px 14px; flex-wrap: wrap; } .price-num { font-family: var(--font-heading); font-weight: 600; font-size: clamp(30px, calc(28.25px + 0.4494vw), 34px); line-height: 1; letter-spacing: .02em; } .price-terms { font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; } .price-note { margin: 0; font-size: 15px; line-height: 23px; flex: 1; } .price-actions { display: flex; gap: 12px; flex-wrap: wrap; } .btn-on-blue { background: var(--color-bg); color: var(--color-text); border-color: var(--color-bg); } .btn-on-blue:hover { background: var(--color-surface); color: var(--color-text); } .btn-ghost-on-blue { color: #fff; } /* The global focus ring is --color-accent, which IS the .cta background — it would be invisible here. White gives 5.35:1 on #3F5FE0. */ .cta :focus-visible { outline-color: #fff; } .btn-ghost-on-blue:hover { background: rgba(0,0,0,.12); color: #fff; } /* --- sponsor form (on the blue band) ----------------------------------- */ .sponsor-form-wrap { margin-top: 40px; border: 1px solid rgba(255,255,255,.45); scroll-margin-top: 24px; } .sponsor-form-head { display: flex; align-items: center; gap: 12px; padding: 14px 24px; border-bottom: 1px solid rgba(255,255,255,.45); } .sponsor-form { padding: 24px; } .sponsor-form-intro { margin: 0 0 20px; font-size: 15px; line-height: 23px; max-width: 52ch; } .sf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; } .sf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .sf-field-wide { grid-column: 1 / -1; } .sf-field label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: #fff; } .sf-opt { text-transform: none; letter-spacing: .02em; font-weight: 400; opacity: .75; } /* White-on-blue fields: the border must clear 3:1 against the blue band, so it is solid white at 55% rather than the page's --color-border-control. */ .sf-input { width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; font-size: 15px; font-family: var(--font-body); color: var(--color-text); background: var(--color-surface); border: 1px solid rgba(255,255,255,.55); border-radius: var(--radius-md); } .sf-input::placeholder { color: color-mix(in srgb, var(--color-text) 50%, transparent); } .sf-input:hover { border-color: #fff; } .sf-input:focus-visible { border-color: #fff; outline: 2px solid #fff; outline-offset: 2px; } .sf-textarea { min-height: 88px; resize: vertical; line-height: 22px; } .sf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .sf-actions { display: flex; align-items: center; gap: 16px 20px; flex-wrap: wrap; margin-top: 22px; } .sf-note { margin: 0; font-size: 14px; line-height: 20px; } .sf-note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .sf-status { margin: 0; font-size: 15px; line-height: 22px; } .sf-status:empty { display: none; } .sf-status[data-state="ok"] { margin-top: 18px; font-weight: 600; } .sf-status[data-state="error"] { margin-top: 18px; color: #FFE08A; font-weight: 600; } .sponsor-form[data-sent="1"] .sf-grid, .sponsor-form[data-sent="1"] .sf-actions, .sponsor-form[data-sent="1"] .sponsor-form-intro { display: none; } /* --- what to expect ---------------------------------------------------- */ .expect { padding: clamp(56px, calc(41.98px + 3.60vw), 88px) var(--pad-x) clamp(40px, calc(26px + 3.60vw), 72px); } .expect-body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px 80px; align-items: start; } .expect-title { font-size: var(--fs-h2); line-height: 1.05; } .faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; } .faq-item { border-top: 1px solid var(--color-divider); padding: 20px 0 28px; } .faq-item h3 { font-size: var(--fs-sub-h3); line-height: 1.1; } .faq-item p { margin: 12px 0 0; font-size: 15px; line-height: 24px; color: var(--ink-78); } /* --- newsletter -------------------------------------------------------- */ .newsletter { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 64px; padding: 40px; align-items: center; } .newsletter-title { font-size: var(--fs-h2-news); line-height: 1.05; } .newsletter-note { margin: 16px 0 0; color: var(--ink-78); max-width: 46ch; } .newsletter-form { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; } /* .input is unused while subscribing is a link out to Luma. Kept because a real subscribe form is the obvious next step, and these are its correct values — note the 3:1 control border, not the decorative --color-divider. */ .newsletter-form .input { flex: 1; min-width: 12rem; } .newsletter-form .btn { padding: 10px 18px; font-size: 14px; white-space: nowrap; } .newsletter-fineprint { flex-basis: 100%; margin: 4px 0 0; font-size: 12px; line-height: 18px; color: var(--ink-72); } /* --- footer ------------------------------------------------------------ */ .footer { padding: clamp(20px, calc(18.25px + 0.45vw), 24px) var(--pad-x) clamp(28px, calc(26.25px + 0.45vw), 32px); border-top: 1px solid var(--color-divider); display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: clamp(12px, calc(11.56px + 0.11vw), 13px); line-height: clamp(20px, calc(18.25px + 0.45vw), 24px); letter-spacing: .04em; color: var(--ink-72); } .footer-brand { display: inline-flex; gap: clamp(8px, calc(7.12px + 0.2247vw), 10px); align-items: center; text-transform: uppercase; font-weight: 600; letter-spacing: .08em; } .footer-links { display: flex; gap: 28px; flex-wrap: wrap; } .footer-links a { color: inherit; } .footer-links a:hover { color: var(--color-text); } /* =========================================================================== Responsive — below 860px the page collapses to the mobile artboard's single-column stack. The type scale is already fluid, so these rules only handle what changes structurally. ======================================================================== */ @media (max-width: 860px) { .hero, .events-grid, .sponsor-title-card, .cta-head, .cta-tiers, .cta-math, .expect-body, .newsletter { grid-template-columns: minmax(0, 1fr); } .hero { gap: 36px; } .hero-sparkle-1 { right: 20px; top: 20px; } .hero-sparkle-2 { display: none; } .hero-badge { width: 82%; margin: 6px 0 -18px; padding: 16px 18px 14px; } .hero-badge-sub { font-size: 12px; line-height: 18px; margin-top: 6px; } .hero-arrow { width: 104px; height: 104px; right: -8px; top: -2px; } .sponsors-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } .events-grid { gap: 24px; } .event-side { gap: 24px; } .event-main { padding: 24px; } .event-specs { grid-template-columns: minmax(0, 1fr); } .cta-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cta-tiers, .cta-math { gap: 24px; } .sf-grid { grid-template-columns: minmax(0, 1fr); } .sponsor-form { padding: 20px; } .faq { grid-template-columns: minmax(0, 1fr); gap: 0; } .newsletter { padding: 24px; } /* The spec sheet is the one table that cannot usefully reflow — let it scroll sideways rather than crushing five columns into 350px. */ .sheet-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .sheet table { min-width: 620px; } } @media (max-width: 560px) { .cta-stats-grid { grid-template-columns: minmax(0, 1fr); } .nav { gap: 10px 14px; } .nav-brand { margin-right: 0; flex-basis: 100%; } .footer { flex-direction: column; gap: 8px; } .footer-links { gap: 16px; } } /* --- motion ------------------------------------------------------------ The arrow's three animations, exactly as the canvas ran them: the arrow wiggles, the dashed rings spin, the centre dot pulses. All three pivot on the arrow's tail at 100,14 in the 120×120 viewBox. */ @keyframes doj-wiggle { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } } @keyframes doj-spin { to { transform: rotate(360deg); } } @keyframes doj-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } } .hero-arrow svg { display: block; overflow: visible; } .arrow-wiggle { animation: doj-wiggle 1.8s ease-in-out infinite; transform-origin: 100px 14px; } .arrow-spin { animation: doj-spin 4s linear infinite; transform-origin: 100px 14px; } .arrow-pulse { animation: doj-pulse 1.8s ease-in-out infinite; transform-origin: 100px 14px; } @media (prefers-reduced-motion: reduce) { .arrow-wiggle, .arrow-spin, .arrow-pulse { animation: none; } }