/* ============================================================= Dev's Domain — Brand theme ------------------------------------------------------------- The site's design language, brought in line with the company brand and with the look of the client proposals. This file does NOT fork style_v5_global.css. It imports it, then retargets the variables that stylesheet already routes every colour through, and adds the handful of components that carry the proposal's character. Switching back to the "Dev's Domain" theme in the dashboard restores the original appearance exactly. Palette: Domain Navy #0B2545 · Signal Cyan #13C2C2 · slate neutrals. ============================================================= */ @import url("./design-tokens.css"); @import url("./style_v5_global.css"); /* ------------------------------------------------------------- 1. Retarget the site's own tokens onto the brand palette. style_v5_global.css was built around --blue (a generic #2563eb) as its single accent. Pointing that at Domain Navy moves the whole site — 91 uses — onto the brand in one step. These are scoped to the theme class on , not to :root. The home page links style_v5.css AFTER the theme stylesheet and that file declares its own :root, so a :root block here loses on source order. Custom properties inherit, so setting them on reaches every element that renders and cannot be undone by a later :root. ------------------------------------------------------------- */ body.theme-brand { --blue: #0B2545; /* was #2563eb — Domain Navy */ --blue-hover: #133466; --blue-light: #D4F3F3; /* tinted chips move from blue to cyan */ --blue-soft: #F0FBFB; --teal: #13C2C2; /* Signal Cyan */ --ink: #0A0F1A; --ink-2: #0F172A; /* Cyan is the brand accent, but #13C2C2 on white is ~2.2:1 — too weak for anything that has to be read. This deepened cyan clears 3:1, so it is what carries accent marks on light surfaces; the pure cyan stays for dark surfaces and decoration. The proposal makes the same split. */ --cyan-ink: #0FA5A5; --radius-xs: 4px; /* brand radius scale: 4 / 8 / 14 */ } /* ------------------------------------------------------------- Every selector below is prefixed `body.theme-brand`, not `.theme-brand`. style_v5_global.css writes its own rules as `body.theme-v5 .thing`, which outranks a plain `.theme-brand .thing`; matching its shape puts these at equal specificity, where they win on source order. ------------------------------------------------------------- */ /* ------------------------------------------------------------- 1b. The logo. The wordmark already reads "devs domain", so it replaces the old mark and the word-text that used to sit beside it — printing the name twice was the reason the old lockup looked cramped. The white version is the right one here: this navigation bar is dark on every page. ------------------------------------------------------------- */ body.theme-brand .nav-logo, body.theme-brand .navbar .logo-image { height: 26px; width: auto; display: block; } @media (min-width: 768px) { body.theme-brand .nav-logo, body.theme-brand .navbar .logo-image { height: 30px; } } /* ------------------------------------------------------------- 2. Typography. Inter was named throughout style_v5_global.css but never actually loaded, so the site has been rendering in whatever the system sans is. The font link now lives in header.php; this puts Space Grotesk on the display sizes, as the brand specifies. ------------------------------------------------------------- */ body.theme-brand h1, body.theme-brand h2, body.theme-brand h3, body.theme-brand .v4-sec-title, body.theme-brand .v4-hero h1, body.theme-brand .v4-stat-num, body.theme-brand .v4-btn { font-family: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif; letter-spacing: -0.02em; } /* ------------------------------------------------------------- 3. The eyebrow. The proposal opens every section with a short rule and a cyan label; the site already had the shape, in the wrong colour. ------------------------------------------------------------- */ body.theme-brand .v4-label { color: var(--cyan-ink); font-family: 'Space Grotesk', 'Inter', sans-serif; letter-spacing: 0.12em; } body.theme-brand .v4-label::before { background: var(--teal); width: 20px; height: 2px; } /* ------------------------------------------------------------- 4. Hero — the proposal's cover, as the top of the site. This is the one element that makes the brand legible at a glance. The navy ground with its two soft discs is what the covers and the deliverable pages lead with; a light hero with dark text reads the same whatever the accent colour is. The terminal illustration was the reason to hesitate, and it turns out to be the reason not to: it is already a dark window, so it sits on navy far better than it sat on white. ------------------------------------------------------------- */ body.theme-brand .v4-hero { background: linear-gradient(145deg, #0B2545 0%, #163A60 55%, #1A4A7A 100%); color: #fff; } body.theme-brand .v4-hero-bg { background: none; } body.theme-brand .v4-hero-bg::before, body.theme-brand .v4-hero-bg::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; } body.theme-brand .v4-hero-bg::before { right: -90px; top: -90px; width: 380px; height: 380px; background: rgba(19, 194, 194, 0.075); } body.theme-brand .v4-hero-bg::after { right: 70px; bottom: -70px; width: 200px; height: 200px; background: rgba(255, 255, 255, 0.035); } /* The dot grid was ink-on-white; on navy it has to be light to show. */ body.theme-brand .v4-hero-dots { background-image: radial-gradient(circle, rgba(255, 255, 255, 0.16) 1px, transparent 1px); opacity: 0.5; } body.theme-brand .v4-hero h1 { color: #fff; } body.theme-brand .v4-hero-sub { color: rgba(255, 255, 255, 0.72); } body.theme-brand .v4-hero-pill { border-color: rgba(19, 194, 194, 0.4); background: rgba(19, 194, 194, 0.12); color: #fff; } body.theme-brand .v4-hero-pill-dot { color: var(--teal); } /* On navy the primary button inverts — paper on navy, not navy on navy. */ body.theme-brand .v4-hero .v4-btn-dark { background: #fff; color: var(--blue); } body.theme-brand .v4-hero .v4-btn-dark:hover { background: var(--teal); color: var(--blue); } body.theme-brand .v4-hero .v4-btn-soft { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.28); } body.theme-brand .v4-hero .v4-btn-soft:hover { border-color: var(--teal); color: var(--teal); background: rgba(19, 194, 194, 0.08); } body.theme-brand .v4-trust-item { color: rgba(255, 255, 255, 0.6); } body.theme-brand .v4-trust-item svg { stroke: var(--teal); } /* The project pages put their own furniture in the hero, all of it drawn for a light ground. On navy the back-link was navy-on-navy — 1.14:1, which is to say invisible. */ body.theme-brand .v4-hero .proj-back { color: rgba(255, 255, 255, 0.75); } body.theme-brand .v4-hero .proj-back:hover { color: var(--teal); } body.theme-brand .v4-hero .proj-date { color: rgba(255, 255, 255, 0.55); } /* The terminal gets a rim so it separates from the navy behind it. */ body.theme-brand .v5-terminal { border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.36); } /* The headline's accent phrase is gradient-clipped text — the site's own device. It ran navy-to-cyan, which was right while the hero was white and invisible the moment the hero went navy: the first half of the phrase simply disappeared. On the navy it runs paper-to-cyan instead. Everywhere else the hero is still light, so that case keeps a dark start and ends on the deepened cyan — pure Signal Cyan on white is about 2.2:1, well under the 3:1 that display text needs. */ body.theme-brand h1 em { font-style: normal; background-image: linear-gradient(120deg, var(--blue) 0%, #0E9A9A 100%); } body.theme-brand .v4-hero h1 em { background-image: linear-gradient(120deg, #FFFFFF 0%, var(--teal) 100%); } /* ------------------------------------------------------------- 5. Buttons. Primary goes navy with a cyan focus ring. ------------------------------------------------------------- */ body.theme-brand .v4-btn-dark { background: var(--blue); } body.theme-brand .v4-btn-dark:hover { background: var(--blue-hover); } body.theme-brand .v4-btn-soft:hover { border-color: var(--teal); color: var(--blue); } body.theme-brand .v4-btn:focus-visible, body.theme-brand a:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: var(--radius-xs); } /* ------------------------------------------------------------- 6. Service cards, after the proposal's phase cards: a tinted panel with a soft disc bleeding out of the bottom-right corner. ------------------------------------------------------------- */ body.theme-brand .v4-svc-inner { position: relative; overflow: hidden; transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } body.theme-brand .v4-svc-inner::after { content: ''; position: absolute; right: -28px; bottom: -28px; width: 92px; height: 92px; border-radius: 50%; background: var(--teal); opacity: 0.09; pointer-events: none; transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); } body.theme-brand .v4-svc:hover .v4-svc-inner { border-color: rgba(19, 194, 194, 0.4); box-shadow: 0 12px 32px rgba(11, 37, 69, 0.10); } body.theme-brand .v4-svc:hover .v4-svc-inner::after { opacity: 0.16; transform: scale(1.12); } body.theme-brand .v4-svc-tag { border-color: rgba(11, 37, 69, 0.14); color: var(--ink-muted); } /* ------------------------------------------------------------- 7. The CTA band takes the proposal's cover treatment directly — the navy-to-blue diagonal with two soft translucent circles. ------------------------------------------------------------- */ body.theme-brand .v4-cta { background: linear-gradient(145deg, #0B2545 0%, #163A60 55%, #1A4A7A 100%); } body.theme-brand .v4-cta-glow { background: none; } body.theme-brand .v4-cta-glow::before, body.theme-brand .v4-cta-glow::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; } body.theme-brand .v4-cta-glow::before { right: -80px; top: -80px; width: 340px; height: 340px; background: rgba(19, 194, 194, 0.075); } body.theme-brand .v4-cta-glow::after { right: 60px; bottom: -60px; width: 180px; height: 180px; background: rgba(255, 255, 255, 0.035); } body.theme-brand .v4-cta p { color: rgba(255, 255, 255, 0.66); } body.theme-brand .v4-btn-white { color: var(--blue); } body.theme-brand .v4-btn-outline-w:hover { border-color: var(--teal); color: var(--teal); } /* ------------------------------------------------------------- 8. Section surfaces and rules, on the brand's neutral scale. ------------------------------------------------------------- */ body.theme-brand .v4-sec-title { color: var(--blue); } body.theme-brand .v4-logos { border-block: 1px solid var(--border); } body.theme-brand a:hover { color: var(--cyan-ink); } /* Print: the navy panels have to survive a PDF export the same way the proposal's cover does. */ @media print { .theme-brand .v4-cta, body.theme-brand .v4-hero-bg { print-color-adjust: exact; -webkit-print-color-adjust: exact; } }