/* ========================================================= daboa works — Y2K Cyber/Metallic theme Supports dark / light / system, plus a manual override stored in localStorage("daboaTheme") and applied via . See assets/js/main.js. ========================================================= */ :root{ /* ---- surfaces (swap per theme) ---- */ --bg: #050308; --bg-deep: #0a0518; --panel: rgba(14, 10, 28, 0.72); --panel-solid: #100b22; --footer-tint-a: rgba(10,6,20,0); --footer-tint-b: rgba(10,6,20,.6); /* ---- metallic ramp (brightest -> deepest), swap per theme ---- */ --chrome-1: #f6f7fb; --chrome-2: #c7c9d6; --chrome-3: #8b8da0; --chrome-4: #45465a; /* ---- body text (swap per theme) ---- */ --text: #e9e8f5; --text-dim: #9a94b8; /* ---- fixed vivid accents: always used on fixed-dark chrome chips (ticker / badges / nav / buttons-fill / tape) so they never need to change with theme ---- */ --cyan: #00fff2; --blue: #00baff; --pink: #ff2bd6; --purple: #a259ff; --lime: #d4ff00; /* ---- "ink" accents: same hue family, tuned so they stay readable as TEXT directly on the swapping page surface (equal to the vivid value in dark theme; darkened for light) ---- */ --ink-cyan: #00fff2; --ink-pink: #ff2bd6; --ink-purple: #a259ff; --ink-lime: #d4ff00; /* fixed constant: dark text placed on bright accent fills */ --on-accent: #0a0518; /* decorative background layers */ --star-dot: #ffffff; --grid-line: rgba(0,255,242,.35); --grid-haze: rgba(80,20,120,.55); --scanline-color: rgba(255,255,255,.035); --vignette-color: rgba(0,0,0,.85); color-scheme: dark; --font-display: "Orbitron", "Rajdhani", sans-serif; --font-mono: "Share Tech Mono", "MS Gothic", monospace; --font-pixel: "Press Start 2P", cursive; } /* ---- light theme: system preference, unless explicitly forced dark ---- */ @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --bg: #f3f0fb; --bg-deep: #e6e1f5; --panel: rgba(255,255,255,.7); --panel-solid: #ffffff; --footer-tint-a: rgba(230,225,245,0); --footer-tint-b: rgba(214,206,240,.55); --chrome-1: #2a2740; --chrome-2: #514d6c; --chrome-3: #7d7a98; --chrome-4: #17151f; --text: #221f33; --text-dim: #5b5773; --ink-cyan: #00838c; --ink-pink: #c2008f; --ink-purple: #6a37c9; --ink-lime: #6a8a00; --star-dot: #3a2f57; --grid-line: rgba(120,60,190,.28); --grid-haze: rgba(190,150,255,.4); --scanline-color: rgba(30,10,50,.05); --vignette-color: rgba(120,90,180,.15); color-scheme: light; } } /* ---- explicit override: forced light, regardless of system ---- */ :root[data-theme="light"]{ --bg: #f3f0fb; --bg-deep: #e6e1f5; --panel: rgba(255,255,255,.7); --panel-solid: #ffffff; --footer-tint-a: rgba(230,225,245,0); --footer-tint-b: rgba(214,206,240,.55); --chrome-1: #2a2740; --chrome-2: #514d6c; --chrome-3: #7d7a98; --chrome-4: #17151f; --text: #221f33; --text-dim: #5b5773; --ink-cyan: #00838c; --ink-pink: #c2008f; --ink-purple: #6a37c9; --ink-lime: #6a8a00; --star-dot: #3a2f57; --grid-line: rgba(120,60,190,.28); --grid-haze: rgba(190,150,255,.4); --scanline-color: rgba(30,10,50,.05); --vignette-color: rgba(120,90,180,.15); color-scheme: light; } /* ---- explicit override: forced dark, regardless of system ---- */ :root[data-theme="dark"]{ --bg: #050308; --bg-deep: #0a0518; --panel: rgba(14, 10, 28, 0.72); --panel-solid: #100b22; --footer-tint-a: rgba(10,6,20,0); --footer-tint-b: rgba(10,6,20,.6); --chrome-1: #f6f7fb; --chrome-2: #c7c9d6; --chrome-3: #8b8da0; --chrome-4: #45465a; --text: #e9e8f5; --text-dim: #9a94b8; --ink-cyan: #00fff2; --ink-pink: #ff2bd6; --ink-purple: #a259ff; --ink-lime: #d4ff00; --star-dot: #ffffff; --grid-line: rgba(0,255,242,.35); --grid-haze: rgba(80,20,120,.55); --scanline-color: rgba(255,255,255,.035); --vignette-color: rgba(0,0,0,.85); color-scheme: dark; } *{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-mono); font-size: 16px; line-height: 1.7; overflow-x: hidden; cursor: default; position: relative; transition: background-color .25s ease, color .25s ease; } ::selection{ background: var(--pink); color: var(--on-accent); } /* custom scrollbar */ ::-webkit-scrollbar{ width: 14px; } ::-webkit-scrollbar-track{ background: var(--bg-deep); } ::-webkit-scrollbar-thumb{ background: linear-gradient(var(--chrome-1), var(--chrome-3)); border: 2px solid var(--bg-deep); border-radius: 2px; } ::-webkit-scrollbar-thumb:hover{ background: linear-gradient(var(--cyan), var(--blue)); } a{ color: var(--ink-cyan); text-decoration: none; } a:hover{ color: var(--ink-pink); text-decoration: underline; } h1,h2,h3{ font-family: var(--font-display); margin: 0; } /* ========================================================= Background layers: grid horizon + starfield + scanlines ========================================================= */ .bg-layer{ position: fixed; inset: 0; z-index: 0; pointer-events: none; } .bg-stars{ background-image: radial-gradient(1px 1px at 10% 20%, var(--star-dot), transparent), radial-gradient(1px 1px at 80% 10%, var(--star-dot), transparent), radial-gradient(1.5px 1.5px at 40% 70%, var(--star-dot), transparent), radial-gradient(1px 1px at 60% 40%, var(--star-dot), transparent), radial-gradient(1.5px 1.5px at 90% 80%, var(--ink-cyan), transparent), radial-gradient(1px 1px at 25% 85%, var(--ink-pink), transparent), radial-gradient(1px 1px at 70% 60%, var(--star-dot), transparent), radial-gradient(1.5px 1.5px at 15% 55%, var(--star-dot), transparent); background-repeat: repeat; background-size: 380px 380px; opacity: .8; animation: star-drift 90s linear infinite; } @keyframes star-drift{ from{ background-position: 0 0; } to{ background-position: -380px 380px; } } .bg-grid{ background-image: radial-gradient(ellipse at 50% 0%, var(--grid-haze), var(--bg) 70%); } .bg-grid::after{ content:""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 48px 48px; transform: perspective(280px) rotateX(62deg); transform-origin: bottom; -webkit-mask-image: linear-gradient(to top, #000 20%, transparent 95%); mask-image: linear-gradient(to top, #000 20%, transparent 95%); opacity: .55; } .scanlines{ position: fixed; inset: 0; z-index: 60; pointer-events: none; background: repeating-linear-gradient( to bottom, var(--scanline-color) 0px, var(--scanline-color) 1px, transparent 2px, transparent 3px ); mix-blend-mode: overlay; } .vignette{ position: fixed; inset: 0; z-index: 61; pointer-events: none; box-shadow: inset 0 0 18vw var(--vignette-color); } /* ========================================================= Loading splash — always a fixed dark "boot screen" ========================================================= */ #loader{ position: fixed; inset: 0; z-index: 999; background: #050308; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; transition: opacity .5s ease, visibility .5s ease; } #loader.hide{ opacity: 0; visibility: hidden; } #loader .loader-logo{ font-family: var(--font-display); font-weight: 900; font-size: 2rem; letter-spacing: .35em; background: linear-gradient(180deg,#fff 0%, var(--cyan) 45%, var(--purple) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; animation: flicker 2.4s infinite; } .loader-bar{ width: min(260px, 70vw); height: 10px; border: 2px solid #c7c9d6; background: #0a0518; padding: 2px; } .loader-bar span{ display: block; height: 100%; width: 0%; background: repeating-linear-gradient(45deg, var(--cyan), var(--cyan) 6px, var(--blue) 6px, var(--blue) 12px); animation: load-fill 1.3s ease forwards; } .loader-text{ font-family: var(--font-mono); font-size: .75rem; color: #9a94b8; letter-spacing: .15em; } @keyframes load-fill{ to{ width: 100%; } } @keyframes flicker{ 0%,100%{ opacity: 1; } 4%{ opacity: .55; } 6%{ opacity: 1; } 46%{ opacity: 1; } 48%{ opacity: .6; } 50%{ opacity: 1; } } /* ========================================================= Marquee ticker — always a fixed dark LED-sign strip ========================================================= */ .ticker{ position: relative; z-index: 5; border-bottom: 1px solid #2a2440; background: linear-gradient(180deg, #14102a, #0a0616); overflow: hidden; white-space: nowrap; padding: 7px 0; } .ticker-track{ display: inline-flex; animation: ticker-scroll 32s linear infinite; font-family: var(--font-mono); font-size: .82rem; letter-spacing: .05em; color: var(--cyan); will-change: transform; } .ticker-track span{ margin: 0 1.4em; color: #9a94b8; white-space: nowrap; } .ticker-track span.hi{ color: var(--pink); } @keyframes ticker-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } } /* ========================================================= Hero ========================================================= */ .hero{ position: relative; z-index: 5; text-align: center; padding: 72px 20px 40px; } .logo-wrap{ display: flex; justify-content: center; margin-bottom: 6px; } .logo-wrap svg{ width: min(560px, 92vw); height: auto; overflow: visible; } .chrome-text{ font-family: var(--font-display); font-weight: 900; } .chrome-stop-1{ stop-color: var(--chrome-1); } .chrome-stop-2{ stop-color: var(--chrome-2); } .chrome-stop-3{ stop-color: var(--chrome-3); } .chrome-stop-4{ stop-color: var(--chrome-4); } .hero-sub{ font-family: var(--font-mono); color: var(--text-dim); letter-spacing: .18em; font-size: .85rem; margin-top: 4px; } .hero-sub .accent{ color: var(--ink-lime); } .badge-row{ display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 22px 0 22px; } .badge{ font-family: var(--font-pixel); font-size: .55rem; padding: 7px 10px; border: 2px solid #5a5c72; background: linear-gradient(180deg, #201a38, #100c20); color: #f6f7fb; box-shadow: 2px 2px 0 rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.05); white-space: nowrap; } .badge.blink{ animation: blink 1.1s steps(1) infinite; color: var(--lime); border-color: var(--lime); } .badge.pink{ color: var(--pink); border-color: var(--pink); } .badge.cyan{ color: var(--cyan); border-color: var(--cyan); } @keyframes blink{ 50%{ opacity: .25; } } /* ---- theme switch ---- */ .theme-switch{ display: inline-flex; align-items: center; gap: 10px; margin: 2px 0 26px; } .theme-switch-label{ font-family: var(--font-pixel); font-size: .5rem; color: var(--text-dim); letter-spacing: .05em; } .theme-switch-track{ display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--chrome-3); background: var(--panel-solid); border-radius: 3px; } .theme-opt{ display: flex; align-items: center; gap: 5px; border: none; cursor: pointer; padding: 6px 10px; background: transparent; color: var(--text-dim); font-family: var(--font-display); font-weight: 700; font-size: .62rem; letter-spacing: .06em; border-radius: 2px; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; } .theme-opt svg{ width: 13px; height: 13px; stroke: currentColor; flex-shrink: 0; } .theme-opt:hover{ color: var(--text); } .theme-opt[aria-pressed="true"]{ background: linear-gradient(180deg, var(--cyan), var(--blue)); color: var(--on-accent); box-shadow: 0 0 14px rgba(0,255,242,.55); } .theme-opt[aria-pressed="true"]:hover{ color: var(--on-accent); } /* nav */ .nav{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; } .nav a{ position: relative; font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .12em; color: #f6f7fb; text-decoration: none; padding: 10px 18px; background: linear-gradient(180deg, #2a2440, #150f28); border: 1px solid var(--chrome-4); border-radius: 3px; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); transition: all .18s ease; } .nav a:hover{ color: var(--on-accent); background: linear-gradient(180deg, var(--cyan), var(--blue)); box-shadow: 0 0 18px rgba(0,255,242,.7), 0 0 42px rgba(0,255,242,.35); text-decoration: none; transform: translateY(-2px); } /* ========================================================= HUD Window (chrome titlebar cards) ========================================================= */ .hud-window{ position: relative; border: 1px solid var(--chrome-3); background: var(--panel); backdrop-filter: blur(6px); box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 20px 60px -20px rgba(162,89,255,.35); margin: 0 auto; } .hud-window::before, .hud-window::after, .hud-corners b::before, .hud-corners b::after{ content:""; position:absolute; width: 14px; height: 14px; border: 2px solid var(--ink-cyan); z-index: 2; opacity: .85; } .hud-window::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; } .hud-window::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; } .hud-corners b{ position:absolute; inset:0; pointer-events:none; } .hud-corners b::before{ top:-1px; right:-1px; border-left:none; border-bottom:none; } .hud-corners b::after{ bottom:-1px; left:-1px; border-right:none; border-top:none; } .win-titlebar{ display:flex; align-items:center; justify-content: space-between; padding: 7px 10px; background: linear-gradient(180deg, #f6f7fb, #8b8da0 55%, #45465a); border-bottom: 1px solid #000; } .win-title{ font-family: var(--font-display); font-weight: 700; font-size: .74rem; letter-spacing: .08em; color: #14102a; text-shadow: 0 1px 0 rgba(255,255,255,.5); display:flex; align-items:center; gap:6px; } .win-title svg{ width:12px; height:12px; } .win-btns{ display:flex; gap:5px; } .win-btns i{ display:block; width:11px; height:11px; border-radius:50%; background: linear-gradient(180deg,#fff,#9a9aa8); box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); } .win-btns i:nth-child(1){ background: linear-gradient(180deg,#8bffb0,#1fae55); } .win-btns i:nth-child(2){ background: linear-gradient(180deg,#ffe98b,#c99a12); } .win-btns i:nth-child(3){ background: linear-gradient(180deg,#ff9d9d,#c92f2f); } .win-body{ padding: 22px 24px; font-size: .92rem; color: var(--text); } .win-body p{ margin: 0 0 1em; white-space: pre-line; } .win-body p:last-child{ margin-bottom:0; } /* ========================================================= Sections ========================================================= */ section{ position: relative; z-index: 5; max-width: 980px; margin: 0 auto; padding: 46px 20px; } .section-head{ display:flex; flex-wrap: wrap; align-items:center; gap: 14px; margin-bottom: 22px; } .section-title{ display:flex; align-items:center; gap: 10px; min-width: 0; max-width: 100%; } .section-head h2{ font-size: clamp(0.8rem, 4.2vw, 1.3rem); letter-spacing: .1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: linear-gradient(180deg, var(--chrome-1), var(--chrome-2) 60%, var(--chrome-4)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 24px rgba(0,255,242,.2); } .section-head .num{ font-family: var(--font-pixel); font-size: .6rem; color: var(--ink-pink); flex-shrink: 0; } .section-line{ flex: 1 1 40px; min-width: 40px; height: 2px; background: linear-gradient(90deg, var(--ink-cyan), var(--ink-purple), transparent); } #about .hud-window{ max-width: 760px; } /* work cards */ .card-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; } /* links: compact clickable chips (icon + name + handle) */ .links-grid{ display:flex; flex-wrap: wrap; gap: 10px; } .link-chip{ display:inline-flex; align-items:center; gap: 8px; padding: 7px 12px; border: 1px solid var(--chrome-4); background: var(--panel); text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .link-chip:hover{ border-color: var(--ink-cyan); box-shadow: 0 0 14px rgba(0,255,242,.2); transform: translateY(-2px); text-decoration: none; } .link-chip-icon{ width: 24px; height: 24px; flex-shrink: 0; } .link-chip-text{ display:flex; flex-direction: column; line-height: 1.3; } .link-chip-text strong{ font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .03em; color: var(--chrome-1); } .link-chip-text small{ font-size: .68rem; color: var(--text-dim); } .work-card{ position:relative; border: 1px solid var(--chrome-4); background: var(--panel); backdrop-filter: blur(6px); box-shadow: 0 10px 26px -14px rgba(0,0,0,.4); padding: 20px; display:flex; flex-direction:column; gap: 12px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); } .work-card::before, .work-card::after{ content:""; position:absolute; width: 17px; height: 17px; background: linear-gradient(45deg, transparent calc(50% - 1.5px), var(--ink-cyan) 50%, transparent calc(50% + 1.5px)); filter: drop-shadow(0 0 3px var(--ink-cyan)); pointer-events:none; z-index: 2; } .work-card::before{ top: -1px; right: -1px; } .work-card::after{ bottom: -1px; left: -1px; } .work-card:hover{ transform: translateY(-4px); border-color: var(--ink-cyan); box-shadow: 0 0 30px rgba(0,255,242,.2), 0 0 60px rgba(255,43,214,.1); } .work-icon{ width: 56px; height: 56px; } .work-card h3{ font-size: 1.02rem; letter-spacing: .05em; color: var(--chrome-1); } .work-card p{ margin: 0; color: var(--text-dim); font-size: .88rem; } .tag-row{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; } .tag{ font-family: var(--font-pixel); font-size: .5rem; padding: 4px 6px; border: 1px solid var(--chrome-4); color: var(--text-dim); } .card-links{ margin-top: auto; display:flex; flex-wrap:wrap; gap:10px; padding-top: 6px; } .btn-y2k{ display:inline-flex; align-items:center; gap:6px; font-family: var(--font-display); font-weight:700; font-size:.72rem; letter-spacing:.08em; padding: 9px 14px; color: var(--on-accent); background: linear-gradient(180deg, var(--cyan), var(--blue)); border: 1px solid rgba(255,255,255,.6); box-shadow: 2px 2px 0 rgba(0,0,0,.5); text-decoration:none; } .btn-y2k:hover{ color: var(--on-accent); text-decoration:none; background: linear-gradient(180deg, var(--lime), #8fbf00); transform: translate(-1px,-1px); box-shadow: 3px 3px 0 rgba(0,0,0,.5); } .btn-y2k.ghost{ background: transparent; color: var(--chrome-1); border: 1px solid var(--chrome-3); box-shadow:none; } .btn-y2k.ghost:hover{ color: var(--ink-pink); border-color: var(--ink-pink); background: rgba(255,43,214,.08); transform:none; box-shadow:none; } .btn-y2k.disabled{ pointer-events:none; opacity:.5; background: var(--chrome-4); color: var(--text-dim); box-shadow:none; } /* coming soon panels */ .soon-card{ position: relative; border: 2px dashed var(--chrome-4); padding: 34px 20px; text-align:center; color: var(--text-dim); overflow:hidden; } .soon-card .tape{ position:absolute; left:-10%; width:120%; background: repeating-linear-gradient(45deg, var(--lime), var(--lime) 14px, #14102a 14px, #14102a 28px); color:#14102a; font-family: var(--font-pixel); font-size: .6rem; text-align:center; padding: 5px 0; letter-spacing:.1em; box-shadow: 0 2px 8px rgba(0,0,0,.5); } .soon-card .tape.top{ top: 14px; transform: rotate(-3deg); } .soon-card .tape.bottom{ bottom: 14px; transform: rotate(2deg); } .soon-card .soon-body{ margin: 46px 0; } .soon-card h3{ font-family: var(--font-display); color: var(--chrome-1); font-size: 1rem; letter-spacing: .1em; margin-bottom: 8px; } .soon-card p{ font-size: .82rem; margin:0; } /* section-note: lightweight "one more item coming soon" line within an otherwise populated section (as opposed to .soon-card, which is the full-width placeholder for a section with nothing published yet) */ .section-note{ margin-top: 18px; padding: 10px 14px; border-left: 2px solid var(--ink-cyan); background: var(--panel); color: var(--text-dim); font-size: .82rem; } /* ========================================================= Footer ========================================================= */ footer{ position: relative; z-index: 5; margin-top: 40px; padding: 40px 20px 60px; border-top: 1px solid var(--chrome-4); background: linear-gradient(180deg, var(--footer-tint-a), var(--footer-tint-b)); text-align:center; } .counter-widget{ display:inline-flex; align-items:center; gap:10px; background: #0a0616; border: 1px solid #5a5c72; padding: 8px 14px; margin-bottom: 8px; } .counter-note{ font-size: .68rem; color: var(--text-dim); letter-spacing: .02em; margin: 0 0 22px; } .counter-label{ font-family: var(--font-pixel); font-size: .5rem; color: #9a94b8; letter-spacing:.05em; } .counter-digits{ display:flex; gap:3px; } .counter-digits span{ font-family: "Share Tech Mono", monospace; background: #000; color: var(--lime); font-size: .95rem; padding: 3px 5px; border: 1px solid #1c1c1c; text-shadow: 0 0 6px var(--lime); } .footer-badges{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin: 18px 0 26px; } .contact-line{ font-size: .85rem; color: var(--text-dim); margin-bottom: 6px; } .contact-line a{ color: var(--ink-pink); } .footer-note{ font-size: .72rem; color: var(--text-dim); letter-spacing:.05em; } .footer-note .heart{ color: var(--ink-pink); } .back-link{ display:inline-flex; align-items:center; gap:6px; font-family: var(--font-display); font-weight:700; font-size:.72rem; letter-spacing:.08em; color: var(--chrome-1); border: 1px solid var(--chrome-3); padding: 8px 14px; margin-bottom: 20px; text-decoration: none; } .back-link:hover{ color: var(--ink-pink); border-color: var(--ink-pink); text-decoration:none; } .section-back{ text-align: center; margin-top: 30px; display: none; /* 機能（#topへのリンク）は残したまま非表示 */ } .section-back .back-link{ margin-bottom: 0; } .to-top{ position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 46px; height: 46px; display:flex; align-items:center; justify-content:center; background: linear-gradient(180deg, #f6f7fb, #8b8da0 55%, #45465a); border: 1px solid #000; box-shadow: 0 4px 14px rgba(0,0,0,.5); opacity: 0; pointer-events:none; transition: opacity .25s ease, transform .2s ease; } .to-top.show{ opacity: 1; pointer-events:auto; } .to-top:hover{ transform: translateY(-3px); } .to-top svg{ width: 18px; height:18px; } /* ========================================================= Glitch hover for logo ========================================================= */ .logo-wrap svg text{ cursor: default; } .glitch-active .chrome-text-fill{ animation: glitch-shift .22s steps(2) 3; } @keyframes glitch-shift{ 0%{ transform: translate(0,0); } 25%{ transform: translate(-2px,1px); } 50%{ transform: translate(2px,-1px); } 75%{ transform: translate(-1px,-1px); } 100%{ transform: translate(0,0); } } /* ========================================================= Legal / plain content pages (privacy policy etc.) ========================================================= */ .app-banner{ display: flex; align-items: center; gap: 16px; max-width: 900px; margin: 22px auto 0; padding: 0 20px; position: relative; z-index: 5; } .app-banner .work-icon{ width: 48px; height: 48px; flex-shrink: 0; } .app-banner-kicker{ font-family: var(--font-pixel); font-size: .5rem; letter-spacing: .08em; color: var(--ink-pink); margin: 0 0 6px; } .app-banner-name{ font-family: var(--font-display); font-weight: 900; font-size: clamp(1.3rem, 5vw, 1.9rem); letter-spacing: .05em; color: var(--chrome-1); margin: 0; text-shadow: 0 0 20px rgba(0,255,242,.25); } .legal-body h1{ font-size: 1.15rem; letter-spacing: .08em; color: var(--chrome-1); margin-bottom: 4px; } .legal-body h2{ font-size: .95rem; letter-spacing: .06em; color: var(--ink-cyan); margin: 1.6em 0 .6em; } .legal-body p, .legal-body li{ font-size: .88rem; color: var(--text); } .legal-body ul{ padding-left: 1.2em; } .legal-body .updated{ color: var(--text-dim); font-size: .8rem; margin-bottom: 1.6em; } /* ========================================================= Responsive ========================================================= */ @media (max-width: 640px){ .hero{ padding: 52px 16px 30px; } .win-body{ padding: 18px 16px; } section{ padding: 34px 16px; } .bg-grid::after{ background-size: 34px 34px; } } @media (prefers-reduced-motion: reduce){ *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }