/* ============================================================ ◮ DUTCHTIDE — DESIGN TOKENS — THE REFINEMENT ZONE ◮ Change values here → they cascade to every page that links this file. Everything is PROVISIONAL and meant to be tuned. Modes: light (default) · dark · paper. See /DESIGN.md. The :root + [data-theme] blocks below are the dial. ============================================================ */ /* Registered as so the wall gradient TWEENS smoothly when the mode changes (the opacity-merge between modes). */ @property --wall-1{syntax:'';inherits:true;initial-value:#f3efe7} @property --wall-2{syntax:'';inherits:true;initial-value:#e9e3d6} :root{ --font-mono:'DM Mono',ui-monospace,monospace; --font-sans:'Inter',system-ui,sans-serif; --ease:cubic-bezier(.16,1,.3,1); --dur-swap:.9s; --dur-hover:.25s; /* type scale ⚠︎ tunable */ --fs-eyebrow:10px; --fs-body:14px; --fs-title:clamp(40px,6.4vw,92px); --track-eyebrow:.3em; --track-button:.24em; /* menus/modals = semi-transparent GLASS (see-through + blur), not opaque ⚠︎ tunable */ --menu-glassA:.55; --menu-blur:22px; /* paper-mode texture ⚠︎ tunable — swap to url("/assets/paper-linen.jpg") for the woven look */ --paper-tex:url("/assets/paper-press.jpg"); --paper-tex-strength:.28; } /* Shared glass-menu surface — use on any modal/popover/dropdown card */ .glass-menu{background:rgba(var(--glass),var(--menu-glassA)); -webkit-backdrop-filter:blur(var(--menu-blur)) saturate(1.3); backdrop-filter:blur(var(--menu-blur)) saturate(1.3); border:1px solid rgba(var(--accent),.18)} /* mode switch eases the palette (gradient + derived colors) ⚠︎ tunable */ html{transition:--wall-1 var(--dur-swap) var(--ease),--wall-2 var(--dur-swap) var(--ease)} /* — LIGHT (default) — warm soft-white wall, shadow video ON ⚠︎ tunable — */ [data-theme="light"]{ --wall-1:#f3efe7; --wall-2:#e9e3d6; --ink:32,28,22; --accent:188,64,58; --surface-rgb:255,253,249; --rule-rgb:32,28,22; --glass:248,245,238; --glassA:.8; --wall-video:url("/assets/wall-light.mp4"); --wall-blend:multiply; --wall-opacity:.55; --wall-blur:.4px; } /* — DARK — bokeh sunlight screens in ⚠︎ tunable — */ [data-theme="dark"]{ --wall-1:#15171d; --wall-2:#0e0f14; --ink:230,228,234; --accent:226,118,96; --surface-rgb:26,28,36; --rule-rgb:230,228,234; --glass:18,20,26; --glassA:.8; --wall-video:url("/assets/wall-dark.mp4"); --wall-blend:screen; --wall-opacity:.42; --wall-blur:1px; } /* — PAPER — flat textured paper, no video ⚠︎ tunable — */ [data-theme="paper"]{ --wall-1:#ece5d6; --wall-2:#e6ded0; --ink:46,40,32; --accent:182,70,58; --surface-rgb:247,242,232; --rule-rgb:46,40,32; --glass:243,238,228; --glassA:.8; --wall-video:none; --wall-blend:normal; --wall-opacity:0; --wall-blur:0px; } /* ============================================================ STRUCTURAL — ambient wall (injected by wall.js). Look values above; geometry here. Edit cautiously. ============================================================ */ /* Sits behind all page content (z-index:-1). The adopting page's must be transparent for the wall to show. */ #wall{position:fixed;inset:0;overflow:hidden;z-index:-1;pointer-events:none; background:linear-gradient(160deg,var(--wall-1),var(--wall-2))} /* opacity is driven by wall.js per-layer for the cross-fade merge between modes */ #wall video{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover; mix-blend-mode:var(--wall-blend);opacity:0; filter:blur(var(--wall-blur)) saturate(.96); transition:opacity var(--dur-swap) var(--ease)} #paperTex{position:absolute;inset:0;opacity:0; background:var(--paper-tex) center/cover;mix-blend-mode:multiply; transition:opacity 1s var(--ease)} [data-theme="paper"] #paperTex{opacity:var(--paper-tex-strength)} #vig{position:absolute;inset:0; background:radial-gradient(120% 90% at 50% 30%,transparent 55%,rgba(0,0,0,.12) 100%)} [data-theme="dark"] #vig{background:radial-gradient(120% 90% at 50% 26%,transparent 42%,rgba(0,0,0,.42) 100%)} /* ============================================================ COMPONENT PATTERNS — optional adoption helpers (ink-paper). ============================================================ */ .eyebrow{font-family:var(--font-mono);font-size:var(--fs-eyebrow); letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:rgba(var(--ink),.52)} .btn{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--track-button); text-transform:uppercase;padding:14px 22px;border-radius:2px;cursor:pointer; transition:var(--dur-hover)} .btn.solid{background:rgba(var(--ink),.92);color:var(--wall-1);border:1px solid transparent} .btn.solid:hover{transform:translateY(-1px)} .btn.ghost{background:transparent;border:1px solid rgba(var(--ink),.42);color:rgba(var(--ink),.82)} .btn.ghost:hover{background:rgba(var(--ink),.06)} .seal{color:rgba(var(--accent),.9)} .rule-dotted{border:0;border-top:1px dotted rgba(var(--rule-rgb),.35)} /* ── Shared site nav: brand logo + ANIMATED account menu (site-nav.js) ── */ .dt-brand{display:inline-flex;align-items:center;color:currentColor;text-decoration:none} .dt-brand svg{height:24px;width:auto;display:block} .dt-acct-wrap{position:relative;display:inline-flex} .dt-acct-drop{position:absolute;top:calc(100% + 10px);right:0;min-width:214px;z-index:900;padding:6px;border-radius:14px; background:rgba(22,22,28,.72);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3); border:1px solid rgba(255,255,255,.14);box-shadow:0 16px 44px rgba(0,0,0,.34); opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;pointer-events:none; transition:opacity .18s ease,transform .22s cubic-bezier(.16,1,.3,1)} .dt-acct-drop.open{opacity:1;transform:none;pointer-events:auto} .dt-acct-head{padding:9px 12px 7px;font:600 10px/1 'DM Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)} .dt-acct-item{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;padding:11px 12px;border-radius:9px;box-sizing:border-box; font:500 11px/1 'DM Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.86); background:none;border:0;cursor:pointer;text-decoration:none;transition:background .15s} .dt-acct-item:hover{background:rgba(255,255,255,.08)} .dt-acct-ic{opacity:.5;font-size:12px} .dt-acct-sep{height:1px;margin:5px 8px;background:rgba(255,255,255,.12)} .dt-acct-item--danger{color:rgba(240,120,100,.92)} .dt-acct-item--danger:hover{background:rgba(240,100,80,.14)} [data-theme="light"] .dt-acct-drop{background:rgba(246,245,248,.82);border-color:rgba(0,0,0,.1);box-shadow:0 16px 44px rgba(0,0,0,.14)} [data-theme="light"] .dt-acct-head{color:rgba(20,20,26,.5)} [data-theme="light"] .dt-acct-item{color:rgba(20,20,26,.86)} [data-theme="light"] .dt-acct-item:hover{background:rgba(0,0,0,.06)} [data-theme="light"] .dt-acct-sep{background:rgba(0,0,0,.12)}