/* ============================================================ Studio Ardium — shared stylesheet Resets, keyframes and .ard-* interaction utilities. (Layout/visual styling stays inline on each element.) ============================================================ */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:'Archivo',sans-serif;color:#0A0A0A;background:#FCFCFA;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden} ::selection{background:#1E32FF;color:#fff} a{color:inherit;text-decoration:none} /* Film-grain overlay — sitewide, sits above content but below the cursor (9999). Tiles the grain PNG at its native size (96×108) to cover the viewport. */ body::after{ content:''; position:fixed; inset:0; pointer-events:none; z-index:9998; background-image:url("../assets/grain.png"); background-repeat:repeat; background-size:auto; } /* Form controls (Contact) */ input,textarea{font-family:inherit;width:100%;border:none;border-bottom:1px solid #D8D8D6;background:transparent;padding:14px 2px;font-size:16px;color:#0A0A0A;outline:none;transition:border-color .3s} input:focus,textarea:focus{border-color:#1E32FF} input::placeholder,textarea::placeholder{color:#B4B4B2} label{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:#9A9A9A} /* Keyframes */ @keyframes ardPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.6)}} @keyframes ardArrowLoop{0%{transform:translateX(0)}50%{transform:translateX(5px)}100%{transform:translateX(0)}} @keyframes ardMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes ardSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}} @keyframes ardBob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}} /* CTA button */ .ard-cta{position:relative;overflow:hidden} .ard-cta>span{position:relative;z-index:1;transition:transform .45s cubic-bezier(.16,1,.3,1)} .ard-cta:hover{background:#1E32FF!important} .ard-cta:hover .ard-arrow{transform:translateX(5px)} .ard-arrow{display:inline-block;transition:transform .4s cubic-bezier(.16,1,.3,1)} /* Sweep underline link */ .ard-line{position:relative;width:fit-content} .ard-line::after{content:'';position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.16,1,.3,1)} .ard-line:hover::after{transform:scaleX(1);transform-origin:left} /* Image hover-zoom (Work) */ .ard-img>div{transition:transform 1s cubic-bezier(.16,1,.3,1),filter .8s} .ard-img:hover>div{transform:scale(1.06)} /* Tag chips (Work) — !important so inline border/colour don't win over hover */ .ard-chip{transition:background-color .35s,color .35s,border-color .35s,transform .35s cubic-bezier(.16,1,.3,1)} .ard-chip:hover{background:#0A0A0A!important;color:#fff!important;border-color:#0A0A0A!important;transform:translateY(-2px)} /* Archive rows (Work) — force all child text white on the black hover. The row + children carry inline colours, so plain hover rules lose to them. */ .ard-row{transition:background-color .4s cubic-bezier(.16,1,.3,1),color .4s,padding .4s} .ard-row:hover{background:#0A0A0A!important;color:#fff!important;padding-left:24px!important;padding-right:24px!important} .ard-row:hover,.ard-row:hover *{color:#fff!important} .ard-row:hover span{opacity:1!important} /* Capability cards (Studio) */ .ard-cap{transition:transform .5s cubic-bezier(.16,1,.3,1)} .ard-cap:hover{transform:translateY(-4px)!important} .ard-cap .ard-bar{transition:width .5s cubic-bezier(.16,1,.3,1)} .ard-cap:hover .ard-bar{width:100%!important} /* ============================================================ Loading screen — shows on every page load / navigation. Markup lives at the top of each ; site.js fades it out. ============================================================ */ #ardium-loader{ position:fixed;inset:0;z-index:10001; background:#FCFCFA;color:#0A0A0A; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px; transition:opacity .7s ease,visibility .7s ease; } #ardium-loader.done{opacity:0;visibility:hidden;pointer-events:none} #ardium-loader .ldr-mark{ font-family:'Archivo',sans-serif;font-weight:700;font-size:46px;line-height:1; color:#1E32FF;animation:ardSpin 3.4s linear infinite; } #ardium-loader .ldr-word{ font-family:'Archivo',sans-serif;font-weight:600;font-size:18px;letter-spacing:-.01em; } #ardium-loader .ldr-bar{position:relative;width:170px;height:1.5px;background:#E4E3DE;overflow:hidden} #ardium-loader .ldr-bar>span{ position:absolute;inset:0;background:#1E32FF;transform:translateX(-100%); animation:ardLoadBar 1.05s cubic-bezier(.55,0,.2,1) forwards; } #ardium-loader .ldr-meta{ font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em; text-transform:uppercase;color:#9A9A9A; } @keyframes ardLoadBar{to{transform:translateX(0)}} /* Hamburger toggle + menu extras — hidden on desktop, shown in the mobile media query */ .nav-toggle{display:none;border:none;background:transparent;padding:0;margin:0} .nav-extra{display:none} /* ============================================================ MOBILE (≤ 768px) Overrides the desktop inline styles (stylesheet !important beats non-important inline). Targets inline patterns via [style*=]. ============================================================ */ @media (max-width:768px){ html,body{overflow-x:hidden;max-width:100%} /* ---- Header + hamburger menu ---- */ /* backdrop-filter makes the header a containing block for fixed children, which would trap the full-screen nav at the header's height — drop it. */ header{padding:15px 20px!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important} header>a{font-size:16px!important;z-index:320;position:relative} header>div{display:none!important} /* coordinates + clock */ .nav-toggle{ display:block;position:relative;z-index:320; width:34px;height:34px;cursor:pointer;color:#0A0A0A; } .nav-toggle::before,.nav-toggle::after{ content:"";position:absolute;left:6px;right:6px;height:1.5px; background:currentColor; transition:transform .42s cubic-bezier(.16,1,.3,1),top .42s cubic-bezier(.16,1,.3,1); } .nav-toggle::before{top:13px} .nav-toggle::after{top:20px} html.nav-open .nav-toggle::before{top:16px;transform:rotate(45deg)} html.nav-open .nav-toggle::after{top:16px;transform:rotate(-45deg)} header nav{ position:fixed!important;inset:0!important;z-index:300; background:#FCFCFA!important; display:flex!important;flex-direction:column!important; align-items:flex-start!important;justify-content:center!important; gap:4px!important;padding:96px 28px 220px!important; transform:translateX(100%);transition:transform .5s cubic-bezier(.16,1,.3,1); } html.nav-open header nav{transform:translateX(0)} html.nav-open{overflow:hidden} header nav>a{ font-family:'Archivo',sans-serif!important;font-weight:600!important; font-size:36px!important;line-height:1.18!important;letter-spacing:-.025em!important; text-transform:none!important;padding:3px 0!important; } /* ---- Mobile menu footer (links, text, decorative mark) ---- */ header nav .nav-extra{ display:flex;flex-direction:column;gap:16px; position:absolute;left:28px;right:28px;bottom:36px; font-family:'JetBrains Mono',monospace; } .nav-extra .nav-rule{height:1px;background:#E4E3DE;width:100%} .nav-extra .nav-email{ font-family:'Archivo',sans-serif;font-weight:500;font-size:18px; letter-spacing:-.01em;color:#0A0A0A;width:fit-content;text-transform:none; border-bottom:1px solid #0A0A0A;padding-bottom:3px; } .nav-extra .nav-socials{display:flex;flex-wrap:wrap;gap:12px 20px} .nav-extra .nav-socials a{ font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#5A5A5A; } .nav-extra .nav-meta{ font-size:10px;letter-spacing:.13em;line-height:1.9; text-transform:uppercase;color:#9A9A9A; } .nav-extra .nav-mark{ position:absolute;right:0;bottom:2px; font-family:'Archivo',sans-serif;font-weight:700;font-size:46px; line-height:1;color:#1E32FF;pointer-events:none; } /* ---- Spacing: tighten oversized horizontal padding ---- */ [style*="px 56px"],[style*="px 36px"]{padding-left:22px!important;padding-right:22px!important} /* ---- Stack multi-column grids ---- */ [style*="grid-template-columns"]{grid-template-columns:1fr!important;gap:20px!important} /* ---- Headings: keep large but inside the viewport ---- */ main h1{font-size:clamp(40px,12.5vw,76px)!important;line-height:1.02!important} main h2{font-size:clamp(30px,9vw,52px)!important;line-height:1.05!important} /* ---- Media stays fluid ---- */ img{max-width:100%} }