/* ===================================================================================================================== yourbeats.net: THE SITE'S ONE STYLESHEET (web foundation, 28 Oct 2026; docs/32-website.md). Every page the layout writes (site/src/website/layout.js) links it; the 404 page carries it inside itself (its own CSP allows nothing else). Sections: 1 fonts · 2 tokens · 3 the five lit roles · 4 base · 5 type and the wordmark · 6 the page frame (skip link, header, navigation, breadcrumbs, footer) · 7 keys, plates, chips · 8 the store block · 9 the lanes · 10 motion · 11 languages · 12 the 404 · 13 print. Direction-independent on purpose: the kit's own tokens and components, plain and accessible; a chosen design direction (the owner's pick from the mock-ups) restyles through these same class names and adds its effects on top. No style attribute is ever needed (the proposed site CSP has no 'unsafe-inline' for styles). ===================================================================================================================== */ /* ============================================================== 1. fonts */ /* fonts:begin (tools/website/make-fonts.py writes this block: the app's own font files, cut into woff2 subsets) */ @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url('/_site/fonts/anton-400-latin.d2bda8632b.woff2') format('woff2'); unicode-range: U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2007-200B, U+2011-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+202F-2030, U+2032-2033, U+203A, U+2044, U+2052, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; } @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url('/_site/fonts/anton-400-latin-ext.e23dfe472d.woff2') format('woff2'); unicode-range: U+0100-0181, U+0186-018A, U+018E-0194, U+0196-01A1, U+01A4-01A5, U+01A9, U+01AC-01B9, U+01C0-01F5, U+01F8-021B, U+021E-0220, U+0222-0223, U+0226-0233, U+0237, U+023A-023E, U+0241-024F, U+0251, U+0253-0254, U+0256-0257, U+0259, U+025B, U+0260, U+0263, U+0265-0266, U+0268-026C, U+026F, U+0272, U+0275, U+027D-027E, U+0283, U+0288-028C, U+0292, U+0294-0295, U+0298, U+029D, U+02B0, U+02B7, U+02B9-02BA, U+02BE-02C0, U+02C7-02CC, U+02D7, U+02DD, U+02EE, U+0304, U+0308, U+0329, U+1D7D, U+1DBB, U+1E00-1E95, U+1E97, U+1E9E, U+1EF2-1EF9, U+2020, U+20A1, U+20A3-20A4, U+20A6-20A7, U+20A9, U+20AB, U+20AD, U+20B1-20B2, U+20B5, U+20B9-20BA, U+20BC-20BD, U+2113, U+2C60-2C66, U+2C6D, U+2C72-2C73, U+A726-A727, U+A740-A741, U+A789-A78D, U+A7A8-A7AA, U+A7AD-A7AE, U+A7B2-A7B9; } @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url('/_site/fonts/anton-400-vietnamese.641b0775b3.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url('/_site/fonts/archivo-400-latin.ea9fd035c7.woff2') format('woff2'); unicode-range: U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2009, U+2011, U+2013-2015, U+2017-201A, U+201C-201E, U+2020-2022, U+2026, U+202F-2030, U+2032-2033, U+203A, U+203E, U+2044, U+2052, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url('/_site/fonts/archivo-400-latin-ext.f8859e3caa.woff2') format('woff2'); unicode-range: U+0100-017F, U+018F, U+0192, U+019D, U+01A0-01A1, U+01AF-01B0, U+01C4-01DC, U+01E6-01E7, U+01EA-01EB, U+01FA-021B, U+022A-022D, U+0230-0233, U+0237, U+0259, U+0272, U+02B9-02BA, U+02C7, U+02C9, U+02DD, U+0304, U+0308, U+1E24-1E25, U+1E62-1E63, U+1E6C-1E6D, U+1E80-1E85, U+1E9E, U+1EF2-1EF9, U+2020, U+20A1, U+20A3-20A4, U+20A6-20A7, U+20A9, U+20AB, U+20AD, U+20B1-20B2, U+20B5, U+20B9-20BA, U+20BC-20BD, U+2113; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url('/_site/fonts/archivo-400-vietnamese.dc1f6412c9.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url('/_site/fonts/archivo-500-latin.c1afaaca8c.woff2') format('woff2'); unicode-range: U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2009, U+2011, U+2013-2015, U+2017-201A, U+201C-201E, U+2020-2022, U+2026, U+202F-2030, U+2032-2033, U+203A, U+203E, U+2044, U+2052, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url('/_site/fonts/archivo-500-latin-ext.1fd4da0ace.woff2') format('woff2'); unicode-range: U+0100-017F, U+018F, U+0192, U+019D, U+01A0-01A1, U+01AF-01B0, U+01C4-01DC, U+01E6-01E7, U+01EA-01EB, U+01FA-021B, U+022A-022D, U+0230-0233, U+0237, U+0259, U+0272, U+02B9-02BA, U+02C7, U+02C9, U+02DD, U+0304, U+0308, U+1E24-1E25, U+1E62-1E63, U+1E6C-1E6D, U+1E80-1E85, U+1E9E, U+1EF2-1EF9, U+2020, U+20A1, U+20A3-20A4, U+20A6-20A7, U+20A9, U+20AB, U+20AD, U+20B1-20B2, U+20B5, U+20B9-20BA, U+20BC-20BD, U+2113; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url('/_site/fonts/archivo-500-vietnamese.dfa240c7e8.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url('/_site/fonts/archivo-700-latin.eaad3abba9.woff2') format('woff2'); unicode-range: U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2009, U+2011, U+2013-2015, U+2017-201A, U+201C-201E, U+2020-2022, U+2026, U+202F-2030, U+2032-2033, U+203A, U+203E, U+2044, U+2052, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url('/_site/fonts/archivo-700-latin-ext.cd4dbdb810.woff2') format('woff2'); unicode-range: U+0100-017F, U+018F, U+0192, U+019D, U+01A0-01A1, U+01AF-01B0, U+01C4-01DC, U+01E6-01E7, U+01EA-01EB, U+01FA-021B, U+022A-022D, U+0230-0233, U+0237, U+0259, U+0272, U+02B9-02BA, U+02C7, U+02C9, U+02DD, U+0304, U+0308, U+1E24-1E25, U+1E62-1E63, U+1E6C-1E6D, U+1E80-1E85, U+1E9E, U+1EF2-1EF9, U+2020, U+20A1, U+20A3-20A4, U+20A6-20A7, U+20A9, U+20AB, U+20AD, U+20B1-20B2, U+20B5, U+20B9-20BA, U+20BC-20BD, U+2113; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url('/_site/fonts/archivo-700-vietnamese.6781e10d72.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-stretch: 75%; font-display: swap; src: url('/_site/fonts/archivo-condensed-700-latin.5ed132c625.woff2') format('woff2'); unicode-range: U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2009, U+2011, U+2013-2015, U+2017-201A, U+201C-201E, U+2020-2022, U+2026, U+202F-2030, U+2032-2033, U+203A, U+203E, U+2044, U+2052, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-stretch: 75%; font-display: swap; src: url('/_site/fonts/archivo-condensed-700-latin-ext.5e0e0ee223.woff2') format('woff2'); unicode-range: U+0100-017F, U+018F, U+0192, U+019D, U+01A0-01A1, U+01AF-01B0, U+01C4-01DC, U+01E6-01E7, U+01EA-01EB, U+01FA-021B, U+022A-022D, U+0230-0233, U+0237, U+0259, U+0272, U+02B9-02BA, U+02C7, U+02C9, U+02DD, U+0304, U+0308, U+1E24-1E25, U+1E62-1E63, U+1E6C-1E6D, U+1E80-1E85, U+1E9E, U+1EF2-1EF9, U+2020, U+20A1, U+20A3-20A4, U+20A6-20A7, U+20A9, U+20AB, U+20AD, U+20B1-20B2, U+20B5, U+20B9-20BA, U+20BC-20BD, U+2113; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-stretch: 75%; font-display: swap; src: url('/_site/fonts/archivo-condensed-700-vietnamese.bee0644319.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Exo 2'; font-style: italic; font-weight: 800; font-stretch: 100%; font-display: swap; src: url('/_site/fonts/exo2-800-italic-latin.547bcf4893.woff2') format('woff2'); unicode-range: U+000D, U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2007-200B, U+2011-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+202F-2030, U+2032-2033, U+203A, U+2044, U+20AC, U+2122, U+2212, U+2215; } @font-face { font-family: 'Exo 2'; font-style: italic; font-weight: 800; font-stretch: 100%; font-display: swap; src: url('/_site/fonts/exo2-800-italic-latin-ext.220219bfe2.woff2') format('woff2'); unicode-range: U+0100-0148, U+014A-017E, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01C4-01CC, U+01E6-01E7, U+01EA-01EB, U+01FA-021B, U+022A-022D, U+0230-0233, U+0237, U+0259, U+02B9-02BA, U+02BE-02BF, U+02C7-02CC, U+02DD, U+0304, U+0308, U+1E08-1E09, U+1E0C-1E0F, U+1E14-1E17, U+1E1C-1E1D, U+1E20-1E21, U+1E24-1E25, U+1E2A-1E2B, U+1E2E-1E2F, U+1E36-1E37, U+1E3A-1E3B, U+1E42-1E49, U+1E4C-1E53, U+1E5A-1E5B, U+1E5E-1E69, U+1E6C-1E6F, U+1E78-1E7B, U+1E80-1E85, U+1E8E-1E8F, U+1E92-1E93, U+1E97, U+1E9E, U+1EF2-1EF9, U+2020, U+20A1, U+20A3-20A4, U+20A6-20A7, U+20A9, U+20AB, U+20AD, U+20B1-20B2, U+20B5, U+20B9-20BA, U+20BC-20BD, U+2113; } @font-face { font-family: 'Exo 2'; font-style: italic; font-weight: 800; font-stretch: 100%; font-display: swap; src: url('/_site/fonts/exo2-800-italic-vietnamese.7f2d56e813.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Exo 2'; font-style: italic; font-weight: 900; font-stretch: 100%; font-display: swap; src: url('/_site/fonts/exo2-900-italic-latin.e3752e3d9e.woff2') format('woff2'); unicode-range: U+000D, U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2007-200B, U+2011-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+202F-2030, U+2032-2033, U+203A, U+2044, U+20AC, U+2122, U+2212, U+2215; } @font-face { font-family: 'Exo 2'; font-style: italic; font-weight: 900; font-stretch: 100%; font-display: swap; src: url('/_site/fonts/exo2-900-italic-latin-ext.64b814fa61.woff2') format('woff2'); unicode-range: U+0100-0148, U+014A-017E, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01C4-01CC, U+01E6-01E7, U+01EA-01EB, U+01FA-021B, U+022A-022D, U+0230-0233, U+0237, U+0259, U+02B9-02BA, U+02BE-02BF, U+02C7-02CC, U+02DD, U+0304, U+0308, U+1E08-1E09, U+1E0C-1E0F, U+1E14-1E17, U+1E1C-1E1D, U+1E20-1E21, U+1E24-1E25, U+1E2A-1E2B, U+1E2E-1E2F, U+1E36-1E37, U+1E3A-1E3B, U+1E42-1E49, U+1E4C-1E53, U+1E5A-1E5B, U+1E5E-1E69, U+1E6C-1E6F, U+1E78-1E7B, U+1E80-1E85, U+1E8E-1E8F, U+1E92-1E93, U+1E97, U+1E9E, U+1EF2-1EF9, U+2020, U+20A1, U+20A3-20A4, U+20A6-20A7, U+20A9, U+20AB, U+20AD, U+20B1-20B2, U+20B5, U+20B9-20BA, U+20BC-20BD, U+2113; } @font-face { font-family: 'Exo 2'; font-style: italic; font-weight: 900; font-stretch: 100%; font-display: swap; src: url('/_site/fonts/exo2-900-italic-vietnamese.e711b3293c.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-stretch: 100%; font-display: swap; src: url('/_site/fonts/serif-400-italic-latin.fe3bc4d91f.woff2') format('woff2'); unicode-range: U+0020-007E, U+00A0-00A3, U+00A5, U+00A7-00AB, U+00AE-00B0, U+00B4, U+00B6-00B8, U+00BA-00BB, U+00BF-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2011, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+202F-2030, U+203A, U+20AC, U+2122, U+2212; } @font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-stretch: 100%; font-display: swap; src: url('/_site/fonts/serif-400-italic-latin-ext.ca76e6fa38.woff2') format('woff2'); unicode-range: U+0100-0107, U+010A-0113, U+0116-011B, U+011E-0123, U+0126-0127, U+012A-012B, U+012E-0133, U+0136-0137, U+0139-013E, U+0141-0148, U+014A-014D, U+0150-015B, U+015E-0161, U+0164-0165, U+016A-017E, U+01CD-01CE, U+0218-021B, U+0237, U+02C7, U+02DD, U+0304, U+0308, U+1E80-1E85, U+1E9E, U+1EF2-1EF3; } @font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-stretch: 100%; font-display: swap; src: url('/_site/fonts/serif-400-italic-vietnamese.67bfc0360e.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0300-0301, U+0303-0304, U+0308, U+1EF2-1EF3; } /* fonts:end */ /* ============================================================== 2. tokens design.md §2.1, the kit's names exactly (Encore-Product-Plan prototype/assets/kit.css; app/public/edit/css/base.css uses the same), from the app's source of truth EncoreCocos assets/scripts/core/theme.ts (tools/website-check.mjs --app compares the values). New names are marked +. sRGB display values: never feed the stage shaders these without the sRGB-to-linear step. */ :root { color-scheme: dark; /* 1. stage, surfaces, inks: theme.ts INK, KIT */ --stage: #07070A; --ob: #090D16; --surf: #131C2B; --surf2: #1A2436; --plate: rgba(14,9,24,.9); --white: #FFF7EC; --ink: #F4F6FA; --ink2: #A2AEC1; --dim: rgba(255,247,236,.62); --dim2: rgba(255,247,236,.56); --dim3: rgba(255,247,236,.22); --line: rgba(255,255,255,.12); --line2: rgba(255,255,255,.2); /* 2. accents: theme.ts KIT */ --rose: #FF3B5F; --rose-deep: #B8142F; --rose-ink: #ff8aa0; /* + rose-ink: the kit's rose text */ --blue: #3D8BFF; --blue-deep: #1B4FB8; --gold: #FFC65E; --amber: #FFB347; --mint: #70F5CB; --violet: #C98BFF; --coral: #FF6A4D; --ice: #BFF0FF; --cyan: #7FF3FF; --hud-violet: #D9A5FF; /* 3. the four lanes: theme.ts LANES (coral, amber, cyan, lavender) */ --l0: #FF6B6B; --l1: #FFB84D; --l2: #3FE3FF; --l3: #B48CFF; --l0-rgb: 255,107,107; --l1-rgb: 255,184,77; --l2-rgb: 63,227,255; --l3-rgb: 180,140,255; /* + */ --lanes-line: linear-gradient(90deg, var(--l0) 0 25%, var(--l1) 25% 50%, var(--l2) 50% 75%, var(--l3) 75%); /* + */ /* 4. the wordmark: Wordmark.ts, share.js .wm (the owner's D3 of 11 Oct) */ --word-your: #FFF7EC; /* + */ --word-beats: linear-gradient(90deg, #FF6A4D, #FFB347); /* + clipped to BEATS' letters */ --word-drop: drop-shadow(0 2px 0 rgba(0,0,0,.45)); /* + HEAD_MARK's hard drop */ --word-drop-lg: drop-shadow(0 3px 0 rgba(0,0,0,.45)); /* + the hero's */ /* 5. grounds: share.js, kit.css .aurora, MenuBackground.ts */ --ground-share: radial-gradient(120% 60% at 50% 0%, #1a0c22, #07070A 60%); /* + */ --ground-menu: radial-gradient(120% 80% at 50% 0%, #1a0c22 0%, #07070A 62%); /* + */ --aur-violet: #7b2cff; --aur-pink: #ff4d8d; --aur-blue: #3d8bff; --aur-amber: #ffb347; /* + */ --stage-a: #7b2cff; --stage-b: #ff4d8d; --stage-c: #ffd1e8; /* + */ /* 6. tiers: theme.ts THUMB, TIER_PILL */ --easy-a: #4DDCFF; --easy-b: #1B4FB8; --easy-lip: #0B2666; --easy-ink: #8fe9ff; --normal-a: #FFD98A; --normal-b: #E08A12; --normal-lip: #6B3A02; --normal-ink: #ffd98a; --hard-a: #FF5C7A; --hard-b: #C4102F; --hard-lip: #5E0818; --hard-ink: #ff9aae; --expert-a: #C98BFF; --expert-b: #6A2BD6; --expert-lip: #2B0E5E; --expert-ink: #dcb8ff; /* 7. medals, ranks, podium: theme.ts MEDAL, RANK_INK, PODIUM */ --medal-gold: radial-gradient(circle at 35% 30%, #fff5c8, #ffc65e 45%, #b8741a); --medal-silver: radial-gradient(circle at 35% 30%, #fff, #dce3f0 45%, #7c8aa3); --medal-bronze: radial-gradient(circle at 35% 30%, #ffd2b0, #e0956a 45%, #7a3e1e); --medal-encore: radial-gradient(circle at 35% 30%, #ffd6e0, #ff3b5f 45%, #7a0a2a); --medal-none: radial-gradient(circle at 35% 30%, #8a8494, #3a3542 45%, #1d1a22); --rank-1: #FFC65E; --rank-2: #dce3f0; --rank-3: #e0956a; --pod-1: linear-gradient(180deg, #FFE7A8, #E0A020); --pod-2: linear-gradient(180deg, #FFFFFF, #9AA6BC); --pod-3: linear-gradient(180deg, #FFD2B0, #B4683A); /* 8. number and title paint, bars: theme.ts HUD, BAR_FILL */ --num-paint: linear-gradient(180deg, #fff6c4 0%, #ffd25c 38%, #ff8a4a 74%, #ff5c5c 100%); --title-paint: linear-gradient(180deg, #fff6d0 0%, #ffd66a 42%, #ff8e56 78%, #ff6a4d 100%); --bar-mint: linear-gradient(90deg, #6ff5e0, #3fe3ff); --bar-gold: linear-gradient(90deg, #ffd98a, #ff8e56); --bar-violet: linear-gradient(90deg, #d9a5ff, #7b2cff); /* 9. type: kit.css; EncoreCocos ui/Fonts.ts */ --f-disp: 'Anton', Impact, 'Arial Narrow', sans-serif; --f-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --f-hud: 'Exo 2', 'Archivo', system-ui, sans-serif; --f-ui: 'Inter', 'Archivo', system-ui, sans-serif; --f-serif: 'Instrument Serif', Georgia, serif; /* 10. shape and space */ --r-card: 18px; --r-btn: 16px; --r-key-lg: 22px; --r-key-sm: 13px; --r-unlit: 14px; --r-chip: 10px; --r-icon-key: 13px; /* + Pulse Key */ --r-sheet: 22px; --r-cover: 12px; /* + */ --gutter: 16px; --section-gap: 22px; --stack-gap: 10px; --touch: 44px; /* + */ --page-max: 1160px; /* + the site's widest column */ /* 11. elevation */ --shadow-plate: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 0 rgba(0,0,0,.45), 0 14px 30px rgba(0,0,0,.5); --shadow-card: inset 0 1px 0 rgba(255,255,255,.14), 0 5px 0 rgba(0,0,0,.45), 0 12px 26px rgba(0,0,0,.45); --shadow-unlit: inset 0 -2px 0 rgba(255,255,255,.26), inset 0 0 0 1px rgba(255,255,255,.16), 0 2px 0 rgba(0,0,0,.4), 0 6px 10px rgba(0,0,0,.28); --shadow-sheet: 0 -20px 50px rgba(0,0,0,.6); /* 12. motion: EncoreCocos ui/kit/base.ts EASE; ui-refresh .sys-e */ --ease-css: cubic-bezier(.25,.1,.25,1); --ease-enter: cubic-bezier(.2,.8,.3,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); --ease-sheet: cubic-bezier(.2,.9,.3,1.1); --ease-pop: cubic-bezier(.3,1.6,.5,1); --ease-inout: cubic-bezier(.42,0,.58,1); --ease-out: cubic-bezier(0,0,.58,1); --ease-in: cubic-bezier(.42,0,1,1); --t-press: 70ms; --t-beam: 240ms; --t-ring: 240ms; --t-rim: 120ms; --t-screen: 220ms; --slide-x: 22px; --t-rise: 380ms; --rise-y: 14px; --stagger: 40ms; --t-sheet: 240ms; --t-backdrop: 180ms; --t-toast: 200ms; --t-thumb: 260ms; --t-toggle: 200ms; --t-cover-fade: 300ms; --cover-stagger: 40ms; --t-breath: 4.8s; --quiet-after: 400ms; --quiet-beat: 600ms; /* + the one motion switch (section 10): effects run while --play is running */ --play: running; } /* ============================================================== 3. the five lit roles (theme.ts KEY; ui-refresh.html) rose: play, start, the one primary action, the store's own key · mint: join, ready, friends, challenge · violet: create, remix, publish · gold: rewards, records · cool: secondary in-flow actions */ .rose { --rgb: 255,59,95; --lt: #FF5C7A; --dk: #C4102F; --lip: #5E0818; --ink: #ffffff; --hit: #FFC4CE; --et: #E8385A; --eb: #B31232; --tone: #ff8aa0; } .mint { --rgb: 112,245,203; --lt: #8ff7dc; --dk: #3fbf9f; --lip: #0f4a3a; --ink: #062A20; --hit: #EAFFF8; --et: #86F2D6; --eb: #2FB392; --tone: #70F5CB; } .violet { --rgb: 180,140,255; --lt: #C98BFF; --dk: #6A2BD6; --lip: #2B0E5E; --ink: #ffffff; --hit: #EEDDFF; --et: #9A5CF2; --eb: #5520BD; --tone: #D9A5FF; } .gold { --rgb: 255,198,94; --lt: #FFD98A; --dk: #E08A12; --lip: #6B3A02; --ink: #2A1400; --hit: #FFF4D8; --et: #FFD27A; --eb: #E08A12; --tone: #FFC65E; } .cool { --rgb: 61,139,255; --lt: #4DDCFF; --dk: #1B4FB8; --lip: #0B2666; --ink: #ffffff; --hit: #D2ECFF; --et: #2A7FE0; --eb: #1B4FB8; --tone: #8FD0FF; } /* ============================================================== 4. base */ *, *::before, *::after { box-sizing: border-box; } html { background-color: var(--stage); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background-color: var(--stage); background-image: var(--ground-menu); background-repeat: no-repeat; background-size: 100% 960px; color: var(--white); font-family: var(--f-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } main { flex: 1 0 auto; display: block; } #main:focus { outline: none; } img, svg, video { max-width: 100%; height: auto; } a { color: var(--ice); text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--white); } :focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; } [hidden] { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .wrap { width: min(100% - 2 * var(--gutter), var(--page-max)); margin-inline: auto; } /* vertical rhythm for a page's own sections (the kit's 10 px stacks, 22 px between sections, more on wide screens) */ .stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--stack-gap); } .stack-lg { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(var(--section-gap), 4vw, 40px); } .section { padding-block: clamp(32px, 6vw, 72px); } /* ============================================================== 5. type and the wordmark */ h1, h2, h3 { margin: 0; line-height: 1.1; } .disp { font-family: var(--f-disp); font-weight: 400; letter-spacing: .02em; text-transform: uppercase; line-height: .98; } h1.disp { font-size: clamp(36px, 7vw, 72px); } .h2 { font-family: var(--f-disp); font-weight: 400; font-size: clamp(24px, 4vw, 34px); letter-spacing: .03em; text-transform: uppercase; line-height: 1; } .eyebrow { margin: 0; font-family: var(--f-body); font-stretch: 75%; font-weight: 700; font-size: 12px; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); } .eyebrow.amber { color: var(--amber); } .eyebrow.mint { color: var(--mint); } .eyebrow.gold { color: var(--gold); } .eyebrow.rose { color: var(--rose-ink); } .eyebrow.violet { color: var(--hud-violet); } .eyebrow.ice { color: var(--ice); } .lede { margin: 0; font-size: clamp(17px, 2.2vw, 20px); line-height: 1.5; color: var(--dim); max-width: 36em; } .serif { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: var(--dim); } .num { font-family: var(--f-hud); font-style: italic; font-weight: 800; font-variant-numeric: tabular-nums; } .small { font-size: 13px; } /* the YourBeats wordmark (logo-web, 12 Oct 2026; the owner's D3 of 11 Oct): YOUR in the kit's white, BEATS in the share links' coral-to-amber ramp clipped to its letters, Anton always (never translated), the hard drop only: never the old cream-to-pink ramp, never a glow. Markup: YOURBEATS (tools/site-check.mjs pins it). */ .wm { font-family: 'Anton', Impact, 'Arial Narrow', sans-serif; font-weight: 400; font-style: normal; letter-spacing: .02em; line-height: 1; color: #FFF7EC; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45)); white-space: nowrap; } .wm b { font-weight: 400; background: linear-gradient(90deg, #FF6A4D, #FFB347); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ============================================================== 6. the page frame */ /* the skip link: the first thing a keyboard reaches (WCAG 2.4.1), on screen only while focused */ .skip { position: absolute; left: var(--gutter); top: -200px; z-index: 20; padding: 12px 18px; border-radius: 12px; background: var(--white); color: var(--stage); font-weight: 700; text-decoration: none; } .skip:focus { top: 12px; } /* the header: not sticky, so it never covers a focused element (WCAG 2.4.11) */ .site-head { position: relative; z-index: 2; view-transition-name: site-head; } .head-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; min-height: 68px; padding-block: 10px; } .logo { display: inline-flex; align-items: center; min-height: var(--touch); text-decoration: none; border-radius: 8px; } .logo .wm { font-size: 30px; } .site-nav { order: 3; flex: 1 1 100%; min-width: 0; } .site-nav ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; } .site-nav a { display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 14px; border-radius: 999px; white-space: nowrap; font-family: var(--f-body); font-stretch: 75%; font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); text-decoration: none; } .site-nav a:hover { color: var(--white); } /* the lit tab: the app's rose pill (EncoreCocos ui/nav/TabBar.ts) */ .site-nav a[aria-current] { color: var(--white); background: rgba(255,59,95,.16); box-shadow: inset 0 -2px 0 #FF3B5F, inset 0 0 0 1px rgba(255,59,95,.45); } .site-nav li.wide { display: none; } /* the right-hand group (language, "Get the app", pause) hugs the right edge */ .head-row > .lang-pick, .head-row > .head-cta { margin-left: auto; } .head-row > .lang-pick ~ .head-cta { margin-left: 0; } /* the language switch: a
holding real links (no script) */ .lang-pick { position: relative; } .lang-pick summary { display: inline-flex; align-items: center; gap: 6px; min-height: var(--touch); padding: 0 12px; border-radius: 999px; cursor: pointer; list-style: none; color: var(--dim); font-stretch: 75%; font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; box-shadow: inset 0 0 0 1px var(--line2); } .lang-pick summary::-webkit-details-marker { display: none; } /* a globe: a ring with its meridian and equator */ .lang-pick summary::before { content: ''; flex: none; width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 50%; background: linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat, linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat; } .lang-pick summary::after { content: ''; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); } .lang-pick[open] summary { color: var(--white); } .lang-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; min-width: 200px; margin: 0; padding: 8px; list-style: none; border-radius: 14px; background: linear-gradient(180deg, rgba(28,24,38,.98), rgba(12,9,20,.98)); box-shadow: var(--shadow-plate); border: 1.5px solid rgba(255,255,255,.14); } .lang-list a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--white); text-decoration: none; } .lang-list a:hover { background: rgba(255,255,255,.06); } .lang-list a[aria-current] { color: var(--mint); } @media (min-width: 860px) { .site-nav { order: 0; flex: 1 1 auto; } .site-nav ul { justify-content: center; } .site-nav li.wide { display: list-item; } .head-row > .lang-pick, .head-row > .head-cta { margin-left: 0; } } /* on a phone: one row for the logo and the right-hand group, the navigation under it; the language is its globe */ @media (max-width: 599px) { .head-row { gap: 8px; } .logo .wm { font-size: 26px; } .lang-pick summary { padding: 0 10px; } .lang-pick summary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } /* breadcrumbs */ .crumbs { padding-block: 6px 0; } .crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--dim); } .crumbs li + li::before { content: '/'; margin-right: 8px; color: var(--dim3); } .crumbs a { color: var(--dim); display: inline-block; padding-block: 3px; } .crumbs a:hover { color: var(--white); } .crumbs [aria-current] { color: var(--white); } /* the footer */ .site-foot { margin-top: 72px; padding-block: 40px 36px; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(14,9,24,.7), rgba(7,7,10,0) 70%); } .site-foot .wrap { display: grid; gap: 32px; } .foot-store { display: grid; gap: 12px; justify-items: start; } .foot-nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 24px 32px; } .foot-nav ul, .foot-social ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; } .foot-nav a, .foot-social a { display: inline-block; padding-block: 4px; color: var(--white); text-decoration: none; font-size: 15px; } .foot-nav a:hover, .foot-social a:hover { color: var(--ice); text-decoration: underline; } .foot-nav a[aria-current] { color: var(--mint); } .foot-social ul { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; } /* (web/site-p2: the design review's F4) the legal block's small text over the home page's fixed aurora keeps 4.5:1 at .78 (it measured 4.49 at .56); superseded: var(--dim2) for the text and .small, var(--dim) for the address */ .foot-legal { display: grid; gap: 8px; padding-top: 22px; border-top: 1px solid var(--line); color: rgba(255,247,236,.78); font-size: 13px; line-height: 1.5; } .foot-legal p { margin: 0; max-width: 72em; } .foot-legal a { color: rgba(255,247,236,.86); } .foot-legal a:hover { color: var(--white); } .foot-legal .small { font-size: 12px; color: rgba(255,247,236,.78); } /* ============================================================== 7. keys (E · Pulse Key, the app's shipped buttons), plates, chips design.md §3.2: one lit key per view; a lit key carries a role class (.rose by default); the press sinks it 2 px. The app has no hover: on the web, hover is the key at the beat's 40 % light (design.md's proposal). */ :where(.key) { --rgb: 255,59,95; --lt: #FF5C7A; --ink: #ffffff; --hit: #FFC4CE; --et: #E8385A; --eb: #B31232; } .key { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 22px; border: 0; border-radius: var(--r-btn); cursor: pointer; color: var(--ink); text-decoration: none; font: inherit; background: linear-gradient(0deg, color-mix(in srgb, var(--hit) 42%, transparent), transparent 10px), linear-gradient(180deg, var(--et), var(--eb)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--lt) 62%, #fff), inset 0 -2px 0 rgba(255,255,255,.78), inset 0 -5px 5px -3px color-mix(in srgb, var(--hit) 80%, transparent), 0 0 10px rgba(var(--rgb), .35), 0 10px 20px -8px rgba(var(--rgb), 1); transition: transform var(--t-press) var(--ease-enter), box-shadow var(--t-press) var(--ease-enter); } .key .lbl { font-family: var(--f-disp); font-weight: 400; font-size: 20px; line-height: 1; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; } .key:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--lt) 62%, #fff), inset 0 -2px 0 rgba(255,255,255,.78), inset 0 -5px 5px -3px color-mix(in srgb, var(--hit) 80%, transparent), 0 0 14px rgba(var(--rgb), .5), 0 10px 20px -8px rgba(var(--rgb), 1); } .key:active { transform: translateY(2px); } .key.sm { min-height: 42px; padding: 0 16px; border-radius: var(--r-key-sm); } .key.sm .lbl { font-size: 15px; } .key.lg { min-height: 72px; padding: 0 30px; border-radius: var(--r-key-lg); } .key.lg .lbl { font-size: 26px; } /* the unlit key: a key at rest (secondary actions) */ .key-unlit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--touch); padding: 0 18px; border-radius: var(--r-unlit); background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)), rgba(16,12,26,.74); box-shadow: var(--shadow-unlit); color: var(--white); text-decoration: none; font-weight: 700; } .key-unlit:hover { color: var(--white); background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04)), rgba(16,12,26,.8); } /* the plate: one card with its header inside it (ui-refresh-spec §0) */ .plate { border-radius: var(--r-card); border: 1.5px solid rgba(255,255,255,.14); background: linear-gradient(180deg, rgba(28,24,38,.92), rgba(12,9,20,.92)); box-shadow: var(--shadow-plate); padding: 18px; } /* chips: 22 tall, condensed capitals */ .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 0 9px; border-radius: 8px; border: 1.5px solid rgba(255,255,255,.2); background: rgba(0,0,0,.35); font-family: var(--f-body); font-stretch: 75%; font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,247,236,.82); } .chip.mint { border-color: rgba(112,245,203,.55); color: #70F5CB; background: rgba(112,245,203,.1); } .chip.gold { border-color: rgba(255,207,90,.6); color: #FFC65E; background: rgba(255,198,94,.1); } .chip.rose { border-color: rgba(255,92,122,.6); color: #ff8aa0; background: rgba(255,59,95,.1); } .chip.violet { border-color: rgba(201,139,255,.6); color: #C98BFF; background: rgba(201,139,255,.1); } .chip.ice { border-color: rgba(127,243,255,.5); color: #BFF0FF; background: rgba(61,139,255,.1); } /* ============================================================== 8. the store block (site/src/website/stores.js) Before launch the Android line is words in a status plate, never a button that does nothing (rules.md §3.4); live, it is Google's own badge, 56 px tall, with a quarter of its height (14 px) clear on every side (.gp), on a plain dark ground, never animated or recoloured. The same rules as app/public/home.html and the link pages. */ .store { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; } .get { display: flex; align-items: center; min-height: 56px; } .soon { display: inline-flex; align-items: center; gap: 10px; min-height: var(--touch); padding: 0 18px; border-radius: var(--r-unlit); background: rgba(16,12,26,.74); box-shadow: inset 0 0 0 1px rgba(112,245,203,.35); color: var(--white); font-weight: 700; font-size: 15px; } .soon::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #70F5CB; box-shadow: 0 0 8px rgba(112,245,203,.8); } .gp { display: flex; flex-direction: column; align-items: center; padding: 14px; margin: -14px 0; } .gp a, .as a { display: block; line-height: 0; border-radius: 9px; } .gp img { display: block; width: 189px; height: 56px; } .as { padding: 14px; margin: -14px 0; } .as img { display: block; } .ios { margin: 0; color: var(--dim); font-stretch: 75%; font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; } .ios a { color: var(--white); } /* (web/site-p2) a live Android line in a footer block is words, as the iPhone's (one badge per page: stores.js) */ .txt { margin: 0; font-stretch: 75%; font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; } .txt a { color: var(--white); } /* ============================================================== 9. the lanes: the app icon's four lane capsules (design.md §3.1): unlit, a slot in the lane's colour; .lit, the lane lit with its own light (tight, no blur). */ .lanes { display: flex; gap: 11px; margin: 0; } .lanes i { display: block; width: 44px; height: 22px; border-radius: 11px; --c: var(--l0); --c-rgb: var(--l0-rgb); border: 1.5px solid rgba(var(--c-rgb), .45); background: rgba(var(--c-rgb), .08); } .lanes i:nth-child(2) { --c: var(--l1); --c-rgb: var(--l1-rgb); } .lanes i:nth-child(3) { --c: var(--l2); --c-rgb: var(--l2-rgb); } .lanes i:nth-child(4) { --c: var(--l3); --c-rgb: var(--l3-rgb); } .lanes i.lit { border-color: transparent; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 72%, white), var(--c)); box-shadow: 0 0 10px rgba(var(--c-rgb), .9), 0 0 22px rgba(var(--c-rgb), .5); } /* ============================================================== 10. motion: ONE switch (WCAG 2.2.2 Pause, Stop, Hide) Anything that moves by itself runs only while --play is running (`animation-play-state: var(--play)`), and stops when the visitor asks for reduced motion or presses the page's own "Pause motion" (a plain checkbox, no script, no storage: the privacy policy promises the web pages keep nothing in the browser). A page that moves sets `motion` in its module, which shows the control. Page-to-page moves are the browser's own cross-document View Transitions, off under reduced motion (seo.md R2: no client-side router, the back button stays honest). */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--t-screen); animation-timing-function: var(--ease-enter); } /* (web/site-p2, 29 Oct 2026: the design review's F2) the checkbox sets --play on and nothing else: every animation follows it through animation-play-state: var(--play) (here, and home.css for the home page). Superseded: also "html:has(#yb-still:checked) * { animation-play-state: paused !important }" (and ::before, ::after): a :has() whose subject was every element made each text change anywhere restyle the whole document (~2,200 elements on the home). */ html:has(#yb-still:checked) { --play: paused; } .still-input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; } .still { display: inline-flex; align-items: center; gap: 8px; min-height: var(--touch); padding: 0 14px; border-radius: 999px; cursor: pointer; color: var(--dim); font-stretch: 75%; font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; box-shadow: inset 0 0 0 1px var(--line2); } .still::before { content: ''; width: 10px; height: 10px; border-radius: 2px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; } .still-input:checked + .still { color: var(--white); box-shadow: inset 0 0 0 1px rgba(112,245,203,.55), inset 0 -2px 0 #70F5CB; } .still-input:checked + .still::before { border: 0; width: 0; height: 0; border-radius: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; } .still-input:focus-visible + .still { outline: 2px solid var(--mint); outline-offset: 2px; } /* on a phone the control is its icon alone (its words stay its accessible name) */ @media (max-width: 599px) { .still { padding: 0; width: var(--touch); justify-content: center; } .still-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } @media (prefers-reduced-motion: reduce) { :root { --play: paused; } @view-transition { navigation: none; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .still-input, .still { display: none; } } /* ============================================================== 11. languages: CJK pages draw in the system's fonts (the app's option A, design.md §2.3), bold for display; the wordmark stays Anton (never translated). */ :lang(ja), :lang(ko), :lang(zh-Hans), :lang(zh-Hant) { --f-disp: system-ui, -apple-system, 'Segoe UI', 'Hiragino Sans', 'Yu Gothic UI', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Microsoft YaHei', 'Microsoft JhengHei', 'Noto Sans CJK JP', sans-serif; --f-body: system-ui, -apple-system, 'Segoe UI', 'Hiragino Sans', 'Yu Gothic UI', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Microsoft YaHei', 'Microsoft JhengHei', 'Noto Sans CJK JP', sans-serif; } :lang(ja) .disp, :lang(ko) .disp, :lang(zh-Hans) .disp, :lang(zh-Hant) .disp, :lang(ja) .key .lbl, :lang(ko) .key .lbl, :lang(zh-Hans) .key .lbl, :lang(zh-Hant) .key .lbl { font-weight: 700; letter-spacing: 0; } /* ============================================================== 12. the 404 (pages/not-found.js): a missed note (plan.md §2.3 K). The hit line and the app icon's four lane keys; one note, cyan's, has fallen past the line; MISS in the app's miss ink with its glow (EncoreCocos JudgeWord: #FF8AA0). The fall plays once, under a second. */ .nf { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding-block: 40px 8px; } .nf .nf-say { font-size: clamp(40px, 9vw, 96px); max-width: 12em; } .nf-stage { position: relative; width: 209px; height: 112px; } .nf-stage::before { content: ''; position: absolute; left: 0; right: 0; top: 30px; height: 3px; border-radius: 2px; background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.75), 0 0 18px rgba(255,59,95,.45); } .nf-stage .lanes { position: absolute; left: 0; top: 40px; } .nf-note { position: absolute; left: 110px; top: 86px; width: 44px; height: 22px; border-radius: 11px; opacity: .6; background: linear-gradient(180deg, color-mix(in srgb, var(--l2) 72%, white), var(--l2)); box-shadow: 0 0 10px rgba(var(--l2-rgb), .6); } .nf-miss { position: absolute; left: 164px; top: 84px; font-family: var(--f-hud); font-style: italic; font-weight: 900; font-size: 22px; line-height: 1; letter-spacing: .04em; color: #FF8AA0; text-shadow: 0 0 8px rgba(255,92,122,.75), 0 0 18px rgba(255,92,122,.35); } @media (prefers-reduced-motion: no-preference) { .nf-note { animation: nf-fall .7s var(--ease-in) both; animation-play-state: var(--play); } .nf-miss { animation: nf-pop .32s var(--ease-pop) .62s both; animation-play-state: var(--play); } } @keyframes nf-fall { from { transform: translateY(-82px); opacity: 1; } 70% { opacity: 1; } to { transform: none; opacity: .6; } } @keyframes nf-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } } /* ============================================================== 13. print */ @media print { html, body { background: #fff !important; color: #000 !important; } .site-nav, .head-cta, .still, .still-input, .lang-pick, .foot-store, .foot-nav, .foot-social, .skip { display: none !important; } a { color: #000 !important; } .wm { filter: none; color: #000; } } /* ============================================================== 14. the header's search field and the phone's "Get the app" (the home page's shortlist §5, 29 Oct 2026): the search field (layout.js; config.js HEADER_SEARCH) once the search page exists, a plain GET form; "Get the app" on a phone only once a store is live (.pre-launch until then: before launch there is nothing to get). The magnifier is drawn in CSS: no image, nothing from elsewhere. */ .head-search { position: relative; display: flex; align-items: center; flex: 0 1 260px; min-width: 0; } .head-search::before { content: ''; position: absolute; left: 14px; top: 50%; width: 11px; height: 11px; margin-top: -8px; border: 2px solid var(--dim); border-radius: 50%; pointer-events: none; } .head-search::after { content: ''; position: absolute; left: 25px; top: 50%; width: 2px; height: 7px; margin-top: 2px; border-radius: 1px; background: var(--dim); transform: rotate(-45deg); pointer-events: none; } .head-search input { width: 100%; min-height: var(--touch); padding: 0 14px 0 38px; border: 0; border-radius: 999px; background: rgba(0,0,0,.42); box-shadow: inset 0 2px 6px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.14); color: var(--white); font: inherit; font-size: 15px; } .head-search input::placeholder { color: var(--dim2); opacity: 1; } .head-search input:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; } @media (max-width: 859px) { .head-search { order: 4; flex: 1 1 100%; } } @media (max-width: 599px) { .head-cta.pre-launch { display: none; } } @media print { .head-search { display: none !important; } }