/* Vertical sub-sites: additions on top of the parent base.css/components.css. Network masthead, gradient specimen word, moodboard grid, recipe wrapping. */ /* ---- Dark mode: chrome only — per-aesthetic detail themes keep their own fixed period palettes. Toggled via data-theme on , persisted. ---- */ html[data-theme="dark"] { --paper: #131318; --ink: #ECECF2; --ink-soft: #A2A2AE; --hairline: #2B2B33; --card-bg: #1C1C22; } html[data-theme="dark"] .card { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); } .theme-toggle { background: none; border: 1px solid var(--hairline); border-radius: 999px; color: var(--ink-soft); font-family: var(--font-mono); font-size: 0.78rem; padding: 0.25rem 0.7rem; line-height: 1; } .theme-toggle:hover { color: var(--ink); border-color: var(--ink-soft); } /* ---- Network strip: identical order/styling on every site ---- */ .network-nav { display: flex; gap: 0.25rem; justify-content: center; flex-wrap: wrap; padding: 0.4rem 1rem; background: #101015; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; } .network-nav a { color: #B9B9C6; padding: 0.1rem 0.65rem; text-transform: uppercase; } .network-nav a:hover { color: #FFFFFF; } .network-nav a.net-active { color: #FFFFFF; background: var(--accent); border-radius: 2px; } .network-nav .net-tag { color: #6E6E7A; padding: 0.1rem 0.4rem; margin-left: 0.5rem; } @media (max-width: 560px) { .network-nav .net-tag { display: none; } } /* ---- Hero specimen: gradient ink set per-aesthetic from its palette ---- */ .specimen-word { background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; background-image: linear-gradient(100deg, var(--ink), var(--ink-soft)); font-family: var(--font-display); font-weight: 850; letter-spacing: -0.02em; /* Vertical names run long ("Brown & Bloom Military Realism") and wrap, so the parent's one-line fixed slot clips them. Use smaller type and a two-line slot that can grow: min-height keeps the cycler from reflowing between 1- and 2-line names, height:auto lets a rare 3-liner show fully. */ font-size: clamp(1.9rem, 5.5vw, 4.2rem); line-height: 1.08; height: auto; min-height: calc(2.16em + 0.3rem); } /* ---- Moodboard ---- */ .moodboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; } .mood-fig { margin: 0; } .mood-fig img { width: 100%; height: 220px; object-fit: cover; display: block; border-radius: 6px; background: var(--hairline); } .mood-fig figcaption { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-soft); margin-top: 5px; line-height: 1.4; } .mood-fig figcaption a { text-decoration: underline; text-underline-offset: 2px; } /* ---- Recipes are prose checklists on interior/fashion: wrap them ---- */ .recipe-code { white-space: pre-wrap; word-break: break-word; } /* Dark palette dots disappear on the dark timeline — give them a light ring. */ html[data-theme="dark"] .tl-dot { border-color: rgba(255, 255, 255, 0.3); } /* Footer links (network + support) share the accent treatment */ .site-footer a { color: var(--accent); } .site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }