/* =========================================================================== ALIM.my — "THE DOSSIER PRINTS ITSELF" — shared design system One warm-print legal dossier. Every page is a filed, numbered, pillar-coded section. Lineage: Sandberg (torn counterforms, warm printing, misregistration) · Karel Martens (overprint = multiply) · Muriel Cooper (blur resolves to focus) · Weingart (reversed bars, stair rules) · Ikko Tanaka (sector emblems) · Pompidou (functional pillar colour code) · Huruf KL (creolised tape). Type: Literata (display serif) · Archivo (text) · JetBrains Mono (docket). =========================================================================== */ /* ============ TOKENS ============ */ :root{ --paper:#F2EBDD; --paper-2:#ECE4D2; --paper-3:#E5DBC4; --ink:#1A1612; --ink-2:#3C342A; --ink-3:#6B5F4E; --vermillion:#D8311F; --vermillion-2:#B5261A; --ochre:#B8862E; --sage:#4D5747; --indigo:#35558A; --riso-blue:#0078BF; --riso-green:#00A95C; --riso-orange:#FF6C2F; --riso-pink:#FF48B0; --riso-purple:#765BA7; --riso-teal:#00838A; --riso-marigold:#E8A000; --riso-red:#FF665E; --rule:rgba(26,22,18,.16); --rule-soft:var(--paper-3); --ease-print:cubic-bezier(.16,1,.3,1); --pillar:var(--vermillion); } /* Pompidou pillar colour code — set on */ [data-pillar="advice"]{ --pillar:var(--vermillion); } [data-pillar="advocacy"]{ --pillar:var(--indigo); } [data-pillar="education"]{ --pillar:var(--ochre); } [data-pillar="utility"]{ --pillar:var(--sage); } /* Night charter (dark mode) */ html.charter{ --paper:#15120D; --paper-2:#1F1B14; --paper-3:#2A2519; --ink:#F2EBDD; --ink-2:#C9BFA8; --ink-3:#897E68; --rule:rgba(242,235,221,.14); --rule-soft:#2A2519; } *,*::before,*::after{ box-sizing:border-box; } html,body{ margin:0; background:var(--paper); color:var(--ink); } html{ scroll-behavior:smooth; } body{ font-family:'Archivo',ui-sans-serif,system-ui,sans-serif; font-feature-settings:"ss01","ss02","cv11"; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{ max-width:100%; display:block; } a{ color:inherit; } :focus-visible{ outline:2px solid var(--vermillion); outline-offset:3px; } ::selection{ background:var(--vermillion); color:#F2EBDD; } .skip-link{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--ink); color:var(--paper); padding:10px 16px; font-family:'JetBrains Mono',monospace; font-size:12px; } .skip-link:focus{ left:12px; top:12px; } /* Paper grain (Sandberg: warm printing, never sterile) */ body::after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:60; opacity:.32; mix-blend-mode:multiply; background-image: radial-gradient(rgba(26,22,18,.11) 1px,transparent 1px), radial-gradient(rgba(26,22,18,.07) 1px,transparent 1px); background-size:3px 3px,7px 7px; background-position:0 0,1px 1px; } html.charter body::after{ opacity:.16; mix-blend-mode:screen; background-image: radial-gradient(rgba(242,235,221,.09) 1px,transparent 1px), radial-gradient(rgba(242,235,221,.05) 1px,transparent 1px); } /* ============ TYPE ============ */ .display{ font-family:'Literata',Georgia,serif; font-variation-settings:"opsz" 72,"wght" 760; letter-spacing:-.025em; line-height:.94; } .display-italic{ font-family:'Literata',Georgia,serif; font-style:italic; font-variation-settings:"opsz" 72,"wght" 460; letter-spacing:-.02em; line-height:.96; } .editorial{ font-family:'Literata',Georgia,serif; font-variation-settings:"opsz" 36,"wght" 500; letter-spacing:-.005em; } .mono{ font-family:'JetBrains Mono',ui-monospace,monospace; } .label{ font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); } .idx{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--pillar); letter-spacing:.06em; } em{ font-style:italic; } h1,h2,h3,h4{ font-family:'Literata',Georgia,serif; font-weight:normal; } /* Weingart: section labels knocked out of solid bars */ .bar{ display:inline-block; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; background:var(--pillar); color:#F2EBDD; padding:4px 10px 3px; mix-blend-mode:multiply; } html.charter .bar{ mix-blend-mode:normal; } /* Weingart: stair-stepped rules */ .stair{ height:14px; position:relative; } .stair::before,.stair::after,.stair span{ content:""; display:block; position:absolute; left:0; background:var(--ink); } .stair::before{ top:0; width:100%; height:3px; } .stair::after{ top:6px; width:62%; height:2px; opacity:.55; } .stair span{ top:11px; width:31%; height:1px; opacity:.3; } /* Sandberg/Martens: misregistered plates that settle into register on arrival */ .misreg{ text-shadow:4px 3px 0 rgba(184,134,46,.55), -4px -3px 0 rgba(216,49,31,.4); transition:text-shadow 1.1s var(--ease-print) .15s; } .misreg.in{ text-shadow:0 0 0 rgba(184,134,46,0), 0 0 0 rgba(216,49,31,0); } .hl{ background:linear-gradient(180deg,transparent 62%,rgba(216,49,31,.22) 62%); padding:0 .1em; } .ornament{ color:var(--pillar); } .dropcap::first-letter{ font-family:'Literata',Georgia,serif; font-variation-settings:"opsz" 72,"wght" 700; float:left; font-size:64px; line-height:.8; padding:6px 10px 0 0; color:var(--pillar); } .stamp{ display:inline-block; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--pillar); border:1.5px solid var(--pillar); padding:3px 8px; transform:rotate(-3deg); } .fold{ position:absolute; top:0; right:0; width:0; height:0; border-style:solid; border-width:0 26px 26px 0; border-color:transparent var(--paper) transparent transparent; filter:drop-shadow(-2px 2px 1px rgba(26,22,18,.12)); } /* Cards: hard rectangles, corner brackets, no radius anywhere */ .card{ position:relative; background:var(--paper-2); border:1px solid var(--rule-soft); padding:26px; } .card::after{ content:""; position:absolute; top:8px; right:8px; width:14px; height:14px; border-top:1.5px solid var(--ink-3); border-right:1.5px solid var(--ink-3); } .card-dark{ background:var(--ink); color:var(--paper); border-color:var(--ink); } .card-dark::after{ border-color:rgba(242,235,221,.4); } html.charter .card-dark{ background:#000; color:#F2EBDD; } .card h3{ font-size:22px; margin:12px 0 8px; letter-spacing:-.01em; } .card p{ font-size:14.5px; line-height:1.6; color:var(--ink-2); margin:0; } /* Buttons: letterpress stamps. Hard offset shadow snaps into the paper on hover. */ .btn{ display:inline-flex; align-items:center; gap:.6ch; cursor:pointer; font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; color:var(--ink); background:var(--paper); border:1.5px solid var(--ink); padding:14px 22px; min-height:44px; position:relative; box-shadow:5px 5px 0 var(--pillar); transition:box-shadow .18s ease-out,transform .18s ease-out; will-change:transform; } .btn:hover{ box-shadow:1px 1px 0 var(--pillar); transform:translate(3px,3px); } .btn-primary{ background:var(--pillar); border-color:var(--pillar); color:#F2EBDD; box-shadow:5px 5px 0 var(--ink); } .btn-primary:hover{ box-shadow:1px 1px 0 var(--ink); } .btn-ghost{ box-shadow:none; border-color:var(--rule); } .btn-ghost:hover{ border-color:var(--ink); transform:none; } html.charter .btn{ color:var(--ink); border-color:var(--ink); background:var(--paper); } html.charter .btn-primary{ color:#F2EBDD; } /* Underline link (exit-then-enter sweep) */ .ulink{ position:relative; display:inline-flex; align-items:baseline; gap:.4ch; text-decoration:none; } .ulink::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:currentColor; opacity:.6; transform:scaleX(1); transform-origin:right center; transition:transform .4s cubic-bezier(.7,0,.2,1); } .ulink:hover::after{ transform:scaleX(0); } .ulink::before{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--pillar); transform:scaleX(0); transform-origin:left center; transition:transform .4s cubic-bezier(.7,0,.2,1) .07s; } .ulink:hover::before{ transform:scaleX(1); } /* ============ MOTION SYSTEM ============ */ .reveal{ opacity:0; transform:translateY(26px); filter:blur(5px); transition:opacity .9s var(--ease-print),transform .9s var(--ease-print),filter .9s var(--ease-print); transition-delay:calc(var(--d,0)*90ms); will-change:transform,opacity,filter; } .reveal.in{ opacity:1; transform:none; filter:blur(0); } .linemask{ overflow:hidden; display:block; } .linemask>span{ display:block; transform:translateY(115%); transition:transform 1s var(--ease-print) calc(var(--d,0)*110ms); } .in .linemask>span, .linemask.in>span{ transform:translateY(0); } /* Marquee tapes; hover pauses */ @keyframes tape{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} } .tape-track{ display:inline-flex; white-space:nowrap; animation:tape var(--speed,60s) linear infinite; will-change:transform; } .tape:hover .tape-track{ animation-play-state:paused; } .tape{ overflow:hidden; border-block:1px solid var(--rule); } /* Torn-paper section divider (Sandberg counterforms) */ .torn{ display:block; width:100%; height:26px; margin-bottom:-1px; } .torn path{ fill:var(--paper-2); } .torn.flip{ transform:scaleY(-1); margin-bottom:0; margin-top:-1px; } /* ============ LAYOUT ============ */ .wrap{ max-width:1240px; margin:0 auto; padding-inline:28px; } .wrap-narrow{ max-width:820px; margin:0 auto; padding-inline:28px; } section{ position:relative; } .tint{ background:var(--paper-2); } .pad{ padding-block:clamp(64px,9vw,120px); } .pad-sm{ padding-block:clamp(40px,6vw,72px); } .sec-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:44px; } .sec-head h2{ font-size:clamp(30px,4.4vw,52px); letter-spacing:-.02em; line-height:1; margin:10px 0 0; } .grid{ display:grid; gap:22px; } .grid-2{ grid-template-columns:1fr; } .grid-3{ grid-template-columns:1fr; } .grid-4{ grid-template-columns:repeat(2,1fr); } @media(min-width:720px){ .grid-2{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(3,1fr); } } @media(min-width:980px){ .grid-4{ grid-template-columns:repeat(4,1fr); } } /* ============ TICKER ============ */ #ticker{ background:var(--ink); color:var(--paper); border-block:none; } #ticker .tape-track{ --speed:60s; padding:8px 0; } #ticker span{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding-inline:1.6em; } #ticker .hot{ color:#FF6C4A; } html.charter #ticker{ background:#000; } /* ============ NAV ============ */ #nav{ position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--paper) 88%,transparent); backdrop-filter:blur(14px) saturate(1.1); border-bottom:1px solid var(--rule); } #nav .row{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding-block:14px; } #nav .links{ display:none; gap:26px; align-items:center; } #nav .links a{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; color:var(--ink-2); position:relative; } #nav .links a:hover,#nav .links a[aria-current="page"]{ color:var(--pillar); } #nav .links a[aria-current="page"]::before{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--pillar); } @media(min-width:960px){ #nav .links{ display:flex; } } .wordmark{ display:flex; align-items:baseline; gap:10px; text-decoration:none; } .wordmark .alim{ font-family:'Literata',serif; font-style:italic; font-variation-settings:"opsz" 60,"wght" 560; font-size:26px; } .wordmark .my{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--ink-3); } .wordmark .sub{ display:none; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); border-left:1px solid var(--rule); padding-left:10px; } @media(min-width:1100px){ .wordmark .sub{ display:inline; } } #theme-toggle{ background:none; border:1px solid var(--rule); color:var(--ink-2); width:38px; height:38px; display:grid; place-items:center; cursor:pointer; flex:none; } #theme-toggle:hover{ border-color:var(--ink); } .navcta{ display:inline-flex; align-items:center; gap:.5ch; background:var(--pillar); color:#F2EBDD; text-decoration:none; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:11px 16px; white-space:nowrap; } .navcta:hover{ filter:brightness(.9); } #nav-toggle{ display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--rule); background:none; color:var(--ink); cursor:pointer; } @media(min-width:960px){ #nav-toggle{ display:none; } } #mobile-nav{ display:none; border-bottom:1px solid var(--rule); background:var(--paper); } #mobile-nav.open{ display:block; } #mobile-nav a{ display:block; padding:14px 28px; font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; color:var(--ink-2); border-top:1px solid var(--rule); } #mobile-nav a:first-child{ border-top:none; } /* ============ HERO / THE PLATE (homepage) ============ */ #stage{ height:260vh; } #stage .pin{ position:sticky; top:0; height:100vh; overflow:hidden; perspective:1100px; } #plate-tilt{ position:absolute; inset:-4%; transform-style:preserve-3d; will-change:transform; } #plate{ position:absolute; inset:0; width:100%; height:100%; display:block; } #plate-fallback{ position:absolute; inset:0; display:none; background: radial-gradient(circle at 78% 64%, rgba(216,49,31,.16) 0 22%, transparent 40%), repeating-radial-gradient(circle at 78% 64%, rgba(216,49,31,.10) 0 3px, transparent 3px 9px); } .no-webgl #plate{ display:none; } .no-webgl #plate-fallback{ display:block; } .hero-inner{ position:relative; z-index:2; height:100vh; display:flex; flex-direction:column; justify-content:space-between; padding-block:20px 34px; } .hero-meta{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; } .hero-grid{ display:grid; gap:34px; align-items:end; } @media(min-width:1024px){ .hero-grid{ grid-template-columns:230px 1fr; } } .marginalia{ display:none; font-size:13px; line-height:1.55; color:var(--ink-2); border-left:2px solid var(--pillar); padding-left:16px; } @media(min-width:1024px){ .marginalia{ display:block; } } .marginalia .label{ display:block; margin-bottom:6px; } #h1{ font-size:clamp(52px,9.5vw,148px); margin:0; will-change:font-variation-settings; font-family:'Literata',Georgia,serif; letter-spacing:-.028em; line-height:.9; font-variation-settings:"opsz" var(--opsz,24),"wght" var(--wght,420); } #h1 .word-final{ font-style:italic; color:var(--pillar); } .hero-sub{ font-family:'Literata',serif; font-style:italic; font-variation-settings:"opsz" 60,"wght" 440; font-size:clamp(22px,3vw,34px); color:var(--ink-2); margin:14px 0 0; } .hero-para{ max-width:56ch; font-size:15.5px; line-height:1.65; color:var(--ink-2); } .hero-ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:22px; } .hero-note{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); } .stat-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); margin-top:30px; } @media(min-width:760px){ .stat-row{ grid-template-columns:repeat(4,1fr); } } .stat{ background:var(--paper); padding:16px 18px; } .stat b{ display:block; font-family:'Literata',serif; font-variation-settings:"opsz" 72,"wght" 640; font-size:34px; font-weight:normal; } .stat.red b{ color:var(--pillar); } .stat s{ text-decoration:none; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); } #numeral{ position:absolute; right:-40px; bottom:-90px; z-index:1; font-family:'Literata',serif; font-style:italic; font-variation-settings:"opsz" 72,"wght" 300; font-size:540px; line-height:1; color:var(--paper-3); pointer-events:none; display:none; } @media(min-width:1280px){ #numeral{ display:block; } } .scroll-cue{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:3; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-3); opacity:calc(1 - var(--p,0)*2.5); } /* ============ INTERIOR PAGE HEADER (docket chrome) ============ */ .dossier-head{ position:relative; overflow:hidden; border-bottom:1px solid var(--rule); } .dossier-head .wrap{ padding-block:clamp(48px,7vw,92px); } .dossier-meta{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-bottom:34px; } .dossier-meta .label{ display:block; } .page-h1{ font-family:'Literata',Georgia,serif; font-variation-settings:"opsz" 72,"wght" 720; font-size:clamp(40px,7vw,90px); line-height:.94; letter-spacing:-.025em; margin:0; max-width:16ch; } .page-h1 em{ color:var(--pillar); } .page-lede{ font-family:'Literata',serif; font-variation-settings:"opsz" 24,"wght" 420; font-size:clamp(17px,2vw,21px); line-height:1.55; color:var(--ink-2); max-width:60ch; margin:22px 0 0; } .page-emblem{ position:absolute; right:-30px; top:-30px; font-family:'Literata',serif; font-style:italic; font-variation-settings:"opsz" 72,"wght" 300; font-size:clamp(180px,26vw,360px); line-height:1; color:var(--paper-3); pointer-events:none; z-index:0; } .dossier-head .wrap>*{ position:relative; z-index:1; } /* ============ EDITORIAL PROSE (interior body) ============ */ .prose{ font-size:16.5px; line-height:1.72; color:var(--ink-2); max-width:68ch; } .prose>*+*{ margin-top:1.15em; } .prose h2{ font-family:'Literata',serif; font-variation-settings:"opsz" 48,"wght" 640; font-size:clamp(26px,3.4vw,38px); line-height:1.06; letter-spacing:-.015em; color:var(--ink); margin-top:1.8em; } .prose h3{ font-family:'Literata',serif; font-variation-settings:"opsz" 30,"wght" 600; font-size:22px; color:var(--ink); margin-top:1.5em; } .prose p{ margin:0; } .prose a{ color:var(--pillar); text-underline-offset:3px; text-decoration:underline; text-decoration-thickness:1px; } .prose strong{ color:var(--ink); font-weight:600; } .prose ul,.prose ol{ margin:0; padding-left:0; list-style:none; } .prose ul li,.prose ol li{ position:relative; padding-left:28px; margin-top:.6em; } .prose ul li::before{ content:"—"; position:absolute; left:0; color:var(--pillar); font-family:'JetBrains Mono',monospace; } .prose ol{ counter-reset:li; } .prose ol li::before{ counter-increment:li; content:counter(li,decimal-leading-zero); position:absolute; left:0; color:var(--pillar); font-family:'JetBrains Mono',monospace; font-size:12px; top:3px; } .prose blockquote{ border-left:3px solid var(--pillar); padding:6px 0 6px 22px; margin:1.4em 0; font-family:'Literata',serif; font-style:italic; font-variation-settings:"opsz" 32,"wght" 460; font-size:20px; color:var(--ink); } .prose hr{ border:none; border-top:1px solid var(--rule); margin:2em 0; } /* ============ FAQ ACCORDION ============ */ .faq{ border-top:1px solid var(--rule); } .faq details{ border-bottom:1px solid var(--rule); } .faq summary{ list-style:none; cursor:pointer; display:flex; gap:18px; align-items:baseline; padding:22px 4px; font-family:'Literata',serif; font-variation-settings:"opsz" 28,"wght" 560; font-size:clamp(18px,2.2vw,23px); color:var(--ink); } .faq summary::-webkit-details-marker{ display:none; } .faq summary .q-idx{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--pillar); flex:none; } .faq summary .q-sign{ margin-left:auto; font-family:'JetBrains Mono',monospace; color:var(--ink-3); transition:transform .3s var(--ease-print); flex:none; } .faq details[open] summary .q-sign{ transform:rotate(45deg); } .faq .a{ padding:0 4px 26px 42px; max-width:66ch; color:var(--ink-2); line-height:1.68; font-size:15.5px; } .faq .a a{ color:var(--pillar); text-underline-offset:3px; } /* ============ FORMS (intake) ============ */ .form{ display:grid; gap:22px; } .field{ display:grid; gap:8px; } .field.row2{ grid-template-columns:1fr; } @media(min-width:640px){ .field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; } } .field label,.field .lab{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); } .field label .req{ color:var(--pillar); } .field input,.field textarea,.field select{ width:100%; font-family:'Archivo',sans-serif; font-size:16px; color:var(--ink); background:var(--paper); border:1.5px solid var(--rule); padding:13px 14px; border-radius:0; transition:border-color .2s,box-shadow .2s; -webkit-appearance:none; appearance:none; } .field textarea{ min-height:140px; resize:vertical; line-height:1.55; } .field select{ background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 14px center; padding-right:40px; } .field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--pillar); box-shadow:4px 4px 0 var(--pillar); } .field .hint{ font-size:12.5px; color:var(--ink-3); } .choice{ display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border:1.5px solid var(--rule); cursor:pointer; font-size:14.5px; color:var(--ink-2); } .choice:hover{ border-color:var(--ink-3); } .choice input{ width:auto; margin-top:3px; accent-color:var(--vermillion); } .choice-grid{ display:grid; gap:10px; grid-template-columns:1fr; } @media(min-width:640px){ .choice-grid{ grid-template-columns:1fr 1fr; } } .form-note{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.06em; color:var(--ink-3); line-height:1.6; } /* ============ DATA TABLE (structure / fees / docket) ============ */ .dtable{ width:100%; border-collapse:collapse; font-size:14.5px; } .dtable th,.dtable td{ text-align:left; padding:14px 16px; border-bottom:1px solid var(--rule); vertical-align:top; } .dtable th{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); font-weight:500; } .dtable td{ color:var(--ink-2); line-height:1.5; } .dtable tr:hover td{ background:var(--paper-2); } .table-scroll{ overflow-x:auto; border:1px solid var(--rule); } /* ============ FOOTER ============ */ #foot{ background:var(--ink); color:var(--paper); } html.charter #foot{ background:#000; } #foot .wrap{ padding-block:64px 40px; } .foot-top{ display:grid; gap:40px; grid-template-columns:1fr; } @media(min-width:820px){ .foot-top{ grid-template-columns:1.3fr 1fr 1fr 1fr; } } #foot .foot-mark .alim{ font-family:'Literata',serif; font-style:italic; font-variation-settings:"opsz" 60,"wght" 560; font-size:30px; color:var(--paper); } #foot .foot-mark p{ margin:14px 0 0; max-width:32ch; font-size:14px; line-height:1.6; color:rgba(242,235,221,.72); } #foot h4{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(242,235,221,.5); font-weight:500; margin:0 0 16px; } #foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; } #foot ul a{ text-decoration:none; color:rgba(242,235,221,.82); font-size:14px; } #foot ul a:hover{ color:#FF6C4A; } .foot-bot{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; margin-top:48px; padding-top:22px; border-top:1px solid rgba(242,235,221,.14); font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:rgba(242,235,221,.5); } /* ============ INK-DOT CURSOR ============ */ #dot{ position:fixed; z-index:70; width:10px; height:10px; margin:-5px 0 0 -5px; background:var(--pillar); border-radius:50%; pointer-events:none; mix-blend-mode:multiply; transition:width .25s,height .25s,margin .25s,opacity .3s; opacity:0; } #dot.lg{ width:34px; height:34px; margin:-17px 0 0 -17px; } html.charter #dot{ mix-blend-mode:screen; } @media(hover:none){ #dot{ display:none; } } /* ============ REDUCED MOTION ============ */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .reveal,.misreg{ opacity:1 !important; transform:none !important; filter:none !important; text-shadow:none !important; } .linemask>span{ transform:none !important; } #stage{ height:auto; } #stage .pin{ position:relative; height:auto; min-height:100vh; } #plate{ display:none; } #plate-fallback{ display:block; } .tape-track{ animation:none; } #dot{ display:none; } }