/* ============================================ ANCHRAS — Light register "The Drafting Table." Belgian architecture office, late-morning north light, paper, graphite, lime as a Stabilo highlighter mark — never as ink. Loads after style.css. Activated by . The class is set by an inline script in before paint, so theme switches without flash. Same warm ~110° hue family. No #000, no #fff. Sharp corners. ============================================ */ :root.theme-paper { /* ---- Tonal layers (paper, not "white") ---- */ --obsidian: #f5f4ee; /* primary surface — drafting paper */ --hangar: #ebe9e1; /* recessed surface — desk under paper */ --hangar-raised: #fcfbf6; /* cards — fresh sheet on top */ --hangar-raised-hover: #f8f7f0; --hangar-edge: #c4c2b8; /* graphite line, hairline rules */ /* ---- Ink (text, replaces bone/instrument-grey) ---- */ --bone: #1a1b18; /* primary ink — warm graphite */ --instrument-grey: #5a5b56; /* secondary ink */ /* ---- Lime stays. Only ever a fill, never a text/stroke color. ---- */ --signal-lime: #CDFC54; --signal-lime-bright: #b8e83d; /* on light, hover goes deeper, not whiter */ --signal-lime-veil: rgba(205, 252, 84, 0.45); --signal-lime-haze: rgba(205, 252, 84, 0.55); /* Legacy aliases must be re-declared in this scope: their var() values resolve at the declaring element, so the :root copies stay locked to the dark tokens until we recompute them here. */ --black: var(--obsidian); --lime: var(--signal-lime); --lime-hover: var(--signal-lime-bright); --lime-dim: var(--signal-lime-veil); --lime-glow: var(--signal-lime-haze); --dark: var(--hangar); --dark-card: var(--hangar-raised); --dark-card-hover: var(--hangar-raised-hover); --dark-border: var(--hangar-edge); --gray-text: var(--instrument-grey); --white: var(--bone); background: var(--obsidian); color: var(--bone); } /* ---------- LINKS: graphite text + lime underline ---------- */ :root.theme-paper a { color: var(--bone); text-decoration: underline; text-decoration-color: var(--signal-lime); text-decoration-thickness: 2px; text-underline-offset: 3px; } :root.theme-paper a:hover { color: var(--bone); background: var(--signal-lime-veil); text-decoration-color: transparent; } /* ---------- NAV ---------- */ :root.theme-paper .nav { background: rgba(245, 244, 238, 0.85); border-bottom-color: transparent; } :root.theme-paper .nav.scrolled { border-bottom-color: var(--hangar-edge); } :root.theme-paper .nav-links a { color: var(--instrument-grey); text-decoration: none; } :root.theme-paper .nav-links a:hover, :root.theme-paper .nav-links a.active { color: var(--bone); } :root.theme-paper .nav-links a.active::after { background: var(--signal-lime); } :root.theme-paper .nav-toggle span { background: var(--bone); } :root.theme-paper .nav-links.open { background: var(--obsidian); border-bottom-color: var(--hangar-edge); } /* ---------- BUTTONS ---------- */ :root.theme-paper .btn-primary { background: var(--signal-lime); color: var(--bone); } :root.theme-paper .btn-primary:hover { background: var(--signal-lime-bright); color: var(--bone); box-shadow: 0 0 30px var(--signal-lime-haze); } /* Outline button — graphite, not lime. Hover fills lime. */ :root.theme-paper .btn-outline { background: transparent; color: var(--bone); border: 1px solid var(--bone); } :root.theme-paper .btn-outline:hover { background: var(--signal-lime); color: var(--bone); border-color: var(--bone); } /* Nav CTA — overrides important rules from base */ :root.theme-paper .nav-cta { color: var(--bone) !important; } :root.theme-paper .nav-cta:hover { background: var(--signal-lime-bright) !important; } /* ---------- INLINE EMPHASIS: highlighter behind ink ---------- */ /* The dark system colors emphatic spans lime. On paper that fails contrast, so we invert: the span becomes a lime highlighter mark with graphite ink on top. box-decoration-break makes the rectangle clone across line wraps. */ :root.theme-paper .text-lime, :root.theme-paper .hero h1 .accent { color: var(--bone); background: var(--signal-lime); padding: 0 0.18em; box-shadow: 0.08em 0 0 var(--signal-lime), -0.08em 0 0 var(--signal-lime); -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* ---------- EYEBROW TAGS ---------- */ /* Highlighter doctrine: full lime fill, graphite text, no border. These were lime-on-veil pills in dark; on paper they become Stabilo strips. */ :root.theme-paper .hero-tag, :root.theme-paper .section-tag { background: var(--signal-lime); border: none; color: var(--bone); } /* Inline text labels — promote to pills so they don't read as lime text */ :root.theme-paper .case-tag, :root.theme-paper .blog-category, :root.theme-paper .article-category { display: inline-block; padding: 0.15rem 0.45rem; background: var(--signal-lime); color: var(--bone); } /* ---------- HERO ---------- */ /* Kill the lime radial gradients; let the grid carry the atmosphere */ :root.theme-paper .hero-bg { background: radial-gradient(ellipse at 85% 75%, rgba(26, 27, 24, 0.045) 0%, transparent 55%); } :root.theme-paper .hero-grid { background-image: linear-gradient(var(--hangar-edge) 1px, transparent 1px), linear-gradient(90deg, var(--hangar-edge) 1px, transparent 1px); opacity: 0.4; } /* Logo: drop the lime drop-shadow. Flat-by-default on paper. */ :root.theme-paper .hero-logo-wrap img { filter: none; } /* Ring color flips via tokens; the lime running-indicator dot stays. */ /* ---------- CARDS ---------- */ /* Hover border: graphite, not lime. Top hairline reveal stays lime (it's the fill). */ :root.theme-paper .card, :root.theme-paper .case-card, :root.theme-paper .blog-card { background: var(--hangar-raised); } :root.theme-paper .card:hover, :root.theme-paper .case-card:hover, :root.theme-paper .blog-card:hover { border-color: var(--bone); } /* Card icon — flip the highlighter+ink doctrine: lime fill, graphite stroke */ :root.theme-paper .card-icon { background: var(--signal-lime); } :root.theme-paper .card-icon svg { stroke: var(--bone); } :root.theme-paper .contact-info-icon { background: var(--signal-lime); } :root.theme-paper .contact-info-icon svg { stroke: var(--bone); } /* Blog card hover: keep heading graphite (no lime text) */ :root.theme-paper .blog-card:hover h3 { color: var(--bone); } /* Case results numerics — were lime; on paper, graphite display type holds the weight */ :root.theme-paper .case-result-item .num { color: var(--bone); } /* ---------- INLINE LINK PATTERNS ---------- */ :root.theme-paper .read-more { color: var(--bone); text-decoration: underline; text-decoration-color: var(--signal-lime); text-decoration-thickness: 2px; text-underline-offset: 3px; } :root.theme-paper .read-more:hover { background: var(--signal-lime-veil); text-decoration-color: transparent; } :root.theme-paper .service-row__link { color: var(--bone); text-decoration: underline; text-decoration-color: var(--signal-lime); text-decoration-thickness: 2px; text-underline-offset: 3px; } :root.theme-paper .service-row__link:hover { color: var(--bone); background: var(--signal-lime-veil); text-decoration-color: transparent; } :root.theme-paper .article-back { color: var(--bone); text-decoration: underline; text-decoration-color: var(--signal-lime); text-decoration-thickness: 2px; text-underline-offset: 3px; } :root.theme-paper .article-back:hover { color: var(--bone); background: var(--signal-lime-veil); text-decoration-color: transparent; } /* ---------- DIRECTORY INDEX ---------- */ :root.theme-paper .dir-row__link:hover { background: var(--hangar); } :root.theme-paper .dir-row__link:hover .dir-row__cat, :root.theme-paper .dir-row__link:hover .dir-row__arrow { color: var(--bone); } /* ---------- FAQ ---------- */ :root.theme-paper .faq-item summary:hover { color: var(--bone); } :root.theme-paper .faq-item details[open] .faq-toggle { color: var(--bone); } /* ---------- FORMS ---------- */ :root.theme-paper .form-group input, :root.theme-paper .form-group textarea, :root.theme-paper .form-group select, :root.theme-paper .newsletter__input { background: var(--hangar); border-color: var(--hangar-edge); color: var(--bone); } :root.theme-paper .form-group input:focus, :root.theme-paper .form-group textarea:focus, :root.theme-paper .form-group select:focus, :root.theme-paper .newsletter__input:focus { border-color: var(--bone); } :root.theme-paper .newsletter__input::placeholder { color: var(--instrument-grey); opacity: 0.7; } /* ---------- ARTICLE BODY ---------- */ :root.theme-paper .article-body p, :root.theme-paper .article-body ul, :root.theme-paper .article-body ol { color: var(--instrument-grey); } :root.theme-paper .article-body a { color: var(--bone); text-decoration: underline; text-decoration-color: var(--signal-lime); text-decoration-thickness: 2px; text-underline-offset: 3px; } :root.theme-paper .article-body a:hover { color: var(--bone); background: var(--signal-lime-veil); text-decoration-color: transparent; } /* ---------- FOOTER ---------- */ :root.theme-paper .footer-col h4 { color: var(--bone); } :root.theme-paper .footer-col a { text-decoration: none; } :root.theme-paper .footer-col a:hover { color: var(--bone); background: var(--signal-lime-veil); } /* ---------- PLACEHOLDER PATTERNS ---------- */ /* The dark system uses lime-dim diagonal gradients to fill image placeholders. With the paper-mode lime-veil at 45%, that reads as advertising. Replace with a quiet paper-soft tonal wash — same compositional cue, no shouting. */ :root.theme-paper .case-card-img, :root.theme-paper .blog-card-img { background: var(--hangar); } :root.theme-paper .case-card-img .placeholder-pattern, :root.theme-paper .blog-card-img .placeholder-pattern { background: linear-gradient(135deg, rgba(26, 27, 24, 0.05) 0%, transparent 55%), linear-gradient(45deg, rgba(26, 27, 24, 0.025) 0%, transparent 55%); opacity: 1; } /* ---------- CTA BANNER ---------- */ /* Kill the lime radial; replace with subtle graphite tonal wash */ :root.theme-paper .cta-banner::before { background: radial-gradient(ellipse at center, rgba(26, 27, 24, 0.04) 0%, transparent 70%); } /* ---------- PAGE HEADER ---------- */ :root.theme-paper .page-header::before { background: radial-gradient(ellipse at 50% 0%, rgba(26, 27, 24, 0.04) 0%, transparent 60%); } /* ---------- PLATFORM SPREAD / PROCESS / FAQ section borders ---------- */ /* These reference --hangar-edge directly, which is already flipped via tokens. */ /* No additional overrides needed for the typographic structure. */