/* ========================================================================== CYGM - the modern pass -------------------------------------------------------------------------- Loaded last, after the skin, and deliberately unlayered. It does one job: take the existing look one or two stops darker and let a little more air and a little less decoration into it. Nothing here changes the identity. The navy ground is still navy, the accent is still the same cyan, the corners are still 16px, the buttons are still pills, the display face is unchanged and the moulded material underneath is untouched. This is a grade, not a redesign. WHAT "MODERN" MEANS HERE, AND WHY Read off current dark product and developer-tool pages, described in neutral terms so the reasoning is traceable rather than borrowed: 1. The ground has gone near-black with one low-saturation tint, replacing the mid-toned coloured ground of a few years ago. The hue survives; the lightness does not. 2. Containers are separated by a 1px hairline at roughly 6-10% white, not by a coloured edge or an outer glow. Edges describe, they do not announce. 3. Glow is a budget, not a finish. One accent element per view earns it - the primary action, a lit indicator. Cards, links and readouts do not. 4. Headlines run larger and tighter on wide viewports; letter-spacing comes in rather than out. 5. Sections are further apart. Vertical whitespace is doing the grouping that borders used to do. 6. Overlays are out: no grid, no scanline, no film grain over content. 7. Shadows are larger, softer and lower in alpha - the spread reads as depth, the darkness used to read as weight. 8. Secondary and label text sits muted rather than coloured, around 60% of the strength it used to carry. 9. A pressable surface keeps one crisp highlight along its top edge instead of a full gloss across its face. 10. Navigation is quieter: solid ground, one hairline, no rim light. Hex literals live in the :root block below and nowhere else in this file. Shadows are never transitioned. Everything added here is covered by the reduced-motion and forced-colors blocks at the foot of the file. ========================================================================== */ :root { /* ----- 1. THE GROUND, DARKENED ----- Every step of the navy ramp drops one or two stops. The hue and the relative order are preserved, so anything derived from these keeps its relationship to everything else. */ --ink-900: #07090e; /* page */ --ink-800: #0b0e16; /* section */ --ink-750: #0f1320; /* tertiary, table header */ --ink-700: #0d1017; /* card */ --ink-600: #141923; /* card hover, raised */ /* The moulded material's own ramp, moved with it so a part still reads as cut from the same stock as the page it sits on. */ --b-face-0: #1b2434; --b-face-1: #151c2a; --b-face-2: #101724; --b-face-3: #0a0f1a; --b-face-4: #060a11; --b-cast: #010307; /* The chamfer, taken down so the lit edge reads as a hairline rather than as a highlight. The dark side goes with it. */ --b-chamfer-hi: #2b3649; --b-chamfer-lo: #02040a; /* The reading slab stays clearly lighter than the ground - that separation is what makes long-form text sit on a page rather than in it - but it drops with everything else. */ --sk-reading: #111828; /* ----- 2. HAIRLINES ----- A neutral 1px white edge at 8%, and a rim light at roughly half the alpha it used to carry. */ --color-border: color-mix(in srgb, var(--color-text) 8%, transparent); --color-border-strong: color-mix(in srgb, var(--color-accent) 14%, transparent); --b-rim: color-mix(in srgb, var(--color-accent) 21%, transparent); --b-rim-soft: color-mix(in srgb, var(--color-accent) 8%, transparent); --b-rim-faint: color-mix(in srgb, var(--color-accent) 4%, transparent); --b-edge-hi: color-mix(in srgb, var(--b-chamfer-hi) 46%, transparent); --b-edge-mid: color-mix(in srgb, var(--b-chamfer-hi) 18%, transparent); /* The neutral hairline, as a shadow, for the places that draw an edge with box-shadow rather than with a border. */ --m-hairline: color-mix(in srgb, var(--b-spec) 8%, transparent); --m-hairline-soft: color-mix(in srgb, var(--b-spec) 5%, transparent); /* ----- 3. GLOW BUDGET ----- The soft glow, which washes cards, links and blooms, comes down by a third. The strong one is left alone: it is what lights the primary action and the indicators, and that is the one element per view that keeps its glow. */ --color-glow: color-mix(in srgb, var(--color-accent) 10%, transparent); /* ----- 4. SHADOWS ----- Same three-layer cast, wider and fainter. */ --b-cast-40: color-mix(in srgb, var(--b-cast) 30%, transparent); --b-cast-60: color-mix(in srgb, var(--b-cast) 46%, transparent); --b-studio-cast: 0 1px 1px var(--b-cast-40), 0 16px 34px -12px var(--b-cast-40), 0 40px 72px -30px var(--b-cast-60); /* ----- 5. TYPE ----- Headline tracking comes in by 0.01em, and the display leading closes a fraction with it. A large heading set tight is the single loudest signal that a dark page was typeset recently. Weight is untouched: the display face at 700 is the brand, not a default. */ --tracking-tight: -0.025em; --leading-tight: 1.05; } /* -------------------------------------------------------------------------- OVERLAYS, RETIRED The grain is already off in this skin. The grid over the hero goes the same way: a ruled overlay across live content is the clearest date stamp on a dark page. -------------------------------------------------------------------------- */ .hero::after { background-image: none; } /* -------------------------------------------------------------------------- THE GROUND ITSELF One low-saturation tint on near-black, with the vignette pulled back so the page reads flat and deep rather than lit. -------------------------------------------------------------------------- */ body { background-image: radial-gradient(120% 56% at 50% -8%, var(--b-rim-faint) 0, transparent 58%), radial-gradient(150% 100% at 50% 42%, transparent 44%, var(--b-cast-40) 92%, var(--b-cast-60) 100%); } /* -------------------------------------------------------------------------- MASTHEAD Solid near-black at 92%, one hairline along the bottom, no rim light and no inner chamfer. The bar should be the quietest thing on the page. -------------------------------------------------------------------------- */ .masthead { background-image: none; background-color: color-mix(in srgb, var(--ink-900) 92%, transparent); box-shadow: inset 0 -1px 0 var(--m-hairline); } /* -------------------------------------------------------------------------- MODULES Flat face, one hairline, a faint highlight along the top edge, and the wider softer cast from the token above. The card's own hover glow is gone; the lift and the brightening edge carry the interaction on their own. -------------------------------------------------------------------------- */ .card, .screenshot, .flash-panel { box-shadow: inset 0 1px 0 var(--m-hairline), inset 0 0 0 1px var(--m-hairline-soft), var(--b-studio-cast); } a.card:hover, .card-interactive:hover { box-shadow: inset 0 1px 0 var(--m-hairline), inset 0 0 0 1px var(--m-hairline), var(--b-studio-cast); } /* The top-edge sweep loses its bright core and becomes a plain hairline highlight, which is what a flat card in this idiom actually has. */ .card::before { background: linear-gradient(90deg, transparent, var(--m-hairline), var(--m-hairline), transparent); opacity: 0.9; } /* -------------------------------------------------------------------------- LINKS Keep the accent hairline under the text. Drop the bloom behind it. -------------------------------------------------------------------------- */ .prose a:hover, .card-body a:hover { box-shadow: 0 1px 0 var(--color-accent); } /* -------------------------------------------------------------------------- BUTTONS Pill shape, press travel and the cyan primary all stay. What goes is the gloss sheeting down the face: a pressable surface now carries one crisp highlight along its top edge and an otherwise flat face. -------------------------------------------------------------------------- */ .btn::before { background: linear-gradient(180deg, var(--b-glass-16) 0 1px, transparent 1px); -webkit-mask-image: none; mask-image: none; } .btn-secondary::before { background: linear-gradient(180deg, var(--m-hairline) 0 1px, transparent 1px); } /* The secondary key becomes an outline pill: a near-flat face barely off the ground, ringed by the same hairline every other container uses. The press travel and the moulded active state are untouched, so it still behaves like a key - it just stops competing with the primary one for attention. */ .btn-secondary { background-image: none; background-color: color-mix(in srgb, var(--b-face-2) 55%, transparent); text-shadow: none; box-shadow: inset 0 0 0 1px var(--m-hairline), inset 0 1px 0 var(--m-hairline); } .btn-secondary:hover { background-image: none; background-color: color-mix(in srgb, var(--b-face-1) 70%, transparent); } /* Its hover keeps the rim and loses the halo. */ .btn-secondary::after { box-shadow: inset 0 0 0 1px var(--m-hairline); } /* Primary: a flat cyan face with one white hairline on top. The glow under it is the one accent glow this view is allowed. */ .btn-primary { background-image: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-dim) 100%); box-shadow: inset 0 1px 0 var(--b-glass-70), 0 1px 1px var(--b-cast-40), 0 10px 26px -10px var(--color-glow-strong), 0 24px 48px -26px var(--b-cast-60); } /* -------------------------------------------------------------------------- FOOTER Darker than the page, with one hairline along the top and nothing else. -------------------------------------------------------------------------- */ .footer { background-image: none; background-color: var(--b-cast); box-shadow: inset 0 1px 0 var(--m-hairline); } .footer-base { box-shadow: inset 0 1px 0 var(--m-hairline-soft); } /* -------------------------------------------------------------------------- LABEL VOICE Eyebrows, legends and fact labels keep the mono voice and the uppercase tracking, and give up some of their strength. The eyebrow's accent is mixed toward the ground rather than dropped to a transparent opacity, so the result is still a solid measurable colour on every surface it lands on. -------------------------------------------------------------------------- */ .eyebrow { color: color-mix(in srgb, var(--color-accent) 72%, var(--ink-900)); } .eyebrow-index { color: color-mix(in srgb, var(--color-accent-dim) 78%, var(--ink-900)); } .eyebrow::after { background: var(--m-hairline); } /* -------------------------------------------------------------------------- SPACE AND SCALE On a wide viewport only: sections stand further apart, and the two display sizes step up. Below 60rem nothing changes - a phone has neither the room for the air nor the width for the larger headline. -------------------------------------------------------------------------- */ @media (min-width: 60rem) { :root { --space-section: clamp(5.5rem, 11vw, 10rem); --size-2xl: clamp(2.25rem, 1.8rem + 2.2vi, 3.375rem); --size-3xl: clamp(2.5rem, 1.8rem + 3.5vi, 4.125rem); } } /* -------------------------------------------------------------------------- Nothing above introduces motion of its own; these blocks make sure nothing above survives into a mode that does not want it. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .btn::before, .btn::after, .card::before { transition: none; } } @media (forced-colors: active) { .masthead, .card, .screenshot, .flash-panel, .footer, .footer-base, .btn-primary, a.card:hover, .card-interactive:hover { box-shadow: none; } .btn::before, .btn-secondary::before, .btn-secondary::after, .card::before, .eyebrow::after { background: none; } .masthead { border-bottom: 1px solid CanvasText; } .footer { border-top: 1px solid CanvasText; } .eyebrow, .eyebrow-index { color: CanvasText; } }