/* ============================================================================= GLOBAL.CSS — hub.shawnjason.com (Shawn's Hub) ----------------------------------------------------------------------------- Single source of truth for colours and fonts, same role as shawnjason's global.css. Every other file references these variables rather than hardcoding. THE LOOK: a deliberate LIGHT INVERSION of shawnjason.com's dark plum/violet scheme (Shawn approved 2026-07-29). The logic: - shawnjason's plum GROUND (#241d33) becomes our INK (dark text). - shawnjason's white TEXT becomes our SURFACE (light paper + white cards). - the violet + gold accents carry over but are DEEPENED so they punch on light instead of washing into pastel. - the neutral is WARM PAPER, never a lavender tint — that's what keeps it from reading pink/purple. Same three fonts as shawnjason so it reads as the same family, lighter. ============================================================================= */ /* FONTS — self-hosted; copy the .woff2 files from shawnjason's theme into /assets/fonts/ (Merriweather 900, Newsreader 400/400i/600, IBM Plex Mono 500). */ @font-face{font-family:'Merriweather';src:url('../fonts/merriweather-900.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap} @font-face{font-family:'Newsreader';src:url('../fonts/newsreader-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Newsreader';src:url('../fonts/newsreader-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:'Newsreader';src:url('../fonts/newsreader-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibm-plex-mono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibm-plex-mono-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} :root{ /* GROUND + INK (the inversion) */ --bg: #F5F2EC; /* warm paper ground — the calm reading surface */ --bg-sink: #EDE8DF; /* faintly deeper paper — wells, locked cards */ --ink: #221B32; /* deep plum ink — primary text (was the ground) */ --ink-soft: #4B4459; /* muted plum-grey — body copy, secondary text */ --lash: #7A7086; /* quiet grey-violet — mono eyebrows / kicker labels */ --card: #FFFFFF; /* white cards lift off the paper */ --line: #E4DDEA; /* light plum-grey — hairlines / borders */ /* ACCENTS — carried from shawnjason, deepened for light */ --violet: #6A4A9C; /* primary accent — links, primary buttons */ --violet-dk: #56397F; /* violet hover */ --gold: #d8b06a; /* warm accent — highlights, the everyone-lounge */ --gold-dk: #c19a52; /* gold hover */ /* ⚠️ GOLD'S ROLE, WRITTEN IN INK THAT READS ON A LIGHT GROUND. The gold itself is 2.6:1 on white and 1.9:1 on the cream — unreadable as text, fine as a fill. This is the same hue walked down in lightness until it passes: 4.9:1 on white, 4.6:1 on the cream. Use it wherever gold is carrying MEANING as text; use --gold when it is a fill or a rule. */ --gold-ink: #926A26; /* DEEP PLUM — the one dark surface (the Community Lounge band, footer). A single nod to the parent site's dark chrome, used as an accent, not the ground. */ --deep: #241d33; --deep-2: #2A2140; /* Flag / category hues (carried from shawnjason, tuned for light) */ --coral: #C0553B; --blue: #2D6D9A; --teal: #1c8c82; --rose: #b5637f; /* raw channels for rgba() tints */ --ink-rgb: 34, 27, 50; --violet-rgb: 106, 74, 156; /* ⚠️ NO LITERAL COLOURS OUTSIDE THIS BLOCK. Shawn made it a standing rule: "in general we shouldn't be using hard-coded colors at all. Everything should be a token, right? That makes life easier down the road." The names below existed only as repeated hex in lounge.css and review.css — the same value typed in seven places is how two controls drift apart. */ /* Warm borders on the cream grounds. */ --warm-line: #E8DFCF; --warm-line-soft: #EBE3D6; /* Ink and tints for the DEEP (dark plum) sections, where the normal ink tokens are unreadable. Light-on-dark, so they belong to that ground rather than to the palette's light-on-white scale. */ --deep-ink: #d9d2e6; --deep-soft: #cfc6dd; --deep-quiet: #bdb4cd; --deep-faint: #b3a9c4; --deep-black: #0d0a14; --deep-panel: #3A2F52; /* Near-black used for a thread title, fractionally warmer than --ink. */ --ink-title: #1C1A22; /* Legible inks for the pill/pip grounds, each tuned to its own tint. */ --teal-ink: #14655e; --gold-pip: #7a5a17; --rose-pip: #8a3f58; --coral-ink: #a03f27; /* Display/title leading — see the standard documented below. */ --title-leading: 1.15; --gold-rgb: 216, 176, 106; --rose-rgb: 181, 99, 127; --teal-rgb: 28, 140, 130; --deep-rgb: 36, 29, 51; /* ⚠️ THE GOLD RAIL, ONE VALUE FOR THE WHOLE SITE. The header's rule, the footer's and the seam under an opening post are the same structural line, and they were three separate 4px / 4px / 3px literals — so they agreed by coincidence until one of them did not. Shawn, looking at the header and the seam on one screen: "it is not as thick as the bar at the top of this block. I requested those be the same." A literal that matches is two values that happen to agree today. */ --gold-rail: 4px; /* radii — same scale as shawnjason */ --radius-card: 12px; --radius-control: 8px; --radius-pill: 22px; /* font roles — identical to shawnjason */ --font-heading: 'Merriweather', serif; --font-body: 'Newsreader', serif; --font-mono: 'IBM Plex Mono', monospace; } /* BASE ELEMENT DEFAULTS */ body{ background:var(--bg); color:var(--ink); font-family:var(--font-body); -webkit-font-smoothing:antialiased; } /* ⚠️ THE HUB'S TITLE LEADING STANDARD — READ THIS BEFORE TIDYING ANYTHING. Shawn's rule, in his words: "Anytime a title splits into two, it shouldn't have that much spacing between it." THE RULE IS RELATIVE, NOT A NUMBER: the leading INSIDE a wrapped title must be clearly tighter than the gap from that title to whatever sits above and below it. If the two readings are close, the eye stops grouping the lines and the title stops being one object. In practice that means a ratio around 1.05–1.2 depending on size — big display type takes the tighter end. Left at a body ratio (Astra's default is 1.3) a two-line title reads as two things. ⚠️ TWO WAYS THIS GETS LOST, and both have already happened here: 1. A `> *` LEADING BLANKET. `line-height: calc(1em + Npx)` on a parent's children equalises the INTERVAL BETWEEN STACKED ELEMENTS, which is a real and correct job. But the moment one of those children WRAPS, that same +Npx becomes the leading between its own lines. For a single-line child the two are indistinguishable, which is exactly why it hides. Those blankets now carry `:not(h1):not(h2):not(h3)` — see lounge.css and profile.css. ⚠️ DO NOT "TIDY" THAT EXCLUSION AWAY. It is load-bearing. 2. A TITLE THAT SIMPLY NEVER SET ITS OWN LEADING and inherits a body ratio. Seven of them were found this way by measuring what rendered, not by reading the CSS — they look fine until something wraps at 390px. Body text, blurbs, meta lines and controls are NOT covered by this. They want comfortable leading; this is about display type only. */ h1,h2,h3,h4{font-family:var(--font-heading);font-weight:900;letter-spacing:-.02em;color:var(--ink);margin:0} a{color:var(--violet);text-decoration:none} a:hover{color:var(--violet-dk)} /* never blue — see the never-blue-hover rule */ /* The mono label / eyebrow pattern used site-wide */ .hub-eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--violet)} .hub-label{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--lash)} /* ========================================================================= NOTHING PAINTS ON PLAIN FOCUS — one rule, every control the hub draws ====================================================================== */ /* ⚠️ THIS IS A BASE RULE ON PURPOSE, AND IT REPLACES REMEMBERING. The same fault has been reported five times today by Shawn, on his phone, each time on a different control: the inbox pills, the reply chip's violet, the three dots staying dark, the ghosted button chrome, and the review tool's section cards keeping a purple title after his finger lifted. Each was fixed where it was found, which produced three separate `:focus:not(:focus-visible)` resets in three stylesheets and left every control built afterwards free to have the fault again. The card was built today and did not inherit anything. ⚠️ So the rule is here, unconditional, matching the hub's own namespaces — the same shape as the one unconditional reset that covers Astra's button chrome rather than six per-button overrides. A TAP LEAVES :focus BEHIND. A mouse click does too. Neither should leave any paint, which is why this clears the three things a left-behind state shows: the ring, the colour and the ground. Keyboard focus is a different question and is answered below. */ [class*="hub-"]:focus:not(:focus-visible), [class*="lounge-"]:focus:not(:focus-visible) { outline: none; color: inherit; background-color: inherit; } /* ⚠️ AND SOMETHING CLEAR WHEN IT IS THE KEYBOARD. Removing the plain-focus paint without stating this would leave keyboard users with no indication at all, which is the opposite failure and a worse one — it is invisible to anybody testing with a finger. On-palette, never blue: Shawn's oldest standing rule across every site. */ [class*="hub-"]:focus-visible, [class*="lounge-"]:focus-visible { outline: 2px solid var(--violet, #6b3fa0); outline-offset: 2px; }