/* =========================================================== Made in Ludhiana — cinematic timeline Apple-anniversary-page energy: huge type, dark canvas, one accent, decade chapters that reveal as you scroll. No images, no animation library — CSS transforms + IntersectionObserver. =========================================================== */ :root { --ink: #050505; --ink-2: #0d0d0e; --ink-3: #151517; --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.16); --paper: #f5f3ef; --text: #f2f0ec; --text-dim: rgba(242,240,236,.62); --text-faint: rgba(242,240,236,.36); --accent: #d98a4f; --accent-2: #f0b378; --accent-wash: rgba(217,138,79,.14); --green: #8fbf8a; --red: #d97a6a; --gold: var(--accent); /* back-compat alias used by the admin dashboard */ --serif: 'New York', Georgia, 'Times New Roman', serif; --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, 'Helvetica Neue', Arial, sans-serif; --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --ease: cubic-bezier(.16,1,.3,1); --ease-soft: cubic-bezier(.25,.7,.35,1); } * { box-sizing: border-box; } /* NB: no overflow-x here on purpose — it silently turns into the scroll container and breaks position:sticky, which the timeline dock depends on. The drawer and filter panel are position:fixed, so they can't widen the page. */ html { scroll-behavior: smooth; background: var(--ink); } body { margin: 0; background: var(--ink); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--accent-2); text-decoration: none; } a:hover { text-decoration: underline; } button, input, select, textarea { font: inherit; color: inherit; } img { max-width: 100%; display: block; } .wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; } .hide { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } /* generic scroll-reveal primitive — JS adds .in when a node enters view */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); will-change: opacity, transform; } .reveal.in { opacity: 1; transform: none; } .reveal.r1 { transition-delay: .06s; } .reveal.r2 { transition-delay: .12s; } .reveal.r3 { transition-delay: .18s; } .reveal.r4 { transition-delay: .24s; } /* ------------------------------------------------- header */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 64px; display: flex; align-items: center; backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); background: rgba(5,5,5,.55); border-bottom: 1px solid transparent; transition: border-color .4s ease; } .site-header.scrolled { border-bottom-color: var(--line); } .site-header .wrap { display: flex; align-items: center; gap: 20px; width: 100%; } .brand { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--text); } .brand:hover { text-decoration: none; } .brand .mark { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--accent); color: var(--ink); font-size: 10px; font-weight: 800; } .brand em { font-style: normal; color: var(--text-dim); font-weight: 400; } .site-header nav { margin-left: auto; display: flex; align-items: center; gap: 4px; } .site-header nav a { padding: 8px 14px; border-radius: 999px; color: var(--text-dim); font-size: 13.5px; transition: .15s; } .site-header nav a:hover { background: rgba(255,255,255,.06); color: var(--text); text-decoration: none; } .site-header nav a.cta { background: var(--text); color: var(--ink); font-weight: 600; } .site-header nav a.cta:hover { background: var(--accent-2); } /* ------------------------------------------------- hero */ /* Short by roughly the height of the timeline block that follows it, so hero + chart together fill the first screen without the chart ever overlapping text. */ .hero { min-height: calc(100vh - 250px); display: flex; flex-direction: column; justify-content: center; padding: 120px 0 24px; position: relative; } .hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 60% 40% at 50% 0%, var(--accent-wash), transparent 70%); } .hero-eyebrow { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-2); font-weight: 600; margin-bottom: 22px; } .hero h1 { font-family: var(--sans); font-weight: 700; letter-spacing: -.03em; font-size: clamp(42px, 8.5vw, 118px); line-height: .98; margin: 0; max-width: 15ch; } /* warm, not grey — grey at this size reads as a half-loaded page */ .hero h1 em { font-style: normal; color: var(--accent-2); } .hero p.lede { margin: 32px 0 0; max-width: 46ch; font-size: clamp(17px, 1.6vw, 21px); color: var(--text-dim); line-height: 1.65; } .hero-actions { display: flex; gap: 14px; margin-top: 44px; flex-wrap: wrap; } .btn-hero { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border-radius: 999px; font-size: 15px; font-weight: 600; transition: transform .3s var(--ease), background .2s; } .btn-hero.primary { background: var(--text); color: var(--ink); } .btn-hero.primary:hover { background: var(--accent-2); transform: translateY(-2px); text-decoration: none; } .btn-hero.ghost { border: 1px solid var(--line-2); color: var(--text); } .btn-hero.ghost:hover { background: rgba(255,255,255,.06); transform: translateY(-2px); text-decoration: none; } .hero-stats { display: flex; gap: 48px; margin-top: 56px; flex-wrap: wrap; } .hstat b { display: block; font-size: clamp(28px, 3.2vw, 40px); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.05; } .hstat span { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); } .scroll-cue { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text-faint); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; animation: cueBob 2.2s ease-in-out infinite; } .scroll-cue i { width: 1px; height: 34px; background: linear-gradient(var(--text-faint), transparent); } @keyframes cueBob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } } /* ------------------------------------------------- the timeline dock Fixed from the start. JS drives three custom properties as you scroll: --dock-y (translate), --dock-scale (bar height), --dock-chrome / --dock-labels (fades). Everything animated here is transform or opacity, so the whole hero-to-strip transition is composited and never touches layout. */ /* tall enough to hold the docked bars AND the year labels underneath them */ .tl-chrome { position: fixed; top: 64px; left: 0; right: 0; height: 74px; z-index: 44; background: rgba(5,5,5,.82); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border-bottom: 1px solid var(--line); opacity: var(--dock-chrome, 0); pointer-events: none; } /* Sticky, not fixed. In flow it can never land on top of the hero copy, and it reserves its own space; once it reaches the header it pins there and the bars collapse upward (origin: top) into a thin strip. */ .tl-dock { position: sticky; top: 64px; z-index: 45; pointer-events: none; } .tl-dock-inner { position: relative; max-width: 1180px; margin: 0 auto; padding: 0 24px; } .tl-scale { position: relative; height: var(--bars-h, 190px); transform: scaleY(var(--dock-scale, 1)); transform-origin: top; will-change: transform; } .tl-bars { display: flex; align-items: flex-end; gap: 11px; height: 100%; pointer-events: auto; cursor: pointer; outline: none; } .tl-bars:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 4px; } .tl-decade { display: flex; align-items: flex-end; gap: 1.5px; height: 100%; min-width: 0; opacity: var(--decade-dim, 1); transition: opacity .35s var(--ease); } .tl-decade.on { opacity: 1; } /* the catch-all bucket is one value, not a decade — keep it narrow and muted so it reads as a footnote rather than the biggest thing on the chart */ .tl-decade[data-decade="pre"] { opacity: calc(var(--decade-dim, 1) * .7); } .tl-decade[data-decade="pre"] .tl-bar::before { border-radius: 2px; } .tl-bar { flex: 1 1 0; min-width: 0; height: 100%; position: relative; } .tl-bar::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: var(--bar, var(--accent)); border-radius: 2px 2px 0 0; transform: scaleY(0); transform-origin: bottom; transition: transform .55s var(--ease), filter .2s; } .tl-dock.ready .tl-bar::before { transform: scaleY(var(--h, 0)); } .tl-bar::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line-2); } .tl-bar.hot::before { filter: brightness(1.35); } .tl-playhead { position: absolute; top: -6px; bottom: -1px; width: 1.5px; border-radius: 2px; background: var(--text); left: var(--play, 0px); opacity: var(--play-op, 0); transition: left .2s linear, opacity .3s; box-shadow: 0 0 12px rgba(255,255,255,.5); } /* The labels stay visible in both states — a strip of bars with no years on it is unreadable. .tl-scale keeps its full 190px box in flow no matter how far down it scales, so the axis is pulled back up by the difference. translateY, not margin: a transform is composited, a margin would force a layout pass every frame. */ .tl-axis { display: flex; gap: 11px; margin-top: 9px; transform: translateY(calc(var(--bars-h, 190px) * (var(--dock-scale, 1) - 1))); will-change: transform; } /* min-width:0 is load-bearing — without it a label wider than its bar group (like "‹40") pushes every column out of alignment with the bars above. */ .tl-axis span { flex: 1 1 0; min-width: 0; overflow: hidden; font-size: 10.5px; letter-spacing: .05em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--bar, var(--text-faint)); /* matches its own bars */ transition: color .3s, font-weight .3s; } .tl-axis span.on { color: var(--text); font-weight: 700; } /* tracks the bars' *visual* bottom in both states, clearing the year labels */ .tl-tip { position: absolute; left: 0; top: calc(var(--bars-h, 190px) * var(--dock-scale, 1) + 32px); transform: translateX(-50%); pointer-events: none; opacity: 0; background: var(--text); color: var(--ink); font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 7px; white-space: nowrap; transition: opacity .18s, left .12s linear; } .tl-tip.show { opacity: 1; } /* ------------------------------------------------- chapters */ /* scroll-margin clears the header + the docked strip + its year labels */ .chapter { position: relative; padding: 130px 0 40px; border-top: 1px solid var(--line); scroll-margin-top: 152px; } .chapter:first-of-type { border-top: 0; padding-top: 40px; } .chapter-head { margin-bottom: 70px; } .chapter-eyebrow { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-faint); display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .chapter-eyebrow .n { color: var(--accent-2); font-variant-numeric: tabular-nums; } .chapter h2 { font-weight: 700; letter-spacing: -.03em; line-height: .94; margin: 0; font-size: clamp(52px, 9vw, 128px); font-variant-numeric: tabular-nums; color: var(--chapter-accent, var(--text)); } .chapter-sub { margin: 20px 0 0; color: var(--text-dim); font-size: 17px; max-width: 52ch; } /* ------------------------------------------------- landmark hero cards */ .landmark-stack { position: relative; margin-bottom: 28px; } .landmark-hero { position: relative; padding: 64px 44px; border-radius: 28px; margin-bottom: 28px; background: linear-gradient(155deg, var(--ink-3), var(--ink-2)); border: 1px solid var(--line); overflow: hidden; cursor: pointer; transition: border-color .3s, box-shadow .3s; } .landmark-hero::before { content: ''; position: absolute; inset: 0; opacity: .5; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 15% 0%, var(--chapter-accent-wash, var(--accent-wash)), transparent 70%); } .landmark-hero:hover { border-color: var(--line-2); } /* --- the deck --------------------------------------------------------- Only kicks in when a decade has more than one landmark. Every card sticks just below the docked timeline strip, each one 16px lower than the last so the card behind leaves a visible ledge. JS scales and dims the buried cards as the next one rides up over them, which is what sells the depth. Scaling from the TOP edge keeps the ledges evenly spaced as cards shrink. */ .landmark-stack.is-stack .landmark-hero { position: sticky; top: calc(150px + var(--i, 0) * 16px); margin-bottom: 68vh; transform-origin: top center; transform: scale(var(--stack-scale, 1)); will-change: transform; box-shadow: 0 -1px 0 var(--line-2), 0 30px 60px -20px rgba(0,0,0,.85); /* transform is driven per frame from scroll — it must NOT be transitioned here, or the .reveal rule's .9s ease would make the whole deck lag behind the page */ transition: border-color .3s, box-shadow .3s, opacity .9s var(--ease); } /* the last card has nothing riding over it, so it needs no run-out space */ .landmark-stack.is-stack .landmark-hero:last-child { margin-bottom: 28px; } /* dimming layer — cheaper and steadier than animating opacity on the whole card, which would let the card underneath bleed through */ .landmark-stack.is-stack .landmark-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--ink); opacity: var(--stack-dim, 0); } .landmark-hero .yr { font-size: clamp(64px, 11vw, 160px); font-weight: 800; letter-spacing: -.04em; line-height: .85; color: var(--chapter-accent, var(--accent)); font-variant-numeric: tabular-nums; position: relative; } .landmark-hero h3 { font-size: clamp(28px, 4vw, 48px); font-weight: 700; letter-spacing: -.02em; margin: 18px 0 12px; position: relative; max-width: 22ch; } .landmark-hero .sum { color: var(--text-dim); font-size: 17px; max-width: 56ch; margin: 0 0 22px; position: relative; } .landmark-hero .meta { display: flex; gap: 10px; flex-wrap: wrap; position: relative; } /* ------------------------------------------------- compact list rows */ .row-list { display: flex; flex-direction: column; } .row-item { display: grid; grid-template-columns: 88px 1fr auto; gap: 22px; align-items: center; padding: 22px 4px; border-top: 1px solid var(--line); cursor: pointer; transition: background .2s; } .row-list .row-item:last-child { border-bottom: 1px solid var(--line); } .row-item:hover { background: rgba(255,255,255,.03); } .row-item .yr { font-size: 18px; font-weight: 600; color: var(--text-dim); font-variant-numeric: tabular-nums; } .row-item .info h4 { margin: 0 0 4px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; } .row-item .info .cat { font-size: 13px; color: var(--text-faint); } .row-item .go { color: var(--text-faint); font-size: 20px; transition: transform .25s var(--ease), color .2s; } .row-item:hover .go { transform: translateX(4px); color: var(--accent-2); } .tag { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-dim); } .tag.v { color: var(--green); border-color: rgba(143,191,138,.3); background: rgba(143,191,138,.08); } .tag.u { color: var(--accent-2); border-color: rgba(217,138,79,.3); background: rgba(217,138,79,.08); } .tag.x { color: var(--red); border-color: rgba(217,122,106,.3); background: rgba(217,122,106,.08); } .tag.l { color: var(--ink); background: var(--accent-2); border-color: var(--accent-2); font-weight: 700; } .chapter-empty { color: var(--text-faint); font-size: 15px; padding: 20px 4px; } .load-more-chapter { margin-top: 22px; padding: 11px 22px; border-radius: 999px; border: 1px solid var(--line-2); background: none; color: var(--text-dim); cursor: pointer; font-size: 13.5px; } .load-more-chapter:hover { background: rgba(255,255,255,.06); color: var(--text); } /* ------------------------------------------------- end / footer */ .end-cta { text-align: center; padding: 160px 24px 120px; border-top: 1px solid var(--line); } .end-cta h2 { font-size: clamp(34px, 5vw, 58px); font-weight: 700; letter-spacing: -.02em; margin: 0 0 18px; } .end-cta p { color: var(--text-dim); max-width: 46ch; margin: 0 auto 36px; font-size: 17px; } .site-footer { border-top: 1px solid var(--line); padding: 34px 0 60px; color: var(--text-faint); font-size: 13px; } .site-footer .wrap { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .site-footer a { color: var(--text-dim); } /* ------------------------------------------------- filter entry pill */ .filter-fab { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 55; display: flex; align-items: center; gap: 10px; padding: 13px 22px 13px 18px; border-radius: 999px; background: rgba(20,20,20,.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--line-2); color: var(--text); cursor: pointer; box-shadow: 0 12px 40px rgba(0,0,0,.4); font-size: 14px; font-weight: 600; transition: transform .3s var(--ease), background .2s; } .filter-fab:hover { transform: translateX(-50%) translateY(-2px); background: rgba(30,30,30,.8); } .filter-fab .ic { width: 16px; height: 16px; } .filter-fab .count { background: var(--accent); color: var(--ink); border-radius: 999px; font-size: 11px; font-weight: 800; padding: 2px 7px; min-width: 18px; text-align: center; } /* ------------------------------------------------- filter overlay */ .filter-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(3,3,3,.7); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); } .filter-overlay.open { opacity: 1; pointer-events: auto; } .filter-panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(480px, 100%); background: var(--ink-2); border-left: 1px solid var(--line); transform: translateX(100%); transition: transform .4s var(--ease); overflow-y: auto; padding: 90px 32px 40px; } .filter-overlay.open .filter-panel { transform: none; } .filter-close { position: fixed; top: 22px; right: 24px; z-index: 71; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(20,20,20,.6); color: var(--text); cursor: pointer; font-size: 17px; } .filter-close:hover { background: rgba(255,255,255,.08); } .fgroup { border-top: 1px solid var(--line); padding: 20px 0; } .fgroup:first-child { border-top: 0; padding-top: 0; } .fgroup > h3 { margin: 0 0 12px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); font-weight: 700; } .search-box input { width: 100%; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--text); font-size: 15px; } .search-box input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; } .search-box input::placeholder { color: var(--text-faint); } .cat-tree ul { list-style: none; margin: 0; padding: 0; } .cat-tree ul ul { margin-left: 12px; padding-left: 10px; border-left: 1px solid var(--line); } .cat-tree li { margin: 1px 0; } .cat-row { display: flex; align-items: center; gap: 3px; } .cat-toggle { width: 16px; height: 20px; border: 0; background: none; cursor: pointer; color: var(--text-faint); font-size: 9px; padding: 0; flex: 0 0 16px; transition: transform .15s; } .cat-toggle.open { transform: rotate(90deg); } .cat-toggle.leaf { visibility: hidden; } .cat-link { flex: 1; text-align: left; background: none; border: 0; cursor: pointer; padding: 6px 8px; border-radius: 8px; font-size: 14px; color: var(--text-dim); display: flex; justify-content: space-between; gap: 8px; } .cat-link:hover { background: rgba(255,255,255,.05); color: var(--text); } .cat-link.active { background: var(--accent-wash); color: var(--text); font-weight: 600; } .cat-link .n { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); } .cat-link.active .n { color: var(--accent-2); } .pill-row { display: flex; flex-wrap: wrap; gap: 6px; } .pill { border: 1px solid var(--line-2); background: rgba(255,255,255,.03); border-radius: 999px; padding: 6px 13px; font-size: 12.5px; cursor: pointer; color: var(--text-dim); transition: .15s; } .pill:hover { border-color: var(--text-faint); } .pill.active { background: var(--text); border-color: var(--text); color: var(--ink); font-weight: 600; } .check { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 14px; color: var(--text-dim); cursor: pointer; } .check input { accent-color: var(--accent); width: 16px; height: 16px; } select.fselect { width: 100%; padding: 11px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: rgba(255,255,255,.04); color: var(--text); font-size: 14px; } .btn-clear { width: 100%; padding: 11px; border: 1px solid var(--line-2); background: none; border-radius: 10px; cursor: pointer; font-size: 13.5px; color: var(--text-dim); } .btn-clear:hover { background: rgba(255,255,255,.06); color: var(--text); } .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .chip { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-wash); border: 1px solid rgba(217,138,79,.3); color: var(--text); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 12.5px; } .chip button { border: 0; background: none; cursor: pointer; color: var(--text-faint); font-size: 15px; line-height: 1; padding: 0 3px; } .chip button:hover { color: var(--red); } /* ------------------------------------------------- results summary bar (search-mode) */ /* Static, not sticky — the timeline strip already owns the band under the header. */ .results-bar { position: relative; z-index: 30; border-bottom: 1px solid var(--line); padding: 24px 0 16px; } .results-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .results-bar h2 { font-size: 18px; font-weight: 700; margin: 0; } .results-bar .count { color: var(--text-faint); font-size: 13.5px; } .results-bar .back { font-size: 13.5px; color: var(--text-dim); } /* ------------------------------------------------- detail drawer */ .drawer-back { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 90; opacity: 0; pointer-events: none; transition: opacity .3s; } .drawer-back.open { opacity: 1; pointer-events: auto; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100%); background: var(--ink-2); z-index: 91; transform: translateX(100%); transition: transform .4s var(--ease); overflow-y: auto; border-left: 1px solid var(--line); } .drawer.open { transform: none; } .drawer-in { padding: 90px 40px 60px; } .drawer-close { position: fixed; top: 22px; right: 24px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(20,20,20,.6); cursor: pointer; font-size: 17px; color: var(--text); z-index: 92; } .drawer-close:hover { background: rgba(255,255,255,.08); } .drawer .d-year { font-family: var(--mono); font-size: 13px; color: var(--accent-2); letter-spacing: .08em; } .drawer h2 { font-size: clamp(30px, 4vw, 44px); font-weight: 700; letter-spacing: -.02em; margin: 8px 0 6px; line-height: 1.08; } .drawer .d-cat { font-size: 13.5px; color: var(--text-faint); margin-bottom: 20px; } .drawer .d-sum { font-size: 16px; color: var(--text-dim); line-height: 1.7; } .dl { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 20px; display: grid; grid-template-columns: 120px 1fr; gap: 12px 14px; font-size: 14.5px; } .dl dt { color: var(--text-faint); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding-top: 2px; } .dl dd { margin: 0; } .src-note { margin-top: 22px; padding: 14px 16px; border-radius: 12px; font-size: 13px; line-height: 1.6; } .src-note.v { background: rgba(143,191,138,.09); border: 1px solid rgba(143,191,138,.25); color: var(--green); } .src-note.u { background: var(--accent-wash); border: 1px solid rgba(217,138,79,.25); color: var(--accent-2); } /* ------------------------------------------------- forms / secondary pages */ /* about.html, submit.html, admin keep a calmer light-paper treatment — they're task pages, not part of the cinematic browsing experience. */ .page-light { background: var(--paper); color: #1c1a17; min-height: 100vh; } .page { max-width: 720px; margin: 0 auto; padding: 110px 20px 80px; } .page h1 { font-family: var(--sans); font-weight: 700; font-size: 34px; margin: 0 0 8px; letter-spacing: -.02em; } .page > p.lede { color: #4a453d; margin: 0 0 26px; } .field { margin-bottom: 16px; } .field label { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #8a8378; margin-bottom: 5px; } .field label .req { color: #a8452f; } .field input, .field select, .field textarea { width: 100%; padding: 10px 12px; border: 1px solid #cbc2b1; border-radius: 8px; background: #fff; font-family: var(--sans); } .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; } .field small { display: block; color: #8a8378; font-size: 12px; margin-top: 4px; } .field textarea { min-height: 96px; resize: vertical; } .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } fieldset { border: 1px solid #ddd6c9; border-radius: 10px; padding: 18px; margin: 0 0 20px; } legend { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8a8378; padding: 0 8px; } .btn { background: #1c1a17; color: #f7f4ee; border: 0; padding: 11px 26px; border-radius: 999px; cursor: pointer; font-size: 15px; font-weight: 600; } .btn:hover { background: var(--accent); } .btn:disabled { opacity: .5; cursor: default; } .btn.ghost { background: none; border: 1px solid #cbc2b1; color: #4a453d; } .btn.ghost:hover { background: #efeae1; color: #1c1a17; } .btn.sm { padding: 6px 14px; font-size: 13px; border-radius: 999px; } .btn.ok { background: #4b7a4e; } .btn.no { background: #a8452f; } .notice { padding: 13px 16px; border-radius: 10px; margin-bottom: 20px; font-size: 14px; } .notice.ok { background: #eef5ee; border: 1px solid #cfe0d0; color: #38603b; } .notice.err { background: #fbeeeb; border: 1px solid #e6c6bd; color: #8c3a27; } .hp { position: absolute; left: -9999px; } .site-header.light { background: rgba(247,244,238,.85); border-bottom-color: #ddd6c9; } .site-header.light .brand { color: #1c1a17; } .site-header.light .brand em { color: #8a8378; } .site-header.light nav a { color: #4a453d; } .site-header.light nav a:hover { background: #efeae1; color: #1c1a17; } .site-header.light nav a.cta { background: #1c1a17; color: #f7f4ee; } /* ------------------------------------------------- admin (unchanged light theme) */ .admin-body { background: #f7f4ee; color: #1c1a17; } .adm-tabs { display: flex; gap: 6px; border-bottom: 1px solid #ddd6c9; margin-bottom: 22px; } .adm-tab { border: 0; background: none; padding: 10px 16px; cursor: pointer; color: #8a8378; border-bottom: 2px solid transparent; font-size: 14px; } .adm-tab.active { color: #1c1a17; border-bottom-color: var(--accent); font-weight: 600; } .adm-tab .n { font-family: var(--mono); font-size: 11px; background: #efeae1; padding: 1px 6px; border-radius: 999px; margin-left: 5px; } .adm-card { background: #efeae1; border: 1px solid #ddd6c9; border-radius: 12px; padding: 16px 18px; margin-bottom: 12px; } .adm-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; } .adm-card h3 { font-weight: 700; font-size: 19px; margin: 0; } .adm-meta { font-size: 12.5px; color: #8a8378; margin: 4px 0 8px; } .adm-actions { display: flex; gap: 7px; flex-wrap: wrap; } .adm-edit { display: none; border-top: 1px solid #ddd6c9; margin-top: 14px; padding-top: 14px; } .adm-edit.open { display: block; } .bulk-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #f5e9d2; border: 1px solid #e0a940; border-radius: 10px; padding: 9px 14px; margin-bottom: 14px; } .runs-table { width: 100%; border-collapse: collapse; font-size: 13px; } .runs-table th { text-align: left; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #8a8378; font-weight: 600; padding: 8px 10px; border-bottom: 1px solid #cbc2b1; } .runs-table td { padding: 9px 10px; border-bottom: 1px solid #ddd6c9; vertical-align: top; } .runs-table tr:hover td { background: #f7f4ee; } code { font-family: var(--mono); font-size: .88em; background: #efeae1; padding: 1px 5px; border-radius: 4px; } /* ------------------------------------------------- empty state */ .empty-state { text-align: center; padding: 60px 20px; color: var(--text-faint); } .empty-state h3 { font-size: 21px; color: var(--text-dim); margin: 0 0 6px; font-weight: 700; } /* ------------------------------------------------- motion preferences */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } .scroll-cue { animation: none; } /* the dock still docks — it just snaps between states instead of easing */ .tl-dock, .tl-scale { will-change: auto; } /* landmarks become a plain stacked list; no pinning, no scaling */ .landmark-stack.is-stack .landmark-hero { position: relative; top: auto; margin-bottom: 28px; transform: none; box-shadow: none; } .landmark-stack.is-stack .landmark-hero::after { opacity: 0; } } /* ------------------------------------------------- responsive */ @media (max-width: 760px) { .row-item { grid-template-columns: 60px 1fr auto; gap: 14px; } .landmark-hero { padding: 40px 24px; border-radius: 20px; } .landmark-stack.is-stack .landmark-hero { top: calc(146px + var(--i, 0) * 12px); margin-bottom: 56vh; } .chapter { padding: 90px 0 20px; } .chapter:first-of-type { padding-top: 24px; } .hero { padding: 100px 0 20px; min-height: calc(100vh - 190px); } .hero-stats { gap: 30px; margin-top: 36px; } .hero-stats .hstat:nth-child(n+3) { display: none; } .tl-dock-inner { padding: 0 14px; } .tl-bars, .tl-axis { gap: 6px; } .tl-decade { gap: 1px; } .tl-axis span { font-size: 9px; } /* not enough width for ten labels on a phone — drop every other one */ .tl-axis span:nth-child(even) { color: transparent; } .tl-axis span.on { color: var(--text); } .filter-panel { padding-top: 80px; } .drawer-in { padding: 80px 24px 50px; } }