/* ========================================================= ATLAS SKIN — reskins the legacy Embr-Sleep pages (articles, pages, atlas compounds) into the Embr-modern "Lab" system. Load order on every legacy page: atlas-base.css → reset atlas-legacy.css → all component + layout styles (token-driven) atlas-skin.css → THIS FILE: remaps tokens to the new palette, swaps the display face, restyles the chrome. Because atlas-legacy.css is fully token-driven, overriding its :root / [data-theme] custom properties reskins ~100 pages at once. ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); /* ---------- TOKEN REMAP : DARK (default) ---------- */ :root, [data-theme='dark'] { --color-bg: #0C0B0A; --color-surface: #121110; --color-surface-2: #1A1817; --color-surface-offset: #121110; --color-surface-offset-2: #1A1817; --color-surface-dynamic: #211F1D; --color-divider: #2A2725; --color-border: #3A3633; --color-text: #EDE8DF; --color-text-muted: #9C948B; --color-text-faint: #67615B; --color-text-inverse: #0C0B0A; --color-primary: #57B0B5; --color-primary-hover: #7FCBCF; --color-primary-active: #7FCBCF; --color-primary-highlight:#15292A; --color-accent: #F15A24; --color-accent-hover: #FF8A3D; --color-accent-muted: #1A0E08; --color-ember-dark: #A06048; --color-sage: #1C2422; --color-tag-peer: #57B0B5; --color-tag-peer-bg: rgba(87,176,181,0.14); --color-tag-inferred: #E9B247; --color-tag-inferred-bg: rgba(233,178,71,0.13); --color-tag-spec: #9C948B; --color-tag-spec-bg: #211F1D; --shadow-sm: 0 1px 3px rgba(0,0,0,0.34); --shadow-md: 0 8px 30px -12px rgba(0,0,0,0.55); --shadow-lg: 0 30px 70px -30px rgba(0,0,0,0.7); --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'DM Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; } /* ---------- TOKEN REMAP : LIGHT ---------- */ [data-theme='light'] { --color-bg: #F4EEE3; --color-surface: #FAF6EE; --color-surface-2: #FFFFFF; --color-surface-offset: #F1EADC; --color-surface-offset-2: #F1EADC; --color-surface-dynamic: #EFE7D8; --color-divider: #D9D0BF; --color-border: #C6BBA4; --color-text: #171514; --color-text-muted: #645F58; --color-text-faint: #A29A8E; --color-text-inverse: #FFFFFF; --color-primary: #117C80; --color-primary-hover: #0C5E62; --color-primary-active: #094548; --color-primary-highlight:#D7E8E8; --color-accent: #E24E1B; --color-accent-hover: #F15A24; --color-accent-muted: #FBE9E1; --color-ember-dark: #6D2F1E; --color-sage: #DDE5DB; --color-tag-peer: #117C80; --color-tag-peer-bg: rgba(17,124,128,0.10); --color-tag-inferred: #6D5A0E; --color-tag-inferred-bg: #F5EDD4; --color-tag-spec: #645F58; --color-tag-spec-bg: #EDEBE6; --shadow-sm: 0 1px 3px rgba(40,30,20,0.07); --shadow-md: 0 8px 28px -14px rgba(40,30,20,0.16); --shadow-lg: 0 30px 60px -28px rgba(40,30,20,0.2); } /* ---------- DISPLAY TYPE — Space Grotesk wants tighter tracking ---------- */ h1, h2, h3, .site-logo, .article-header__title, .page-hero__title, .page-hero__eyebrow + *, .essay-card__title, .pillar__title, .section-title, .compound-hero__name { letter-spacing: -0.02em; } .article-header__title, .page-hero__title { letter-spacing: -0.032em; font-weight: 500; } /* mono eyebrows / metadata — the "instrument" tell */ .section-eyebrow, .article-header__category, .article-header__meta, .page-hero__eyebrow, .compound-hero__tag, .pillar__num, .essay-card__pillar, .article-breadcrumb, .breadcrumb, .read-next .section-eyebrow { font-family: var(--font-mono) !important; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.7rem; } .article-byline { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.01em; text-transform: none; } /* article titles + in-body headings must use the display face (legacy left them inheriting DM Sans, weakening the hierarchy) */ .article-header__title, .article-body h2, .article-body h3, .article-body__inner h2, .article-body__inner h3 { font-family: var(--font-display); } .article-body h2, .article-body h3, .article-body__inner h2, .article-body__inner h3 { font-weight: 500; letter-spacing: -0.02em; } /* ---------- HEADER (Carbon Ring) ---------- */ .site-header { background: color-mix(in oklab, var(--color-bg) 86%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .site-logo { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; } .site-logo__mark { width: 30px; height: 30px; color: var(--color-primary); filter: drop-shadow(0 0 10px color-mix(in oklab, var(--color-primary) 45%, transparent)); } .site-nav__link { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; } .nav-cta { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; background: var(--color-accent); color: var(--color-text-inverse) !important; box-shadow: 0 8px 24px -10px rgba(241,90,36,0.6); } .nav-cta:hover { background: var(--color-accent-hover); transform: translateY(-1px); } .theme-toggle { color: var(--color-text-muted); } .theme-toggle:hover { color: var(--color-primary); } /* ---------- HERO ATMOSPHERE — ember glow + measurement grid ---------- */ .page-hero, .article-header, .compound-hero { position: relative; background: radial-gradient(60% 130% at 82% -10%, rgba(241,90,36,0.12), transparent 60%), radial-gradient(50% 120% at 6% 0%, var(--color-tag-peer-bg), transparent 64%), var(--color-bg); } [data-theme='dark'] .page-hero, [data-theme='dark'] .article-header, [data-theme='dark'] .compound-hero { background: radial-gradient(60% 130% at 82% -10%, rgba(226,78,27,0.08), transparent 60%), var(--color-bg); } /* ---------- LINKS / PROSE ACCENTS ---------- */ .article-body a:not(.essay-card):not(.btn), .atlas-article-body a, .citations-list a, .atlas-sidebar-card a { color: var(--color-primary); text-decoration-color: color-mix(in oklab, var(--color-primary) 40%, transparent); } .article-body a:hover, .atlas-article-body a:hover { color: var(--color-primary-hover); } /* primary buttons get the ember signature */ .btn--primary, .button--primary, .cta-button { background: var(--color-accent) !important; color: var(--color-text-inverse) !important; box-shadow: 0 10px 30px -12px rgba(241,90,36,0.6); } .btn--primary:hover, .button--primary:hover { background: var(--color-accent-hover) !important; transform: translateY(-2px); } /* ---------- FOOTER ---------- */ .site-footer { border-top: 1px solid var(--color-divider); background: var(--color-surface); } .site-footer__brand-mark { color: var(--color-primary); width: 28px; height: 28px; } .site-footer__col-title { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-faint); } .site-footer__bottom { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.02em; } /* ---------- CARDS — subtle lift to match the new system ---------- */ .essay-card, .pillar, .read-next-grid > a { border: 1px solid var(--color-divider); transition: border-color .18s, transform .18s, background .18s; } .essay-card:hover, .read-next-grid > a:hover { border-color: var(--color-primary); transform: translateY(-3px); } .essay-card__read-more { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary); } /* keep selection on-brand */ ::selection { background: rgba(241,90,36,0.85); color: #fff; } /* ---------- INLINE-FONT NEUTRALIZE ---------- Legacy hero

s carry inline font-family:'Source Serif 4'. A stylesheet !important rule beats inline (non-important) styles, so this re-skins every inline serif heading to Space Grotesk. */ [style*="Source Serif"] { font-family: 'Space Grotesk', system-ui, sans-serif !important; font-weight: 500 !important; letter-spacing: -0.03em !important; } /* drop the legacy comment widget cleanly */ section:has(> .container > #disqus_thread), section:has(#disqus_thread) { display: none !important; } /* ---------- ATLAS HERO CARD (new-branded compound banner) ---------- */ .atlas-hero { max-width: 1080px; margin: 0 auto clamp(1.5rem, 4vw, 2.5rem); padding-inline: clamp(1.5rem, 5vw, 4rem); } .atlas-hero img { width: 100%; height: auto; display: block; border: 1px solid var(--color-divider); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } /* ========================================================= HEADER MOTIF — generative "molecular constellation" flare. A canvas of drifting nodes + bonds over a faint measurement grid, tinted by the page's category/family colour. Injected by atlas-main.js into every article / atlas / page header. ========================================================= */ .article-header, .compound-hero, .page-hero, .atlas-hero, main > div:first-of-type { position: relative; overflow: hidden; } /* lift real header content above the motif */ .article-header__inner, .compound-hero > *:not(.hdr-motif), .page-hero > *:not(.hdr-motif), main > div:first-of-type > *:not(.hdr-motif) { position: relative; z-index: 1; } .hdr-motif { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .hdr-motif::before { content: ''; position: absolute; inset: -1px; background-image: linear-gradient(var(--motif, #57B0B5) 1px, transparent 1px), linear-gradient(90deg, var(--motif, #57B0B5) 1px, transparent 1px); background-size: 40px 40px; opacity: 0.05; -webkit-mask-image: radial-gradient(125% 110% at 100% 0%, #000, transparent 68%); mask-image: radial-gradient(125% 110% at 100% 0%, #000, transparent 68%); } .hdr-motif canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; -webkit-mask-image: linear-gradient(90deg, transparent 4%, rgba(0,0,0,0.7) 42%, #000 100%); mask-image: linear-gradient(90deg, transparent 4%, rgba(0,0,0,0.7) 42%, #000 100%); } @media (max-width: 640px) { .hdr-motif canvas { -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 55%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 55%, #000 100%); opacity: 0.7; } } /* ========================================================= MOBILE REFINEMENTS — fix the cramped atlas layout + guard against horizontal overflow site-wide. Higher specificity than the per-page inline