/* ============================================================================ SOQUCOIN DESIGN SYSTEM — "Research-grade authority" Single source of truth for the redesign. Shared by every page. Principles: paper canvas · ink text · ONE accent (oxblood) · editorial serif display + technical grotesk body · the lattice motif · NO CARDS. See DESIGN_SYSTEM.md for usage rules. ============================================================================ */ :root{ --paper:#FAF8F3; --paper-2:#F1ECE1; --ink:#1A1712; --muted:#6E675B; --accent:#7E1D2D; --accent-ink:#5E121F; --rule:rgba(26,23,18,.14); --serif:'Newsreader', Georgia, serif; --sans:'IBM Plex Sans', system-ui, sans-serif; --mono:'IBM Plex Mono', ui-monospace, monospace; --maxw:1180px; --pad:clamp(1.25rem,5vw,4rem); } /* ---- dark theme (set [data-theme=dark] on ; tokens flip, the rest follows) ---- */ [data-theme="dark"]{ --paper:#16130E; --paper-2:#211C16; --ink:#EDE7DB; --muted:#9A9286; --accent:#CB6A64; --accent-ink:#E0938E; --rule:rgba(237,231,219,.15); } html{color-scheme:light dark} *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:clamp(1rem,.6vw + .9rem,1.0625rem); line-height:1.65; -webkit-font-smoothing:antialiased; /* faint lattice motif as page texture */ background-image:radial-gradient(rgba(26,23,18,.05) 1px, transparent 1.4px); background-size:26px 26px; background-position:-13px -13px; } ::selection{background:var(--accent);color:var(--paper)} /* dark-mode fixups for the few rules that bake in a light-on-dark assumption */ [data-theme="dark"] body{background-image:radial-gradient(rgba(237,231,219,.05) 1px, transparent 1.4px)} [data-theme="dark"] nav{background:rgba(22,19,14,.92)} /* the footer is a dark band in light mode; in dark mode it becomes a subtly- elevated, token-driven surface instead of a black void */ [data-theme="dark"] footer{background:var(--paper-2);color:var(--ink);border-top:1px solid var(--rule)} [data-theme="dark"] .foot h4,[data-theme="dark"] .foot a,[data-theme="dark"] .foot .note,[data-theme="dark"] .foot-base,[data-theme="dark"] .foot-base .label{color:var(--muted)} [data-theme="dark"] .foot a:hover,[data-theme="dark"] .foot .brand-lg{color:var(--ink)} [data-theme="dark"] .foot .mark-lg{background:var(--ink)} [data-theme="dark"] .foot-base{border-top-color:var(--rule)} a{color:inherit;text-decoration:none} .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)} img{max-width:100%;height:auto} /* ---- accessibility: visible focus + skip link (WCAG 2.1 AA) ---- */ a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px} .skip-link{position:absolute;left:-9999px;top:.5rem;z-index:50;background:var(--ink);color:var(--paper);padding:.6rem 1rem;font-family:var(--mono);font-size:.8rem} .skip-link:focus{left:.75rem} /* ---- editorial labels / section markers ---- */ .label{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)} .marker{display:flex;align-items:center;gap:1rem;margin-bottom:2.5rem} .marker .num{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);white-space:nowrap} .marker .rule{height:1px;background:var(--rule);flex:1} /* ---- nav ---- */ nav{position:sticky;top:0;z-index:20;background:rgba(250,248,243,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)} .nav{display:flex;align-items:center;justify-content:space-between;height:64px} .nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;background:none;border:0;cursor:pointer;padding:10px} .nav-toggle span{display:block;height:2px;width:100%;background:var(--ink);transition:transform .25s,opacity .25s} nav.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)} nav.open .nav-toggle span:nth-child(2){opacity:0} nav.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .brand{display:flex;align-items:center;gap:.55rem;font-family:var(--mono);font-weight:500;letter-spacing:.22em;font-size:.82rem;text-transform:uppercase} /* logo mark — SVG silhouette via CSS mask so it inherits currentColor and flips ink↔bone with the theme (an can't pick up currentColor) */ .brand .mark{height:26px;width:26px;display:block;background:currentColor;-webkit-mask:url(images/soqucoin-mark.svg) no-repeat center;-webkit-mask-size:contain;mask:url(images/soqucoin-mark.svg) no-repeat center;mask-size:contain} .brand b{color:var(--accent);font-weight:500} .nav-links{display:flex;gap:2rem;align-items:baseline} .nav-links a{font-size:.9rem;color:var(--muted);transition:color .2s} .nav-links a:hover,.nav-links a[aria-current=page]{color:var(--ink)} .nav-links a.cta{color:var(--ink);border-bottom:2px solid var(--accent);padding-bottom:2px} @media(max-width:760px){ .nav-toggle{display:flex} .nav-links{position:absolute;left:0;right:0;top:64px;flex-direction:column;gap:0;align-items:stretch;background:var(--paper);border-bottom:1px solid var(--rule);padding:.5rem var(--pad) 1.25rem;opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .2s,transform .2s} nav.open .nav-links{opacity:1;transform:none;pointer-events:auto} .nav-links a{display:block;font-size:1rem;padding:.95rem 0;border-bottom:1px solid var(--rule);color:var(--ink)} .nav-links a.cta{border-bottom:1px solid var(--rule)} } /* ---- hero ---- */ header{padding:clamp(3.5rem,8vw,7rem) 0 clamp(3rem,6vw,5rem)} .hero{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,5vw,4.5rem);align-items:center} @media(max-width:880px){.hero{grid-template-columns:1fr;gap:2.5rem}} .eyebrow{margin-bottom:1.75rem} h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.6rem,6vw,5rem);line-height:1.02;letter-spacing:-.015em;margin-bottom:1.5rem} h1 em{font-style:italic;color:var(--accent)} .lede{font-size:clamp(1.05rem,1vw + .85rem,1.3rem);color:var(--muted);max-width:34ch;line-height:1.55} .lede b{color:var(--ink);font-weight:500} .actions{display:flex;gap:1.5rem;align-items:center;margin-top:2.25rem;flex-wrap:wrap} .btn{font-family:var(--sans);font-size:.95rem;font-weight:500;padding:.7rem 1.4rem;min-height:44px;display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:var(--paper);transition:background .2s} .btn:hover{background:var(--accent-ink)} .link-arrow{font-size:.95rem;color:var(--ink);border-bottom:1px solid var(--rule);padding-bottom:3px;transition:border-color .2s} .link-arrow:hover{border-color:var(--accent)} .link-arrow::after{content:" →";color:var(--accent)} /* ---- figure + lattice motif ---- */ figure{margin:0} .lattice{width:100%;height:auto;display:block} .lattice .pt{fill:var(--ink);opacity:.32} .lattice .basis{stroke:var(--accent);stroke-width:1.6;fill:none} .lattice .vec{stroke:var(--ink);stroke-width:1.1;fill:none;stroke-dasharray:3 3;opacity:.55} .lattice .o{fill:var(--accent)} figcaption{font-family:var(--mono);font-size:.7rem;color:var(--muted);margin-top:1rem;line-height:1.5;border-top:1px solid var(--rule);padding-top:.75rem} figcaption b{color:var(--accent);font-weight:500} /* ---- lattice animation ---- */ @keyframes ptIn{from{opacity:0;transform:scale(0)}to{opacity:.32;transform:scale(1)}} @keyframes basisDraw{from{stroke-dashoffset:120}to{stroke-dashoffset:0}} @keyframes vecFade{from{opacity:0}to{opacity:.55}} @keyframes originPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}} .lattice .pt{opacity:0;transform-origin:center;animation:ptIn .4s ease forwards} .lattice .basis{stroke-dasharray:120;stroke-dashoffset:120;animation:basisDraw .7s ease forwards;animation-delay:1.1s} .lattice .vec{opacity:0;animation:vecFade .5s ease forwards;animation-delay:1.6s} .lattice .o{transform-origin:180px 150px;animation:originPulse 3.5s ease-in-out 2s infinite} @media(prefers-reduced-motion:reduce){ .lattice .pt{opacity:.32;animation:none} .lattice .basis{stroke-dashoffset:0;animation:none} .lattice .vec{opacity:.55;animation:none} .lattice .o{animation:none} } /* ---- sections + prose ---- */ section{padding:clamp(3.5rem,7vw,6rem) 0} .tint{background:var(--paper-2)} .prose{max-width:62ch} .prose p{font-size:clamp(1.15rem,1vw + .95rem,1.45rem);line-height:1.6;font-family:var(--serif);font-weight:400} .prose p + p{margin-top:1.5rem} .prose a,.note a,figcaption a{color:var(--accent-ink);border-bottom:1px solid rgba(126,29,45,.45)} .pull{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,2.5vw,2.1rem);line-height:1.35;color:var(--accent-ink);max-width:24ch;margin:0} .cols-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start} @media(max-width:780px){.cols-2{grid-template-columns:1fr;gap:2rem}} /* legacy alias used by the home page */ .thesis{max-width:62ch} .thesis p{font-size:clamp(1.15rem,1vw + .95rem,1.45rem);line-height:1.6;font-family:var(--serif);font-weight:400} .thesis p + p{margin-top:1.5rem} .thesis-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start} @media(max-width:780px){.thesis-grid{grid-template-columns:1fr;gap:2rem}} /* ---- spec table (figures, NOT cards) ---- */ .specs{border-top:1px solid var(--ink)} .spec{display:grid;grid-template-columns:1fr auto;gap:1rem;padding:1.15rem 0;border-bottom:1px solid var(--rule);align-items:baseline} .spec dt{font-size:.95rem;color:var(--muted)} .spec dd{font-family:var(--mono);font-size:1rem;color:var(--ink);text-align:right} .spec dd small{color:var(--muted)} .spec dd .ok{color:var(--accent)} .live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:.4rem;vertical-align:middle} /* ---- numbered index (no cards) ---- */ .index{border-top:1px solid var(--ink)} .entry{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1.25rem,3vw,3rem);padding:clamp(1.5rem,3vw,2.25rem) 0;border-bottom:1px solid var(--rule);align-items:baseline;transition:padding-left .25s, background .25s} .entry:hover{padding-left:.75rem} .entry .no{font-family:var(--mono);font-size:.8rem;color:var(--accent);letter-spacing:.1em;padding-top:.4rem} .entry h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,2.5vw,2.1rem);line-height:1.1;letter-spacing:-.01em} .entry h3 .for{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem} .entry h3 .tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid var(--rule);padding:.15rem .4rem;margin-left:.6rem;vertical-align:middle;white-space:nowrap} .entry h3 .tag.preview{color:var(--accent);border-color:rgba(126,29,45,.4)} .entry p{color:var(--muted);max-width:48ch;margin-top:.6rem;font-size:.98rem} .entry .go{align-self:center;font-size:1.4rem;color:var(--rule);transition:color .2s,transform .2s} .entry:hover .go{color:var(--accent);transform:translateX(4px)} @media(max-width:680px){.entry{grid-template-columns:auto 1fr;gap:1rem}.entry .go{display:none}} /* ---- editorial code block (mono, NOT a card: left accent rule) ---- */ .code-label{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem;display:block} .code{font-family:var(--mono);font-size:.85rem;line-height:1.75;background:var(--paper-2);border-left:2px solid var(--accent);padding:1.25rem 1.5rem;overflow-x:auto;white-space:pre;color:var(--ink)} .code .c{color:var(--muted)} .code .k{color:var(--accent)} /* ---- notice / preview-disclaimer banner (editorial left-rule, not a card) ---- */ .notice{background:var(--paper-2);border-left:2px solid var(--accent);padding:1rem 1.25rem;margin-top:1.75rem;font-size:.92rem;line-height:1.55;max-width:62ch} .notice b{color:var(--accent-ink)} /* ---- footer ---- */ footer{background:var(--ink);color:var(--paper);padding:clamp(3rem,6vw,5rem) 0 2.5rem;margin-top:2rem} footer ::selection{background:var(--paper);color:var(--ink)} .foot{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.5rem} .foot.eco4{grid-template-columns:2fr 1fr 1fr 1fr} @media(max-width:900px){.foot.eco4{grid-template-columns:1fr 1fr 1fr}} @media(max-width:680px){.foot,.foot.eco4{grid-template-columns:1fr 1fr}} .foot h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#9b9488;margin-bottom:1.1rem;font-weight:500} .foot a{display:block;color:#cfc9bd;font-size:.92rem;padding:.28rem 0;transition:color .2s} .foot a:hover{color:var(--paper)} .foot .mark-lg{height:42px;width:42px;display:block;margin-bottom:1.1rem;background:var(--paper);-webkit-mask:url(images/soqucoin-mark.svg) no-repeat center;-webkit-mask-size:contain;mask:url(images/soqucoin-mark.svg) no-repeat center;mask-size:contain} .foot .brand-lg{font-family:var(--serif);font-size:1.6rem;color:var(--paper);margin-bottom:.75rem} .foot .note{color:#9b9488;font-size:.86rem;max-width:38ch;line-height:1.55} .foot-base{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.12);color:#938c80;font-size:.8rem} .foot-base .label{color:#938c80} /* ---- scroll reveal ---- */ .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease} .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}