/* Look A - Joyful (preview, 25 Sep 2026). A layer over css/site-v3.css that gives the real site the look of Chris's Joyful mockup ("Four Site Looks", look A): warm white paper, ink outlines with a raised edge, jelly sun-yellow buttons with black text, coral words underlined by a hand-drawn yellow stroke, and one colour per card - coral, sky, mint, violet. Active only when ; every rule starts with that. */ @import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Manrope:wght@500;600;700;800&family=Caveat:wght@700&display=swap"); html[data-look="a"] { --paper: #fffaf1; --paper-2: #fff3dc; --ink: #1f1a14; --soft: #5d544a; --hairline: #eadfcd; --sun: #ffb43d; --sun-hi: #ffd27a; --sun-lip: #d98a14; --coral: #ff6b57; --coral-50: #ffe9e4; --sky: #2fa8e8; --sky-50: #e4f4fd; --mint: #1fb884; --mint-50: #e1f7ee; --violet: #7b61ff; --violet-50: #eeeaff; /* the site's own tokens, mapped onto that palette */ --bg: var(--paper); --bg-2: var(--paper-2); --surface: #ffffff; --surface-2: var(--paper); --line: var(--hairline); --line-2: var(--ink); --text: var(--ink); --muted: var(--soft); --dim: #74695c; --amber: var(--sun); --amber-ink: #b8430f; --on-amber: #1a1206; --glow: rgba(255, 180, 61, .3); --phone: var(--ink); --ok: #13875d; --bad: #c2352a; --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; --body: "Manrope", "Segoe UI", system-ui, sans-serif; --mono: "Manrope", "Segoe UI", system-ui, sans-serif; --r: 26px; --r-sm: 18px; --hair: 0 0 0 0 transparent; --shadow-1: none; --shadow-2: 0 6px 0 var(--ink); color-scheme: light; } html[data-look="a"] body { background: var(--paper); color: var(--ink); font-weight: 500; font-size: 17px; } html[data-look="a"] ::selection { background: var(--sun); color: var(--ink); } html[data-look="a"] .theme { display: none; } /* ---------- type ---------- */ html[data-look="a"] :is(h1, h2, h3) { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; line-height: 1.02; } html[data-look="a"] .hero h1 { font-size: clamp(44px, 5.6vw, 80px); } html[data-look="a"] .sec-head h2 { font-size: clamp(36px, 4.8vw, 60px); } html[data-look="a"] .final h2 { font-size: clamp(38px, 5.4vw, 70px); } /* the highlighted words: coral, with a yellow brush stroke under them */ html[data-look="a"] :is(h1, h2) em { color: var(--coral); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 30' preserveAspectRatio='none'%3E%3Cpath d='M4 20 C 60 6, 120 28, 180 14 S 270 8, 296 18' fill='none' stroke='%23ffb43d' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left bottom / 100% .32em; padding-bottom: .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* labels: soft capitals after a coral dot */ html[data-look="a"] .eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 800 13px/1.3 var(--body); letter-spacing: .12em; color: var(--soft); } html[data-look="a"] .eyebrow::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--coral); } html[data-look="a"] :is(.countdown .when, .gifts-tag, .drawer-nav h3, .strum-head small, .strum-bpm span, .metro-bpm span) { font-family: var(--body); font-weight: 800; letter-spacing: .1em; color: var(--soft); } html[data-look="a"] .lead { color: var(--soft); } html[data-look="a"] .fine { color: var(--soft); font-weight: 600; } html[data-look="a"] :is(.pline .amt, .shop-price .amt, .fact b, .clock b, .offer b, .parts b, .days .n, .quote, .metro-bpm b, .tuner-note b, .which-chord, .try-chord) { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; } /* ---------- the challenge bar and the menu ---------- */ html[data-look="a"] .defi-bar { background: var(--ink); color: #fff; font-weight: 700; } html[data-look="a"] .defi-bar :is(b, a) { color: var(--sun); } html[data-look="a"] .nav { background: rgba(255, 250, 241, .9); border-bottom: 1px solid var(--hairline); } html[data-look="a"] .brand img, html[data-look="a"] .f-brand img { box-shadow: 0 0 0 2px var(--ink); } html[data-look="a"] .brand b, html[data-look="a"] .f-brand b { font-family: var(--display); font-weight: 800; letter-spacing: -.01em; } html[data-look="a"] .brand small { font: 800 10px/1 var(--body); letter-spacing: .32em; color: var(--coral); } html[data-look="a"] .links { color: var(--soft); font-weight: 700; } html[data-look="a"] .links a:hover, html[data-look="a"] .links a.on { color: var(--ink); } html[data-look="a"] :is(.langs, .menu-btn) { border: 2px solid var(--ink); background: #fff; } html[data-look="a"] .langs a.on { background: var(--ink); color: #fff; } /* ---------- jelly buttons: yellow with a lip that presses down ---------- */ html[data-look="a"] .btn { border-radius: 18px; font-weight: 800; border: 0; } html[data-look="a"] .btn-a { background: linear-gradient(180deg, var(--sun-hi), var(--sun)); color: #1a1206; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 5px 0 var(--sun-lip), 0 14px 26px -12px rgba(217, 138, 20, .7); } html[data-look="a"] .btn-a:hover { background: linear-gradient(180deg, var(--sun-hi), var(--sun)); transform: translateY(-1px); } html[data-look="a"] .btn-a:active { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 1px 0 var(--sun-lip); } html[data-look="a"] .btn-g { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink), 0 5px 0 var(--ink); } html[data-look="a"] .btn-g:hover { background: #fff; transform: translateY(-1px); } html[data-look="a"] .btn-g:active { transform: translateY(4px); box-shadow: inset 0 0 0 2px var(--ink), 0 1px 0 var(--ink); } html[data-look="a"] .btn:focus-visible { outline: 3px solid var(--sky); outline-offset: 4px; } /* ---------- hero: coloured countdown, tilted phones, stickers ---------- */ html[data-look="a"] .hero::before { inset: -10% -5% auto 45%; height: 680px; opacity: 1; background: radial-gradient(closest-side, #ffe7bd, transparent); } html[data-look="a"] .clock .u { background: #fff; border: 0; border-radius: 18px; box-shadow: 0 4px 0 var(--hairline), inset 0 0 0 2px var(--hairline); } html[data-look="a"] .clock b { font-size: 36px; } html[data-look="a"] .clock .u:nth-child(1) b { color: var(--coral); } html[data-look="a"] .clock .u:nth-child(2) b { color: var(--sky); } html[data-look="a"] .clock .u:nth-child(3) b { color: var(--mint); } html[data-look="a"] .clock .u:nth-child(4) b { color: var(--violet); } html[data-look="a"] .clock span { font: 700 12px var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--soft); } html[data-look="a"] .phone { background: var(--ink); } /* The hero picture, exactly as in the mockup: Chris's photo big and tilted with an ink edge, the TrueTake screen in front, three stickers. The stage is added to .hero by the preview (preview.js); the phones wait behind it. */ .joy-stage { display: none; } html[data-look="a"] .hero .phones { display: none; } html[data-look="a"] .joy-stage { display: block; position: relative; min-height: 540px; } html[data-look="a"] .joy-photo { position: absolute; right: 4%; top: 0; width: 66%; aspect-ratio: 3 / 4; border-radius: 32px; overflow: hidden; transform: rotate(3deg); border: 3px solid var(--ink); background: var(--sky-50); box-shadow: 0 10px 0 var(--ink), 0 30px 60px -30px rgba(0, 0, 0, .5); } html[data-look="a"] .joy-photo img { width: 100%; height: 100%; object-fit: cover; } html[data-look="a"] .joy-phone { position: absolute; left: 0; bottom: 0; width: 44%; border-radius: 30px; padding: 8px; background: var(--ink); transform: rotate(-5deg); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .6); } html[data-look="a"] .joy-phone img { border-radius: 23px; width: 100%; } html[data-look="a"] .joy-sticker { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 16px; font: 800 14px/1.2 var(--body); color: var(--ink); background: #fff; white-space: nowrap; box-shadow: 0 4px 0 var(--ink), inset 0 0 0 2px var(--ink); } html[data-look="a"] .joy-sticker .dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 13px; } html[data-look="a"] .joy-s1 { right: 0; top: 58%; transform: rotate(-4deg); } html[data-look="a"] .joy-s1 .dot { background: var(--mint); } html[data-look="a"] .joy-s2 { left: 18%; top: 6%; transform: rotate(-8deg); background: var(--sun); } html[data-look="a"] .joy-s3 { right: 52%; top: 40%; transform: rotate(6deg); } html[data-look="a"] .joy-s3 .dot { background: var(--coral); } @media (max-width: 860px) { html[data-look="a"] .joy-stage { min-height: 460px; margin-top: 10px; } html[data-look="a"] .joy-photo { width: 62%; } html[data-look="a"] .joy-phone { width: 42%; } } @media (max-width: 480px) { html[data-look="a"] .joy-stage { min-height: 380px; } html[data-look="a"] .joy-sticker { font-size: 12px; padding: 8px 10px; } } html[data-look="a"] .pillar .shot .phone { transform: rotate(2deg); box-shadow: 0 8px 0 var(--ink); } /* ---------- the four facts: separate coloured stickers ---------- */ html[data-look="a"] .facts { background: transparent; border: 0; padding-block: 8px 12px; } html[data-look="a"] .facts .wrap { gap: 14px; } html[data-look="a"] .fact { border: 2px solid var(--ink) !important; border-radius: var(--r); box-shadow: 0 5px 0 var(--ink); padding: 22px 20px; } html[data-look="a"] .fact b { color: var(--ink); font-size: clamp(30px, 3.6vw, 44px); margin-bottom: 6px; } html[data-look="a"] .fact span { color: var(--ink); font-weight: 700; font-size: 15px; } html[data-look="a"] .fact:nth-child(4n+1) { background: var(--sun); } html[data-look="a"] .fact:nth-child(4n+2) { background: var(--sky-50); } html[data-look="a"] .fact:nth-child(4n+3) { background: var(--mint-50); } html[data-look="a"] .fact:nth-child(4n+4) { background: var(--coral-50); } html[data-look="a"] .gifts { background: transparent; border-bottom: 0; } html[data-look="a"] .gifts li::before { border-color: var(--mint); } /* ---------- cards: white, ink outline, raised edge ---------- */ html[data-look="a"] :is(.card, .steps li, .road li, .days li, .term, .reserve, .try-box, .offer, .parts li, .pschool, .tuner, .scalebox, .which, .strum, .metro, .themes a, .chordgrid li, .photo) { background: #fff; border: 2px solid var(--ink); box-shadow: 0 6px 0 var(--ink); } html[data-look="a"] .card { border-radius: var(--r); } html[data-look="a"] :is(a.card, .themes a):hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 9px 0 var(--ink); } html[data-look="a"] .pillar .shot { background: var(--sky-50); border: 2px solid var(--ink); box-shadow: 0 6px 0 var(--ink); } /* card labels: plain coloured capitals, one colour per card */ html[data-look="a"] :is(.card .tag, .tag) { background: none; border: 0; padding: 0; font: 800 12px/1.2 var(--body); letter-spacing: .12em; color: var(--coral); } html[data-look="a"] :is(.paths, .promise, .goals, .themes, .shop-grid, .gift-grid, .pgrid) > :nth-child(4n+2) :is(.tag, .more) { color: #1273ad; } html[data-look="a"] :is(.paths, .promise, .goals, .themes, .shop-grid, .gift-grid, .pgrid) > :nth-child(4n+3) :is(.tag, .more) { color: #0f7a53; } html[data-look="a"] :is(.paths, .promise, .goals, .themes, .shop-grid, .gift-grid, .pgrid) > :nth-child(4n+4) :is(.tag, .more) { color: #5b43d6; } html[data-look="a"] .card .more { color: #c2352a; font-weight: 800; } html[data-look="a"] .card.hi { background: var(--sun); } html[data-look="a"] .card.hi :is(.tag, .more) { color: #5a3a00; } html[data-look="a"] .card.hi p { color: #3b2c12; } html[data-look="a"] .chips li { background: #fff; border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); } /* ---------- sections tinted like the mockup ---------- */ html[data-look="a"] .band { background: var(--paper-2); border-block: 0; } html[data-look="a"] #how, html[data-look="a"] section:has(> .wrap > .steps) { background: var(--sky-50); } html[data-look="a"] #paths, html[data-look="a"] section:has(> .wrap > .paths) { background: var(--paper-2); } /* the four weeks: a coloured pill for each step */ html[data-look="a"] .steps .when, html[data-look="a"] .road .when, html[data-look="a"] .term .when { display: inline-block; font: 800 13px/1 var(--body); letter-spacing: .02em; text-transform: none; padding: 7px 12px; border-radius: 999px; color: #fff; background: var(--coral); margin-bottom: 14px; } html[data-look="a"] :is(.steps, .road) > li:nth-child(4n+2) .when { background: var(--sky); } html[data-look="a"] :is(.steps, .road) > li:nth-child(4n+3) .when { background: var(--mint); } html[data-look="a"] :is(.steps, .road) > li:nth-child(4n+4) .when { background: var(--violet); } html[data-look="a"] .terms > li:nth-child(4n+2) .when { background: var(--sky); } html[data-look="a"] .terms > li:nth-child(4n+3) .when { background: var(--mint); } html[data-look="a"] .terms > li:nth-child(4n+4) .when { background: var(--violet); } html[data-look="a"] .term.has-exam { background: #fff3dc; } html[data-look="a"] .days .n { background: var(--coral); color: #fff; } html[data-look="a"] .days li:nth-child(4n+2) .n { background: var(--sky); } html[data-look="a"] .days li:nth-child(4n+3) .n { background: var(--mint); } html[data-look="a"] .days li:nth-child(4n+4) .n { background: var(--violet); } html[data-look="a"] .keys-ladder .bar { background: #fff; box-shadow: inset 0 0 0 1.5px var(--hairline); } html[data-look="a"] .keys-ladder .bar i { background: linear-gradient(90deg, var(--coral), var(--sun)); } /* ---------- TikTok: polaroids ---------- */ html[data-look="a"] .vbox { background: #fff; padding: 10px 10px 14px; border-radius: 18px; border: 2px solid var(--ink); box-shadow: 0 6px 0 var(--ink); } html[data-look="a"] .vbox .vid { border-radius: 10px; border: 0; } html[data-look="a"] .vbox figcaption, html[data-look="a"] .vbox figcaption a { color: var(--ink); font-weight: 800; } html[data-look="a"] .vids > :nth-child(3n+1) { transform: rotate(-3deg); } html[data-look="a"] .vids > :nth-child(3n+2) { transform: rotate(2deg) translateY(10px); } html[data-look="a"] .vids > :nth-child(3n+3) { transform: rotate(-1.5deg); } html[data-look="a"] .vid .play { background: var(--sun); box-shadow: 0 4px 0 var(--sun-lip); } /* ---------- prices ---------- */ html[data-look="a"] .seg { background: #fff; border: 2px solid var(--ink); padding: 5px; } html[data-look="a"] .seg button { font: 800 15px var(--body); color: var(--soft); } html[data-look="a"] .seg button[aria-pressed="true"] { background: var(--ink); color: #fff; } html[data-look="a"] .card.price { overflow: visible; } html[data-look="a"] .card.price.hi { background: var(--sun); } html[data-look="a"] .card.price.hi :is(.pnote, .psub, .pfine, .per) { color: #5a3a00; } html[data-look="a"] .card.price .tag.tag-a, html[data-look="a"] .tag.tag-a { background: var(--coral); color: #fff; padding: 7px 12px; border-radius: 999px; letter-spacing: .04em; box-shadow: 0 3px 0 var(--ink); transform: rotate(3deg); } html[data-look="a"] .pline { flex-wrap: wrap; column-gap: 8px; } html[data-look="a"] .pline .amt { color: var(--ink); white-space: nowrap; font-size: clamp(40px, 4vw, 54px); } html[data-look="a"] .shop-price .amt { font-size: clamp(30px, 3vw, 40px); } html[data-look="a"] .psave { background: var(--mint-50); color: #0f5e41; } html[data-look="a"] .pfeat { border-top: 2px dashed var(--hairline); color: var(--ink); font-weight: 600; } html[data-look="a"] .pfeat li { padding-left: 30px; } html[data-look="a"] .pfeat li::before { content: "✓"; left: 0; top: .12em; width: 20px; height: 20px; border: 0; transform: none; border-radius: 50%; display: grid; place-items: center; background: var(--mint); color: #fff; font: 800 12px/1 var(--body); } html[data-look="a"] .pfoot b { color: var(--ink); } /* the founders' offer: a dashed violet ticket */ html[data-look="a"] .offer { background: var(--violet-50); border: 2px dashed var(--violet); box-shadow: none; font-weight: 700; color: var(--ink); } html[data-look="a"] .offer b { color: var(--violet); } html[data-look="a"] .pschool { background: var(--violet-50); border: 2px dashed var(--violet); box-shadow: none; } /* ---------- forms, questions, closing band, footer ---------- */ html[data-look="a"] .rform :is(input, select) { background: #fff; border: 2px solid var(--ink); border-radius: 14px; } html[data-look="a"] .spots i { background: var(--mint); } html[data-look="a"] .q { border-bottom: 2px solid var(--hairline); } html[data-look="a"] .q:first-child { border-top: 2px solid var(--hairline); } html[data-look="a"] .q summary::after { color: var(--coral); font-weight: 800; } html[data-look="a"] .final { background: var(--sun); border-block: 2px solid var(--ink); } html[data-look="a"] .final :is(h2, .lead) { color: var(--ink); } html[data-look="a"] .final .eyebrow { color: #5a3a00; } html[data-look="a"] .final h2 em { color: var(--ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 30' preserveAspectRatio='none'%3E%3Cpath d='M4 20 C 60 6, 120 28, 180 14 S 270 8, 296 18' fill='none' stroke='%23ff6b57' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E"); } html[data-look="a"] .final h2::after { content: "— Chris"; display: block; margin-top: 14px; font: 700 34px/1 "Caveat", cursive; color: #5a3a00; letter-spacing: 0; } html[data-look="a"] .final .btn-a { background: #fff; box-shadow: inset 0 0 0 2px var(--ink), 0 5px 0 var(--ink); } html[data-look="a"] footer { border-top: 0; color: var(--soft); } html[data-look="a"] .f-brand .motto { color: var(--coral); } html[data-look="a"] .drawer-sheet { background: var(--paper); border-left: 2px solid var(--ink); } /* ---------- phone width ---------- */ @media (max-width: 860px) { html[data-look="a"] .fact { border-top: 2px solid var(--ink) !important; } html[data-look="a"] .vids > * { transform: none !important; } } @media (prefers-reduced-motion: reduce) { html[data-look="a"] .btn { transition: none; } } /* The menu bar fits the screen. (On the live site today the ☰ button sits past the right edge - 40 px on a computer, 44 px on a phone - so every page scrolls sideways a little. This keeps everything inside.) */ html[data-look="a"] .nav .wrap { gap: 14px; } html[data-look="a"] .links { gap: 16px; } html[data-look="a"] .menu-btn { flex: none; } html[data-look="a"] .brand { min-width: 0; } @media (max-width: 1400px) { html[data-look="a"] .links { gap: 14px; font-size: 14px; } } @media (max-width: 480px) { html[data-look="a"] .nav .wrap { gap: 8px; } html[data-look="a"] .brand { gap: 8px; } html[data-look="a"] .brand b { font-size: 15px; } html[data-look="a"] .brand img { width: 34px; height: 34px; } html[data-look="a"] .langs a { padding: 6px 7px; } html[data-look="a"] .menu-btn { width: 40px; height: 40px; padding: 0 10px; } } /* the fact cards shrink with the screen instead of pushing past it */ @media (max-width: 860px) { html[data-look="a"] .facts .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-look="a"] .fact { min-width: 0; padding: 18px 14px; } } @media (max-width: 420px) { html[data-look="a"] .fact b { font-size: 26px; overflow-wrap: anywhere; } html[data-look="a"] .fact span { font-size: 13.5px; } } /* the smallest phones: the round logo alone carries the name */ @media (max-width: 380px) { html[data-look="a"] .brand > span, html[data-look="a"] .brand > div { display: none; } }