/* ============================================================ KitParlor — shared design system (v5 "Rotating Showroom") Deep-black showroom mood. Tinted glow + glass cards. Visual master = design/concepts/concept-H.html. No external deps. Selector + variable names are FROZEN (code contract) — only values are re-bound to the dark showroom. (Google Fonts are linked per-page in : Inter + Instrument Sans.) ============================================================ */ :root { /* palette — surfaces / backgrounds (value = deep black) */ --bg:#050608; /* page background — was #F6F1E7 */ --bg-2:#0a0d12; /* deep panel (NEW) */ --surface:#101722; /* input / preview / drop flat surface — was #FDFBF5 */ --ink:#f4f6fb; /* body / heading / link text — was #1C1913 */ --ink-dim:#8b93a7; /* dimmed body text — was #5B5346 */ --faint:#6b7386; /* faint labels / meta (large/label only) — was #85796A */ --line:rgba(255,255,255,.09); /* hairline border — was #1C1913 */ --line-strong:rgba(255,255,255,.16); /* stronger border (NEW) */ --accent:#39d7ff; /* brand / default accent (H tools) — was #D9481F */ --accent-2:#7c5cff; /* secondary accent (NEW) */ --accent-hover:#6ff0ff; /* brighter aqua for hover (kept for contract) — was #B23A16 */ --accent-ink:#050608; /* dark text on accent fill — was #F6F1E7 */ --danger:#ff6b81; --warn:#ffcf5c; --ok:#35d07f; /* dark-lifted status — was #C0402A/#B0791F/#2F7A4D */ --band:#0d1119; /* muted band bg — was #EFE7D8 */ --footer-bg:#07090c; --footer-ink:#aab2c4; /* footer — was #1C1913 / #E8E0D1 */ --glass:rgba(255,255,255,.045); /* glass (NEW) */ --glass-2:rgba(255,255,255,.07); /* strong glass (NEW) */ --radius:18px; /* was 16px */ --radius-sm:12px; /* was 10px */ /* soft shadows / glow (hard offsets retired) */ --shadow:0 18px 40px -20px rgba(0,0,0,.7); --shadow-lift:0 30px 70px -24px rgba(0,0,0,.8); --glow-accent:0 0 74px -10px var(--accent); /* H center-card glow (NEW) */ --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --font-display:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --font-mono:'Instrument Sans',system-ui,sans-serif; /* label font; tabular-nums for figures */ --maxw:1200px; --space:32px; /* atmosphere tint (rgb of active accent — zone/JS driven) */ --glow:57,215,255; } /* ---------- reset-ish ---------- */ *,*::before,*::after { box-sizing:border-box; } html { -webkit-text-size-adjust:100%; } body { margin:0; background: radial-gradient(120% 85% at 50% -12%, #0b0e15 0%, transparent 58%), var(--bg); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } /* global atmosphere — fixed tinted glow + vignette (markup-free; subpages skip stars/grain) */ body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(56% 46% at 50% 20%, rgba(var(--glow),.13), transparent 70%), radial-gradient(80% 60% at 82% 4%, rgba(var(--glow),.06), transparent 62%), radial-gradient(70% 55% at 14% 8%, rgba(var(--glow),.05), transparent 60%), radial-gradient(115% 85% at 50% 32%, transparent 52%, #02030580 82%, #020305 100%); } h1,h2,h3,h4 { font-family:var(--font-display); font-weight:800; line-height:1.15; color:var(--ink); letter-spacing:-0.02em; } h1 { font-size:2.6rem; margin:0 0 .4em; letter-spacing:-.03em; } h2 { font-size:1.8rem; margin:0 0 .5em; } h3 { font-size:1.2rem; margin:0 0 .4em; } p { margin:0 0 1em; } a { color:var(--ink); text-decoration:none; } a:hover { color:var(--accent); } img { max-width:100%; display:block; } :focus-visible { outline:2px solid var(--accent); outline-offset:3px; } ::selection { background:var(--accent); color:var(--accent-ink); } /* ---------- layout ---------- */ .container { max-width:var(--maxw); margin:0 auto; padding:0 var(--space); width:100%; } /* ---------- header ---------- */ .site-header { position:sticky; top:0; z-index:50; background:linear-gradient(180deg,rgba(6,8,11,.72),rgba(6,8,11,.15)); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid var(--line); } .site-header .container { display:flex; align-items:center; justify-content:space-between; height:68px; gap:16px; } .site-logo { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:1.3rem; font-weight:800; letter-spacing:-0.02em; color:var(--ink); text-decoration:none; } .site-logo:hover { text-decoration:none; color:var(--ink); } .site-logo .logo-mark { width:30px; height:30px; flex:0 0 auto; color:var(--accent); transform:rotate(-6deg); } .site-nav { display:flex; align-items:center; gap:28px; } .site-nav a { color:var(--ink-dim); font-size:.95rem; font-weight:500; text-decoration:none; transition:color .2s; } .site-nav a:hover { color:var(--ink); text-decoration:none; } .site-nav a.btn-pro { display:inline-flex; align-items:center; background:linear-gradient(120deg,var(--accent),var(--accent-2)); color:var(--accent-ink); padding:9px 20px; border-radius:999px; font-size:.9rem; font-weight:700; text-decoration:none; transition:transform .2s, box-shadow .2s; } .site-nav a.btn-pro:hover { color:var(--accent-ink); text-decoration:none; transform:translateY(-1px); box-shadow:0 10px 30px -10px rgba(var(--glow),.6); } /* ---------- footer (deep) ---------- */ .site-footer { border-top:1px solid var(--line); background: radial-gradient(80% 120% at 50% 100%, rgba(var(--glow),.10), transparent 60%), var(--footer-bg); color:var(--footer-ink); margin-top:72px; padding:56px 0 36px; } .site-footer a { color:var(--footer-ink); } .site-footer a:hover { color:var(--accent); } .site-footer .footer-grid { display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between; } .site-footer .footer-brand { font-family:var(--font-display); font-size:1.35rem; font-weight:800; letter-spacing:-0.02em; color:var(--ink); } .site-footer nav { display:flex; flex-direction:column; gap:12px; } .site-footer nav a { color:var(--footer-ink); font-size:.92rem; } .site-footer nav a:hover { color:var(--accent); } .site-footer .footer-copy { margin-top:48px; padding-top:24px; border-top:1px solid var(--line); color:var(--faint); font-family:var(--font-mono); font-size:.82rem; letter-spacing:.06em; } /* ---------- cards / surfaces ---------- */ .card { background:linear-gradient(165deg,rgba(22,26,34,.92),rgba(9,11,16,.92)); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); padding:24px; } /* ---------- tool shell ---------- */ .tool-shell { background:linear-gradient(165deg,rgba(22,26,34,.92),rgba(9,11,16,.92)); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); padding:28px; margin:24px 0; } /* ---------- buttons ---------- */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-body); font-size:.95rem; font-weight:600; line-height:1; padding:11px 20px; border:1px solid var(--line-strong); border-radius:999px; background:var(--glass-2); color:var(--ink); cursor:pointer; text-decoration:none; box-shadow:none; transition:transform .15s, box-shadow .15s, background .15s, color .15s, border-color .15s; } .btn:hover { background:var(--glass); text-decoration:none; color:var(--ink); transform:translateY(-2px); border-color:var(--accent); } .btn:active { transform:translateY(0); } .btn:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; transform:none; } .btn-primary { background:linear-gradient(120deg,var(--accent),var(--accent-2)); border-color:transparent; color:var(--accent-ink); padding:14px 28px; font-size:1.02rem; font-weight:700; box-shadow:0 10px 34px -8px rgba(var(--glow),.5); } .btn-primary:hover { color:var(--accent-ink); transform:translateY(-3px); box-shadow:0 16px 44px -10px rgba(var(--glow),.6); } .btn-primary:active { transform:translateY(0); } .btn-ghost { background:transparent; border-color:transparent; color:var(--accent); box-shadow:none; } .btn-ghost:hover { background:rgba(var(--glow),.10); color:var(--accent); box-shadow:none; transform:none; } /* ---------- drop zone ---------- */ .drop-zone { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:12px; min-height:220px; padding:32px; border:2px dashed var(--line-strong); border-radius:var(--radius); background:var(--glass); color:var(--ink-dim); cursor:pointer; transition:border-color .15s, background .15s, color .15s; } .drop-zone:hover, .drop-zone.is-dragover { border-color:var(--accent); border-style:solid; background:rgba(var(--glow),.06); color:var(--ink); } .drop-zone .drop-icon { width:44px; height:44px; color:var(--accent); } .drop-zone .drop-hint { font-size:.88rem; color:var(--ink-dim); } /* ---------- controls ---------- */ .controls { display:flex; flex-direction:column; gap:16px; margin:20px 0; } .control-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; } .control-row > label { flex:0 0 160px; font-size:.92rem; font-weight:600; color:var(--ink); } .control-row .control-field { flex:1 1 200px; min-width:0; display:flex; align-items:center; gap:10px; } /* ---------- form elements ---------- */ input[type="text"], input[type="number"], input[type="search"], select, textarea { font-family:var(--font-body); font-size:.95rem; color:var(--ink); background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-sm); padding:9px 12px; width:100%; transition:border-color .15s, box-shadow .15s; } input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--glow),.25); } select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23f4f6fb' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:34px; } /* range slider */ input[type="range"] { -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:999px; background:var(--line-strong); cursor:pointer; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%; background:var(--accent); border:2px solid var(--bg); box-shadow:none; } input[type="range"]::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:var(--accent); border:2px solid var(--bg); box-shadow:none; cursor:pointer; } /* checkbox / radio accent */ input[type="checkbox"], input[type="radio"] { accent-color:var(--accent); width:auto; } /* ---------- preview area ---------- */ .preview-area { border:1px solid var(--line); border-radius:var(--radius); background:var(--band); padding:16px; min-height:200px; display:flex; align-items:center; justify-content:center; overflow:auto; } .checkerboard { --sq:12px; background-color:#171c26; background-image: linear-gradient(45deg,#232a36 25%,transparent 25%), linear-gradient(-45deg,#232a36 25%,transparent 25%), linear-gradient(45deg,transparent 75%,#232a36 75%), linear-gradient(-45deg,transparent 75%,#232a36 75%); background-size:calc(var(--sq)*2) calc(var(--sq)*2); background-position:0 0, 0 var(--sq), var(--sq) calc(var(--sq)*-1), calc(var(--sq)*-1) 0; } /* ---------- badges ---------- */ .badge-ok, .badge-warn, .badge-danger { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:.78rem; font-weight:600; padding:4px 11px; border-radius:999px; border:1px solid var(--line); line-height:1.4; } .badge-ok { background:rgba(53,208,127,.14); color:var(--ok); border-color:rgba(53,208,127,.35); } .badge-warn { background:rgba(255,207,92,.14); color:var(--warn); border-color:rgba(255,207,92,.35); } .badge-danger { background:rgba(255,107,129,.14); color:var(--danger); border-color:rgba(255,107,129,.35); } /* ---------- FAQ ---------- */ .faq-block { margin:36px 0; } .faq-block h2 { margin-bottom:16px; } .faq-block h3 { font-family:var(--font-body); font-size:1.02rem; font-weight:700; margin-bottom:4px; } .faq-block .faq-item { padding:18px 0; border-bottom:1px solid var(--line); } .faq-block .faq-item:last-child { border-bottom:none; } .faq-block p { color:var(--ink-dim); margin:0; } /* ---------- related tools ---------- */ .related-tools { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:32px 0; } .related-tools .related-card { display:block; background:linear-gradient(165deg,rgba(22,26,34,.92),rgba(9,11,16,.92)); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px 22px; text-decoration:none; color:var(--ink); transition:box-shadow .15s, transform .15s, border-color .15s; } .related-tools .related-card:hover { box-shadow:var(--shadow-lift); transform:translateY(-3px); border-color:var(--line-strong); text-decoration:none; } .related-tools .related-card strong { display:block; font-family:var(--font-display); font-size:1.05rem; font-weight:700; letter-spacing:-0.01em; margin-bottom:4px; color:var(--ink); } .related-tools .related-card span { color:var(--ink-dim); font-size:.88rem; } /* ---------- ad slot ---------- */ .ad-slot { display:flex; align-items:center; justify-content:center; border:1px dashed var(--line-strong); border-radius:var(--radius-sm); background:repeating-linear-gradient(45deg,rgba(255,255,255,.015) 0 12px,transparent 12px 24px); color:var(--faint); font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; margin:24px 0; } .ad-slot--banner { height:90px; } .ad-slot--box { height:250px; } /* ============================================================ Landing — hero ============================================================ */ .hero { position:relative; overflow:hidden; background:transparent; } .hero .container { padding-top:96px; padding-bottom:88px; position:relative; } .hero-badge { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; border:1px solid var(--line); border-radius:999px; padding:7px 16px; background:var(--glass); color:var(--ink-dim); opacity:0; animation:rise .7s cubic-bezier(.22,1,.36,1) .05s forwards; } .hero-badge .dot { width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 12px var(--ok); animation:blink 1.6s infinite; } .hero-title { font-family:var(--font-display); font-size:clamp(56px,8.5vw,118px); line-height:.98; letter-spacing:-.035em; font-weight:800; margin:28px 0 0; max-width:1000px; } .hero-title .line { display:inline-block; opacity:0; animation:rise .8s cubic-bezier(.22,1,.36,1) forwards; } .hero-title .line:nth-child(1) { animation-delay:.15s; } .hero-title .line:nth-child(3) { animation-delay:.28s; } .hero-title .line:nth-child(5) { animation-delay:.41s; } .hero-title .mark { font-style:normal; color:var(--accent); position:relative; display:inline-block; } .hero-title .mark svg { position:absolute; left:0; bottom:-10px; width:100%; height:22px; overflow:visible; } .hero-title .dot-accent { color:var(--accent); } .hero-foot { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-top:44px; flex-wrap:wrap; } .hero-sub { font-size:20px; line-height:1.55; max-width:480px; margin:0; font-weight:400; color:var(--ink-dim); opacity:0; animation:rise .8s cubic-bezier(.22,1,.36,1) .55s forwards; } .hero-cta-wrap { display:flex; align-items:center; gap:24px; opacity:0; animation:rise .8s cubic-bezier(.22,1,.36,1) .65s forwards; } .hero-cta { background:linear-gradient(120deg,var(--accent),var(--accent-2)); color:var(--accent-ink); padding:18px 34px; border-radius:999px; font-weight:700; font-size:17px; display:inline-flex; align-items:center; gap:10px; box-shadow:0 14px 40px -10px rgba(var(--glow),.55); transition:transform .18s, box-shadow .18s; } .hero-cta:hover { color:var(--accent-ink); transform:translateY(-2px); box-shadow:0 20px 54px -12px rgba(var(--glow),.7); } .hero-cta:active { transform:translateY(0); } .hero-rotor { width:92px; height:92px; position:relative; flex-shrink:0; } .hero-rotor .rotor-svg { width:100%; height:100%; animation:spinSlow 14s linear infinite; } .hero-rotor .rotor-svg text { font-family:var(--font-mono); font-size:11.5px; letter-spacing:2.5px; fill:var(--ink); } .hero-rotor .rotor-star { position:absolute; inset:0; display:grid; place-items:center; font-size:24px; } /* ============================================================ Landing — marquee band ============================================================ */ .marquee-band { background:var(--band); color:var(--ink); overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:14px 0; } .marquee-track { display:flex; width:max-content; animation:marquee 22s linear infinite; font-family:var(--font-mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; } .marquee-track span { padding-right:48px; } .marquee-track .star { color:var(--accent); } /* ============================================================ Landing — toolbox / bento grid ============================================================ */ .tools-section { padding:88px 0 96px; } .tools-head { display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-bottom:40px; flex-wrap:wrap; } .tools-head h2 { font-size:clamp(34px,4vw,52px); letter-spacing:-.03em; font-weight:800; margin:0; } .tools-head .eyebrow { font-family:var(--font-mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); } .tools-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:20px; } .tool-card { grid-column:span 2; position:relative; display:flex; flex-direction:column; min-height:280px; background:linear-gradient(165deg,rgba(22,26,34,.92),rgba(9,11,16,.92)); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px; text-decoration:none; color:var(--ink); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:transform .18s, box-shadow .18s, border-color .18s; } .tool-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:var(--line-strong); text-decoration:none; color:var(--ink); } .tool-card .card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; } .tool-card .card-num { font-family:var(--font-mono); font-size:13px; letter-spacing:.1em; color:var(--faint); } .tool-card .card-glyph { font-size:44px; margin:26px 0 0; line-height:1; } .tool-card .card-body { margin-top:auto; padding-top:28px; } .tool-card h3 { font-size:24px; font-weight:700; letter-spacing:-.02em; margin:0 0 10px; display:flex; align-items:center; gap:10px; color:var(--ink); } .tool-card h3 .arrow { font-size:20px; transition:transform .2s; display:inline-block; } .tool-card:hover h3 .arrow { transform:translateX(5px); } .tool-card p { margin:0; font-size:15px; line-height:1.55; color:var(--ink-dim); } /* flagship (wide, glow gradient) */ .tool-card.is-flagship { grid-column:span 4; background:linear-gradient(120deg,rgba(var(--glow),.22),rgba(124,92,255,.12) 60%,rgba(18,12,30,.72)); color:var(--ink); border-color:var(--line-strong); } .tool-card.is-flagship .card-num { color:var(--faint); } .tool-card.is-flagship h3 { color:var(--ink); } .tool-card.is-flagship p { color:var(--ink-dim); } .tool-card .flagship-tag { background:linear-gradient(120deg,var(--accent),var(--accent-2)); color:var(--accent-ink); font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:5px 12px; border-radius:999px; transform:rotate(3deg); white-space:nowrap; } /* ============================================================ Landing — trust band ============================================================ */ .trust-strip { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--band); } .trust-strip .trust-inner { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; padding:64px 0; } .trust-strip .trust-point { display:flex; flex-direction:column; gap:10px; align-items:flex-start; } .trust-strip .trust-point .t-emoji { font-size:30px; } .trust-strip .trust-point strong { font-size:19px; letter-spacing:-.01em; font-weight:700; color:var(--ink); } .trust-strip .trust-point span { font-size:15px; line-height:1.55; color:var(--ink-dim); } /* ============================================================ Keyframes ============================================================ */ @keyframes rise { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } } @keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } } @keyframes spinSlow { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } @keyframes blink { 0%,100% { opacity:1; } 50% { opacity:.15; } } @keyframes drift { 0% { background-position:0 0; } 100% { background-position:56px 56px; } } /* ============================================================ Responsive ============================================================ */ @media (max-width:1024px) { .tools-grid { grid-template-columns:repeat(2,1fr); } .tool-card { grid-column:span 1; } .tool-card.is-flagship { grid-column:span 2; } } @media (max-width:640px) { :root { --space:20px; } h1 { font-size:2.1rem; } .hero .container { padding-top:60px; padding-bottom:56px; } .hero-foot { flex-direction:column; align-items:flex-start; gap:28px; } .tools-section { padding:56px 0 64px; } .tools-grid { grid-template-columns:1fr; } .tool-card, .tool-card.is-flagship { grid-column:span 1; } .trust-strip .trust-inner { grid-template-columns:1fr; gap:32px; padding:44px 0; } .related-tools { grid-template-columns:1fr; } .site-nav { gap:16px; } .control-row > label { flex-basis:100%; } } /* header: keep logo + nav on one row without horizontal overflow on phones */ @media (max-width:600px) { .site-header .container { gap:10px; } .site-logo { font-size:1.1rem; gap:8px; } .site-logo .logo-mark { width:26px; height:26px; } .site-nav { gap:13px; } .site-nav a { font-size:.85rem; } .site-nav a.btn-pro { padding:7px 13px; font-size:.82rem; } } @media (max-width:400px) { .site-logo { font-size:1rem; } .site-nav { gap:10px; } .site-nav a { font-size:.8rem; } .site-nav a.btn-pro { padding:6px 11px; } } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .hero { animation:none; } .marquee-track { animation:none; } .hero-rotor .rotor-svg { animation:none; } .hero-badge, .hero-title .line, .hero-sub, .hero-cta-wrap { animation:none; opacity:1; transform:none; } .hero-badge .dot { animation:none; } } /* ============================================================ ============================================================ UI REDESIGN v3 — ZONE + MOTION LAYER (append-only) Zone identity + 2026 motion layer. In v5 the values are the deep-black showroom skin; the v3 mechanism (data-zone scope, frozen class/variable names) is preserved verbatim. --accent stays authoritative for brand-common elements; --zone drives zone-scoped elements and now aliases --accent per zone. ============================================================ ============================================================ */ /* ---------- A-1. Zone signature accent tokens ---------- RULE: emphasis / border / badge / glyph-chip / hover-glow / underline. Body + core data text always stays --ink. WCAG (dark-showroom, measured against #050608): tools #39d7ff ~11:1 (body-capable) games #7c5cff ~4.8:1 (large text / UI) fun #ffcf5c ~13:1 (body-capable) guides #5fe3b0 ~11:1 (body-capable) Zone-ink (#050608) on a zone fill: aqua/gold/mint high-contrast; violet ~4.6:1 (large-text / UI bar). Darker --zone-2 pair given for any stronger-contrast need. */ :root{ --zone-tools:#39d7ff; --zone-tools-2:#6ff0ff; /* aqua — work/production (== --accent) */ --zone-games:#7c5cff; --zone-games-2:#b39bff; /* violet — arcade/play/digital */ --zone-fun:#ffcf5c; --zone-fun-2:#ffe6a0; /* gold — toy/experiment/play */ --zone-guides:#5fe3b0; --zone-guides-2:#37c98f; /* mint — reading (derived 4th axis) */ --zone-ink:#050608; /* dark text on a zone-filled surface */ /* active zone (default = brand) */ --zone:var(--zone-tools); --zone-2:var(--zone-tools-2); /* per-zone background texture (2nd channel — shape, not color). optional in v5 (zone glow is primary identity). default = faint grid. */ --zone-texture: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 56px), repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 56px); } [data-zone="tools"] { --zone:var(--zone-tools); --zone-2:var(--zone-tools-2); --accent:var(--zone-tools); --glow:57,215,255; --zone-texture: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 56px), repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 56px); } [data-zone="games"] { --zone:var(--zone-games); --zone-2:var(--zone-games-2); --accent:var(--zone-games); --glow:124,92,255; --zone-texture:radial-gradient(rgba(124,92,255,.16) 1.5px, transparent 1.6px); } /* dot grid */ [data-zone="fun"] { --zone:var(--zone-fun); --zone-2:var(--zone-fun-2); --accent:var(--zone-fun); --glow:255,207,92; --zone-texture:repeating-linear-gradient(45deg, rgba(255,207,92,.08) 0 10px, transparent 10px 20px); } /* diagonal stripes */ [data-zone="guides"] { --zone:var(--zone-guides); --zone-2:var(--zone-guides-2); --accent:var(--zone-guides); --glow:95,227,176; --zone-texture: repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 56px), repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 56px); } /* ---------- A-4. Zone awareness devices ---------- */ /* 1) header bottom line picks up the zone color (neutral pages keep line) */ [data-zone] .site-header{ border-bottom-width:2px; border-bottom-color:var(--zone); } /* 2) nav current item marker (large-text underline) */ .site-nav a[aria-current="page"]{ color:var(--zone); font-weight:700; } .site-nav a[aria-current="page"]::after{ content:""; display:block; height:3px; margin-top:3px; border-radius:2px; background:var(--zone); } /* 3) zone badge (card top-left + individual-page tool-head) */ .zone-tag{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--zone-ink); background:var(--zone); border:none; border-radius:999px; padding:4px 11px; box-shadow:0 6px 18px -6px rgba(var(--glow),.5); } /* 4) breadcrumb zone label color */ .tool-head .breadcrumb .crumb-zone{ color:var(--zone); font-weight:600; } /* ---------- A-3. Zone band (landing section wrapper) ---------- */ .zone-band{ position:relative; background-image:var(--zone-texture); } .zone-band > .container{ position:relative; } /* thin zone separator line (opt-in, 1 line — "you changed zone" signal) */ .zone-sep{ height:2px; border:none; margin:0; background:var(--zone); opacity:.8; } /* fun cards get a subtle sticker tilt (2nd channel — shape) */ [data-zone="fun"] .tool-card{ transform:rotate(-1.2deg); } [data-zone="fun"] .tool-card:hover{ transform:translateY(-4px) rotate(-1.2deg); } /* ---------- .section-head common promotion ---------- Promoted verbatim from the identical inline