/* Webfonts — Spectral (display), Manrope (UI), JetBrains Mono (meta). */ @import url("https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap"); :root { /* ── Neutrals & surfaces (warm stone) ── */ --canvas: #F2F0EB; /* app background */ --surface: #FFFFFF; /* cards, panels */ --surface-alt: #FAF8F3; /* inset / striped rows */ --shell: #2B251E; /* deep espresso sidebar */ --shell-alt: #3A332A; /* sidebar hover / active */ /* ── Text ── */ --ink: #26221C; /* primary text */ --text-secondary: #5A534A; --text-muted: #8C857A; --text-faint: #B3ABA0; --on-dark: #EDE8DF; --on-dark-muted: #A7A096; /* ── Lines ── */ --line: #E7E1D7; --line-2: #F0EBE2; /* ── Primary accent — Champagne & Gold ── */ --accent: #B08D57; --accent-hover: #927443; --accent-deep: #6E5530; --accent-soft: #F3ECDD; --accent-line: #E4D6BC; --accent-on-dark: #D8B878; /* gold that reads on espresso */ /* ── Status ── */ --success: #4E7A5E; --success-soft: #E7F0EA; --warning: #B5852F; --warning-soft: #F6EBD6; --danger: #9A5A5A; --danger-soft: #F2E6E6; --neutral: #8C857A; --neutral-soft: #F0EBE2; /* ── Category tones — charts, staff, tags ── */ --cat-forest: #5E7B62; --cat-rust: #9A6A6A; --cat-blue: #7E8BA6; --cat-mauve: #8A6A85; --cat-sage: #7A8B6F; --cat-gold: #B08D57; /* ── Alternate accent themes (swap --accent* to retheme) ── */ --theme-champagne: #B08D57; --theme-rose: #B07A86; --theme-sage: #7A8B6F; --theme-mauve: #8A6A85; --theme-blue: #7E8BA6; --theme-noir: #3A332A; } :root { /* ── Families ── */ --font-display: "Spectral", Georgia, "Times New Roman", serif; /* voice, headlines, numerals */ --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* UI + body */ --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; /* eyebrows, SKUs, meta */ /* ── Type scale ── */ --text-display: 52px; --text-h1: 40px; --text-h2: 30px; --text-title: 19px; --text-body: 15px; --text-small: 13px; --text-eyebrow: 11px; /* ── Weights ── */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ── Tracking ── */ --tracking-wordmark: 0.18em; /* RINGUPS lockup */ --tracking-eyebrow: 0.14em; /* mono eyebrows, uppercase */ } :root { /* ── Spacing — 4px base ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; /* ── Radius ── */ --radius-sm: 6px; /* chips, inputs */ --radius-md: 9px; /* buttons */ --radius-lg: 14px; /* cards, modals */ --radius-pill: 999px; /* ── Elevation ── */ --shadow-card: 0 1px 2px rgba(40, 34, 26, 0.04); --shadow-raised: 0 6px 18px rgba(40, 34, 26, 0.10); --shadow-pop: 0 12px 32px rgba(40, 34, 26, 0.16); } /* Generated from style-hover attributes in the prototype. */ [data-h="h0"]:hover{color:var(--accent-on-dark)} [data-h="h1"]:hover{background:var(--accent-soft)} [data-h="h2"]:hover{background:rgba(255,255,255,0.24)} [data-h="h3"]:hover{color:var(--ink)} [data-h="h4"]:hover{background:var(--accent-hover)} [data-h="h5"]:hover{background:var(--surface-alt)} [data-h="h6"]:hover{color:#fff} [data-h="h7"]:hover{border-color:var(--accent-line);transform:translateY(-3px)} [data-h="h8"]:hover{background:var(--shell-alt)} [data-h="h9"]:hover{transform:translateY(-3px)} [data-h="ha"]:hover{color:var(--accent-deep)} [data-h="hb"]:hover{border-color:var(--accent);transform:translateY(-3px)} [data-h="hc"]:hover{border-color:var(--accent-line)} [data-h="hd"]:hover{background:var(--accent-line)} /* Baseline the prototype assumed from the design-tool shell. */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font-sans),system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden} img{max-width:100%;height:auto} a{color:inherit} /* ---------------------------------------------------------------- responsive Overrides for the markers convert.mjs attaches. !important is not laziness here - it is the only thing that outranks an inline style, and the prototype is entirely inline-styled. Everything is scoped to the media query, so the desktop layout is bit-for-bit what it was. */ @media (max-width:860px){ .r-grid{grid-template-columns:1fr!important} /* Tabular rows keep their columns and shrink, so the illustration still reads as the product rather than as a list of orphaned values. */ .r-tab{font-size:9px!important;padding-left:10px!important;padding-right:10px!important; column-gap:6px!important;letter-spacing:0!important} .r-tab>*{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important} .r-pad{padding-left:20px!important;padding-right:20px!important} .r-flex{flex-wrap:wrap!important} .r-w{width:100%!important;max-width:100%!important} .r-nowrap{white-space:normal!important} .r-fs-xl{font-size:31px!important;line-height:1.15!important;letter-spacing:-0.01em!important} .r-fs-lg{font-size:26px!important;line-height:1.2!important} .r-fs-md{font-size:21px!important;line-height:1.25!important} /* Section gutters. The markers catch elements that declare their own padding; these catch the layout wrappers that inherit it. */ section{padding-left:20px!important;padding-right:20px!important} .r-pv{padding-top:40px!important;padding-bottom:40px!important} /* The desktop nav bar steps aside for the hamburger. */ nav .r-flex{flex-wrap:nowrap!important} /* Decorative overhangs are removed rather than squeezed. There is no width on a phone for something to hang into, and the alternative is a photo sitting on top of the sentence underneath it. */ .r-float{display:none!important} /* The in-page browser-chrome illustrations have their own fixed internal layouts. Scrolling one sideways is honest; letting it push the whole page wider is not. */ [style*="border-radius:var(--radius-lg)"]{max-width:100%!important} /* Tap targets. Anything acting as a button gets a finger-sized hit area. */ a[style*="border-radius"],button{min-height:44px} /* Long identifiers - style numbers, emails, URLs in the mock chrome - break rather than widen the page. */ body{word-break:break-word;overflow-wrap:anywhere} } /* Above the nav's own breakpoint the hamburger and its drawer step aside. 880px is the number the prototype's own logic uses; matching it keeps one breakpoint rather than two that disagree by twenty pixels. */ @media (min-width:880px){ .r-mob,.r-drawer{display:none!important} } /* Below it, the desktop bar goes. 880px is the prototype's own number, so the swap happens at one width rather than two that disagree. */ @media (max-width:879px){ .r-desk{display:none!important} } /* The drawer is closed until the hamburger says otherwise. Driven by an attribute on