/** * Proffer Studio design tokens — dark. * * Reworked from the earlier light-theme version to match the loading screen's * near-black field. Every value is named once here so a future mobile app * consumes the same tokens rather than a designer eyeballing a screenshot. * No page should contain a raw hex code. */ /* =========================================================================== THEME Dark is the default. Light is opt-in via data-theme="light" on , so a first paint is never a white flash for the majority case. Both themes define the same token names — nothing downstream needs to know which is active. =========================================================================== */ :root, :root[data-theme="dark"] { color-scheme: dark; /* ---- Color ---- */ --bg: #0A0A0C; /* page field — near black, not pure, easier on the eye */ --bg-raised: #131317; /* cards, elevated surfaces */ --bg-inset: #08080A; /* recessed wells, video letterbox */ --paper: #F2F0EB; /* primary text — warm off-white, not stark white */ --graphite: #8A8A8C; /* secondary text — neutral gray */ --graphite-dim: #7C7C7E; /* tertiary — 4.7:1 on --bg, clears WCAG AA */ --rule: #232329; /* hairlines, borders */ --rule-bright: #34343C; /* hover borders */ --silver: #D8DAE0; /* particle light at full density */ --silver-dim: #85858A; /* particle light scattered — neutral gray */ /* Glass. Values tuned for a dark field: a light film over darkness. */ --glass-fill: rgba(255,255,255,.055); --glass-edge: rgba(255,255,255,.11); /* Nav sits over changing content, so it needs real opacity, not card alpha. */ --nav-fill: rgba(18,18,21,.88); /* The pill's outline. Deliberately faint: it is a seam, not a frame. At .18 it read as a hard hairline along the top edge — the light-on-dark sliver — because that edge is where the outline meets the page rather than the nav's own shadow. Definition comes from the fill and the drop shadow; the border only needs to stop the shape dissolving. */ --nav-edge: rgba(255,255,255,.10); --nav-ink: rgba(242,240,235,.78); /* rest-state label ink — the pill was reading as unclear in both themes */ --nav-ink-hi: #F2F0EB; --glass-spec: rgba(255,255,255,.16); /* the top-edge highlight */ /* The pointer glow, deliberately separate from --glass-spec. The edge highlight is white in both themes because it models light landing on a lip. The glow models light gathering under the cursor, so on a light surface it has to DARKEN — a white glow on white is nothing at all. */ --glass-glow: rgba(255,255,255,.16); --glass-blur: 18px; --glass-sat: 150%; --marker: #D8DAE0; /* accent is silver, not blue — dark mode is monochrome */ --marker-deep: #2A2B31; /* accent fill — neutral, no hue */ --warn: #E0A26B; --danger: #E8776B; /* form errors — was hardcoded in four pages */ --ok: #7FBF95; /* ---- Type ---- */ --font-display: 'Instrument Serif', Georgia, serif; --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-annot: 'IBM Plex Mono', ui-monospace, monospace; --text-xs: 11px; --text-sm: 13px; --text-base: 16px; --text-lg: 20px; --text-xl: 28px; --text-2xl: clamp(34px, 5vw, 52px); --text-3xl: clamp(44px, 8vw, 92px); /* ---- Spacing (4px base) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px; --space-9: 112px; --space-10: 160px; /* ---- Radius / borders ---- */ /* Softer throughout. 3px read as a hard corner on anything larger than a badge; these keep the drawing-office precision while removing the edge. */ --radius-sm: 6px; --radius-md: 14px; --radius-lg: 22px; --radius-xl: 28px; /* large panels and cards */ --border-hairline: 1px solid var(--rule); /* ---- Layout ---- */ --content-max: 1180px; --nav-height: 68px; /* ---- Motion ---- */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --dur-fast: 180ms; --dur-base: 320ms; --dur-slow: 640ms; } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; background: var(--bg); color: var(--paper); font-family: var(--font-ui); font-size: var(--text-base); line-height: 1.6; } a { color: inherit; text-decoration: none; } ::selection { background: var(--marker-deep); color: var(--paper); } /* ---- Shared primitives ---- */ .container { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-6); } /* The mono annotation label — carried over from the pitch document's plate numbering system. This is the brand's own vernacular, not decoration. */ .eyebrow { font-family: var(--font-annot); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--marker); } .label { font-family: var(--font-annot); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); } .display { font-family: var(--font-display); font-weight: 400; line-height: 1.02; letter-spacing: -0.02em; } .muted { color: var(--graphite); } /* ---- Nav ---- */ .nav-mark { font-family: var(--font-display); font-size: 22px; letter-spacing: 0.045em; /* widened slightly — deliberate, not a default */ } .nav-links a:not(.btn) { font-family: var(--font-annot); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); transition: color var(--dur-fast) var(--ease-out); } .nav-links a:not(.btn):hover { color: var(--paper); } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-annot); font-size: var(--text-xs); letter-spacing: 0.09em; text-transform: uppercase; padding: 14px 26px; /** * The pill, everywhere. * * .btn was --radius-sm (12px) while the landing page, the nav and the mode * chips were all 999px — so the same product showed five different button * shapes depending on which page you were on: 0, 3, 6, 12 and 999. None of * them was wrong on its own, which is exactly how it happened. */ border-radius: 999px; border: 1px solid var(--rule-bright); background: transparent; color: var(--paper); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .btn:hover { border-color: var(--marker); color: var(--marker); } /* .btn:active superseded — see the weighted hover block. */ .btn-primary { background: var(--paper); color: var(--bg); border-color: var(--paper); } .btn-primary:hover { background: var(--marker); border-color: var(--marker); color: var(--bg); } .btn-block { display: flex; width: 100%; } /* Group headings inside a plan list. A flat list of eleven features reads as noise; three headings naming the MOMENT each group solves let someone find themselves in it — which is what actually decides an upgrade. */ .tier li.tier-head { list-style: none; margin: var(--space-4) 0 var(--space-1); padding: 0; border: 0; font-family: var(--font-annot); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--graphite-dim); } .tier li.tier-head:first-of-type { margin-top: var(--space-3); } /* Why a package failed, on the card itself. A toast lasts six seconds and then the user is left with a red FAILED badge and no idea whether the fault is theirs, ours, or a missing API credit — which is exactly the state that produces a support email. */ /* Sits inside the card now, below the status pill. The negative margin and the horizontal padding were compensating for being a separate grid cell. */ .course-why { font-family: var(--font-annot); font-size: 11px; line-height: 1.45; color: var(--graphite); margin-top: var(--space-3); border-top: 1px solid var(--rule); padding-top: var(--space-3); } /* A capability label on a control the current plan cannot use. Shown INSTEAD of letting the click fail — a limit you are told about is a pricing fact, a limit you discover by clicking is a bug. */ .pro-tag { font-family: var(--font-annot); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; margin-left: 6px; border-radius: 999px; border: 1px solid var(--rule); color: var(--graphite); } /* ---- Scroll reveal ---- */ /** * VISIBLE BY DEFAULT. The hiding is added by script, not by CSS. * * This used to be `opacity: 0` with JavaScript revealing each section as it * scrolled into view — which means a page whose script is slow, blocked or * broken renders its nav and its footer with NOTHING in between. That is not a * degraded page, it is an empty one, and it happened on the first load of the * live site: content sections invisible until a refresh. * * Inverted, the failure mode is right. No JavaScript means the page appears in * full without an animation, which nobody notices. The `.js-reveal` class is * set on by the same script that installs the observer, so the sections * only ever hide when something is definitely there to show them again. */ .reveal { transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .js-reveal .reveal:not(.in) { opacity: 0; transform: translateY(22px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } /* animation-iteration-count matters as much as the duration. Collapsing an INFINITE animation to 0.01ms does not stop it — it runs forever at a frame-length nobody sees, so the compositor keeps waking up. On a phone that is a battery cost paid by exactly the person who asked for less motion. Clamping the count is what actually ends it. */ *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---- Footer ---- */ .site-footer { border-top: var(--border-hairline); margin-top: var(--space-10); padding: var(--space-7) 0 var(--space-8); } .site-footer .container { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-6); flex-wrap: wrap; } .footer-mark { font-family: var(--font-display); font-size: 40px; color: var(--rule-bright); line-height: 1; } .footer-meta { font-family: var(--font-annot); font-size: var(--text-xs); color: var(--graphite-dim); letter-spacing: 0.06em; } /* ============================================================================ ATMOSPHERE The loading reel has texture, depth and color presence. Flat near-black with hairlines reads as a wireframe next to it. Everything below exists to carry that same density into the pages themselves. ============================================================================ */ /* ---- Mode palettes, lifted from the loading reel ---- */ .theme-architecture { --mode-bg: var(--bg); /* was a mode tint — now matches the site field */ --mode-bg-deep: var(--bg); --mode-line: #D8DAE0; --mode-glow: rgba(216, 218, 224, 0.05); --mode-accent: #D8DAE0; } .theme-art { --mode-bg: var(--bg); /* was a mode tint — now matches the site field */ --mode-bg-deep: var(--bg); --mode-line: #8FD65F; --mode-glow: rgba(143, 214, 95, 0.05); --mode-accent: #9ED97A; } .theme-product { --mode-bg: var(--bg); /* was a mode tint — now matches the site field */ --mode-bg-deep: var(--bg); --mode-line: #E8B84B; --mode-glow: rgba(232, 184, 75, 0.05); --mode-accent: #E8B84B; } .theme-fashion { --mode-bg: var(--bg); /* was a mode tint — now matches the site field */ --mode-bg-deep: var(--bg); --mode-line: #C97B93; --mode-glow: rgba(201, 123, 147, 0.05); --mode-accent: #D98CA0; } .theme-connect { --mode-bg: var(--bg); /* was a mode tint — now matches the site field */ --mode-bg-deep: var(--bg); --mode-line: #5FC7B4; --mode-glow: rgba(216, 218, 224, 0.05); --mode-accent: #5FC7B4; } /* Default so pages without a mode class still resolve every var */ body { --mode-bg: var(--bg); --mode-bg-deep: var(--bg); --mode-line: var(--marker); --mode-glow: rgba(216, 218, 224, 0.05); --mode-accent: var(--marker); } /* ---- Textures, one per mode, matching the reel's backgrounds ---- */ .tex { position: fixed; inset: 0; z-index: 0; pointer-events: none; transition: opacity var(--dur-slow) var(--ease-out); } .tex-content { position: relative; z-index: 1; } /* Blueprint grid — architecture */ .tex-blueprint { background-color: var(--mode-bg-deep); background-image: linear-gradient(rgba(216,218,224,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(216,218,224,.045) 1px, transparent 1px), linear-gradient(rgba(216,218,224,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(216,218,224,.022) 1px, transparent 1px); background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px; } /* Canvas weave — art */ .tex-canvas { background-color: var(--mode-bg-deep); background-image: repeating-linear-gradient(45deg, rgba(232,220,196,.030) 0 1px, transparent 1px 9px), repeating-linear-gradient(-45deg, rgba(232,220,196,.030) 0 1px, transparent 1px 9px); } /* Pegboard — product */ .tex-pegboard { background-color: var(--mode-bg-deep); background-image: radial-gradient(circle, rgba(232,184,75,.09) 1.4px, transparent 1.6px); background-size: 34px 34px; } /* Fabric weave — fashion */ .tex-weave { background-color: var(--mode-bg-deep); background-image: repeating-linear-gradient(0deg, rgba(242,228,234,.035) 0 1px, transparent 1px 6px), repeating-linear-gradient(90deg, rgba(242,228,234,.028) 0 1px, transparent 1px 6px); } /* Circuit — connect */ .tex-circuit { background-color: var(--mode-bg-deep); background-image: linear-gradient(rgba(216,218,224,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(216,218,224,.04) 1px, transparent 1px); background-size: 48px 48px; } /* Atmospheric wash — sits over the texture, gives the field depth instead of a uniform flat plane. Radial so the center lifts and the edges fall away. */ .tex-wash { background: radial-gradient(ellipse 90% 60% at 50% 0%, var(--mode-glow), transparent 65%), radial-gradient(ellipse 70% 50% at 50% 100%, var(--mode-glow), transparent 60%); } /* Vignette — pulls focus to the center, stops the frame feeling like it just ends */ .tex-vignette { background: radial-gradient(ellipse 120% 90% at 50% 45%, transparent 40%, rgba(0,0,0,.55) 100%); } /** * Scroll edge. Content dims as it slides under the floating pill — Apple's * scroll-edge effect, built from the page's own background color rather than * a second backdrop sample, so it is theme-correct by construction and adds no * GPU surface. * * IT MUST LIVE IN THE SAME STACKING CONTEXT AS THE NAV. On body it did not: * app pages wrap everything in `.tex-content`, which has `z-index: 1` and so * opens its own stacking context. The nav's z-index 60 is scoped INSIDE that * context, while a body pseudo-element at z-index 40 sits outside it — so the * gradient painted over the entire wrapper, nav included, and washed the pill's * labels out. Measured: the same "Community" link rendered at ink mean 154 * against 119 on the marketing page, which has no wrapper and was therefore * unaffected. Two identical navs, visibly different weight. * * So it is attached to the wrapper on app pages and to body only where no * wrapper exists. Both branches then sit below the nav in their own context. */ .tex-content::before, body:not(:has(.tex-content))::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 76px; z-index: 40; pointer-events: none; /* Plain fallback first — a declaration containing color-mix is dropped whole by browsers without it, and while losing the scroll dim is harmless, a sweep with a standing warning is a sweep people stop reading. */ background: linear-gradient(180deg, rgba(10,10,12,.82), transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 82%, transparent), transparent); } /* :has() is unsupported before Firefox 121, and one bad selector invalidates a whole comma list — so the marketing fallback is declared separately and the worst case there is simply no scroll edge, never a broken rule. */ @supports not selector(:has(*)) { body::before { content: none; } } /* ---- Surfaces with real depth ---- */ .panel-accent { border-color: color-mix(in srgb, var(--mode-accent) 38%, transparent); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 0 0 1px color-mix(in srgb, var(--mode-accent) 10%, transparent), 0 18px 52px rgba(0,0,0,.55); } /* Corner ticks — the drafting-mark motif from the pitch document, used as a frame detail so panels read as drawn plates rather than generic cards. */ .ticked { position: relative; } /* The ticks themselves are defined AFTER the specular-sheen rules (search ".panel.ticked::before") — both jobs share ::before, and whichever rule comes later owns the pseudo, so they are written as one rule down there. */ /* ---- Inputs, themed ---- */ .field-input { width: 100%; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--paper); background: rgba(0,0,0,.34); border: 1px solid rgba(255,255,255,.10); border-radius: var(--radius-sm); padding: 11px 13px; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .field-input::placeholder { color: var(--graphite-dim); } .field-input:focus { outline: none; border-color: var(--mode-accent); background: rgba(0,0,0,.5); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mode-accent) 14%, transparent); } textarea.field-input { min-height: 78px; resize: vertical; line-height: 1.55; } /* ---- Accent button, follows the active mode ---- */ /* The primary action button. It previously used --mode-accent, which meant a blue button in light mode (architecture's light accent is #2F5580) with hardcoded near-black text — both inconsistent with every other primary action and poor contrast. It now follows the same inverse-of-background rule as .btn-primary, so it is off-white with dark text on the dark theme and near-black with light text on the light theme, automatically, with no per-mode special-casing. The mode's color still appears — as the focus ring below. */ .btn-mode { background: var(--paper); border-color: var(--paper); color: var(--bg); } .btn-mode:hover { background: var(--paper); /* fallback — see .panel note on color-mix */ background: color-mix(in srgb, var(--paper) 88%, var(--bg)); border-color: var(--paper); border-color: color-mix(in srgb, var(--paper) 88%, var(--bg)); color: var(--bg); } .btn-mode:focus-visible { outline: 2px solid var(--mode-accent); outline-offset: 2px; } /* ---- Plate figure caption, carried from the pitch document ---- */ .fig-cap { display: flex; gap: var(--space-3); align-items: baseline; padding-top: 7px; margin-top: 9px; border-top: 1px solid rgba(255,255,255,.10); font-family: var(--font-annot); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; } .fig-cap .no { color: var(--mode-accent); } .fig-cap .name { color: var(--graphite); } /* ============================================================================ FUNCTIONAL UI ============================================================================ */ /* ---- Badges: mock vs live provenance. Always visible where output is shown. */ .badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-annot); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; border: 1px solid; white-space: nowrap; } .badge-mock { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); } .badge-live { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 10%, transparent); } .badge-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); } .badge-pass { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); } .badge-fail { color: #E8776B; border-color: rgba(232,119,107,.45); background: rgba(232,119,107,.1); } /* ---- Toasts ---- */ .toast-host { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 200; display: flex; flex-direction: column; gap: var(--space-2); } .toast { font-family: var(--font-annot); font-size: var(--text-xs); letter-spacing: .04em; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--bg-raised); border: 1px solid rgba(255,255,255,.12); color: var(--paper); box-shadow: 0 12px 34px rgba(0,0,0,.5); opacity: 0; transform: translateY(8px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .toast.in { opacity: 1; transform: none; } .toast-ok { border-color: color-mix(in srgb, var(--ok) 40%, transparent); } .toast-warn { border-color: color-mix(in srgb, var(--warn) 40%, transparent); } /* ---- Nav active state ---- */ .nav-links a:not(.btn).on { color: var(--paper); } /* ---- Issue list (validation feedback) ---- */ .issue { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-3); padding: var(--space-2) 0; font-size: var(--text-xs); } .issue .k { font-family: var(--font-annot); font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--warn); } .issue .v { color: var(--graphite); } /* ---- Editable narrative field ---- */ .edit-area { width: 100%; background: transparent; border: 1px solid transparent; color: inherit; font: inherit; line-height: inherit; resize: vertical; border-radius: var(--radius-sm); padding: 8px 10px; margin: -8px -10px; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .edit-area:hover { border-color: rgba(255,255,255,.09); } .edit-area:focus { outline: none; border-color: var(--mode-accent); background: rgba(0,0,0,.28); } /* ---- Meter ---- */ .meter { height: 3px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; } /* Fill rides the compositor: scaleX instead of width, so a quota tick never costs a layout pass. The origin pins growth to the left edge — the only direction a meter reads. */ .meter-fill { height: 100%; width: 100%; background: var(--mode-accent); border-radius: 2px; transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-base) var(--ease-out); } .meter-fill.over { background: var(--warn); } /* ---- Empty state ---- */ .empty { text-align: center; padding: var(--space-9) var(--space-6); border: 1px dashed rgba(255,255,255,.14); border-radius: var(--radius-md); } .empty h3 { font-family: var(--font-display); font-size: var(--text-xl); margin: 0 0 var(--space-2); } .empty p { color: var(--graphite); font-size: var(--text-sm); max-width: 44ch; margin: 0 auto var(--space-5); } /* ---- Modal ---- */ .modal-backdrop { position: fixed; inset: 0; z-index: 150; display: none; align-items: center; justify-content: center; padding: var(--space-5); background: rgba(4,4,6,.72); backdrop-filter: blur(6px); } .modal-backdrop.open { display: flex; } .modal { width: 100%; max-width: 460px; padding: var(--space-6); } .modal h3 { font-family: var(--font-display); font-size: var(--text-xl); margin: 0 0 var(--space-2); } .modal p { color: var(--graphite); font-size: var(--text-sm); margin: 0 0 var(--space-5); } /* ---- Segmented control ---- */ .seg { display: inline-flex; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-sm); overflow: hidden; } /* Segmented controls read as one pill split into parts, rather than square tabs sitting inside a rounded frame. */ .seg { border-radius: 999px; overflow: hidden; } .seg button { font-family: var(--font-annot); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; padding: 8px 14px; background: transparent; border: none; color: var(--graphite); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .seg button.on { background: var(--mode-accent); color: #0A0A0C; } .seg button:not(.on):hover { color: var(--paper); } /* ---- Print: the pitch document export ---- */ @media print { .site-nav, .tex, .toast-host, .no-print, .modal-backdrop { display: none !important; } body { background: #fff !important; color: #16181C !important; } .panel { background: #fff !important; border-color: #DEDFE2 !important; box-shadow: none !important; } .tex-content { position: static; } a { color: inherit !important; } } /* =========================================================================== LIGHT THEME Not an inversion. On white, the same visual ideas need different physics: glass becomes a dark film over light rather than a light film over dark, and the particle marks go graphite/metallic instead of silver, because silver on white is invisible. =========================================================================== */ :root[data-theme="light"] { color-scheme: light; --bg: #FBFBFC; --bg-raised: #FFFFFF; --bg-inset: #F1F1F3; --paper: #131417; /* text — near-black, not pure */ --graphite: #5E5E62; /* neutral gray */ --graphite-dim: #717175; /* 4.6:1 on --bg, clears WCAG AA */ --rule: #E2E3E7; --rule-bright: #CDCFD5; --marker: #3A3A3E; /* accent is graphite, not blue — matches dark mode being monochrome */ --marker-deep: #E6E6E8; /* neutral fill */ --warn: #A2571F; --danger: #B4342A; /* darkened for contrast on white */ --ok: #2C6B45; --silver: #22242A; /* particle at full density — near-black */ --silver-dim: #ACACB0; /* scattered — neutral mid gray */ --glass-fill: rgba(19,20,23,.045); --glass-edge: rgba(19,20,23,.05); /* see --lg-depth: two dark rings stacked */ --nav-fill: rgba(252,252,253,.96); /** * Light mode defines the pill by its FILL, not an outline. * * Any dark border here is darker than both the page above it and the sheen * below it, so the top edge reads page(245) -> border(232) -> sheen(254): a * dark line sandwiched between two brighter bands. That non-monotonic dip is * the sliver. Dark mode has no such problem — there the sequence rises * cleanly, 9 -> 41 -> 103 -> falloff — which is why the same token can be * visible there and must not be here. * * The pill still reads as a distinct object: its fill sits ~9 luminance * steps above the page, and the drop shadow carries the lower edge. */ --nav-edge: rgba(19,20,23,.03); --nav-ink: rgba(19,20,23,.74); --nav-ink-hi: #131417; --glass-spec: rgba(255,255,255,.75); --glass-glow: rgba(19,20,23,.10); /* darkens on light surfaces */ --glass-blur: 16px; --glass-sat: 130%; } /* Mode accents need darkening on white or they vibrate. */ :root[data-theme="light"] .theme-architecture { --mode-bg:var(--bg); --mode-bg-deep:var(--bg); --mode-line:#55555A; --mode-glow:rgba(85,85,90,.06); --mode-accent:#55555A; } :root[data-theme="light"] .theme-art { --mode-bg:var(--bg); --mode-bg-deep:var(--bg); --mode-line:#3F6B2A; --mode-glow:rgba(63,107,42,.07); --mode-accent:#3F6B2A; } :root[data-theme="light"] .theme-product { --mode-bg:var(--bg); --mode-bg-deep:var(--bg); --mode-line:#8A6212; --mode-glow:rgba(138,98,18,.07); --mode-accent:#8A6212; } :root[data-theme="light"] .theme-fashion { --mode-bg:var(--bg); --mode-bg-deep:var(--bg); --mode-line:#8E3F58; --mode-glow:rgba(142,63,88,.07); --mode-accent:#8E3F58; } :root[data-theme="light"] .theme-connect { --mode-bg:var(--bg); --mode-bg-deep:var(--bg); --mode-line:#1F6B60; --mode-glow:rgba(31,107,96,.07); --mode-accent:#1F6B60; } :root[data-theme="light"] body { --mode-bg:var(--bg); --mode-bg-deep:var(--bg); --mode-line:var(--marker); --mode-glow:rgba(90,90,95,.05); --mode-accent:var(--marker); } /* Textures are drawn for a dark field; lighten their strokes on white. */ :root[data-theme="light"] .tex-blueprint { background-image: linear-gradient(rgba(90,90,95,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(90,90,95,.07) 1px, transparent 1px), linear-gradient(rgba(90,90,95,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(90,90,95,.035) 1px, transparent 1px); } :root[data-theme="light"] .tex-canvas { background-image: repeating-linear-gradient(45deg, rgba(19,20,23,.035) 0 1px, transparent 1px 9px), repeating-linear-gradient(-45deg, rgba(19,20,23,.035) 0 1px, transparent 1px 9px); } :root[data-theme="light"] .tex-pegboard { background-image: radial-gradient(circle, rgba(138,98,18,.11) 1.4px, transparent 1.6px); } :root[data-theme="light"] .tex-weave { background-image: repeating-linear-gradient(0deg, rgba(19,20,23,.04) 0 1px, transparent 1px 6px), repeating-linear-gradient(90deg, rgba(19,20,23,.03) 0 1px, transparent 1px 6px); } :root[data-theme="light"] .tex-circuit { background-image: linear-gradient(rgba(31,107,96,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(31,107,96,.06) 1px, transparent 1px); } :root[data-theme="light"] .tex-vignette { background: radial-gradient(ellipse 120% 90% at 50% 45%, transparent 45%, rgba(19,20,23,.07) 100%); } /* =========================================================================== GLASS Liquid-Glass-inspired, deliberately restrained. Apple's actual implementation uses a private CSS property (-apple-visual-effect) gated behind a WebKit preference — it does not work on the open web, so every web version is an approximation via backdrop-filter. Applied to CHROME ONLY (nav, panels, modals), never behind body text: the widely-noted criticism of the real thing is legibility, and this is a landing page that has to convert. The specular top edge is what reads as glass rather than as a plain blur. =========================================================================== */ .glass { position: relative; background: var(--glass-fill); border: 1px solid var(--glass-edge); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); } /* Light catching the top edge — the single cue that sells glass over blur. */ .glass::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, var(--glass-spec) 0%, transparent 42%); opacity: .5; } .glass > * { position: relative; z-index: 1; } .glass-strong { --glass-blur: 30px; --glass-sat: 175%; } .glass-quiet { --glass-blur: 10px; --glass-sat: 120%; } /* No backdrop-filter (older browsers, or forced-transparency off) — fall back to an opaque surface rather than unreadable text over a busy background. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--bg-raised); } .glass::before { display: none; } } /* Nav becomes glass in both themes. */ /* Menu tabs: transparent at rest, glass on hover/active — the "transparency on different tabs" ask, done so the active state is legible rather than just dim. */ .nav-links a:not(.btn) { color: var(--nav-ink); padding: 7px 12px; border-radius: 999px; border: 1px solid transparent; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } /** * Hover is a FILL, not an outline. * * It used to set border-color to --nav-edge (.18 alpha) over a background of * only .09 — an outline twice as strong as the shape it surrounded. The eye * read the edge rather than the fill, and along the top, where it meets the * nav's own specular sheen, it showed as a hard sliver: dark on the light * theme, light on the dark one. Measured 10 luminance steps away from the * pill's interior, on a fill that is only ~5 steps from the nav itself. * * The border stays transparent so the box never resizes, and the fill is * raised to carry the state on its own. */ .nav-links a:not(.btn):hover { background: rgba(255,255,255,.14); border-color: transparent; backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); } .nav-links a:not(.btn):hover { color: var(--nav-ink-hi); } /* The current page keeps a hairline, because unlike hover it has to be legible without the pointer anywhere near it. Softened to sit with the fill rather than shout over it. */ .nav-links a:not(.btn)[aria-current="page"] { background: rgba(255,255,255,.09); border-color: color-mix(in srgb, var(--nav-edge) 55%, transparent); color: var(--nav-ink-hi); } /* Panels inherit glass rather than the old flat gradient. */ .panel { /* The fill carries ~4% of the mode accent — the ambient color pickup Apple describes for large surfaces, so architecture glass and fashion glass are not the same material. A gradient (4% to 3%) rather than a flat tint, so it reads as light falling through, not as a painted wash. */ /* Plain fill first: a declaration containing color-mix() is discarded whole by browsers without it (Safari <16.2, Chrome <111, Firefox <113), which would leave this panel with NO background and its text sitting over the live particle canvas. Older browsers keep this line; newer ones override it with the accent-tinted version below. */ background: var(--glass-fill); background: linear-gradient(180deg, color-mix(in srgb, var(--mode-accent, transparent) 4%, transparent), color-mix(in srgb, var(--mode-accent, transparent) 3%, transparent)) var(--glass-fill); border: 1px solid var(--glass-edge); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); /* Thick glass: a hairline contour seats the slab, a close contact shadow grounds it, and the deep ambient one gives it the weight Apple assigns to larger elements. NO INSET SPEC LINE. It used to sit here as "light landing on the lip", but it lands on the same pixel as the 1px border AND the contour ring — three edges stacked on one row, which reads as a hard sliver across the top of every card rather than a lit edge. Exactly the fault fixed on the nav pill; this is where it survived, and it is what shows on the package cards. The border and the contour define the edge on their own. */ box-shadow: 0 0 0 1px var(--lg-depth), 0 2px 10px rgba(0,0,0,.20), 0 22px 56px rgba(0,0,0,.30); } :root[data-theme="light"] .panel { box-shadow: 0 0 0 1px var(--lg-depth), 0 10px 30px rgba(19,20,23,.07); } /* ---- Theme toggle ---- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; background: var(--glass-fill); border: 1px solid var(--glass-edge); color: var(--graphite); cursor: pointer; backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .theme-toggle:hover { color: var(--paper); border-color: var(--rule-bright); } .theme-toggle svg { width: 15px; height: 15px; } /* =========================================================================== BRAND LOCKUP — identity sheet PL-01/01 Mark at cap height on a shared baseline with the wordmark. Archivo Semibold, tracking -1%. The mark's body uses currentColor so it inverts with the theme: INK (#1B1C1E) on light, BONE (#EDEBE4) on dark. =========================================================================== */ .pw-lockup { display: inline-flex; align-items: center; gap: 0.34em; line-height: 1; /* Body color of the mark. Not --paper: the sheet specifies exact values. */ color: #EDEBE4; } :root[data-theme="light"] .pw-lockup { color: #1B1C1E; } .pw-lockup svg { display: block; flex: none; } .pw-wordmark { font-family: 'Archivo', var(--font-ui), sans-serif; font-weight: 600; letter-spacing: -0.01em; /* tracking -1% per the sheet */ font-size: 1.05em; } /* The nav mark is now the lockup, so drop the old serif treatment. */ /* =========================================================================== PILL NAV — floating, centered, glass A full-width bar gave the glass nothing to refract in light mode, so it read as a plain solid strip. A floating pill has page content passing behind it, which is the only way the material is legible at all. =========================================================================== */ .site-nav { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); /* Hugs its contents rather than claiming a fixed width — three buttons gives a narrow pill, five gives a wider one, with a ceiling so it can never span the whole viewport. */ width: max-content; max-width: calc(100vw - 32px); height: 58px; z-index: 60; border-radius: 999px; /* Own fill, not --glass-fill. The nav floats over the particle field, the hero and the page floor in turn; at the card-level alpha it went effectively transparent over the field and the cloud read straight through it. */ background: var(--nav-fill); border: 1px solid var(--nav-edge); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); /* NO inset specular line here. ::before already lays a sheen gradient that starts at full --glass-spec on row zero; adding a 1px inset highlight at the same row doubles it, and with the border underneath that is three light sources stacked on a single pixel. The result was a hard bright hairline across the top of the pill — the sliver — rather than a sheen that falls away. The gradient alone reads as glass; the line read as an edge someone forgot to remove. */ box-shadow: 0 10px 34px rgba(0,0,0,.28); overflow: hidden; /* clips the specular sheen to the pill */ } :root[data-theme="light"] .site-nav { box-shadow: 0 8px 26px rgba(19,20,23,.10); } /* Specular sheen along the top edge — the cue that reads as glass. */ .site-nav::before { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, var(--glass-spec) 0%, transparent 46%); opacity: .55; } .site-nav .container { position: relative; z-index: 1; max-width: none; height: 100%; padding: 0 10px 0 20px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } /* Mark only on the left, per spec. */ .site-nav .nav-mark { display: inline-flex; align-items: center; flex: none; } .nav-links { display: flex; align-items: center; } /* Content must clear the floating pill. */ .tex-content > .site-nav + * , .morph { scroll-margin-top: 90px; } @media (max-width: 720px) { .site-nav { height: 52px; top: 10px; } .nav-links a:not(.btn) { display: none; } /* keep the pill from wrapping */ } /* --------------------------------------------------------------------------- GLASS INTERACTION Pointer-tracked highlight, so hovering a control moves light across it rather than just changing a background color. Uses only transform/opacity and CSS custom properties, so it costs nothing per frame and behaves identically on macOS, iOS and Windows — this is standard backdrop-filter plus a radial gradient, not a platform-private API. --------------------------------------------------------------------------- */ .glass-hit { position: relative; overflow: hidden; isolation: isolate; } .glass-hit::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--dur-base) var(--ease-out); background: radial-gradient( var(--gr, 140px) circle at var(--gx, 50%) var(--gy, 50%), var(--glass-glow), transparent 70%); } .glass-hit:hover::after { opacity: .9; } /* Press: the material illuminates from within, starting under the pointer — feedback, not motion design, so it stays on under reduced motion. */ .glass-hit:active::after { opacity: 1; } /* Gel. Controls flex under the finger; panels never scale — only things sized for a fingertip. (.nav-links a:active already presses at .99.) */ .btn:active, .theme-toggle:active, .mode-card:active, .auth-tab:active, .tier:active { transform: scale(.985); } /* Buttons and tabs pick up the glass material. */ .btn, .nav-links a, .theme-toggle, .mode-card, .auth-tab { position: relative; overflow: hidden; } .btn:not(.btn-primary):not(.btn-mode) { background: var(--glass-fill); border-color: var(--glass-edge); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); } /* Pressed state: the material compresses slightly, the way a real control would. */ .nav-links a:active { transform: scale(0.99); } /* buttons handled below */ @media (prefers-reduced-motion: reduce) { .glass-hit::after { display: none; } } /* Three-state theme toggle: dark / light / auto. Only one icon shows at a time, selected by the MODE (not the resolved theme) so 'auto' is visibly distinct from whichever theme it happens to have resolved to. */ .theme-toggle .icon-sun, .theme-toggle .icon-moon, .theme-toggle .icon-auto { display: none; } :root[data-theme-mode="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme-mode="light"] .theme-toggle .icon-moon { display: block; } :root[data-theme-mode="auto"] .theme-toggle .icon-auto { display: block; } /* No mode attribute yet (first ever visit) — show the dark-mode icon. */ :root:not([data-theme-mode]) .theme-toggle .icon-sun { display: block; } /* =========================================================================== DASHBOARD — course-card layout Modelled on the pattern Canvas uses for course cards: a colored header band identifying the category, a white body with the title and meta, and actions pinned to the bottom edge. It works here for the same reason it works there — the color band lets you find the one you want by category before you have read a single word. =========================================================================== */ .dash-layout { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-6); align-items: start; } @media (max-width: 940px) { .dash-layout { grid-template-columns: 1fr; } } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: var(--space-4); } .course-card { display: flex; flex-direction: column; min-height: 0; border-radius: var(--radius-md); overflow: hidden; background: var(--glass-fill); /** * A softer edge than the shared glass value. * * Measured on a dark dashboard: page 11, border 49, fill 38 — the border sat * BRIGHTER than the surface it outlines, which reads as a line drawn on the * card rather than the edge of it. The category rule and the drop shadow * already say where the card stops. */ border: 1px solid color-mix(in srgb, var(--glass-edge) 55%, transparent); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); min-height: 0; } /* Superseded by the weighted hover block below — a 3px hop reads as a toggle. */ /* The color band. Category-coded, so the eye finds it before the text does. */ /** * NO COLORED STRIP. The category is the word above the title. * * This was a 3px band across the top, and it read as a rendering artefact — * reported as "the sliver" three times. Moving it to the left edge fixed the * measurement and was reported again on the fourth: a strip of color on this * card does not look deliberate wherever it is put. * * So the coding moves to the eyebrow, which already says ARCHITECTURE in * words directly beneath it. Text cannot be mistaken for an edge, the * information is identical, and one element now does the job two were sharing. */ .course-band { display: none; } .course-card { position: relative; } .course-band[data-mode="architecture"] { background: #A2A2A6; } .course-band[data-mode="art"] { background: #3B7A57; } .course-band[data-mode="product"] { background: #C6952F; } .course-band[data-mode="fashion"] { background: #B25F58; } .course-band[data-mode="connect"] { background: #35797B; } .course-body { padding: var(--space-5) var(--space-4) var(--space-4); flex: 1; display: flex; flex-direction: column; } .course-title { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.2; margin-bottom: 4px; } .course-meta { font-family: var(--font-annot); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--graphite); } .course-actions { display: flex; gap: var(--space-3); margin-top: auto; padding-top: var(--space-4); font-family: var(--font-annot); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; } /** * The whole card is one link, via a stretched overlay. Board and Document are * the only elements that need to beat it, so they alone get a z-index — and * they dress as small chips rather than bare words, because "tiny little * words" was the exact complaint: an action that looks like decoration. */ /** * Child selectors, not bare classes, because the glass specular block later in * this file lifts EVERY card child with `.course-card > * { position: * relative; z-index: 1 }` — equal specificity, later position, and it * silently flattened this overlay to `relative` (the panel-scoped-override * trap, in card form). Two consequences drive the shape here: * * 1. `.course-card > .course-link` (0,2,0) out-specifies the lift, so the * overlay actually gets to be absolute. * 2. `.course-body` must NOT form a stacking context: with the lift's * z-index:1 it does, and then the Board/Document chips inside it could * never paint above a sibling overlay — no z-index of theirs escapes * their parent's context. `z-index: auto` keeps the lift's visual * purpose (positioned content still paints above the specular ::before, * which is pointer-events: none anyway) while letting the chips join the * card's own context, where their z-index: 2 beats the overlay's 1. */ .course-card > .course-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .course-card > .course-link:focus-visible { outline: 2px solid var(--mode-accent); outline-offset: -2px; } .course-card > .course-body { z-index: auto; } /** * The footer's language row: quiet, wrapping, self-named. * * This block was spliced into the MIDDLE of the `.course-card > .course-link` * selector by the site-language build, which had two silent effects: the row * was scoped as `.course-card > .footer-lang` and so never matched anything on * the landing page, and `.course-link` lost its `.course-card >` prefix, * dropping to (0,1,0) where the specular lift later in this file out-specifies * it and flattens the whole-card click overlay. Both restored here. */ .footer-lang { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); font-family: var(--font-annot); font-size: 10px; letter-spacing: .07em; } .footer-lang a { color: var(--graphite-dim); } .footer-lang a:hover { color: var(--graphite); } .course-actions { position: relative; z-index: 2; } .course-actions a { color: var(--graphite); border: 1px solid color-mix(in srgb, var(--graphite) 40%, transparent); border-radius: 999px; padding: 3px 10px; } .course-actions a:hover { color: var(--mode-accent); border-color: color-mix(in srgb, var(--mode-accent) 55%, transparent); } .course-status { font-family: var(--font-annot); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; } .course-status.ready { color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); } .course-status.failed { color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); } .course-status.busy { color: var(--marker); border: 1px solid color-mix(in srgb, var(--marker) 45%, transparent); } /* New-package tile, same footprint as a card so the grid stays even. */ .course-new { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; /** * SAME CORNER AS THE PACKAGE CARDS BESIDE IT. * * This read --radius-md (14px), which looked right next to `.course-card`'s * own --radius-md rule — but a panel rule ~800 lines later gives every card * in the family (.course-card, .rail-card, .tier, .stat) --radius-xl, and * the create tile was never added to that list. Same specificity, later * position, so the cards rendered at 28px and the tile sat among them at * 14px: identical size, identical alignment, visibly different corners. * Taking the family's token directly keeps the two matched even if the * value changes. */ min-height: 132px; border-radius: var(--radius-xl); border: 1px dashed var(--rule-bright); color: var(--graphite); transition: border-color var(--dur-base), color var(--dur-base), transform var(--dur-base); } .course-new:hover { border-color: var(--marker); color: var(--marker); transform: translateY(-3px); } .course-new span:first-child { font-family: var(--font-display); font-size: 30px; line-height: 1; } /* Right rail: the "to do" column, again borrowed from the Canvas pattern. */ .dash-rail { display: grid; gap: var(--space-4); position: sticky; top: 96px; } .rail-card { padding: var(--space-5); border-radius: var(--radius-md); background: var(--glass-fill); border: 1px solid var(--glass-edge); } .rail-title { font-family: var(--font-annot); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--graphite); margin-bottom: var(--space-4); } .rail-item { display: grid; grid-template-columns: 8px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--rule); font-size: var(--text-sm); } .rail-item:first-of-type { border-top: none; } .rail-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mode-accent); margin-top: 6px; } .rail-item small { display: block; color: var(--graphite); font-family: var(--font-annot); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; } /* Upload / auto-assign dropzone. */ .assign-zone { border: 1px dashed var(--rule-bright); border-radius: var(--radius-md); padding: var(--space-5); text-align: center; cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); } .assign-zone:hover, .assign-zone.over { border-color: var(--marker); background: var(--glass-fill); } .assign-zone.busy { opacity: .6; pointer-events: none; } .assign-result { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--rule); font-size: var(--text-sm); display: none; } .assign-result.on { display: block; } .assign-conf { font-family: var(--font-annot); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--graphite); } /* On white, a white hover fill is invisible — the pill needs to darken instead. */ :root[data-theme="light"] .nav-links a:not(.btn):hover { background: rgba(19,20,23,.075); } :root[data-theme="light"] .nav-links a:not(.btn)[aria-current="page"] { background: rgba(19,20,23,.06); } /* =========================================================================== THE ISLAND Live state inside the nav pill. The pill is the only element on every page, so it is the right place for anything that outlives a single page — a half-written brief, a generation running in the background, one that finished while you were somewhere else. =========================================================================== */ .island-slot { display: none; align-items: center; gap: 6px; margin-left: auto; margin-right: var(--space-4); } .island-slot.on { display: flex; } .island { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 10px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid var(--nav-edge); max-width: 260px; transition: background var(--dur-fast) var(--ease-out), max-width var(--dur-base) var(--ease-out); } .island:hover { background: rgba(255,255,255,.12); } :root[data-theme="light"] .island { background: rgba(19,20,23,.05); } :root[data-theme="light"] .island:hover { background: rgba(19,20,23,.09); } .island-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; } /* Pulses only while work is actually running — a static dot for a finished package, so motion always means "in progress". */ .island-dot.pulsing { animation: islandPulse 1.5s var(--ease-in-out) infinite; } @keyframes islandPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.72); } } .island-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .island-label { font-family: var(--font-annot); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--graphite); } .island-name { font-size: 12px; color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; } .island-action { font-family: var(--font-annot); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--marker); flex: none; } .island-x { background: none; border: none; cursor: pointer; padding: 2px 6px; color: var(--graphite-dim); font-size: 15px; line-height: 1; } .island-x:hover { color: var(--paper); } @media (max-width: 860px) { .island-slot { margin-right: var(--space-3); } .island-text { display: none; } /* dot + action only on narrow */ .island { max-width: none; padding: 6px 10px; } } @media (prefers-reduced-motion: reduce) { .island-dot.pulsing { animation: none; } } /* =========================================================================== V7 — PILL SPACING + WIDER GLASS =========================================================================== */ /* The pill's controls were cramped at 4px. Real breathing room, and the pill itself gets more internal padding so nothing sits against the edge. */ .site-nav .container { padding: 0 var(--space-3) 0 var(--space-5); gap: var(--space-5); } .nav-links { } .nav-links a:not(.btn) { padding: 8px 15px; } .nav-links .btn { margin-left: var(--space-2); padding: 10px 20px; } .theme-toggle { margin-right: var(--space-2); } @media (min-width: 861px) { .site-nav { height: 62px; } .nav-links { gap: var(--space-3); } } /* ---- glass, applied more widely ---- Every raised surface now uses the material rather than a flat fill: form fields, the segmented control, the mode cards, dropzones, the island, and the app rail. The specular top edge is what distinguishes it from a plain blur, so it is applied to each rather than only to panels. */ .field-input, .assign-zone, .drop, .seg, .rail-card, .work-panel, .course-card, .stat, .app-rail, .tier, .auth-card { backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); } .field-input { background: var(--glass-fill); border-color: var(--glass-edge); } .field-input:focus { background: color-mix(in srgb, var(--glass-fill) 60%, rgba(0,0,0,.35)); } /** * Selects, tamed. * * The closed control and — worse — the OPEN POPUP of a