/* ========================================================================== sada.css — everything added on top of the design handoff. assets/site.css is the handoff's canonical token file and stays unmodified, so anything invented for this build lives here instead. Two sections: 1. COMPONENTS — permanent site furniture (the leadership board). 2. DRAFT MODE — the watermark and placeholder markers. Self-disabling: everything here is gated on html:not([data-env="live"]). ========================================================================== */ /* ========================================================================== 1. COMPONENTS ========================================================================== */ /* Screen-reader-only label. The theme button is icon-only, so its accessible name has to come from somewhere that is not the title attribute. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Nav right-hand cluster. .nav-row is `justify-content: space-between`, so the actions have to be one flex child or the CTA and the toggle drift apart. */ .nav-actions { display: flex; align-items: center; gap: var(--sp-3); } /* Light / dark toggle. Circular to echo .brand-mark, and sized to match the height of .nav-cta beside it. */ .theme-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: background-color .25s, border-color .25s, color .25s; } .theme-toggle:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Show the icon for the theme the button will switch TO, which is the convention users expect: a sun means "go light". Both icons are stacked in the same grid cell so the button never changes size on toggle. */ .theme-toggle .icon-sun, .theme-toggle .icon-moon { grid-area: 1 / 1; } .theme-toggle .icon-sun { display: block; } /* dark now -> offer light */ .theme-toggle .icon-moon { display: none; } [data-theme="light"] .theme-toggle .icon-sun { display: none; } [data-theme="light"] .theme-toggle .icon-moon { display: block; } /* light now -> offer dark */ /* The toggle stays available on mobile, unlike .nav-links and .nav-cta which the handoff hides below 900px. */ @media (max-width: 900px) { .theme-toggle { display: inline-grid; } } /* Leadership board — one card per director, each with its own portrait slot. Two columns rather than the handoff's single chairman block, because the client named two directors of equal standing and neither is a chairman. */ .board { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); margin-top: var(--sp-7); border-top: 1px solid var(--line); padding-top: var(--sp-7); } @media (max-width: 900px) { .board { grid-template-columns: 1fr; gap: var(--sp-7); } } .board-member { display: flex; flex-direction: column; } .board-member .board-photo { border-radius: var(--r-3); overflow: hidden; margin-bottom: var(--sp-5); } .board-member .board-name { font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); } .board-member .board-role { font: 500 var(--step--2) var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-top: var(--sp-3); } .board-member .board-bio { color: var(--ink-dim); font-size: var(--step-0); margin-top: var(--sp-4); max-width: 44ch; } /* ========================================================================== 2. DRAFT MODE Shown by DEFAULT. site.js stamps data-env="live" on only when the page is served from the production hostname, so the fail-safe direction is "watermark stays in": forgetting to configure something can never silently ship an unwatermarked draft. ========================================================================== */ /* Diagonal repeating watermark across the whole viewport. On html::after, not body::after: site.css sets `overflow-x: clip` on body, which in some engines clips fixed-position descendants. has no such clip, so the overlay is reliably full-viewport. pointer-events: none so it never intercepts a click. */ html:not([data-env="live"])::after { content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='280'%3E%3Ctext x='10' y='170' transform='rotate(-24 10 170)' font-family='monospace' font-size='25' letter-spacing='7' fill='%23ffffff'%3EDRAFT - PLACEHOLDER CONTENT%3C/text%3E%3C/svg%3E"); background-repeat: repeat; /* Low enough to read the design through, high enough that no screenshot of this site can be mistaken for the finished product. */ opacity: .07; } /* The tile above is white, which is invisible on the light palette's bone background. Restate it in ink for light mode. Both themes must carry a visible watermark or the toggle becomes a way to defeat it. */ html[data-theme="light"]:not([data-env="live"])::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='280'%3E%3Ctext x='10' y='170' transform='rotate(-24 10 170)' font-family='monospace' font-size='25' letter-spacing='7' fill='%230B1B2B'%3EDRAFT - PLACEHOLDER CONTENT%3C/text%3E%3C/svg%3E"); opacity: .09; } /* Persistent corner badge, so the state is unambiguous even in a cropped screenshot where the diagonal tiling might not be obvious. */ html:not([data-env="live"])::before { content: "DRAFT SITE - CONTENT NOT FINAL"; position: fixed; left: 0; bottom: 0; z-index: 9999; pointer-events: none; font: 500 11px/1 var(--font-mono, monospace); letter-spacing: .14em; padding: 9px 14px; color: #0B1B2B; background: var(--accent-2, #E8C56B); border-top-right-radius: var(--r-2, 8px); } @media print { html:not([data-env="live"])::after { opacity: .16; } } /* -------------------------------------------------------------------------- Placeholder markers. .tbd wraps any value that is NOT client-supplied — an invented figure, an unconfirmed contact detail, copy written to fill a slot. It renders as a dashed amber chip so a reviewer can see at a glance what still needs real content, and the title attribute says what is needed. On the live site these markers go inert (the rules below are gated), so a forgotten .tbd degrades to ordinary text rather than leaking "TBD" to the public. The audit ledger, not the CSS, is the record of what is outstanding. -------------------------------------------------------------------------- */ html:not([data-env="live"]) .tbd { background: color-mix(in oklab, var(--accent-2) 16%, transparent); border-bottom: 1px dashed var(--accent-2); border-radius: 2px; padding: 0 3px; cursor: help; } /* Superscript flag. Inline-block so it never inherits the host element's text-transform or letter-spacing from a mono kicker. */ html:not([data-env="live"]) .tbd::after { content: "TBD"; display: inline-block; vertical-align: super; margin-left: 4px; font: 500 9px/1 var(--font-mono, monospace); letter-spacing: .1em; color: var(--accent-2); text-transform: none; } /* Block-level variant for whole paragraphs and cards, where an inline chip would look like a typo rather than a annotation. */ html:not([data-env="live"]) .tbd-block { border-left: 2px solid var(--accent-2); padding-left: var(--sp-4); background: color-mix(in oklab, var(--accent-2) 7%, transparent); } /* Anything that exists only for the review cycle. Note the polarity is the reverse of the rules above: this is hidden when live rather than shown when draft, so it stays out of the production DOM's flow entirely. */ html[data-env="live"] .draft-only { display: none !important; } .draft-only { margin-top: var(--sp-6); padding: var(--sp-4) 0; border-top: 1px dashed var(--accent-2); } .draft-only a { font: 500 var(--step--2) var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); } .draft-only a:hover { text-decoration: underline; } /* The handoff's image placeholders already carry a data-label. In draft mode tint their border amber too, so photography reads as outstanding alongside every other placeholder rather than as a separate category. */ html:not([data-env="live"]) .ph { border-color: color-mix(in oklab, var(--accent-2) 45%, transparent); }