/* ============================================================ 4 · EN DAN Z ALFREDOM — sections/dan.css Extracted from Alfred.dc.html section 4 inline styles (design tokens per handoff README). Self-contained: pairs with dan.html + dan.js. Assumes Playfair Display 700 (+700 italic) and Inter 400/500/600 are loaded page-wide (handoff head). Gate: html.js set in . ============================================================ */ /* ---------- section shell (cream) ---------- */ #dan { background: #F4EDE0; color: #0B1929; font-family: 'Inter', system-ui, sans-serif; } #dan .al-dan-wrap { max-width: 1140px; margin: 0 auto; padding: clamp(64px, 9vw, 120px) clamp(20px, 5vw, 56px); } /* ---------- intro ---------- */ .al-dan-eyebrow { margin: 0; font: 600 12px 'Inter', system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #B8935A; } .al-dan-title { font-family: 'Playfair Display', serif; font-weight: 700; font-size: clamp(30px, 4.6vw, 50px); line-height: 1.06; letter-spacing: -.015em; margin: 12px 0 0; text-wrap: balance; } .al-dan-lead { margin: 18px 0 0; font-size: clamp(16px, 1.8vw, 18px); line-height: 1.6; color: #2C3440; max-width: 60ch; text-wrap: pretty; } /* ---------- dots (12) ---------- */ .al-dan-dots { display: flex; gap: 10px; flex-wrap: wrap; margin: 28px 0 14px; } .al-dan-dots button { position: relative; width: 11px; height: 11px; border-radius: 50%; border: 1px solid #B8935A; background: transparent; cursor: pointer; padding: 0; -webkit-appearance: none; appearance: none; transition: background .3s, transform .3s; } /* expanded hit area (21px pitch — limited by the 10px gap; see NOTES) */ .al-dan-dots button::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; } .al-dan-dots button[aria-pressed="true"] { background: #B8935A; transform: scale(1.15); } .al-dan-dots button:focus-visible { outline: 2px solid #B8935A; outline-offset: 2px; } /* ---------- progress line (2px, brass, scaleX 5.2s) ---------- */ .al-dan-progress { height: 2px; background: rgba(184, 147, 90, .22); border-radius: 2px; overflow: hidden; max-width: 440px; } .al-danbar { height: 100%; background: #B8935A; transform: scaleX(0); transform-origin: left; } .al-danbar.is-running { animation: al-dan-grow 5.2s linear forwards; } /* JS adds .is-paused on the section on hover/focus pause */ #dan.is-paused .al-danbar { animation-play-state: paused; } /* ---------- rotating sets ---------- */ .al-dan-sets { touch-action: pan-y; /* keep vertical scroll; horizontal swipe is ours */ } /* JS mode: stack all sets in one grid cell → container keeps the height of the tallest set → zero layout shift below the section while rotating. */ html.js .al-dan-sets { display: grid; } html.js .al-dan-sets > .al-dan-set { grid-area: 1 / 1; } html.js .al-dan-set[data-inactive] { visibility: hidden; opacity: 0; pointer-events: none; } /* fadeUp remount — dan.js re-toggles .is-entering on every set change */ html.js .al-dan-set.is-entering { animation: al-fade-up .4s ease both; } .al-dan-set { margin-top: 26px; } /* no-JS: dots + progress hidden, all 12 sets stacked and readable */ html:not(.js) .al-dan-dots, html:not(.js) .al-dan-progress { display: none; } html:not(.js) .al-dan-set + .al-dan-set { margin-top: clamp(48px, 7vw, 72px); border-top: 1px solid rgba(184, 147, 90, .35); padding-top: clamp(32px, 5vw, 48px); } /* ---------- set head: hook + scene ---------- */ .al-dan-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 40px; flex-wrap: wrap; margin: 0 0 clamp(24px, 3.5vw, 40px); } .al-dan-head-text { flex: 1 1 320px; min-width: 0; } .al-dan-hook { font-family: 'Playfair Display', serif; font-weight: 700; font-size: clamp(23px, 3.2vw, 36px); line-height: 1.1; margin: 0; max-width: 22ch; text-wrap: balance; } .al-dan-sublead { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: #2C3440; max-width: 52ch; text-wrap: pretty; } .al-dan-scene { width: 118px; height: auto; flex: none; stroke: #B8935A; stroke-width: var(--illo-sw, 1.8); fill: none; stroke-linecap: round; stroke-linejoin: round; } .al-scene-pulse { transform-box: fill-box; /* pulse in place (prototype scaled from svg origin) */ transform-origin: center; animation: al-pulse-dot 2.4s ease-in-out infinite; } /* ---------- vignettes (3 per set) ---------- */ .al-dan-vignettes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(22px, 3vw, 40px); } .al-vin { border-top: 1px solid rgba(184, 147, 90, .55); padding-top: 18px; } /* big brass Playfair time */ .al-vin-time { font-family: 'Playfair Display', serif; font-weight: 700; font-size: clamp(30px, 4vw, 44px); color: #B8935A; line-height: 1; } /* small context qualifier under the time ("· Kuhinja" part of canon copy); graphite, not brass — brass on cream only ≥24px per contrast rules */ .al-vin-ctx { display: block; margin-top: 8px; font: 600 11px 'Inter', system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #2C3440; } /* command line with brass » */ .al-vin-cmd { margin: 18px 0 0; display: flex; gap: 8px; font-size: 15px; line-height: 1.55; color: #0B1929; } .al-vin-q { color: #B8935A; font-family: 'Playfair Display', serif; font-weight: 700; line-height: 1.35; } /* Alfred's reply — italic Playfair graphite with sage check */ .al-vin-reply { margin: 12px 0 0; display: flex; gap: 9px; align-items: flex-start; font-style: italic; font-family: 'Playfair Display', serif; font-weight: 700; /* only 700 (+italic) is loaded — Alfredov glas per tokens */ font-size: 16px; line-height: 1.5; color: #2C3440; } /* vignettes without a cmd row (Alfred-proactive/narrative): same 18px rhythm under the time block as cmd rows have */ .al-vin-time + .al-vin-reply { margin-top: 18px; } .al-vin-check { width: 14px; height: 14px; flex: none; margin-top: 5px; stroke: #7A8B5C; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } /* outcome — 11.5px uppercase with sage — */ .al-vin-izid { margin: 12px 0 0; font: 600 11.5px 'Inter', system-ui, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: #2C3440; line-height: 1.7; /* production outcomes are full sentences — wraps 2–3 lines */ text-wrap: pretty; } .al-vin-dash { color: #7A8B5C; } /* ---------- keyframes (namespaced — no collision with other parts) ---------- */ @keyframes al-dan-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes al-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes al-pulse-dot { 0%, 100% { opacity: .4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } } /* ---------- ≤820px: single column (per handoff) ---------- */ @media (max-width: 820px) { .al-dan-vignettes { grid-template-columns: 1fr; } } /* ---------- reduced motion: static, no auto-rotation UI ---------- */ @media (prefers-reduced-motion: reduce) { .al-dan-progress { display: none; /* prototype hid the bar; we hide the whole track */ } #dan *, #dan { animation: none !important; transition: none !important; } }