/* ============================================================================ 11.LC — Cyber-heritage / register terminal Display: Chakra Petch · Body: Space Grotesk · Data: IBM Plex Mono Theme is driven by ============================================================================ */ /* ---- Fonts (self-hosted, latin subset — was Google Fonts) ----------------- */ @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../font/space-grotesk-var.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 500; font-display: swap; src: url('../font/chakra-petch-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 600; font-display: swap; src: url('../font/chakra-petch-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 700; font-display: swap; src: url('../font/chakra-petch-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url('../font/ibm-plex-mono-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url('../font/ibm-plex-mono-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url('../font/ibm-plex-mono-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---- Tokens --------------------------------------------------------------- */ :root { --void: #07090d; --void-2: #0a0d13; --panel: #0e131c; --panel-2: #121826; --line: rgba(255, 255, 255, 0.06); --line-strong: rgba(255, 255, 255, 0.12); --ink: #c9d1dc; --ink-dim: #8b95a3; --ink-faint: #59616d; /* default theme = original phosphor green + electric cyan */ --accent: #D4AF6A; --accent-bright: #E6C98F; --accent-deep: #A8874E; --accent-rgb: 212, 175, 106; --accent-2: #C7A66A; --accent2-rgb: 199, 166, 106; --glow: rgba(var(--accent-rgb), 0.16); --glow-2: rgba(var(--accent2-rgb), 0.14); --maxw: 860px; --nav-h: 60px; --font-display: "Chakra Petch", sans-serif; --font-body: "Space Grotesk", sans-serif; --font-mono: "IBM Plex Mono", monospace; } [data-theme="green"] { --accent: #D4AF6A; --accent-bright: #E6C98F; --accent-deep: #A8874E; --accent-rgb: 212, 175, 106; --accent-2: #C7A66A; --accent2-rgb: 199, 166, 106; } [data-theme="amber"] { --accent: #ffb43f; --accent-bright: #ffd083; --accent-deep: #c87d1c; --accent-rgb: 255, 180, 63; --accent-2: #C7A66A; --accent2-rgb: 199, 166, 106; } [data-theme="cyan"] { --accent: #C7A66A; --accent-bright: #9ff6f0; --accent-deep: #1ba39c; --accent-rgb: 199, 166, 106; --accent-2: #ffb43f; --accent2-rgb: 255, 180, 63; } [data-theme="blue"] { --accent: #5aa8ff; --accent-bright: #a7ccff; --accent-deep: #2f6fc0; --accent-rgb: 90, 168, 255; --accent-2: #ff7ad9; --accent2-rgb: 255, 122, 217; } [data-theme="bw"] { --accent: #e6e9ee; --accent-bright: #ffffff; --accent-deep: #8b95a3; --accent-rgb: 230, 233, 238; --accent-2: #9aa3b0; --accent2-rgb: 154, 163, 176; } /* ---- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 20px); } body { background: var(--void); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; position: relative; } /* ---- Atmosphere: depth wash + canvas grid + scanlines + grain ------------- */ body::before { /* radial depth wash, tinted by theme */ content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(120% 80% at 50% -10%, rgba(var(--accent-rgb), 0.07), transparent 60%), radial-gradient(90% 60% at 100% 100%, rgba(var(--accent2-rgb), 0.05), transparent 55%), var(--void); } #bg-grid { /* JS starfield/grid canvas */ position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5; } body::after { /* fine scanlines — the retro nod */ content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.045) 3px, rgba(0, 0, 0, 0.045) 4px); mix-blend-mode: multiply; } ::selection { background: rgba(var(--accent-rgb), 0.28); color: #fff; } /* ---- Links ---------------------------------------------------------------- */ a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(var(--accent-rgb), 0.22); transition: color 0.2s, border-color 0.2s, background 0.2s; } a:hover { color: var(--accent-bright); border-bottom-color: rgba(var(--accent-rgb), 0.6); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } @keyframes blink { 50% { opacity: 0; } } /* ============================================================================ Navigation ============================================================================ */ .navbar { position: fixed; top: 0; left: 0; width: 100%; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(18px, 4vw, 44px); background: rgba(7, 9, 13, 0.66); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); border-bottom: 1px solid var(--line); z-index: 1000; transition: border-color 0.3s, background 0.3s; } .navbar.scrolled { background: rgba(7, 9, 13, 0.9); border-bottom-color: rgba(var(--accent-rgb), 0.18); } .nav-logo { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.34em; color: var(--accent); border: none; text-shadow: 0 0 18px var(--glow); padding-left: 0.1em; } .nav-logo:hover { color: var(--accent-bright); } .nav-links { display: flex; gap: clamp(14px, 2.4vw, 30px); align-items: center; } .nav-link { font-family: var(--font-mono); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); border: none; position: relative; padding: 4px 0; } .nav-link::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0; background: var(--accent); transition: width 0.25s ease; } .nav-link:hover { color: var(--ink); } .nav-link:hover::after { width: 100%; } /* ============================================================================ Layout primitives ============================================================================ */ section { max-width: var(--maxw); margin: 0 auto; padding: 96px clamp(22px, 5vw, 48px) 64px; position: relative; } /* section label — small mono eyebrow with a trailing gradient rule */ .section-label { font-family: var(--font-mono); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.8rem; display: flex; align-items: center; gap: 0.7rem; } .section-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.3), transparent); } .divider { width: 100%; max-width: var(--maxw); margin: 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.16), transparent); } /* scroll-reveal — visible by default so the page is fully readable without JS. Only when JS is present (html.js) do we hide, then animate in via .in. */ .reveal { opacity: 1; transform: none; } html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; } html.js .reveal.in { opacity: 1; transform: none; } /* ============================================================================ Portrait register — the signature element B&W (memory) cross-fades to colour (live); a conic ring rotates behind it. ============================================================================ */ .portrait { --size: clamp(150px, 34vw, 210px); position: relative; width: var(--size); height: var(--size); margin: 0 auto 1.8rem; display: grid; place-items: center; animation: float 7s ease-in-out infinite; } .portrait::before { /* rotating conic halo */ content: ""; position: absolute; inset: -14%; border-radius: 50%; background: conic-gradient(from 0deg, transparent, rgba(var(--accent-rgb), 0.5), transparent 35%, rgba(var(--accent2-rgb), 0.45), transparent 70%); filter: blur(11px); opacity: 0.55; z-index: 0; animation: spin 14s linear infinite; } .portrait::after { /* crisp ring + outward glow */ content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(var(--accent-rgb), 0.4); box-shadow: 0 0 36px var(--glow), inset 0 0 26px rgba(var(--accent-rgb), 0.06); z-index: 3; pointer-events: none; } .portrait img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 50%; background: radial-gradient(circle at 50% 38%, var(--panel-2), var(--void)); z-index: 1; } .portrait .p-color { z-index: 2; opacity: 0; animation: headshot 9s ease-in-out infinite; } .portrait:hover .p-color { animation: none; opacity: 1; } /* hover -> live */ @keyframes headshot { /* slow B&W <-> colour breathe */ 0%, 42% { opacity: 0; } 58%, 88% { opacity: 1; } 100% { opacity: 0; } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================================================ Hero ============================================================================ */ .hero { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-top: calc(var(--nav-h) + 24px); } .hero-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 7vw, 4rem); letter-spacing: 0.04em; line-height: 1.02; color: #f3f5f8; margin-bottom: 0.7rem; text-shadow: 0 0 30px rgba(var(--accent-rgb), 0.1); } .hero-name .accent { color: var(--accent); } .hero-tagline { font-family: var(--font-mono); font-size: clamp(0.8rem, 2.4vw, 0.98rem); color: var(--accent); letter-spacing: 0.02em; margin-bottom: 2.6rem; min-height: 1.6em; } .hero-tagline .cursor { display: inline-block; width: 0.55em; height: 1.05em; background: var(--accent); vertical-align: -0.16em; margin-left: 3px; animation: blink 1.1s steps(1) infinite; } /* locations = data readout */ .readout { width: 100%; max-width: 560px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.025), transparent); overflow: hidden; } .readout-row { display: grid; grid-template-columns: 124px 1fr; gap: 1rem; align-items: baseline; text-align: left; padding: 0.7rem 1.1rem; border-bottom: 1px solid var(--line); } .readout-row:last-child { border-bottom: none; } .readout-key { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); opacity: 0.8; } .readout-val { font-size: 0.9rem; color: var(--ink-dim); } .hero-scroll { margin-top: 2.6rem; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); } .hero-scroll .bar { width: 1px; height: 30px; background: linear-gradient(to bottom, var(--accent), transparent); animation: drop 2.4s ease-in-out infinite; } @keyframes drop { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 0.9; transform: translateY(5px); } } /* small portrait header used on interior pages */ .page-head { text-align: center; } .page-head .portrait { --size: clamp(120px, 26vw, 150px); } .page-head .hero-name { font-size: clamp(1.7rem, 5vw, 2.6rem); margin-bottom: 1.6rem; } .page-head .hero-tagline { margin-bottom: 1.4rem; } /* ============================================================================ Prose (bio / statements) ============================================================================ */ .prose { color: var(--ink-dim); font-size: 1rem; line-height: 1.9; text-align: left; } .prose p { margin-bottom: 1.35rem; } .prose strong { color: var(--ink); } .back-link { display: inline-block; margin-top: 1rem; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; border: none; } /* ============================================================================ Invest — intro, heading, ledger of holdings ============================================================================ */ .invest-intro { color: var(--ink-dim); font-size: 1rem; line-height: 1.9; text-align: left; margin-bottom: 2.4rem; } .invest-intro p { margin-bottom: 1.35rem; } .pitch-cta { text-align: center; margin: 0 0 3rem; } .pitch-btn { display: inline-block; font-family: var(--font-mono); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); padding: 0.9rem 2.4rem; border: 1px solid rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.06); box-shadow: 0 0 26px var(--glow), inset 0 0 16px rgba(var(--accent-rgb), 0.05); transition: color 0.22s, border-color 0.22s, background 0.22s, box-shadow 0.22s; } .pitch-btn:hover { color: var(--accent-bright); border-color: var(--accent); background: rgba(var(--accent-rgb), 0.12); box-shadow: 0 0 40px var(--glow), inset 0 0 20px rgba(var(--accent-rgb), 0.1); } .pitch-note { margin: 0.8rem 0 0; font-size: 0.88rem; color: var(--ink-dim); } .invest-heading { font-family: var(--font-mono); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); margin-bottom: 1.4rem; } .inv-list { display: flex; flex-direction: column; margin-bottom: 3rem; border-top: 1px solid var(--line); } .inv-item { display: block; text-decoration: none; border: none; border-bottom: 1px solid var(--line); border-left: 2px solid transparent; padding: 1.05rem 1.2rem; transition: background 0.22s, border-left-color 0.22s; } .inv-item:hover { background: rgba(var(--accent-rgb), 0.04); border-left-color: var(--accent); border-bottom-color: var(--line); } .inv-item-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.3rem; } .inv-name { font-family: var(--font-display); font-weight: 600; font-size: 1.04rem; letter-spacing: 0.01em; color: #eef1f5; } .inv-item:hover .inv-name { color: #fff; } .inv-domain { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.02em; color: var(--accent); opacity: 0.55; white-space: nowrap; flex-shrink: 0; transition: opacity 0.22s; } .inv-item:hover .inv-domain { opacity: 0.95; } .inv-desc { margin: 0; color: var(--ink-dim); font-size: 0.92rem; line-height: 1.6; max-width: 64ch; } .invest-contact { text-align: center; color: var(--ink-dim); font-size: 0.96rem; margin-top: 1rem; } .invest-contact h1 { font-family: var(--font-mono); font-weight: 500; font-size: 1rem; color: var(--accent); margin-top: 0.4rem; } /* ============================================================================ Pills (NZ philanthropy / notices) ============================================================================ */ .pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem 0.45rem; margin: 1.6rem 0 2rem; } .pill { font-family: var(--font-body); font-weight: 500; font-size: 0.82rem; letter-spacing: 0.01em; color: var(--ink-dim); border: 1px solid var(--line-strong); border-radius: 100px; padding: 0.45rem 1.1rem; background: var(--panel); transition: color 0.22s, background 0.22s, border-color 0.22s; } .pill:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.06); } .notice { max-width: 560px; margin: 0 auto 2rem; padding: 0.9rem 1.1rem; border: 1px solid rgba(var(--accent-rgb), 0.35); border-radius: 8px; background: rgba(var(--accent-rgb), 0.06); text-align: center; } .notice a { font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.06em; border: none; } /* ============================================================================ Books ============================================================================ */ .book-list { display: flex; flex-direction: column; gap: 1.4rem; margin-top: 1.6rem; } .book-card { display: flex; gap: 1.6rem; align-items: flex-start; padding: 1.4rem; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, 0.012); transition: border-color 0.3s, background 0.3s; } .book-card:hover { border-color: rgba(var(--accent-rgb), 0.18); background: rgba(var(--accent-rgb), 0.02); } .book-cover { flex-shrink: 0; width: 150px; } .book-cover img { width: 100%; height: auto; border-radius: 4px; border: 1px solid var(--line-strong); box-shadow: 0 6px 26px rgba(0, 0, 0, 0.45); transition: box-shadow 0.3s; } .book-card:hover .book-cover img { box-shadow: 0 6px 32px var(--glow); } .book-details { flex: 1; min-width: 0; } .book-title { font-family: var(--font-display); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.08em; text-transform: uppercase; color: #e6e9ee; margin-bottom: 0.35rem; } .book-author { font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent); opacity: 0.8; letter-spacing: 0.03em; margin-bottom: 0.9rem; } .book-text { color: var(--ink-dim); font-size: 0.93rem; line-height: 1.7; } .book-text p { margin-bottom: 0.7rem; } .book-text p:last-child { margin-bottom: 0; } /* ============================================================================ Domain badge (ccc) ============================================================================ */ .ccc-wrap { min-height: 78vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .domain-badge { font-family: var(--font-display); font-weight: 700; font-size: clamp(3.2rem, 13vw, 7rem); letter-spacing: 0.12em; color: var(--accent); text-shadow: 0 0 44px var(--glow), 0 0 90px rgba(var(--accent-rgb), 0.08); margin-bottom: 1.6rem; } .domain-text { color: var(--ink-dim); font-size: 1rem; line-height: 1.9; max-width: 640px; margin: 0 auto; } .domain-text p { margin-bottom: 1.2rem; } .large-emoji { font-size: 1.5em; vertical-align: middle; color: var(--accent); } /* ============================================================================ Footer ============================================================================ */ footer { text-align: center; padding: 52px 24px 64px; border-top: 1px solid var(--line); margin-top: 24px; } .follow-btn { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); padding: 10px 22px; border: 1px solid var(--line-strong); border-radius: 4px; font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1.4rem; transition: all 0.22s; } .follow-btn:hover { border-color: rgba(var(--accent-rgb), 0.4); color: var(--accent); background: rgba(var(--accent-rgb), 0.04); } .follow-btn .telegram-logo { display: inline-block !important; width: 16px !important; height: 16px !important; min-width: 16px; flex: 0 0 16px; fill: currentColor; color: inherit; } .copyright { color: var(--ink-faint); font-size: 0.78rem; font-family: var(--font-mono); letter-spacing: 0.04em; } .copyright a { color: var(--accent); border: none; } /* ============================================================================ Video modal — local player (opened from a.video-link) ============================================================================ */ .vmodal { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; padding: 5vmin; background: rgba(3, 5, 8, 0.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity 0.25s ease; } .vmodal.in { opacity: 1; } .vmodal-box { position: relative; width: min(960px, 100%); } .vmodal video { width: 100%; height: auto; max-height: 84vh; display: block; border-radius: 10px; background: #000; border: 1px solid rgba(var(--accent-rgb), 0.4); box-shadow: 0 0 60px var(--glow), 0 24px 80px rgba(0, 0, 0, 0.6); } .vmodal-cap { margin-top: 0.9rem; text-align: center; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); } .vmodal-cap::before { content: "▶ "; color: var(--accent); } .vmodal-close { position: absolute; top: -16px; right: -16px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: var(--panel); color: var(--accent); border: 1px solid rgba(var(--accent-rgb), 0.4); font-family: var(--font-mono); font-size: 1.2rem; line-height: 1; box-shadow: 0 0 24px var(--glow); transition: background 0.2s, color 0.2s; } .vmodal-close:hover { background: rgba(var(--accent-rgb), 0.12); color: var(--accent-bright); } @media (max-width: 600px) { .vmodal-close { top: 6px; right: 6px; background: rgba(7, 9, 13, 0.85); } } /* ============================================================================ Responsive ============================================================================ */ @media (max-width: 600px) { body { font-size: 16px; } section { padding: 80px 20px 48px; } .readout-row { grid-template-columns: 1fr; gap: 0.1rem; padding: 0.7rem 0.9rem; } .book-card { flex-direction: column; align-items: center; text-align: center; } .book-cover { width: 132px; } .inv-item-head { flex-direction: column; gap: 0.15rem; } .nav-link { font-size: 0.66rem; letter-spacing: 0.08em; } } /* ============================================================================ Reduced motion — kill ambient animation, keep content legible ============================================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .reveal, html.js .reveal { opacity: 1; transform: none; } .portrait .p-color { opacity: 1; } /* show colour, skip the breathe */ #bg-grid { display: none; } } /* SUNAN v6 master theme: all public pages use one black/gold palette. */ :root,[data-theme="green"],[data-theme="amber"],[data-theme="cyan"],[data-theme="blue"],[data-theme="bw"]{ --void:#07090D;--void-2:#0A0D13;--panel:#0D1015;--panel-2:#12151B; --ink:#F2F0EA;--ink-dim:#9AA0A6;--ink-faint:#686D73; --line:rgba(212,175,106,.14);--line-strong:rgba(212,175,106,.30); --accent:#D4AF6A;--accent-bright:#E6C98F;--accent-deep:#A8874E;--accent-rgb:212,175,106; --accent-2:#C7A66A;--accent2-rgb:199,166,106;--glow:rgba(212,175,106,.14);--glow-2:rgba(199,166,106,.10); }