/* ============================================================================ Yusuf Gadelrab — shared design system Single source of truth for every page in public/. Tokens lifted from the KXNG SEF brand (BRAND.md) so the portfolio, the store and the clothing brand read as one operation instead of twelve unrelated pages. Two surface registers, ONE system: brand surface — Impact display, full streetwear energy professional — grotesk display, calmer, for resume / media-kit / client-facing pages Palette, spacing, components and behaviour are identical across both. Only the display typeface and heading letter-spacing change, because Impact on a resume reads as a flyer, not as an engineer. ========================================================================= */ :root{ /* --- surface --- */ --bg:#0B0B0D; --bg2:#141416; --panel:#17171a; --panel2:#1c1c20; /* --- ink --- */ --bone:#F2EDE4; --ink:#F2EDE4; --muted:#a29c8e; /* --faint was #6f6a61 = 3.66:1 on --bg, under the 4.5:1 AA floor for the 12-14px text it is used on. #8C8677 reads the same weight at 5.4:1. */ --faint:#8C8677; /* --- accent (exactly one hero element per view — see BRAND.md) --- */ --gold:#D4AF37; --gold-2:#e9c96a; --gold-dim:#8a7328; --line:rgba(212,175,55,.18); --line-soft:rgba(242,237,228,.10); --glow:rgba(212,175,55,.35); /* --- semantic --- */ --ok:#5FBF7F; --warn:#E0B341; --bad:#E0685F; /* --- type --- */ --display:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif; --display-pro:"Inter Tight",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; --body-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif; --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace; /* Fluid type scale. clamp() everywhere so nothing needs a mobile breakpoint to stay readable. */ --t-hero:clamp(46px,9vw,104px); --t-h1:clamp(34px,5.5vw,64px); --t-h2:clamp(26px,3.4vw,40px); --t-h3:clamp(19px,2.1vw,25px); --t-body:clamp(15px,1.05vw,17px); --t-small:14px; --t-micro:12px; /* --- spacing: 4px base, used for EVERY gap so rhythm never drifts --- */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --section-y:clamp(56px,8vw,110px); --section-x:clamp(18px,5vw,60px); --maxw:1180px; --maxw-prose:68ch; --radius:2px; /* sharp — the brand is not rounded */ --radius-lg:4px; --shadow:0 8px 30px -8px rgba(0,0,0,.6); --shadow-gold:0 8px 30px -8px var(--glow); --ease:cubic-bezier(.22,.61,.36,1); } /* ---------- reset ---------- */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ background:var(--bg); color:var(--ink); font-family:var(--body-font); font-size:var(--t-body); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; /* A single unbreakable token (long email, URL, DOI) must never be able to widen a 375px viewport. break-word only kicks in when the word alone overflows, so normal copy still wraps on spaces. */ overflow-wrap:break-word; } a{color:inherit;text-decoration:none} img,svg,video{max-width:100%;height:auto;display:block} ::selection{background:var(--gold);color:var(--bg)} /* Visible focus for keyboard users only — never remove the outline outright, it is the only way a keyboard user knows where they are. */ :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--radius)} :focus:not(:focus-visible){outline:none} /* ---------- ambient wash (fixed, never scrolls, never intercepts clicks) --- */ body::before{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background: radial-gradient(55vw 38vw at 85% -8%,rgba(212,175,55,.07),transparent 60%), radial-gradient(45vw 36vw at -8% 40%,rgba(212,175,55,.05),transparent 60%); } header,main,footer,section{position:relative;z-index:1} /* ---------- layout ---------- */ .section{padding:var(--section-y) var(--section-x);max-width:var(--maxw);margin:0 auto} .section--tight{padding-top:var(--s7);padding-bottom:var(--s7)} .prose{max-width:var(--maxw-prose)} .stack>*+*{margin-top:var(--s4)} .stack-lg>*+*{margin-top:var(--s6)} .row{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center} .grid{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))} .grid--2{grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))} .center{text-align:center} /* ---------- type ---------- */ h1,h2,h3,h4{font-family:var(--display);text-transform:uppercase;line-height:1.02;font-weight:400} body.pro h1,body.pro h2,body.pro h3,body.pro h4{ font-family:var(--display-pro);text-transform:none;font-weight:700; line-height:1.12;letter-spacing:-.02em; } h1{font-size:var(--t-h1);letter-spacing:1.5px} h2{font-size:var(--t-h2);letter-spacing:1.2px} h3{font-size:var(--t-h3);letter-spacing:.8px} body.pro h1,body.pro h2,body.pro h3{letter-spacing:-.02em} .hero-type{font-family:var(--display);font-size:var(--t-hero);text-transform:uppercase; line-height:.88;letter-spacing:2px} body.pro .hero-type{font-family:var(--display-pro);text-transform:none; letter-spacing:-.03em;line-height:1.02;font-weight:800} .gold{color:var(--gold-2)} .gold-fill{ background:linear-gradient(120deg,var(--gold-2),var(--gold) 45%,var(--gold-dim)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; color:var(--gold); /* fallback where background-clip is unsupported */ } .muted{color:var(--muted)} .faint{color:var(--faint)} .mono{font-family:var(--mono);font-size:.92em} .lead{font-size:clamp(17px,1.5vw,20px);color:var(--muted);max-width:var(--maxw-prose)} .eyebrow{font-family:var(--display);font-size:var(--t-micro);letter-spacing:3px; text-transform:uppercase;color:var(--gold-2)} body.pro .eyebrow{font-family:var(--display-pro);font-weight:600;letter-spacing:2px} /* ---------- nav ---------- */ .site-nav{ position:sticky;top:0;z-index:50; display:flex;align-items:center;justify-content:space-between;gap:var(--s4); padding:var(--s3) var(--section-x); background:rgba(11,11,13,.82); backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid var(--line); } .site-nav__brand{font-family:var(--display);text-transform:uppercase;letter-spacing:2px; font-size:16px;white-space:nowrap;display:inline-flex;align-items:center;gap:10px} .site-nav__lion{width:34px;height:34px;display:block;flex:none; transition:transform .35s var(--ease),filter .35s var(--ease)} .site-nav__brand:hover .site-nav__lion{transform:rotate(-6deg) scale(1.06); filter:drop-shadow(0 0 10px rgba(212,175,55,.45))} /* Lion mark — shared across static pages (page headers, footers, product covers) */ .lion-mark{display:block;flex:none} .lion-header{display:flex;align-items:center;gap:14px;margin-bottom:var(--s3,18px)} .lion-header .lion-mark{width:52px;height:52px} .lion-footer{width:40px;height:40px;opacity:.85;margin:0 auto 14px;display:block} /* inline-block, not block: the mark then follows the hero's own text-align, so it centres on centred pages instead of sticking to the left gutter */ .page-lion{display:inline-block;width:46px;height:46px;margin:0 0 10px; animation:lion-in .7s var(--ease) both} @keyframes lion-in{from{opacity:0;transform:translateY(-6px) scale(.9)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.page-lion{animation:none}} body.pro .site-nav__brand{font-family:var(--display-pro);font-weight:700;letter-spacing:-.01em; text-transform:none;font-size:17px} .site-nav__links{display:flex;flex-wrap:wrap;gap:var(--s5);align-items:center} .site-nav__links a{font-size:var(--t-small);color:var(--muted);transition:color .2s var(--ease)} .site-nav__links a:hover,.site-nav__links a[aria-current="page"]{color:var(--gold-2)} @media(max-width:620px){ .site-nav{flex-direction:column;align-items:flex-start;gap:var(--s2)} .site-nav__links{gap:var(--s4)} } /* ---------- buttons ---------- */ .btn{ padding:15px 30px;border-radius:var(--radius); font-family:var(--display);letter-spacing:1.5px;text-transform:uppercase;font-size:15px; cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px; border:1px solid transparent;text-align:center; transition:transform .25s var(--ease),box-shadow .3s var(--ease), background .3s var(--ease),border-color .3s var(--ease); } body.pro .btn{font-family:var(--display-pro);text-transform:none;font-weight:600;letter-spacing:0} .btn:hover{transform:translateY(-3px)} .btn:active{transform:translateY(-1px)} .btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:var(--bg); box-shadow:var(--shadow-gold)} .btn-gold:hover{box-shadow:0 14px 40px -8px var(--glow)} .btn-ghost{border-color:var(--line);color:var(--ink);background:rgba(255,255,255,.02)} .btn-ghost:hover{border-color:var(--gold);background:rgba(212,175,55,.07)} .btn-sm{padding:10px 20px;font-size:13px} .btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none} /* ---------- surfaces ---------- */ .card{ background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--line-soft);border-radius:var(--radius-lg); padding:var(--s6); transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease); } .card:hover{border-color:var(--line);transform:translateY(-4px);box-shadow:var(--shadow)} .card--flat:hover{transform:none;box-shadow:none} .panel{background:var(--panel);border:1px solid var(--line-soft); border-radius:var(--radius-lg);padding:var(--s5)} .badge{display:inline-flex;align-items:center;gap:var(--s2); padding:6px 14px;border:1px solid var(--line);border-radius:var(--radius); font-family:var(--display);font-size:var(--t-micro);letter-spacing:2.5px; text-transform:uppercase;color:var(--gold-2);background:rgba(212,175,55,.06)} body.pro .badge{font-family:var(--display-pro);font-weight:600;letter-spacing:1px; text-transform:none;font-size:var(--t-small)} .badge .dot{width:7px;height:7px;background:var(--gold);border-radius:1px; box-shadow:0 0 10px var(--glow)} /* Metric tile — the numbers do the selling, so they get the largest type. */ .stat{display:flex;flex-direction:column;gap:var(--s1)} .stat__value{font-family:var(--display);font-size:clamp(30px,4vw,46px);line-height:1; color:var(--gold-2)} body.pro .stat__value{font-family:var(--display-pro);font-weight:800;letter-spacing:-.03em} .stat__label{font-size:var(--t-small);color:var(--muted)} .divider{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent); border:0;margin:var(--s7) 0} /* ---------- tables ---------- */ /* Wide tables scroll inside their own container — the page body must never scroll sideways on a phone. */ .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} table{width:100%;border-collapse:collapse;font-size:var(--t-small)} th,td{padding:var(--s3) var(--s4);text-align:left;border-bottom:1px solid var(--line-soft)} th{font-family:var(--display);letter-spacing:1.5px;text-transform:uppercase; font-size:var(--t-micro);color:var(--gold-2);font-weight:400} body.pro th{font-family:var(--display-pro);font-weight:600;letter-spacing:.5px;text-transform:none} tbody tr:hover{background:rgba(212,175,55,.03)} /* ---------- forms ---------- */ input,textarea,select{ width:100%;padding:var(--s3) var(--s4); background:var(--bg2);color:var(--ink); border:1px solid var(--line-soft);border-radius:var(--radius); font-family:inherit;font-size:var(--t-body); } input:focus,textarea:focus,select:focus{border-color:var(--gold);outline:none} /* iOS Safari zooms the whole viewport when a focused field is under 16px, and --t-body is 15px. Floor form fields at 16px without touching body copy. */ input,textarea,select{font-size:max(16px,var(--t-body))} label{display:block;font-size:var(--t-small);color:var(--muted);margin-bottom:var(--s2)} /* ---------- footer ---------- */ .site-footer{ border-top:1px solid var(--line); padding:var(--s7) var(--section-x); max-width:var(--maxw);margin:var(--s8) auto 0; display:flex;flex-wrap:wrap;gap:var(--s5); justify-content:space-between;align-items:center; color:var(--muted);font-size:var(--t-small); } .site-footer a:hover{color:var(--gold-2)} .site-footer__links{display:flex;flex-wrap:wrap;gap:var(--s5)} /* ---------- utilities ---------- */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip-link{position:absolute;left:var(--s4);top:-60px;z-index:100; padding:var(--s3) var(--s4);background:var(--gold);color:var(--bg); transition:top .2s var(--ease)} .skip-link:focus{top:var(--s4)} /* ---------- motion ---------- */ .reveal{opacity:0;transform:translateY(16px); transition:opacity .6s var(--ease),transform .6s var(--ease)} .reveal.is-in{opacity:1;transform:none} @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{opacity:1;transform:none} } /* ---------- print (resume is the page people actually print) ---------- */ @media print{ :root{--bg:#fff;--ink:#111;--muted:#444;--panel:#fff;--panel2:#fff; --line:#ccc;--line-soft:#ddd;--gold:#8a7328;--gold-2:#8a7328} body{background:#fff;color:#111} body::before{display:none} .site-nav,.site-footer,.btn,.skip-link{display:none!important} .card,.panel{border:1px solid #ccc;box-shadow:none;break-inside:avoid} .gold-fill{-webkit-text-fill-color:#8a7328;color:#8a7328} a[href^="http"]::after{content:" (" attr(href) ")";font-size:10px;color:#666} .section{padding:12px 0;max-width:none} } /* ============================================================================ SHARED UX LAYER — components driven by /js/site.js Everything here is namespaced `yg-` so page-local CSS can never collide with it, and every fixed element sits above the nav (z 50) but below nothing else the pages define. Motion is opt-out via prefers-reduced-motion at the bottom. ========================================================================= */ /* ---------- cross-document view transitions ------------------------------- MPA opt-in. Browsers without the API ignore the at-rule entirely, so this is a genuine no-op in Safari/Firefox rather than a JS navigation shim that could break the pages' own inline scripts. */ @view-transition{navigation:auto} ::view-transition-old(root){animation:yg-vt-out .18s var(--ease) both} ::view-transition-new(root){animation:yg-vt-in .22s var(--ease) both} @keyframes yg-vt-out{to{opacity:0}} @keyframes yg-vt-in{from{opacity:0}to{opacity:1}} /* ---------- scroll progress hairline --------------------------------------- Painted with a scaleX transform (compositor-only) instead of width, so it never triggers layout while scrolling. Skipped by JS on pages that already ship #pv2-bar or #progress. */ #yg-progress{ position:fixed;top:0;left:0;right:0;height:2px;z-index:99999;pointer-events:none; background:linear-gradient(90deg,var(--gold-dim),var(--gold),var(--gold-2)); transform:scaleX(0);transform-origin:0 50%; will-change:transform; } /* ---------- command palette trigger (in .site-nav) ------------------------- */ .yg-cmd{ display:inline-flex;align-items:center;gap:var(--s2); padding:5px 10px;background:rgba(242,237,228,.03); border:1px solid var(--line-soft);border-radius:var(--radius); color:var(--muted);font-family:inherit;font-size:var(--t-small); cursor:pointer;line-height:1.4; transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease); } .yg-cmd:hover{color:var(--gold-2);border-color:var(--line);background:rgba(212,175,55,.06)} .yg-cmd__kbd{ font-family:var(--mono);font-size:11px;letter-spacing:.5px;color:var(--faint); border:1px solid var(--line-soft);border-radius:2px;padding:1px 5px; } .yg-cmd:hover .yg-cmd__kbd{color:var(--gold-2);border-color:var(--line)} @media(max-width:620px){.yg-cmd__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}} /* ---------- command palette ------------------------------------------------ */ html.yg-pal-open{overflow:hidden} .yg-pal{position:fixed;inset:0;z-index:100000;display:flex;flex-direction:column;align-items:center} .yg-pal[hidden]{display:none} .yg-pal__scrim{position:absolute;inset:0;background:rgba(6,6,8,.72);backdrop-filter:blur(3px)} .yg-pal__box{ position:relative;margin:clamp(12px,9vh,110px) var(--s4) var(--s4); width:min(640px,calc(100vw - 32px));max-height:min(70vh,560px); display:flex;flex-direction:column;overflow:hidden; background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--line);border-radius:var(--radius-lg); box-shadow:0 30px 90px -20px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.4); animation:yg-pal-in .16s var(--ease) both; } @keyframes yg-pal-in{from{opacity:0;transform:translateY(-8px) scale(.99)}to{opacity:1;transform:none}} .yg-pal__head{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4); border-bottom:1px solid var(--line-soft)} .yg-pal__icon{color:var(--gold-2);font-size:15px;line-height:1} .yg-pal__input{ flex:1 1 auto;width:auto;background:none;border:0;padding:6px 0; color:var(--ink);font-size:16px;/* 16px so iOS does not zoom the viewport */ } .yg-pal__input:focus{outline:none;border:0} .yg-pal__input::placeholder{color:var(--faint)} .yg-pal__esc{ background:none;border:1px solid var(--line-soft);border-radius:2px; color:var(--faint);font-family:var(--mono);font-size:11px;padding:3px 7px;cursor:pointer; transition:color .2s var(--ease),border-color .2s var(--ease); } .yg-pal__esc:hover{color:var(--gold-2);border-color:var(--line)} .yg-pal__list{list-style:none;margin:0;padding:var(--s2) 0;overflow-y:auto;flex:1 1 auto; -webkit-overflow-scrolling:touch;overscroll-behavior:contain} .yg-pal__group{ padding:var(--s3) var(--s4) var(--s1);font-family:var(--mono);font-size:10.5px; letter-spacing:2px;text-transform:uppercase;color:var(--faint); } .yg-pal__opt{ display:flex;align-items:center;justify-content:space-between;gap:var(--s4); padding:9px var(--s4);cursor:pointer;font-size:var(--t-small);color:var(--muted); border-left:2px solid transparent; } .yg-pal__opt[aria-selected="true"]{ background:rgba(212,175,55,.09);color:var(--ink);border-left-color:var(--gold); } .yg-pal__t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .yg-pal__hint{color:var(--faint);font-family:var(--mono);font-size:12px;flex:0 0 auto} .yg-pal__opt[aria-selected="true"] .yg-pal__hint{color:var(--gold-2)} .yg-pal__empty{padding:var(--s5) var(--s4);color:var(--faint);font-size:var(--t-small)} .yg-pal__foot{ display:flex;justify-content:space-between;gap:var(--s4); padding:var(--s2) var(--s4);border-top:1px solid var(--line-soft); color:var(--faint);font-size:var(--t-micro); } .yg-pal__foot kbd{font-family:var(--mono);border:1px solid var(--line-soft); border-radius:2px;padding:0 4px;margin-right:2px} @media(max-width:520px){.yg-pal__foot{display:none}} /* ---------- sticky contextual CTA (commercial pages) ----------------------- Slim, one action, always dismissible. It hides itself again near the footer so it can never sit on top of the page's own closing CTA. */ .yg-cta-bar{ position:fixed;left:0;right:0;bottom:0;z-index:90; display:flex;align-items:center;justify-content:center;gap:var(--s3); padding:10px var(--s4);padding-bottom:calc(10px + env(safe-area-inset-bottom,0px)); background:rgba(11,11,13,.94);backdrop-filter:saturate(140%) blur(10px); border-top:1px solid var(--line); transform:translateY(110%);opacity:0; transition:transform .28s var(--ease),opacity .28s var(--ease); } .yg-cta-bar[hidden]{display:none} .yg-cta-bar.is-in{transform:none;opacity:1} .yg-cta-bar__go{ display:inline-flex;align-items:center;justify-content:center; min-height:40px;padding:9px 22px;border-radius:var(--radius); background:linear-gradient(135deg,var(--gold),var(--gold-2));color:var(--bg); font-size:14.5px;font-weight:600;letter-spacing:.2px; transition:transform .2s var(--ease),box-shadow .25s var(--ease); } .yg-cta-bar__go:hover{transform:translateY(-2px);box-shadow:0 10px 28px -8px var(--glow)} .yg-cta-bar__go:active{transform:translateY(0)} .yg-cta-bar__x{ flex:0 0 auto;width:34px;height:34px;background:none;cursor:pointer; border:1px solid var(--line-soft);border-radius:var(--radius); color:var(--muted);font-size:13px;line-height:1; transition:color .2s var(--ease),border-color .2s var(--ease); } .yg-cta-bar__x:hover{color:var(--ink);border-color:var(--line)} /* Reserve room so the bar never covers the last line of the footer. */ body.yg-has-cta .site-footer{padding-bottom:calc(var(--s7) + 62px)} /* ---------- heading copy-link ---------------------------------------------- */ .yg-anchor{ display:inline-flex;align-items:center;justify-content:center; vertical-align:middle;width:26px;height:26px;margin-left:2px; background:none;border:1px solid transparent;border-radius:var(--radius); color:var(--faint);cursor:pointer; opacity:0;transition:opacity .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease); } h2:hover>.yg-anchor,h3:hover>.yg-anchor,.yg-anchor:focus-visible,.yg-anchor.is-copied{opacity:1} .yg-anchor:hover{color:var(--gold-2);border-color:var(--line)} .yg-anchor.is-copied{color:var(--ok)} .yg-anchor.is-copied svg{display:none} .yg-anchor.is-copied::after{content:"✓";font-size:14px;line-height:1} /* Touch devices have no hover — keep the affordance permanently visible. */ @media(hover:none){.yg-anchor{opacity:.55}} @media print{.yg-anchor{display:none!important}} /* ---------- back to top ---------------------------------------------------- */ #yg-top{ position:fixed;right:clamp(12px,3vw,26px);bottom:clamp(12px,3vw,26px);z-index:80; width:42px;height:42px;display:flex;align-items:center;justify-content:center; background:rgba(23,23,26,.9);backdrop-filter:blur(8px); border:1px solid var(--line);border-radius:var(--radius); color:var(--muted);cursor:pointer; opacity:0;transform:translateY(10px); transition:opacity .25s var(--ease),transform .25s var(--ease), color .2s var(--ease),border-color .2s var(--ease); } #yg-top[hidden]{display:none} #yg-top.is-in{opacity:1;transform:none} #yg-top:hover{color:var(--gold-2);border-color:var(--gold);transform:translateY(-2px)} #yg-top:active{transform:translateY(0)} body.yg-has-cta #yg-top{bottom:calc(62px + env(safe-area-inset-bottom,0px))} @media print{#yg-top,.yg-cta-bar,#yg-progress,.yg-cmd,.yg-pal{display:none!important}} /* ---------- reading time / last updated ------------------------------------ */ .yg-meta{ display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2); margin-top:var(--s3);color:var(--faint);font-size:var(--t-micro); font-family:var(--mono);letter-spacing:.4px; } .yg-meta__sep{color:var(--line)} /* ---------- micro-interactions (refinements to existing components) -------- Faster and flatter than before: 3px of lift reads as responsive, 6px reads as a toy. Buttons get a real pressed state so a tap is acknowledged before the mailto/checkout handoff. */ .card{transition-duration:.22s} .card:hover{transform:translateY(-3px);border-color:var(--line)} .card:active{transform:translateY(-1px);transition-duration:.06s} .btn{transition-duration:.18s;will-change:transform} .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0) scale(.985);transition-duration:.05s} .btn:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px} .site-nav__links a{position:relative} .site-nav__links a::after{ content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px; background:var(--gold);transform:scaleX(0);transform-origin:0 50%; transition:transform .22s var(--ease); } .site-nav__links a:hover::after,.site-nav__links a[aria-current="page"]::after{transform:scaleX(1)} .site-nav__links .yg-cmd::after{display:none} tbody tr{transition:background .15s var(--ease)} /* ---------- motion opt-out (must stay last) -------------------------------- */ @media(prefers-reduced-motion:reduce){ @view-transition{navigation:none} #yg-progress{display:none!important} .yg-pal__box{animation:none!important} .yg-cta-bar,#yg-top{transition:none!important} .yg-cta-bar.is-in,#yg-top.is-in{transform:none} .card:hover,.card:active,.btn:hover,.btn:active, .yg-cta-bar__go:hover,#yg-top:hover{transform:none!important} .site-nav__links a::after{transition:none!important} }