/* ══════════════════════════════════════════════════════════════════════════ CoinLobster STOREFRONT LAYOUT LAYER This file is the storefront's LAYOUT: a centred hero, one measure, one button scale, cards, tile grids and the character stages. It is NOT a palette. The colours here are the brand's own navy world, the same values `terminal-tokens.css` gives every other page, so a marketing page and the terminal are visibly one product. (History, so nobody re-derives it: this started as a cream "light world". The owner rejected the palette and kept the layout. The `--lw-*` / `.lw-*` names and the `data-world="light"` attribute stayed because several storefront pages are already written against them; renaming would have been a rename for its own sake. Read "lw" as "layout world", not "light".) A page opts in with: Every rule here is scoped to that attribute, so linking this file on a page that does not set it changes nothing. ── LOAD ORDER (this file is LAST) ───────────────────────────────────────── 1. /css/vendor.min.css Bootstrap 5 (grid, collapse, dropdown) 2. /css/app.min.css vendor admin theme (ships the blanket `a,button { outline:none !important }`) 3. /css/fonts.css self-hosted Bricolage Grotesque, Hanken Grotesk, JetBrains Mono 4. /css/terminal-tokens.css --tt-* tokens + `body{background:...!important}` 5. /css/navbar.css injected by partials/navbar.ejs (in ) 6. /css/cl-mascot.css the 3D character component 7. /css/cl-light.css <-- THIS FILE navbar.css is injected inside by the partial, so it lands after anything in . Every navbar override below therefore carries either a higher specificity (a `body[data-world="light"]` prefix is +1 attribute +1 type over navbar.css's bare class selectors) or `!important` where navbar.css itself used `!important`. ── CONTRAST (WCAG 2.1, computed, not estimated) ─────────────────────────── Text ramp on the page field --lw-bg #0A2A44: --lw-ink #FFF6EA 13.75:1 (target >= 12:1) AAA --lw-muted #A9C2D6 7.97:1 (target >= 5:1) AAA --lw-dim-text #93AEC4 6.37:1 AA. The text-safe sibling of --lw-dim. --lw-dim #6E8CA3 4.16:1 NOT FOR TEXT. Borders, rules, icon strokes, decorative marks only. On the alternate band --lw-bg-2 #0D3152: ink 12.43:1 · muted 7.21:1 · dim-text 5.76:1 On a card --lw-card #103756: ink 11.52:1 · muted 6.68:1 · dim-text 5.34:1 On the data card #0B2C48: ink 13.37:1 · muted 7.75:1 · dim-text 6.19:1 Accent: --lw-accent #EE5A2C is the brand orange. It carries the primary button fill; the ink ON that fill is #1a0a03 at 5.63:1, which is what the site's own `.ai-btn--primary` uses (white on this orange is 3.42:1 and fails, so the button never uses white). --lw-accent-ink #FF8A5C is orange AS TEXT: 6.33:1 on --lw-bg, 5.31:1 on a card. Same split terminal-tokens.css makes with --tt-accent-text. Up/down keep their terminal meaning: --lw-up #37D98A is 8.02:1 on the field, --lw-down #FA5772 is 4.67:1 on the field but only 3.92:1 on a card, so text uses --lw-down-text #FF7E8E and the raw value is for fills and bars. Focus ring --lw-accent #EE5A2C against --lw-bg is 4.30:1, well above the 3:1 floor WCAG 2.4.11 sets for a non-text focus indicator. ══════════════════════════════════════════════════════════════════════════ */ /* ── TOKENS ───────────────────────────────────────────────────────────────── Declared on both html and body so a page can set the attribute on either. The html[...] form exists so the paint reaches the canvas (overscroll, short pages) rather than stopping at the body box. */ html[data-world="light"], body[data-world="light"] { /* surfaces */ --lw-bg: #0A2A44; --lw-bg-2: #0D3152; --lw-card: #103756; --lw-data-bg: #0B2C48; --lw-border: rgba(255, 246, 234, .12); --lw-border-strong: rgba(255, 246, 234, .20); --lw-shadow: 0 18px 40px -20px rgba(0, 0, 0, .45); --lw-shadow-lg: 0 34px 70px -30px rgba(0, 0, 0, .58); /* ink ramp */ --lw-ink: #FFF6EA; --lw-muted: #A9C2D6; --lw-dim: #6E8CA3; --lw-dim-text: #93AEC4; /* accent */ --lw-accent: #EE5A2C; --lw-accent-ink: #FF8A5C; --lw-accent-soft: rgba(238, 90, 44, .14); --lw-cta-grad: linear-gradient(100deg, #F2703F 0%, #EE5A2C 100%); --lw-cta-ink: #1a0a03; --lw-cta-glow: 0 12px 28px -10px rgba(238, 90, 44, .55); --lw-cta-glow-hi: 0 18px 38px -10px rgba(238, 90, 44, .70); /* data colours keep their terminal meaning */ --lw-up: #37D98A; --lw-down: #FA5772; --lw-down-text: #FF7E8E; /* geometry */ --lw-r-pill: 999px; --lw-r-card: 24px; --lw-r-data: 20px; /* type */ --lw-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif; --lw-sans: 'Hanken Grotesk', system-ui, sans-serif; --lw-mono: 'JetBrains Mono', ui-monospace, monospace; --lw-ease: cubic-bezier(.22, 1, .36, 1); } /* terminal-tokens.css paints `body { background: var(--tt-body-bg) !important }` on every page. That is the same navy, but the storefront states its own field explicitly so a page is never at the mercy of load order. */ html[data-world="light"], html:has(> body[data-world="light"]) { background: var(--lw-bg, #0A2A44) !important; } body[data-world="light"] { background: var(--lw-bg) !important; color: var(--lw-ink); font-family: var(--lw-sans); -webkit-font-smoothing: antialiased; } body[data-world="light"] ::selection { background: rgba(238, 90, 44, .32); color: var(--lw-ink); } /* app.css ships `a, button { outline: none !important }`, so the storefront needs its own ring (3px orange, 3px away from the control so it stays visible against a card edge). */ body[data-world="light"] a:focus-visible, body[data-world="light"] button:focus-visible, body[data-world="light"] input:focus-visible, body[data-world="light"] select:focus-visible, body[data-world="light"] textarea:focus-visible, body[data-world="light"] summary:focus-visible, body[data-world="light"] [role="button"]:focus-visible, body[data-world="light"] [tabindex]:focus-visible { outline: 3px solid var(--lw-accent) !important; outline-offset: 3px; border-radius: 6px; } /* ── SECTIONS ───────────────────────────────────────────────────────────── */ body[data-world="light"] .lw-section { /* one vertical rhythm for the whole storefront */ padding: clamp(56px, 8vw, 120px) 24px; position: relative; } body[data-world="light"] .lw-band { /* full-bleed alternate band, one shade up */ background: var(--lw-bg-2); } body[data-world="light"] .lw-wrap { /* the shared measure for section content */ max-width: 1180px; margin: 0 auto; } /* ── HERO ───────────────────────────────────────────────────────────────── */ body[data-world="light"] .lw-hero { /* centred first screen: headline, line, CTA */ max-width: 920px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; } body[data-world="light"] .lw-tag { /* small outlined pill above a headline */ display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; border: 1px solid var(--lw-border-strong); border-radius: var(--lw-r-pill); background: rgba(255, 246, 234, .04); color: var(--lw-muted); font-size: .78rem; font-weight: 600; letter-spacing: .01em; line-height: 1; } body[data-world="light"] .lw-tag i, body[data-world="light"] .lw-tag .lw-tag__dot { color: var(--lw-accent-ink); } body[data-world="light"] .lw-tag__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lw-accent); flex: none; } body[data-world="light"] .lw-h1 { /* the display headline, centred */ margin: 0; font-family: var(--lw-display); font-size: clamp(3.2rem, 7.2vw, 5.6rem); line-height: .96; letter-spacing: -.035em; font-weight: 800; color: var(--lw-ink); text-wrap: balance; } body[data-world="light"] .lw-h1 em { /* accent word, never italic */ font-style: normal; color: var(--lw-accent-ink); } body[data-world="light"] .lw-sub { /* the sentence under the headline */ margin: 0; max-width: 640px; font-size: 1.25rem; line-height: 1.5; color: var(--lw-muted); text-wrap: balance; } body[data-world="light"] .lw-cta { /* the button row */ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-top: 4px; } /* ── BUTTONS ────────────────────────────────────────────────────────────── */ body[data-world="light"] .lw-btn { /* pill button base, shared geometry */ display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 15px 28px; border-radius: var(--lw-r-pill); border: 1px solid transparent; font-family: var(--lw-sans); font-size: 1.02rem; font-weight: 700; line-height: 1; text-decoration: none !important; cursor: pointer; white-space: nowrap; transition: transform .22s var(--lw-ease), box-shadow .22s var(--lw-ease), background-color .22s var(--lw-ease), color .22s var(--lw-ease); } body[data-world="light"] .lw-btn--primary { /* the one loud action: orange pill, dark ink */ background: var(--lw-cta-grad); color: var(--lw-cta-ink) !important; border-color: transparent; box-shadow: var(--lw-cta-glow), inset 0 1px 0 rgba(255, 255, 255, .22); } body[data-world="light"] .lw-btn--primary:hover { transform: translateY(-2px); box-shadow: var(--lw-cta-glow-hi), inset 0 1px 0 rgba(255, 255, 255, .22); color: var(--lw-cta-ink) !important; } body[data-world="light"] .lw-btn--primary:active { transform: translateY(0); } body[data-world="light"] .lw-btn--ghost { /* the quiet second action */ background: rgba(255, 246, 234, .05); color: var(--lw-ink) !important; border-color: var(--lw-border-strong); } body[data-world="light"] .lw-btn--ghost:hover { transform: translateY(-2px); background: rgba(255, 246, 234, .09); border-color: var(--lw-accent); } body[data-world="light"] .lw-btn--ghost:active { transform: translateY(0); } body[data-world="light"] .lw-btn--link { /* text-only action, underline on hover */ padding: 15px 6px; background: none; border-color: transparent; color: var(--lw-accent-ink) !important; box-shadow: none; } body[data-world="light"] .lw-btn--link:hover { text-decoration: underline !important; text-underline-offset: 4px; } body[data-world="light"] .lw-btn--sm { padding: 10px 18px; font-size: .88rem; } /* The one oversized action, used once, in a closing CTA. */ body[data-world="light"] .lw-btn--lg { padding: 19px 36px; font-size: 1.12rem; } /* ── CHIPS ──────────────────────────────────────────────────────────────── */ body[data-world="light"] .lw-chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; } body[data-world="light"] .lw-chip { /* icon + one short fact */ display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 500; color: var(--lw-dim-text); line-height: 1.2; } body[data-world="light"] .lw-chip i, body[data-world="light"] .lw-chip svg { font-size: 1rem; color: var(--lw-accent-ink); flex: none; } body[data-world="light"] .lw-chip b { color: var(--lw-ink); font-weight: 700; } /* ── HEADINGS BELOW THE FOLD ────────────────────────────────────────────── */ body[data-world="light"] .lw-h2 { /* section headline */ margin: 0 0 14px; font-family: var(--lw-display); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.04; letter-spacing: -.028em; font-weight: 800; color: var(--lw-ink); text-wrap: balance; } body[data-world="light"] .lw-lede { /* the single sentence under an H2 */ margin: 0 0 28px; font-size: 1.05rem; line-height: 1.5; color: var(--lw-muted); max-width: 620px; } body[data-world="light"] .lw-center { text-align: center; } body[data-world="light"] .lw-center .lw-lede { margin-left: auto; margin-right: auto; } /* ── CARDS ──────────────────────────────────────────────────────────────── */ body[data-world="light"] .lw-card { /* the default container */ background: var(--lw-card); border: 1px solid var(--lw-border); border-radius: var(--lw-r-card); box-shadow: var(--lw-shadow); padding: clamp(22px, 3vw, 34px); color: var(--lw-ink); } /* The positioning box a .lw-peek character hangs off. Separate from the card so the card can keep clipping its own rows while the character does not. */ body[data-world="light"] .lw-anchor { position: relative; max-width: 1100px; margin: 0 auto; } /* ── THE DATA CARD ────────────────────────────────────────────────────────── A recessed panel, one step darker than the page, for live instrument data. Existing terminal components must render INSIDE it unchanged, so the --tt-* text tokens are restated here: a page-level override further up the tree can never reach into it. */ body[data-world="light"] .lw-data { --tt-body-bg: #0A2A44; --tt-panel-grad: linear-gradient(145deg, #103756 0%, #0D3152 100%); --tt-panel-solid: #0B2C48; --tt-input-bg: #0D3152; --tt-border: rgba(255, 246, 234, .12); --tt-border-soft: rgba(255, 246, 234, .07); --tt-text: #FFF6EA; --tt-text-muted: #A9C2D6; --tt-text-dim: #6E8CA3; --tt-text-dim-text: #93AEC4; --tt-accent: #EE5A2C; --tt-accent-text: #FF8A5C; --tt-up: #37D98A; --tt-down: #FA5772; --tt-down-text: #FF7E8E; background: var(--lw-data-bg); border: 1px solid var(--tt-border); border-radius: var(--lw-r-data); box-shadow: var(--lw-shadow-lg); color: var(--tt-text); overflow: hidden; } body[data-world="light"] .lw-data h1, body[data-world="light"] .lw-data h2, body[data-world="light"] .lw-data h3, body[data-world="light"] .lw-data h4, body[data-world="light"] .lw-data p, body[data-world="light"] .lw-data span, body[data-world="light"] .lw-data div, body[data-world="light"] .lw-data td, body[data-world="light"] .lw-data th { border-color: var(--tt-border-soft); } body[data-world="light"] .lw-data__head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--tt-border-soft); font-family: var(--lw-mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--tt-text-muted); } body[data-world="light"] .lw-data__live { /* honest LIVE pill, only when the feed is live */ display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--lw-r-pill); background: rgba(55, 217, 138, .14); color: var(--tt-up); font-size: 10px; font-weight: 700; letter-spacing: .08em; } body[data-world="light"] .lw-data__row { display: flex; align-items: center; gap: 12px; padding: 11px 20px; border-bottom: 1px solid var(--tt-border-soft); font-family: var(--lw-mono); font-size: 12px; color: var(--tt-text); } body[data-world="light"] .lw-data__row:last-child { border-bottom: 0; } body[data-world="light"] .lw-data__row .lw-up { color: var(--tt-up); } body[data-world="light"] .lw-data__row .lw-down { color: var(--tt-down-text); } /* ── TILE GRIDS ─────────────────────────────────────────────────────────── */ body[data-world="light"] .lw-grid-3, /* 3-up responsive tile grid */ body[data-world="light"] .lw-grid-4 { /* 4-up responsive tile grid */ display: grid; gap: 18px; } body[data-world="light"] .lw-grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } body[data-world="light"] .lw-grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } body[data-world="light"] .lw-tile { /* card tile: art slot, short label, one line */ background: var(--lw-card); border: 1px solid var(--lw-border); border-radius: var(--lw-r-card); box-shadow: var(--lw-shadow); padding: 22px; display: flex; flex-direction: column; gap: 12px; text-decoration: none !important; color: var(--lw-ink); transition: transform .22s var(--lw-ease), box-shadow .22s var(--lw-ease), border-color .22s var(--lw-ease); } body[data-world="light"] a.lw-tile:hover { transform: translateY(-3px); border-color: var(--lw-accent); box-shadow: var(--lw-shadow-lg); } body[data-world="light"] .lw-tile__art { /* the graphic slot: a recessed panel */ display: flex; align-items: center; justify-content: center; min-height: 96px; border-radius: 14px; background: var(--lw-data-bg); color: var(--lw-accent-ink); overflow: hidden; } body[data-world="light"] .lw-tile__art--navy { background: var(--lw-data-bg); color: var(--lw-ink); } body[data-world="light"] .lw-tile__label { font-family: var(--lw-display); font-size: 1.12rem; font-weight: 700; letter-spacing: -.02em; color: var(--lw-ink); } body[data-world="light"] .lw-tile__line { font-size: .9rem; line-height: 1.4; color: var(--lw-muted); margin: 0; } /* ── CHARACTER STAGE ──────────────────────────────────────────────────────── The mascot component (cl-mascot.css) draws the ground shadow and the float, so this only centres it and gives it room. The component's shadow is tuned near-black, which is exactly right on navy, so nothing is retinted here. */ body[data-world="light"] .lw-stage { position: relative; display: flex; justify-content: center; align-items: flex-end; width: 100%; margin: 0 auto; } body[data-world="light"] .lw-stage .clm { max-width: 100%; } body[data-world="light"] .lw-stage--glow::before { /* soft radial warmth behind the character */ content: ""; position: absolute; left: 50%; top: 46%; /* capped at 100% so the halo can never widen the page on a narrow viewport (measured: min(120%,...) pushed document scrollWidth to 407 at a 390 viewport). */ width: min(100%, 780px); aspect-ratio: 1.25; transform: translate(-50%, -50%); border-radius: 50%; /* Warm only. The storefront has ONE accent and no cyan: a blue stop here read as a second accent and fought the orange CTA. */ background: radial-gradient(circle, rgba(238, 90, 44, .16) 0%, rgba(238, 90, 44, .06) 40%, rgba(238, 90, 44, 0) 70%); pointer-events: none; z-index: 0; } body[data-world="light"] .lw-stage > * { position: relative; z-index: 1; } /* A character peeking over a card's corner. The card must not clip it, so the parent needs `overflow: visible` and this sits absolutely on top. */ body[data-world="light"] .lw-peek { position: absolute; z-index: 3; pointer-events: none; } /* Anchored to the card's TOP edge, not to a pixel offset, so the overlap is the same whatever size the character is rendered at. */ body[data-world="light"] .lw-peek--tr { right: -90px; bottom: calc(100% - 30px); } @media (max-width: 767.98px) { body[data-world="light"] .lw-peek { display: none; } } /* NAVBAR: none. The storefront pages use the site's normal navbar exactly as every other page does (owner 2026-09-04: "just use the normal navbar"). This layer must never restyle .cl-navbar. */ /* ── MOBILE ─────────────────────────────────────────────────────────────── */ @media (max-width: 767.98px) { body[data-world="light"] .lw-hero { gap: 18px; } body[data-world="light"] .lw-sub { font-size: 1.06rem; } body[data-world="light"] .lw-cta { width: 100%; flex-direction: column; } body[data-world="light"] .lw-cta .lw-btn { width: 100%; } body[data-world="light"] .lw-cta .lw-btn--link { width: auto; } body[data-world="light"] .lw-chips { gap: 12px; } body[data-world="light"] .lw-section { padding-left: 18px; padding-right: 18px; } } /* ── REDUCED MOTION ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { body[data-world="light"] .lw-btn, body[data-world="light"] .lw-tile { transition: none !important; } body[data-world="light"] .lw-btn:hover, body[data-world="light"] a.lw-tile:hover { transform: none !important; } }