/* HOM3 v3u -- theme lockups & deepened atmosphere Soli Deo Gloria. Deepens existing cyber/corporate/nautical themes. Root fix: the wordmark now sits on a per-theme PLATE so letters are legible over any background; each plate is native to its world. Themes are selected by a class on or : theme-nautical, theme-cyber, theme-corporate (matches existing v2 convention). All values trace to docs/THEME_TOKENS_v3u.txt. */ /* ---- shared banner structure (theme-agnostic) ---- */ .hom3-banner{ display:inline-flex; align-items:center; gap:.7rem; position:relative; isolation:isolate; } .hom3-banner .mark{ flex:0 0 auto; display:block; } .hom3-banner .mark svg{ display:block; } /* the plate wraps the wordmark; ::before is the plate ground so the letters (the element's text) always render above their own backdrop */ .hom3-wordmark{ position:relative; display:inline-block; padding:.32em .62em; line-height:1; white-space:nowrap; font-weight:700; letter-spacing:.04em; font-family:var(--hom3-display, "Iosevka","SF Mono",ui-monospace,monospace); z-index:0; } .hom3-wordmark::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:4px; } @media (max-width:640px){ .hom3-wordmark{ font-size:clamp(1rem,5vw,1.35rem); } } /* ================================================================ NAUTICAL -- engraved builder's plate Letters incised into brass; bright top bevel, dark bottom shadow; four corner rivets; inset bezel. This is where boldness is spent. ================================================================ */ .theme-nautical{ --naut-navy:#071523; --naut-navy-2:#0c2033; --naut-brass:#e6b954; --naut-brass-hi:#fbe9b6; --naut-brass-lo:#7a5518; --naut-brass-edge:#c69630; --naut-engrave:#2a1e08; --naut-foam:#dfeaf2; } .theme-nautical .hom3-wordmark{ color:var(--naut-engrave); letter-spacing:.11em; font-weight:800; padding:.36em .82em; /* struck-metal: strong bright bevel above the incision, deep shadow below -- the two edges give the letter its relief so a dark fill still separates cleanly from the polished field */ text-shadow: 0 1.5px 0 var(--naut-brass-hi), 0 2px 1px rgba(255,240,200,.5), 0 -1px 0 var(--naut-brass-lo), 0 -1.5px 1px rgba(60,40,10,.6); } .theme-nautical .hom3-wordmark::before{ background:linear-gradient(176deg, var(--naut-brass-hi) 0%, var(--naut-brass) 38%, var(--naut-brass) 62%, var(--naut-brass-edge) 100%); border:1px solid var(--naut-brass-lo); border-radius:5px; box-shadow: inset 1px 1px 0 rgba(255,250,230,.9), inset -1px -1px 0 rgba(90,64,20,.85), inset 0 0 8px rgba(160,116,40,.3), 0 2px 6px rgba(0,0,0,.5); } /* rivets at the four corners of the plate */ .theme-nautical .hom3-wordmark::after{ content:""; position:absolute; inset:0; z-index:1; border-radius:5px; pointer-events:none; background-image: radial-gradient(circle at 6px 6px, var(--naut-brass-hi) 0 1px, var(--naut-brass-lo) 1.4px 2.2px, transparent 2.6px), radial-gradient(circle at calc(100% - 6px) 6px, var(--naut-brass-hi) 0 1px, var(--naut-brass-lo) 1.4px 2.2px, transparent 2.6px), radial-gradient(circle at 6px calc(100% - 6px), var(--naut-brass-hi) 0 1px, var(--naut-brass-lo) 1.4px 2.2px, transparent 2.6px), radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), var(--naut-brass-hi) 0 1px, var(--naut-brass-lo) 1.4px 2.2px, transparent 2.6px); } .theme-nautical .hom3-banner .mark svg{ color:var(--naut-brass); filter:drop-shadow(0 1px 1px rgba(0,0,0,.5)); } /* ================================================================ CYBER -- phosphor CRT Sharp core stroke on a scanline plate; glow lives behind, edges stay crisp. Terminal, not neon. ================================================================ */ .theme-cyber{ --cy-void:#04070a; --cy-phos:#34f5a0; --cy-phos-dim:#0f9d63; --cy-scan:rgba(52,245,160,.06); --cy-edge:#0affc0; } .theme-cyber .hom3-wordmark{ color:var(--cy-edge); font-weight:700; letter-spacing:.14em; /* glow BEHIND, hard dark outline keeps glyph edges defined */ text-shadow: 0 0 8px var(--cy-phos), 0 0 2px var(--cy-phos), 1px 0 0 var(--cy-void), -1px 0 0 var(--cy-void), 0 1px 0 var(--cy-void), 0 -1px 0 var(--cy-void); } .theme-cyber .hom3-wordmark::before{ background: repeating-linear-gradient(0deg, var(--cy-scan) 0 1px, transparent 1px 3px), var(--cy-void); border:1px solid var(--cy-phos-dim); border-radius:3px; box-shadow: inset 0 0 12px rgba(15,157,99,.35), 0 0 10px rgba(52,245,160,.18); } .theme-cyber .hom3-banner .mark svg{ color:var(--cy-edge); filter:drop-shadow(0 0 4px var(--cy-phos)); } /* ================================================================ CORPORATE -- clean plate No effects. Solid ink ground, tight tracking, one accent underline. Legibility by restraint. ================================================================ */ .theme-corporate{ --co-ink:#0e1726; --co-paper:#f5f7fa; --co-accent:#3d7bd9; --co-rule:rgba(61,123,217,.5); } .theme-corporate .hom3-wordmark{ color:var(--co-paper); font-weight:600; letter-spacing:.08em; padding-bottom:.4em; text-shadow:none; } .theme-corporate .hom3-wordmark::before{ background:var(--co-ink); border-radius:6px; box-shadow:none; } /* single hairline accent underline, width of the wordmark */ .theme-corporate .hom3-wordmark::after{ content:""; position:absolute; left:.62em; right:.62em; bottom:.28em; height:2px; background:var(--co-accent); border-radius:2px; z-index:1; } .theme-corporate .hom3-banner .mark svg{ color:var(--co-accent); filter:none; } /* ================================================================ DEEPENED NAUTICAL ATMOSPHERE (fx layer -- nautical only) Additive to the five existing layers. #theme-fx is the existing per-theme surface; these rules only apply under .theme-nautical. ================================================================ */ /* (A) second, slower, offset caustic pass for parallax depth. The existing caustic shafts stay; this adds a counter-drifting layer beneath them at lower opacity. */ .theme-nautical #theme-fx .fx-caustic-2{ position:fixed; inset:-20% -20% -20% -20%; z-index:0; pointer-events:none; background: repeating-linear-gradient(58deg, transparent 0 42px, rgba(180,214,240,.05) 42px 46px, transparent 46px 90px); mix-blend-mode:screen; opacity:.5; animation:fx-caustic2-drift 41s linear infinite; } @keyframes fx-caustic2-drift{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-90px,60px,0); } } /* (B) depth particulate -- sparse, slow-rising marine snow. Two thin layers of tiny motes so density stays believable without many nodes. */ .theme-nautical #theme-fx .fx-motes{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.35; background-image: radial-gradient(circle, rgba(223,234,242,.9) 0 .6px, transparent 1px), radial-gradient(circle, rgba(223,234,242,.6) 0 .5px, transparent 1px); background-size:220px 220px, 140px 140px; background-position:0 0, 70px 90px; animation:fx-motes-rise 60s linear infinite; } @keyframes fx-motes-rise{ from{ background-position:0 0, 70px 90px; } to{ background-position:0 -220px, 70px -130px; } } /* (C) Helm-only brass horizon where water meets the console. Applied when the Helm page adds .helm-page to the body (alongside theme). */ .theme-nautical.helm-page #theme-fx .fx-waterline{ box-shadow:0 -1px 0 rgba(217,164,65,.55), 0 -2px 8px rgba(217,164,65,.15); } /* reduced motion: freeze the deep, keep it readable */ @media (prefers-reduced-motion: reduce){ .theme-nautical #theme-fx .fx-caustic-2, .theme-nautical #theme-fx .fx-motes{ animation:none; } .theme-nautical #theme-fx .fx-motes{ opacity:.18; } }