/* =========================================================================== ArticleGrade — design polish layer (loaded AFTER each page's base CSS). Editorial/magazine refinement: paper grain, typographic finesse, layered depth, signature accents, and restrained micro-interactions. Additive only. =========================================================================== */ /* ---- Typography finesse -------------------------------------------------- */ body{ text-rendering:optimizeLegibility; font-feature-settings:"kern" 1,"liga" 1; } h1,h2,h3{ font-feature-settings:"kern" 1,"liga" 1,"dlig" 1; text-wrap:balance; } p,li,.lead,.hero-sub,.ph-sub{ text-wrap:pretty; } /* tighter optical tracking on the big display cuts */ .big,.hero-h,.ph-h,.sec,.cta-final h2,.amount{ letter-spacing:-.026em; } /* tabular, lining figures everywhere a number carries meaning */ .pp,.iv,.v,.mv,.amount,.stat .v,.st .v,.calc-out .big,.ring .num b,.matrix td, [data-price],.pu,.uofrow .ub,.scticks,.cv{ font-feature-settings:"tnum" 1,"lnum" 1; } /* ---- Paper grain (atmosphere) ------------------------------------------- */ body::before{ content:"";position:fixed;inset:-50%;z-index:9998;pointer-events:none; opacity:.04;mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---- Signature accent: a coral tick after every section label ----------- */ .seclabel,.kick{ position:relative; } .seclabel{ display:inline-flex; align-items:center; gap:13px; } .seclabel::after{ content:""; width:30px; height:1.5px; background:currentColor; opacity:.55; border-radius:1px; } /* ---- Navigation: animated underline + active state ---------------------- */ .nav-links a{ position:relative; } .nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:-5px; height:1.5px; background:var(--accent); transition:right .28s cubic-bezier(.2,.6,.2,1); } .nav-links a:hover::after,.nav-links a.on::after{ right:0; } header.scrolled{ box-shadow:0 1px 0 var(--fog),0 14px 30px -24px rgba(15,13,11,.25); } /* ---- Buttons: depth + a light sheen on hover ---------------------------- */ .btn{ position:relative; overflow:hidden; letter-spacing:.005em; isolation:isolate; } .btn-p{ box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 7px 20px -10px rgba(200,50,26,.55); } .btn-p:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 12px 28px -10px rgba(200,50,26,.62); } .btn::after{ content:""; position:absolute; top:0; left:-130%; width:55%; height:100%; z-index:-1; transform:skewX(-18deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent); transition:left .55s cubic-bezier(.2,.6,.2,1); } .btn:hover::after{ left:160%; } .btn-d::after{ background:linear-gradient(90deg,transparent,rgba(200,50,26,.10),transparent); } /* ---- Cards: hairline depth + a restrained lift on hover ----------------- */ .cap,.axis,.pcard,.scard,.ic3,.subc,.prov,.price,.tier,.scband,.cap4 .cap{ transition:transform .3s cubic-bezier(.2,.6,.2,1), box-shadow .3s ease, border-color .3s ease; box-shadow:0 1px 2px rgba(15,13,11,.03), 0 10px 26px -20px rgba(15,13,11,.16); } .cap:hover,.axis:hover,.pcard:hover,.scard:hover,.ic3:hover,.subc:hover, .prov:hover,.price:hover,.tier:hover,.scband:hover{ transform:translateY(-3px); box-shadow:0 2px 4px rgba(15,13,11,.05), 0 22px 46px -24px rgba(15,13,11,.24); } /* keep the featured/accent-bordered cards their colour on hover */ .cap:hover,.axis:hover,.pcard:hover,.scard:hover,.subc:hover,.prov:hover, .ic3:not(.big):not(.cheap):hover,.price:not(.feat):hover,.tier:not(.feat):hover,.scband:hover{ border-color:#e4c7b9; } .price.feat,.tier.feat{ box-shadow:0 3px 6px rgba(200,50,26,.08), 0 26px 56px -28px rgba(200,50,26,.42); } /* the homepage grader is the centrepiece — give it real presence */ .grader{ box-shadow:0 2px 6px rgba(15,13,11,.04), 0 36px 80px -34px rgba(15,13,11,.34) !important; } .gfield input,.gate-form input,.calc-field input{ transition:border-color .18s ease, background .18s ease, box-shadow .18s ease; } .gfield input:focus{ box-shadow:0 0 0 4px rgba(200,50,26,.10); } /* dark code / calculator blocks get cinematic depth */ .code,.calc,.calc-out{ box-shadow:0 30px 70px -36px rgba(15,13,11,.6); } /* chips & pills: subtle interactive warmth */ .chip,.whochip,.dim{ transition:transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease; } .whochip:hover{ transform:translateY(-1px); } /* ---- Accessibility: visible focus, honoured motion preferences ---------- */ a:focus-visible,.btn:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:5px; } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .rv{ opacity:1 !important; transform:none !important; } body::before{ display:none; } } /* ---- Misc refinement ----------------------------------------------------- */ html{ scrollbar-color:var(--fog2) transparent; scroll-padding-top:88px; } ::selection{ background:#f3d3cb; color:var(--accent); } img,svg{ max-width:100%; } /* ---- Premium footer (upgrades the sub-pages'