/* ============================================================================ World Machine — dark design system (site-shared) Design tokens, page chrome, and generic primitives for the dark site theme. Pages opt in by calling wm_theme('dark') before wm_header(), which adds class="wm-dark" to and loads this file plus the theme's web fonts. Page-specific components live in per-page stylesheets (e.g. update/upgrade-dark.css) and use their own class prefix; everything in THIS file uses the wm- prefix. When a page-specific component turns out to be useful elsewhere, promote it here and rename its prefix to wm-. Scoping: tokens and chrome hang off body.wm-dark; content primitives hang off .wm-page, the full-bleed page wrapper each themed page renders. Until the whole site is converted, nothing here may style outside those scopes — the legacy (Bootstrap) pages must be unaffected. Loaded with a cache-busting query (css/wm-dark.css?v=N from wm_header) — bump N in designV2.php when editing this file. ============================================================================ */ body.wm-dark, .wm-page { /* ---- Brand (from the logomark) ---- */ /* Reds run ~50% saturation (originals from the logomark were 67-77%) so they sit with the muted gold and slate neutrals instead of fighting them. Hue and lightness are unchanged from the logo reds. */ --wm-terra-red: #A14936; --wm-terra-red-deep: #5C251D; --wm-terra-red-soft: #C56552; --wm-sand-gold: #C9A75A; --wm-sand-cream: #EFE3B8; /* ---- Slate-granite neutrals ---- */ --wm-earth-50: #F4F5F7; --wm-earth-100: #E4E6EA; --wm-earth-200: #C7CBD2; --wm-earth-300: #A0A6B0; --wm-earth-400: #737A86; --wm-earth-500: #4D5360; --wm-earth-600: #363B45; --wm-earth-700: #23272F; --wm-earth-800: #15181D; --wm-earth-900: #0A0C10; /* ---- Status ---- */ --wm-success: #6B8E3D; --wm-warning: #D89B2A; --wm-link: var(--wm-terra-red-soft); /* ---- Section background bands ---- */ --wm-band-deep: #0A0C10; --wm-band-mid: #161A22; --wm-card-bg: #262C38; --wm-divider: #23272F; /* ---- Type ---- */ --wm-font-display: "Barlow Condensed", "Oswald", "Roboto Condensed", "Impact", sans-serif; --wm-font-body: "Inter", "Helvetica Neue", "Arial", system-ui, sans-serif; --wm-font-mono: "JetBrains Mono", "SF Mono", "Consolas", "Monaco", monospace; } /* The body shows below the footer on short pages; match it to the footer's #1C1C1C (the footer itself keeps its site-wide look). */ body.wm-dark { background-color: #1C1C1C; } /* ---- Page wrapper ---- */ .wm-page { background: var(--wm-band-deep); color: var(--wm-earth-100); font-family: var(--wm-font-body); font-size: 16px; line-height: 1.55; /* Break out of the legacy-site .container so the dark theme is full-bleed. */ width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .wm-page *, .wm-page *::before, .wm-page *::after { box-sizing: border-box; } /* ---- Legacy chrome integration ---- The legacy `.nav_logo` is position:fixed, so its

collapses to zero height and the bar floats over the top of the content. On themed pages we instead let the bar take flow space (sticky → reserves its own height *and* still pins on scroll), so the dark sections begin right below it. */ body.wm-dark #layout > header { overflow: visible; } body.wm-dark .nav_logo { position: sticky; top: 0; /* The site-wide bar is #1C1C1C — same as the legacy body, where it reads as black. Next to this theme's deeper #0A0C10 bands it reads grey, so match it to the dark band instead. */ background: #0A0C10; } /* Keep the footer a footer: on short pages (e.g. login) stretch the content block so the footer sits at the bottom of the viewport instead of riding up under the content. #layout's direct children are header / .wm-page / footer. */ body.wm-dark #layout { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } body.wm-dark .wm-page { flex: 1 0 auto; display: flex; flex-direction: column; } /* Pass the stretch to the last band, so its bottom divider sits at the footer junction instead of stranded mid-page where the content ends. */ body.wm-dark .wm-page > .wm-band:last-child { flex: 1 0 auto; } /* Top menu: uppercase + the display face, to match the dark UI. */ body.wm-dark #menu a { font-family: var(--wm-font-display); text-transform: uppercase; font-weight: 600; letter-spacing: 0.08em; } /* ---- Layout: bands + centered inner wrapper ---- */ .wm-band { background: var(--wm-band-deep); border-bottom: 1px solid var(--wm-divider); } .wm-band--mid { background: var(--wm-band-mid); } /* No divider below this band — lets a status banner strip sit flush with the section below it instead of drawing a stray hairline between them. */ .wm-band--flush { border-bottom: none; } .wm-wrap { max-width: 1280px; margin: 0 auto; padding: 56px 80px; } .wm-wrap--tight { padding: 32px 80px; } /* ---- Section header ---- */ .wm-eyebrow { font-family: var(--wm-font-display); font-weight: 600; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wm-sand-gold); margin: 0 0 10px; } .wm-eyebrow--muted { color: var(--wm-earth-400); } .wm-head { margin-bottom: 24px; } .wm-head__row { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; } .wm-h2 { font-family: var(--wm-font-display); font-weight: 700; font-size: 32px; letter-spacing: 0.02em; text-transform: uppercase; margin: 0; color: var(--wm-earth-50); } .wm-h3 { font-family: var(--wm-font-display); font-weight: 700; font-size: 26px; letter-spacing: 0.02em; text-transform: uppercase; margin: 0; color: var(--wm-earth-50); } .wm-meta { font-family: var(--wm-font-mono); font-size: 12px; color: var(--wm-earth-400); } /* ---- Base typography ---- */ .wm-page p { margin: 0 0 12px; } .wm-page a { color: var(--wm-link); text-decoration: none; } .wm-page a:hover { color: var(--wm-terra-red-soft); } .wm-page code, .wm-page .wm-code { font-family: var(--wm-font-mono); font-size: 13px; background: rgba(255,255,255,0.06); padding: 2px 6px; border-radius: 2px; color: var(--wm-sand-gold); } .wm-page a.wm-link-inline { color: var(--wm-sand-gold); border-bottom: 1px solid currentColor; } .wm-lede { font-size: 17px; color: var(--wm-earth-200); line-height: 1.55; } /* ---- Buttons ---- */ .wm-btn { font-family: var(--wm-font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; border: none; cursor: pointer; border-radius: 8px; transition: all 120ms cubic-bezier(0.2, 0.7, 0.2, 1); display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; } /* Scoped with .wm-page so button text colour wins over the generic `.wm-page a` rule. */ .wm-page .wm-btn--primary { background: var(--wm-terra-red); color: var(--wm-earth-50); padding: 14px 24px; } .wm-page .wm-btn--primary:hover { background: var(--wm-terra-red-soft); color: var(--wm-earth-50); } .wm-btn--primary:active { transform: translateY(1px); } /* Outline gold: prominent by size and placement, not color mass. Fills solid on hover so the action still answers the pointer emphatically. */ .wm-page .wm-btn--gold { /* Faint fill: separates the action from look-alike toggle bars near it without going back to a solid color slab. */ background: rgba(201, 167, 90, 0.35); color: var(--wm-sand-gold); border: 1.5px solid rgba(201, 167, 90, 0.55); padding: 12.5px 22px; } .wm-page .wm-btn--gold:hover { background: var(--wm-sand-gold); border-color: var(--wm-sand-gold); color: var(--wm-earth-900); } .wm-page .wm-btn--ghost { background: transparent; color: var(--wm-earth-50); border: 1.5px solid var(--wm-earth-300); padding: 12.5px 22px; } .wm-page .wm-btn--ghost:hover { border-color: var(--wm-earth-50); color: var(--wm-earth-50); } .wm-btn--sm { padding: 9px 16px; font-size: 11px; letter-spacing: 0.1em; } .wm-btn--block { width: 100%; } .wm-btn-icon { flex-shrink: 0; } /* ---- Status banner ---- */ .wm-banner { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-radius: 4px; font-family: var(--wm-font-body); font-size: 14px; color: var(--wm-earth-100); } .wm-banner strong { font-weight: 700; color: var(--wm-earth-50); } .wm-banner a { color: var(--wm-sand-gold); border-bottom: 1px solid currentColor; } .wm-banner__icon { width: 22px; height: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 700; font-size: 13px; line-height: 1; font-family: var(--wm-font-body); } .wm-banner--active { background: rgba(107,142,61,0.20); } .wm-banner--active .wm-banner__icon { background: var(--wm-success); } .wm-banner--warning { background: rgba(216,155,42,0.22); } .wm-banner--warning .wm-banner__icon { background: var(--wm-warning); } .wm-banner--expired { background: rgba(161,73,54,0.22); } .wm-banner--expired .wm-banner__icon { background: var(--wm-terra-red); } .wm-banner--basic { background: rgba(255,255,255,0.08); } .wm-banner--basic .wm-banner__icon { background: var(--wm-earth-500); } .wm-banner__body { flex: 1; } /* ---- Forms ---- */ .wm-form { display: flex; flex-direction: column; gap: 14px; max-width: 460px; } .wm-label { font-family: var(--wm-font-display); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--wm-earth-300); } .wm-input { padding: 14px 16px; border: 1.5px solid var(--wm-earth-600); background: var(--wm-earth-800); color: var(--wm-earth-50); border-radius: 2px; font-family: var(--wm-font-mono); font-size: 15px; letter-spacing: 0.04em; outline: none; width: 100%; } .wm-input:focus { border-color: var(--wm-sand-gold); } .wm-form__actions { display: flex; align-items: center; gap: 16px; margin-top: 6px; flex-wrap: wrap; } .wm-textarea { display: block; width: 100%; max-width: 520px; min-height: 84px; resize: vertical; font-family: var(--wm-font-body); font-size: 14px; letter-spacing: normal; } /* ---- Aside + sidecards ---- */ .wm-aside { display: flex; flex-direction: column; gap: 24px; } .wm-sidecard { padding: 22px; background: rgba(255,255,255,0.03); border: 1px solid var(--wm-earth-700); border-radius: 4px; } .wm-sidecard--primary { background: var(--wm-terra-red-deep); border-color: var(--wm-terra-red); } .wm-sidecard h3 { font-family: var(--wm-font-display); font-weight: 700; font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 10px; color: var(--wm-earth-50); } .wm-sidecard--primary h3 { color: var(--wm-sand-cream); } .wm-sidecard p { font-size: 13px; line-height: 1.55; margin: 0 0 14px; color: var(--wm-earth-300); } .wm-sidecard--primary p { color: var(--wm-earth-200); } .wm-sidecard a { font-size: 13px; font-weight: 600; color: var(--wm-sand-gold); border-bottom: 1px solid currentColor; } /* ...but not on buttons living in a sidecard (e.g. a renewal-card CTA). */ .wm-sidecard a.wm-btn { border-bottom: none; } /* Sidecard CTA: solid terra-red-deep — the palette's strong-but-calm red — brightening to terra-red-soft on hover. */ .wm-page .wm-sidecard .wm-btn--primary { background: var(--wm-terra-red-deep); } .wm-page .wm-sidecard .wm-btn--primary:hover { background: var(--wm-terra-red-soft); } .wm-sidecard--primary a { color: var(--wm-sand-cream); } /* ---- Data tables ---- */ /* Scroll container: at phone widths the tables keep their natural width and pan inside this wrapper rather than stretching the page. */ .wm-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .wm-table { width: 100%; min-width: 620px; border-collapse: collapse; background: rgba(255,255,255,0.02); border: 1px solid var(--wm-earth-700); font-size: 14px; color: var(--wm-earth-200); } .wm-table th { font-family: var(--wm-font-display); font-weight: 600; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; text-align: left; color: var(--wm-earth-400); padding: 10px 14px; border-bottom: 1px solid var(--wm-earth-700); } .wm-table td { padding: 10px 14px; border-top: 1px solid rgba(255,255,255,0.06); vertical-align: middle; } .wm-table tbody tr:first-child td { border-top: none; } .wm-table__name { font-weight: 600; color: var(--wm-earth-50); } .wm-table__mono { font-family: var(--wm-font-mono); font-size: 13px; color: var(--wm-earth-300); } .wm-table th.wm-table__num, .wm-table td.wm-table__num { text-align: right; } .wm-table__action { text-align: right; } .wm-table__totals td { color: var(--wm-earth-300); } /* Totals labels hug their values, invoice-style. */ .wm-table td.wm-table__totlabel { text-align: right; } .wm-table__grand td { font-weight: 700; color: var(--wm-sand-cream); font-size: 15px; } /* ---- Lists ---- */ .wm-list { margin: 0; padding-left: 18px; } .wm-list li { margin-bottom: 6px; color: var(--wm-earth-200); } /* ---- Inline alert ---- */ .wm-alert { padding: 18px 22px; border-radius: 4px; background: rgba(161,73,54,0.18); margin-bottom: 24px; } .wm-alert h2 { font-family: var(--wm-font-display); text-transform: uppercase; letter-spacing: 0.02em; color: var(--wm-earth-50); margin: 0 0 8px; font-size: 22px; } .wm-alert p { color: var(--wm-earth-200); } /* Success flavor (e.g. the "Successful Purchase!" flash). */ .wm-alert--ok { background: rgba(107,142,61,0.20); } /* ============================================================================ Dark scrollbars The viewport scrollbar via html:has(.wm-dark), and any inner scroll area (e.g. accordion panels) via .wm-page. Literal hex is used because the --wm-* tokens are scoped to body.wm-dark and don't reach . ============================================================================ */ html:has(.wm-dark) { scrollbar-width: thin; /* Firefox */ scrollbar-color: #4D5360 #0A0C10; /* thumb, track */ } .wm-page { scrollbar-width: thin; scrollbar-color: #4D5360 #15181D; } html:has(.wm-dark)::-webkit-scrollbar, .wm-page ::-webkit-scrollbar { width: 12px; height: 12px; } html:has(.wm-dark)::-webkit-scrollbar-track, .wm-page ::-webkit-scrollbar-track { background: #0A0C10; } html:has(.wm-dark)::-webkit-scrollbar-thumb, .wm-page ::-webkit-scrollbar-thumb { background: #4D5360; border-radius: 8px; border: 3px solid #0A0C10; /* inset gutter */ } html:has(.wm-dark)::-webkit-scrollbar-thumb:hover, .wm-page ::-webkit-scrollbar-thumb:hover { background: #737A86; } html:has(.wm-dark)::-webkit-scrollbar-corner, .wm-page ::-webkit-scrollbar-corner { background: #0A0C10; } /* ============================================================================ Responsive ============================================================================ */ @media (max-width: 900px) { .wm-wrap { padding: 40px 24px; } .wm-wrap--tight { padding: 24px; } }