/* ===================================================================================== COTERIE LOOKS - type and shape (task 2815, theme build stage 1 of 5) ===================================================================================== The three curated personal looks (Coterie.Shared LookCatalog) differ in COLOUR (palettes.css), TYPE and SHAPE (this file). Both are keyed by , set before Blazor boots by index.html's head script; no attribute = Fernhouse, the default. [data-look-preview="x"] lets one element (the Account look picker) wear another look. Every value here is copied from the signed-off design page docs/design/theme-directions-r3.html, its "variant materials" block (.v-groveA / .v-groveB / .v-duskA) and the per-look rules under it: --fh / --fb / --hw / --hls / --bw -> --font-heading / --font-body / --heading-weight / --heading-tracking / --body-weight --rc cards -> --radius-card --rrow rows / nav -> --radius-row --rb buttons -> --radius-button --rchip chips / tiers -> --radius-chip --rav avatars -> --radius-avatar --rtile tiles / icons -> --radius-tile --rin inputs -> --radius-input --rkey keys -> --radius-key --rboard boards -> --radius-board --rt crew tiles -> --radius-crew plus each look's card edge, button lip and divider (see the per-look blocks). FONTS are self-hosted (wwwroot/fonts, SIL Open Font License 1.1, see THIRD-PARTY-NOTICES.md): no Google Fonts request at runtime. Each file name carries the first 10 hex digits of its SHA-256 (name..woff2), so the URL changes whenever the bytes do; ClientCacheHeaders serves such names as immutable (pinned by LookBootScriptTests and ClientCacheHeaderTests). index.html preloads the active look's body font. Latin and Latin Extended subsets only, as woff2 (variable where the family is). Each family is downloaded only when a look that uses it is on screen (unicode-range + the browser's lazy font loading), and every stack ends in a system fallback, so a blocked font file still renders a readable page. ===================================================================================== */ /* ── Fernhouse: Nunito (variable, wght 200-1000) ───────────────────────────────────── */ @font-face { font-family: 'Nunito'; font-style: normal; font-display: swap; font-weight: 200 1000; src: url(../fonts/nunito/nunito-latin-wght-normal.ba344451ea.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Nunito'; font-style: normal; font-display: swap; font-weight: 200 1000; src: url(../fonts/nunito/nunito-latin-ext-wght-normal.2c8d792869.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ── Marigold: Lexend (variable, wght 100-900) + Atkinson Hyperlegible (400, 700) ──── */ @font-face { font-family: 'Lexend'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(../fonts/lexend/lexend-latin-wght-normal.b7e7538f59.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Lexend'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(../fonts/lexend/lexend-latin-ext-wght-normal.b5d815d420.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-display: swap; font-weight: 400; src: url(../fonts/atkinson-hyperlegible/atkinson-hyperlegible-latin-400-normal.d64ba838ef.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-display: swap; font-weight: 400; src: url(../fonts/atkinson-hyperlegible/atkinson-hyperlegible-latin-ext-400-normal.61eeb0eb8b.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-display: swap; font-weight: 700; src: url(../fonts/atkinson-hyperlegible/atkinson-hyperlegible-latin-700-normal.140e2bd25a.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-display: swap; font-weight: 700; src: url(../fonts/atkinson-hyperlegible/atkinson-hyperlegible-latin-ext-700-normal.840ced16f9.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ── Afterglow: Bricolage Grotesque (variable, opsz + wght 200-800) + DM Sans (opsz + wght) ── */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-display: swap; font-weight: 200 800; src: url(../fonts/bricolage-grotesque/bricolage-grotesque-latin-opsz-normal.a79fdb52d4.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-display: swap; font-weight: 200 800; src: url(../fonts/bricolage-grotesque/bricolage-grotesque-latin-ext-opsz-normal.776f6dcaf0.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'DM Sans'; font-style: normal; font-display: swap; font-weight: 100 1000; src: url(../fonts/dm-sans/dm-sans-latin-opsz-normal.ca72d2bcea.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'DM Sans'; font-style: normal; font-display: swap; font-weight: 100 1000; src: url(../fonts/dm-sans/dm-sans-latin-ext-opsz-normal.5d18d31d23.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ───────────────────────────────────────────────────────────────────────────────────── SHADOWS per mode (r3 .mode-day / .mode-night --sh, --sh2). Shadows are black or umber at an alpha in every look, so they are mode-level, not look-level. ───────────────────────────────────────────────────────────────────────────────────── */ :root { --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 16px 34px -18px rgba(0, 0, 0, 0.55); --shadow-raised: 0 12px 34px -10px rgba(0, 0, 0, 0.6); } html[data-mode="day"] { --shadow-card: 0 1px 2px rgba(40, 30, 20, 0.06), 0 14px 30px -18px rgba(40, 30, 20, 0.28); --shadow-raised: 0 10px 30px -10px rgba(40, 30, 20, 0.32); } /* ───────────────────────────────────────────────────────────────────────────────────── FERNHOUSE (r3 groveA, the default): one rounded sans, a leaf-cut shape language - one sharp corner on cards, avatars and keys; pebble-round buttons and chips; 1.5px card edges. ───────────────────────────────────────────────────────────────────────────────────── */ :root, html[data-look="fernhouse"], [data-look-preview="fernhouse"] { --font-heading: 'Nunito', ui-rounded, 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif; --font-body: 'Nunito', ui-rounded, 'Segoe UI', system-ui, sans-serif; --heading-weight: 850; --heading-tracking: -0.015em; --body-weight: 500; --radius-card: 26px 26px 26px 8px; --radius-row: 18px 18px 18px 6px; --radius-button: 999px; --radius-chip: 999px; --radius-avatar: 50% 50% 50% 16%; --radius-tile: 16px 16px 16px 5px; --radius-input: 14px; --radius-key: 14px 14px 14px 5px; --radius-board: 20px 20px 20px 6px; --radius-crew: 9px 9px 9px 3px; /* r3: .v-groveA .nav a { border-radius: 999px } */ --radius-nav: 999px; /* The found-word wash in the hero word grid (.v-groveA .wg-hl) and its card. */ --radius-wash: 14px 14px 14px 4px; --radius-hero-card: 20px 20px 20px 6px; --card-border-width: 1.5px; --card-shadow: var(--shadow-card); --button-shadow: none; --divider-style: solid; --divider-width: 1px; /* The app's older radius scale, mapped onto the look so legacy components follow it. */ --border-radius-sm: 10px; --border-radius-md: 14px; --border-radius-lg: 22px; } /* ───────────────────────────────────────────────────────────────────────────────────── MARIGOLD (r3 groveB): Lexend headings + Atkinson Hyperlegible body; a seed packet - 12px cards with a firm 2px edge and a pressed 3px shadow, 10px buttons with a lip, 6px chips, rounded-square avatars, stitched (dashed) dividers. ───────────────────────────────────────────────────────────────────────────────────── */ html[data-look="marigold"], [data-look-preview="marigold"] { --font-heading: 'Lexend', 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif; --font-body: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif; --heading-weight: 650; --heading-tracking: -0.025em; --body-weight: 400; --radius-card: 12px; --radius-row: 10px; --radius-button: 10px; --radius-chip: 6px; --radius-avatar: 30%; --radius-tile: 10px; --radius-input: 10px; --radius-key: 10px; --radius-board: 12px; --radius-crew: 7px; --radius-nav: 10px; --radius-wash: 6px; --radius-hero-card: 12px; --card-border-width: 2px; --button-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.16); --divider-style: dashed; --divider-width: 1.5px; --border-radius-sm: 6px; --border-radius-md: 10px; --border-radius-lg: 12px; } /* ───────────────────────────────────────────────────────────────────────────────────── AFTERGLOW (r3 duskA): Bricolage Grotesque headings + DM Sans body; pills and 24px radii, round avatars, a soft glow on actions at night. ───────────────────────────────────────────────────────────────────────────────────── */ html[data-look="afterglow"], [data-look-preview="afterglow"] { --font-heading: 'Bricolage Grotesque', 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif; --font-body: 'DM Sans', 'Segoe UI', system-ui, sans-serif; --heading-weight: 720; --heading-tracking: -0.03em; --body-weight: 400; --radius-card: 24px; --radius-row: 18px; --radius-button: 999px; --radius-chip: 999px; --radius-avatar: 50%; --radius-tile: 14px; --radius-input: 14px; --radius-key: 14px; --radius-board: 18px; --radius-crew: 10px; --radius-nav: 999px; --radius-wash: 999px; --radius-hero-card: 24px; --card-border-width: 1px; --card-shadow: var(--shadow-card); --button-shadow: none; --divider-style: solid; --divider-width: 1px; --border-radius-sm: 10px; --border-radius-md: 14px; --border-radius-lg: 24px; } /* Shape tokens that read a COLOUR token are re-declared on every layer root (a var() resolves where it is declared, and the layer root is where the layer's colours are). A look preview (the Account picker's options) is a layer root too, but must wear ITS look, not the page's: these page-look rules (0,3,1) would out-rank its [data-look-preview] rules (0,1,0), so they skip previews, and each preview gets its own look's value below. */ /* r3 .v-groveB .card: a 3px pressed edge in the line colour - the seed-packet card. */ html[data-look="marigold"], html[data-look="marigold"] [data-layer]:not([data-look-preview]), [data-look-preview="marigold"] { --card-shadow: 0 3px 0 var(--border-color); } /* r3 .v-duskA.mode-night .btn-primary: a soft glow of the accent under actions at night. */ html[data-look="afterglow"]:not([data-mode="day"]), html[data-look="afterglow"]:not([data-mode="day"]) [data-layer]:not([data-look-preview]), html:not([data-mode="day"]) [data-look-preview="afterglow"] { --button-shadow: 0 8px 24px -8px var(--accent-primary); } /* ───────────────────────────────────────────────────────────────────────────────────── GAME SCREENS keep their pre-look chrome scale until their own stage (task 2815 review). The retired .theme-retro-dark class used to put these on every MainLayout page; outside (welcome, home) and inside a group's own pages (task 2817: group personality - the dashboard's cards, banner and buttons take the look's shapes, as r3 draws them) the look's shapes and the app's softer blur/shadow defaults apply. Inside a game screen (.app-container) the old values stay for the CHROME (toolbars, the number pad, panels, cards): * corners: the --border-radius-* scale; * glass blur: none; * structural shadows: the darker retro ones. Those screens DO take the look's type and colours - that is the house: the walls are the look. The BOARDS take the look's board shapes since theme build stage 2 (task 2816): Lex tiles, Lattice letters and Domain cells --radius-crew (r3 --rt), Lex keys --radius-key, board frames --radius-board, read directly by the board rules (themes.css and the game stylesheets), so this override does not reach them. ───────────────────────────────────────────────────────────────────────────────────── */ .app-container { --border-radius-sm: 2px; --border-radius-md: 2px; --border-radius-lg: 4px; --glass-blur-sm: 0px; --glass-blur-md: 0px; --glass-blur-lg: 0px; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.6); }