/* =========================================================================== 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; } /* =========================================================================== Fizz The page is the inside of a glass. app.js paints rising bubbles onto this canvas, spawned from wherever the pointer or finger rests. It is fixed and sits BEHIND .page-content, so bubbles drift past behind the opaque cream cards and never cross body copy. ======================================================================== */ .fizz { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; } /* Load-bearing: the canvas is a positioned element, so without an explicit stacking context on the content it would paint OVER the text. This keeps every bubble behind the copy and behind the opaque cream cards. */ .page { position: relative; } .page-content { position: relative; z-index: 1; } /* The skip link moves focus to #doj-main programmatically; no ring for that. */ #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-links { display: contents; /* desktop: links sit directly in the nav flex row */ } .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; } .nav-toggle { display: none; } .nav-icon-close { display: none; } /* --- 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-lede { font-size: var(--fs-lede); line-height: 1.5; max-width: 50ch; margin: 28px 0 0; } /* The lede as hairline-separated points. The headline stops growing at its 84px cap while the square portrait keeps growing with the viewport, so the left column needs the extra height to stay level with the figure. */ .hero-points { list-style: none; margin: 26px 0 0; padding: 0; border-bottom: 1px solid var(--color-divider); max-width: 54ch; } .hero-points li { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; border-top: 1px solid var(--color-divider); font-size: var(--fs-lede); line-height: 1.5; } /* Past ~1600px the headline drops from three lines to two, so the copy column loses a line's height exactly where the portrait is at its widest. The points take up the slack. */ @media (min-width: 1600px) { .hero-points { margin-top: 32px; } .hero-points li { padding: 20px 0; } } .hero-points svg { flex: none; margin-top: 3px; color: var(--color-accent); } .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; /* The portrait is a square in a 5fr column, so past the 1280px artboard it grows faster than the copy beside it and opens a hole in the lower left. Capping it holds the two columns level. 520px is above the width the figure reaches at 1280px, so the artboard itself is untouched. */ max-width: 520px; justify-self: end; width: 100%; } .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. */ .hero-figcaption { /* flex-end, not space-between — only the location remains, and it stays tucked under the right edge of the portrait where it has always sat. */ display: flex; justify-content: flex-end; 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-date-compact { display: none; } /* mobile artboard only */ .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; } /* Past sponsors stay listed for their 12 months, so they get their own labelled group under the current ones. The grid keeps three tracks even with two cards in it — the empty slot reads as room for the next one. */ .sponsors-past { margin-top: clamp(40px, calc(26px + 3.6vw), 72px); } .sponsors-grid-past { margin-top: 28px; } .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. */ .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-credit { display: contents; } /* becomes its own row on phones */ .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) { /* --------------------------------------------------------------------- Below 860px the page follows the canvas's MOBILE artboard (1b), which is not just the desktop layout shrunk — the designer restructured whole components here. Values below are taken from that artboard. --------------------------------------------------------------------- */ .hero, .cta-head, .cta-tiers, .cta-math, .expect-body { grid-template-columns: minmax(0, 1fr); } /* --- hero --- */ .hero { gap: 28px; } .hero-copy { margin-top: 0; } /* the -6px optical nudge only makes sense beside the figure */ .hero-sparkle-1 { right: 22px; top: 16px; } .hero-sparkle-1 svg { width: 20px; height: 20px; } .hero-sparkle-2 { display: none; } .hero-points { margin-top: 22px; } .hero-actions { flex-direction: column; flex-wrap: nowrap; gap: 10px; margin-top: 24px; } .hero-actions .btn { min-height: 48px; font-size: 15px; } .hero-facts { gap: 8px 12px; margin-top: 20px; padding-top: 16px; } .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; } .hero-portrait { aspect-ratio: 4 / 5; } /* taller crop on phones, per 1b */ /* --- events: one flat column, no side stack --- */ .events-grid { display: flex; flex-direction: column; gap: 28px; margin-top: 28px; } .event-side { display: contents; } .event-main, .event-mini { padding: 20px; --card-gap: 14px; } .event-mini { flex: none; } .event-date-stack { display: none; } .event-date-compact { display: inline; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ink-72); } .event-date { gap: 10px; } /* 1b keeps only the time and the venue here */ .event-specs { display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 20px; } .event-specs span { gap: 8px; } .event-specs span:nth-child(n+3) { display: none; } .event-note { display: none; } /* 1b drops the lede from the card */ .event-cta { display: block; margin-top: 0; } .event-cta .btn { display: flex; width: 100%; min-height: 46px; font-size: 14px; } .event-cta .meta { display: none; } .event-mini .btn { align-self: stretch; margin-top: 0; min-height: 46px; } .event-mini-when { font-size: 12px; } /* --- section heads --- */ .section-head { gap: 12px; } /* --- sponsors --- */ .sponsors-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 28px; } .sponsor-title-card { display: flex; flex-direction: column; gap: 16px; padding: 20px; align-items: stretch; } .sponsor-title-logo { height: 110px; } .sponsor-title-note { max-width: none; } .sponsor-title-card .btn { align-self: flex-start; min-height: 44px; font-size: 13px; margin-top: 0; } /* logo cards go horizontal: an 88px logo well beside the name */ .sponsor-card { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 20px; } .sponsor-logo { height: 64px; } .sponsor-logo img { max-width: 100%; max-height: 100%; } .sponsor-foot { border-top: 0; padding-top: 0; flex-direction: column; align-items: flex-start; gap: 2px; } /* --- sponsor CTA band --- */ .cta-tiers, .cta-math { gap: 20px; margin-top: 28px; } .cta-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cta-stat { padding: 14px; } .tier-head { padding: 12px 16px; gap: 8px 12px; } .tier-list { padding: 16px 16px 18px; gap: 10px; } .tier-list li { font-size: 14px; line-height: 20px; } .price-panel { padding: 16px; gap: 14px; } .price-note { font-size: 14px; line-height: 21px; } .price-actions { flex-direction: column; gap: 10px; } .price-actions .btn { min-height: 48px; } .sf-grid { grid-template-columns: minmax(0, 1fr); } .sponsor-form { padding: 20px; } .sponsor-form .btn { min-height: 44px; } /* --- what to expect --- */ .expect-body { gap: 8px; } .faq { grid-template-columns: minmax(0, 1fr); gap: 0; } .faq-item p { margin: 8px 0 0; font-size: 14px; line-height: 21px; } /* --- newsletter: a plain stacked card, not a grid --- */ .newsletter { display: flex; flex-direction: column; gap: 14px; padding: 24px 20px; align-items: stretch; } .newsletter-note { max-width: none; } .newsletter-form { flex-direction: column; align-items: stretch; } .newsletter-form .btn { min-height: 46px; } /* --- footer --- */ .footer { padding: 20px var(--pad-x) 28px; } .footer-brand { gap: 8px; } /* --- nav: brand, compact RSVP, 44x44 menu button --- */ .nav { flex-wrap: wrap; gap: 10px; padding: 12px var(--pad-x); } .nav-brand { margin-right: auto; gap: 8px; } .nav-brand svg { width: 16px; height: 16px; } .nav .nav-rsvp { padding: 0 14px; font-size: 13px; min-height: 44px; } .nav-rsvp-date { display: none; } .nav .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; flex: none; min-height: 44px; } .nav-links { display: none; flex-basis: 100%; flex-direction: column; gap: 0; margin-top: 6px; border-top: 1px solid var(--color-divider); } .nav[data-open="1"] .nav-links { display: flex; } .nav[data-open="1"] .nav-icon-bars { display: none; } .nav[data-open="1"] .nav-icon-close { display: inline; } .nav-links .nav-link { padding: 14px 2px; font-size: 15px; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); } .nav-links .nav-link:last-child { border-bottom: 0; } /* --- spec sheet: stacked cards, not a sideways-scrolling table --- */ .sheet-scroll { overflow: visible; } .sheet table { min-width: 0; width: 100%; } .sheet colgroup, .sheet thead { display: none; } .sheet tbody, .sheet tr, .sheet td { display: block; } .sheet tr { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 12px; align-items: baseline; padding: 14px 16px; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); } .sheet tr:last-child { border-bottom: 0; } .sheet td { padding: 0; border: 0; line-height: inherit; } .sheet td:first-child { padding-left: 0; } .sheet .col-no { font-size: 12px; line-height: 20px; } .sheet .col-prop { font-size: 14px; line-height: 20px; } .sheet .col-value { grid-column: 1 / -1; font-size: 24px; line-height: 24px; white-space: normal; } .sheet .col-remark { grid-column: 1 / -1; font-size: 13px; line-height: 20px; } .sheet-head { flex-wrap: wrap; font-size: 12px; line-height: 20px; } .sheet-head span:first-child { flex: 0 0 100%; min-width: 0; padding: 10px 16px; border-bottom: 1px solid var(--color-divider); } .sheet-head .sheet-ref { flex: 1; padding: 8px 12px; } .sheet-head span:nth-child(2) { border-left: 0; flex: 1; padding: 8px 16px; } .sheet-head span:last-child { flex: 1.3; } .sheet-foot { padding: 10px 16px; font-size: 12px; line-height: 20px; } } @media (max-width: 560px) { .footer { flex-direction: column; gap: 8px; } .footer-links { gap: 16px; } /* 1b gives the Crowdstake credit its own row under the two links */ .footer-credit { display: block; flex-basis: 100%; } /* 1b shortens the events kicker to just "01 · Upcoming" so the head fits one line */ .kicker-tail { display: none; } } /* --- 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; } /* --- the sparkles twinkle ---------------------------------------------- Mostly still, then a quick dip-and-flare — a star catching the light rather than a pulsing dot. The glow is a drop-shadow animated from zero blur so it interpolates; `filter: none` would jump. Delays are staggered per position so the six stars never twinkle in unison, which is what makes it read as ambient instead of mechanical. */ @keyframes doj-twinkle { 0%, 62%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 0 rgba(63,95,224,0)); } 70% { transform: scale(.86) rotate(-12deg); filter: drop-shadow(0 0 0 rgba(63,95,224,0)); } 80% { transform: scale(1.16) rotate(8deg); filter: drop-shadow(0 0 5px rgba(63,95,224,.6)); } 90% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 0 rgba(63,95,224,0)); } } .sparkle { animation: doj-twinkle 4.6s ease-in-out infinite; transform-origin: 50% 50%; will-change: transform; } .nav-brand .sparkle { animation-delay: 0s; } .hero-sparkle-1 .sparkle { animation-delay: 0.9s; animation-duration: 5.2s; } .hero-sparkle-2 .sparkle { animation-delay: 2.3s; animation-duration: 4.1s; } .hero-points .sparkle { animation-delay: 1.5s; } .event-specs .sparkle { animation-delay: 3.1s; animation-duration: 5.6s; } .footer-brand .sparkle { animation-delay: 2.7s; } @media (prefers-reduced-motion: reduce) { .arrow-wiggle, .arrow-spin, .arrow-pulse, .sparkle { animation: none; } }