/* ============================================================ SkyGuard — WordPress / Elementor stylesheet Single file. Enqueue in a child theme (see functions-snippet.php) or paste into Elementor > Site Settings > Custom CSS. This is the design-system token set + the site.css component layer, converted from the fixed 1440px design frame to a fluid responsive layout. Class names are identical to the HTML UI kit, so every Elementor element only needs its CSS Class filled in. Breakpoints match Elementor defaults: 1024 (tablet), 767 (mobile). ============================================================ */ /* ---------- 1. TOKENS ---------- */ :root{ --font-display:"Heebo","Arial Black",system-ui,sans-serif; --font-text:"Rubik","Heebo",system-ui,sans-serif; --font-mono:"Geist Mono","Rubik",ui-monospace,Menlo,monospace; --weight-display:900;--weight-strong:600;--weight-text:500;--weight-mono:400; --ink-900:#08090b;--ink-800:#0f1217; --paper-100:#f4f2ee;--paper-000:#ffffff; --grey-600:#54565a; --amber-500:#f5a31b; --blue-600:#1b6fc0; --on-dark-a92:rgba(255,255,255,.92);--on-dark-a62:rgba(255,255,255,.62); --on-dark-a44:rgba(255,255,255,.44);--on-dark-a30:rgba(255,255,255,.30); --on-dark-a14:rgba(255,255,255,.14);--on-dark-a08:rgba(255,255,255,.08); --on-dark-a04:rgba(255,255,255,.04); --on-light-a90:rgba(8,9,11,.90);--on-light-a62:rgba(8,9,11,.62); --on-light-a45:rgba(8,9,11,.45);--on-light-a28:rgba(8,9,11,.28); --on-light-a14:rgba(8,9,11,.14);--on-light-a08:rgba(8,9,11,.08); --amber-a40:rgba(245,163,27,.40);--amber-a18:rgba(245,163,27,.18);--amber-a08:rgba(245,163,27,.08); --surface-page:var(--paper-100);--surface-panel:var(--paper-000); --text-strong:var(--ink-900);--text-body:var(--grey-600); --text-muted:var(--on-light-a45);--text-label:var(--on-light-a45); --accent:var(--amber-500);--accent-quiet:var(--amber-a40);--accent-wash:var(--amber-a08); --sovereign:var(--blue-600); --rule:var(--on-light-a14);--rule-strong:var(--on-light-a28); --status-live:#3fbf6a; --ease-standard:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.16,1,.3,1); /* fluid type: 390px → 1440px, mobile value → desktop value */ --type-hero:clamp(44px,26.2px + 4.571vw,92px); --type-headline:clamp(32px,24.6px + 1.905vw,52px); --type-stat:clamp(44px,36.6px + 1.905vw,64px); --type-card-title:clamp(21px,19.1px + .476vw,26px); --type-panel-title:clamp(18px,17.3px + .19vw,20px); --type-lede:clamp(17px,15.9px + .286vw,20px); --type-body:clamp(16px,15.4px + .143vw,17.5px); --type-body-sm:clamp(14.5px,14.1px + .095vw,15.5px); --type-caption:13.25px; --type-label:12.5px; --type-micro:11.5px; --type-running:11.5px; --type-folio:clamp(26px,22.6px + .857vw,34px); --type-stat-unit:18px; --leading-body:1.62; /* fluid vertical rhythm */ --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px; --s7:clamp(56px,41.1px + 3.81vw,96px); --s8:clamp(72px,51.2px + 5.33vw,128px); --s9:clamp(88px,58.3px + 7.62vw,168px); --w-max:1200px; --gutter:clamp(20px,4vw,40px); --nav-h:72px;--bar-h:34px; } /* ---------- 2. FRAME ---------- */ /* Put class `site` on the outermost Elementor container of every page, or add it to from the child theme. */ .site{background:var(--paper-100);font-family:var(--font-text);font-weight:var(--weight-text);font-size:var(--type-body);line-height:var(--leading-body);color:var(--text-body);width:100%;overflow-x:clip;direction:rtl} .site *,.site *::before,.site *::after{box-sizing:border-box} .wrap{width:100%;max-width:var(--w-max);margin-inline:auto;padding-inline:var(--gutter)} .full{width:100%} .sec{padding:var(--s8) 0} .sec-lg{padding:var(--s9) 0} .sec-sm{padding:var(--s6) 0} .sec-tight{padding:var(--s7) 0} .ink{background:var(--ink-900);color:var(--paper-000);--surface-page:var(--ink-900);--surface-panel:var(--ink-800);--text-strong:var(--paper-000);--text-body:var(--on-dark-a62);--text-muted:var(--on-dark-a44);--text-label:var(--on-dark-a30);--rule:var(--on-dark-a14);--rule-strong:var(--on-dark-a30)} .paper{background:var(--paper-100)} .on-light{--surface-page:var(--paper-100);--surface-panel:var(--paper-000);--text-strong:var(--ink-900);--text-body:var(--grey-600);--text-muted:var(--on-light-a45);--text-label:var(--on-light-a45);--rule:var(--on-light-a14);--rule-strong:var(--on-light-a28);color:var(--ink-900)} /* ---------- 3. TYPE ---------- */ .site h1,.site h2,.site h3,.site h4{margin:0;font-family:var(--font-display);letter-spacing:-.02em;color:var(--text-strong)} .site h1{font-weight:900;font-size:var(--type-hero);line-height:.95} .site h2{font-weight:900;font-size:var(--type-headline);line-height:1.04} .site h3{font-weight:900;font-size:var(--type-card-title);line-height:1.2;letter-spacing:-.01em} .site h4{font-weight:700;font-size:var(--type-panel-title);line-height:1.3;letter-spacing:0} .site p{margin:0} .lede{font-size:var(--type-lede);line-height:1.6;color:var(--text-body)} .small{font-size:var(--type-body-sm);line-height:1.65;color:var(--text-body)} .cap{font-size:var(--type-caption);line-height:1.55;color:var(--text-muted)} .mono{font-family:var(--font-mono);font-size:var(--type-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--text-label)} .mono-sm{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-label)} .num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--text-strong);direction:ltr} .idx{font-family:var(--font-mono);font-size:11px;letter-spacing:.3em;color:var(--accent);direction:ltr} .big{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:.86;color:var(--text-strong);direction:ltr} /* section marker */ .marker{display:flex;align-items:baseline;gap:var(--s3);padding-bottom:18px;border-bottom:1px solid var(--rule)} .marker .n{font-family:var(--font-mono);font-size:13px;letter-spacing:.06em;color:var(--accent);direction:ltr} .marker .l{font-family:var(--font-mono);font-size:var(--type-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--text-label)} .marker .r{flex:1;height:1px;background:var(--rule)} /* ---------- 4. BUTTONS & LINKS ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 30px;border-radius:0;border:1px solid transparent;font-family:var(--font-text);font-weight:600;font-size:16px;cursor:pointer;text-decoration:none;transition:background-color 220ms var(--ease-standard),border-color 220ms var(--ease-standard),color 220ms var(--ease-standard),opacity 140ms var(--ease-standard)} .btn-primary{background:var(--amber-500);color:var(--ink-900)} .btn-primary:hover{background:#ffb336} .btn-primary:active{opacity:.84} .btn-ghost{background:transparent;border-color:var(--on-dark-a30);color:var(--paper-000)} .btn-ghost:hover{border-color:var(--paper-000)} .btn-quiet{background:transparent;border-color:var(--rule-strong);color:var(--text-strong)} .btn-quiet:hover{border-color:var(--text-strong)} .btn-link{padding:0;min-height:0;border:0;background:none;color:var(--text-strong);font-family:var(--font-text);font-weight:600;font-size:14.5px;cursor:pointer;display:inline-flex;gap:10px;align-items:center;text-decoration:none} .btn-link i{display:block;width:26px;height:1px;background:var(--accent);transition:width 220ms var(--ease-out)} .btn-link:hover i{width:44px} .site a{color:var(--text-strong);text-decoration:none;border-bottom:1px solid var(--accent-quiet)} .site a:hover{border-bottom-color:var(--accent)} .site a.btn,.site a.btn-link{border-bottom:1px solid transparent} .site a.btn-ghost{border-color:var(--on-dark-a30)} .site a.btn-quiet{border-color:var(--rule-strong)} .btn:focus-visible,.site a:focus-visible,.site button:focus-visible,.site input:focus-visible,.site select:focus-visible,.site textarea:focus-visible{outline:2px solid var(--amber-500);outline-offset:4px} .tag{display:inline-flex;align-items:center;min-height:32px;font-family:var(--font-mono);font-size:var(--type-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)} .taglist{display:flex;flex-wrap:wrap;gap:26px;align-items:center} .taglist .tag+.tag{padding-inline-start:26px;border-inline-start:1px solid var(--rule)} /* ---------- 5. HEADER / NAV ---------- */ .topbar{height:var(--bar-h);display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-a44)} .live{display:inline-flex;align-items:center;gap:9px} .dot{width:6px;height:6px;border-radius:999px;background:var(--status-live);animation:sg-pulse 2.4s var(--ease-standard) infinite} @keyframes sg-pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(63,191,106,.5)}50%{opacity:.5;box-shadow:0 0 0 5px rgba(63,191,106,0)}} .nav{min-height:var(--nav-h);display:flex;align-items:center;gap:var(--s4);justify-content:space-between;border-top:1px solid var(--on-dark-a08)} .navlinks{display:flex;gap:24px;align-items:center;flex-wrap:nowrap} .navlinks a{appearance:none;background:none;border:0;padding:6px 0;white-space:nowrap;font-family:var(--font-text);font-weight:500;font-size:14px;color:var(--on-dark-a44);cursor:pointer;border-bottom:1px solid transparent;transition:color 220ms var(--ease-standard),border-color 220ms var(--ease-standard);text-decoration:none} .navlinks a:hover{color:var(--paper-000);border-bottom-color:transparent} .navlinks a[aria-current],.navlinks a.current,.navlinks li.current-menu-item a{color:var(--amber-500);border-bottom-color:var(--amber-500)} .navshell{position:sticky;top:0;z-index:40;background:transparent;transition:background-color 320ms var(--ease-standard),backdrop-filter 320ms var(--ease-standard)} .navshell.solid{background:rgba(8,9,11,.9);backdrop-filter:blur(16px)} /* WP admin bar offset */ body.admin-bar .navshell{top:32px} /* mobile nav */ .mnav{position:sticky;top:0;z-index:50;background:rgba(8,9,11,.92);backdrop-filter:blur(16px)} .mnav-bar{display:flex;align-items:center;justify-content:space-between;min-height:62px;border-bottom:1px solid var(--on-dark-a08)} .burger{appearance:none;background:none;border:1px solid var(--on-dark-a30);width:46px;height:46px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;flex:0 0 auto} .burger i{display:block;width:18px;height:1px;background:var(--paper-000)} /* ---------- 6. HERO ---------- */ .hero{position:relative;min-height:clamp(620px,50vw + 340px,820px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--ink-900)} .hero-bg{position:absolute;inset:0} .hero-bg img{width:100%;height:100%;object-fit:cover;display:block} .hero-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(8,9,11,.96) 0%,rgba(8,9,11,.72) 46%,rgba(8,9,11,.34) 100%)} .crop{position:absolute;pointer-events:none} .crop i{position:absolute;background:var(--on-dark-a30)} .hin{animation:sg-hin 900ms var(--ease-out) both} @keyframes sg-hin{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} /* data strip */ .strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--on-dark-a14)} .strip>div{padding:26px 0 26px 0;padding-inline-end:28px} .strip>div+div{border-inline-start:1px solid var(--on-dark-a14);padding-inline-start:28px} /* ---------- 7. LAYOUT PRIMITIVES ---------- */ .stack{display:flex;flex-direction:column} .g2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)} .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:0} .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:0} .rule-top{border-top:1px solid var(--rule)} .cols{display:grid} .cols>*{padding-inline:34px} .cols>*:first-child{padding-inline-start:0} .cols>*+*{border-inline-start:1px solid var(--rule)} .cols>*:last-child{padding-inline-end:0} .cols-2{grid-template-columns:1fr 1fr} .cols-3{grid-template-columns:repeat(3,1fr)} .cols-4{grid-template-columns:repeat(4,1fr)} /* ruled list */ .rl{border-top:1px solid var(--rule)} .rl-row{display:grid;grid-template-columns:44px 1fr 1.5fr 22px;gap:var(--s4);align-items:baseline;padding:26px 0;border-bottom:1px solid var(--rule);cursor:pointer;transition:background-color 220ms var(--ease-standard)} .rl-row:hover{background:var(--amber-a08)} .rl-row .t{font-family:var(--font-display);font-weight:900;font-size:23px;letter-spacing:-.01em;color:var(--text-strong)} .rl-row .d{font-size:15px;line-height:1.6;color:var(--text-muted);opacity:.55;transition:opacity 220ms var(--ease-standard)} .rl-row:hover .d{opacity:1} .rl-row .a{font-family:var(--font-mono);color:var(--accent);opacity:0;transition:opacity 220ms var(--ease-standard);text-align:left} .rl-row:hover .a{opacity:1} /* ruled square card — no radius, no shadow, no fill */ .card{border:1px solid var(--rule);background:transparent;padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);border-radius:0} .card-quiet{border:0;border-top:1px solid var(--rule);padding:var(--s4) 0 0} .card-lift{transition:background-color 220ms var(--ease-standard),border-color 220ms var(--ease-standard)} .card-lift:hover{border-color:var(--rule-strong);background:var(--amber-a08)} /* spec row */ .srow{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);padding:15px 0;border-bottom:1px solid var(--rule)} .srow:last-child{border-bottom:0} .srow .k{font-size:15px;color:var(--text-muted)} .srow .v{font-family:var(--font-mono);font-size:15px;color:var(--text-strong);direction:ltr;font-variant-numeric:tabular-nums} .band{display:grid;grid-template-columns:repeat(4,1fr)} .band>div{padding:var(--s5) var(--s4) var(--s5) 0} .band>div+div{border-inline-start:1px solid var(--rule);padding-inline-start:var(--s4)} /* ---------- 8. IMAGERY ---------- */ .plates{display:grid;grid-template-columns:repeat(3,1fr)} .plates figure{margin:0;position:relative;overflow:hidden} .plates img{width:100%;height:clamp(280px,26vw,420px);object-fit:cover;display:block;transition:transform 700ms var(--ease-out),filter 400ms var(--ease-standard);filter:saturate(.92)} .plates figure:hover img{transform:scale(1.04);filter:saturate(1.05)} .plates figcaption{position:absolute;inset:auto 0 0 0;padding:20px 24px;background:linear-gradient(to top,rgba(8,9,11,.9),transparent);font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-a62);display:flex;gap:12px} .plates .pay{position:absolute;inset:0;background:rgba(8,9,11,.72);backdrop-filter:blur(6px);opacity:0;transition:opacity 300ms var(--ease-standard);display:flex;flex-direction:column;justify-content:center;gap:12px;padding:34px} .plates figure:hover .pay{opacity:1} .plates .pay .r{display:flex;justify-content:space-between;gap:14px;font-family:var(--font-mono);font-size:12px;color:var(--on-dark-a62);padding-bottom:9px;border-bottom:1px solid var(--on-dark-a14)} .plates .pay .r b{color:var(--paper-000);font-weight:400;direction:ltr} .thumb{position:relative;overflow:hidden} .thumb img{width:100%;height:250px;object-fit:cover;display:block;transition:transform 600ms var(--ease-out)} .thumb:hover img{transform:scale(1.04)} .gal{display:grid;grid-template-columns:repeat(6,1fr)} .gal>div{position:relative;height:300px;border-inline-start:1px solid var(--on-dark-a14);overflow:hidden} .gal>div:first-child{border-inline-start:0} .gal img{width:100%;height:100%;object-fit:cover;display:block} .gal .lbl{position:absolute;inset:auto 0 0 0;padding:14px 16px;background:linear-gradient(to top,rgba(8,9,11,.9),transparent);font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-a62);pointer-events:none} /* ---------- 9. HUD / LIVE ---------- */ .glass{background:rgba(8,9,11,.62);backdrop-filter:blur(18px) saturate(1.1);border:1px solid var(--on-dark-a14)} .hud{position:absolute;inset:0;pointer-events:none} .hud i{position:absolute;width:15px;height:15px;border:1px solid var(--on-dark-a44)} .hud i:nth-child(1){top:10px;left:10px;border-right:0;border-bottom:0} .hud i:nth-child(2){top:10px;right:10px;border-left:0;border-bottom:0} .hud i:nth-child(3){bottom:10px;left:10px;border-right:0;border-top:0} .hud i:nth-child(4){bottom:10px;right:10px;border-left:0;border-top:0} .scan{position:absolute;inset:0;pointer-events:none;overflow:hidden} .scan::before{content:"";position:absolute;left:0;right:0;height:120px;background:linear-gradient(to bottom,transparent,rgba(245,163,27,.14),transparent);animation:sg-sweep 5.2s var(--ease-standard) infinite} .scan::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)} @keyframes sg-sweep{0%{transform:translateY(-130px)}100%{transform:translateY(520px)}} .bbox{position:absolute;border:1px solid var(--amber-500);animation:sg-lock 4.4s var(--ease-standard) infinite} .bbox span{position:absolute;top:-1px;right:100%;transform:translateX(6px);background:var(--amber-500);color:var(--ink-900);font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;padding:3px 6px;white-space:nowrap} @keyframes sg-lock{0%,100%{opacity:.35}12%,70%{opacity:1}} .gauge{height:3px;background:var(--on-dark-a14);position:relative;margin-top:9px} .gauge i{position:absolute;inset:0 auto 0 0;background:var(--amber-500);transition:width 600ms var(--ease-standard)} .con{width:100%;border:1px solid var(--on-dark-a14);background:var(--ink-800);display:grid;grid-template-columns:250px minmax(0,1fr) 268px;min-height:520px} .con-col{display:flex;flex-direction:column;min-width:0;overflow:hidden} .con-col+.con-col{border-inline-start:1px solid var(--on-dark-a14)} .con-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--on-dark-a14);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-a44)} .con-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 18px;border-bottom:1px solid var(--on-dark-a08);font-size:14px;color:var(--on-dark-a62)} .con-row .v{font-family:var(--font-mono);font-size:13.5px;color:var(--paper-000);direction:ltr;font-variant-numeric:tabular-nums} .con-task{display:grid;grid-template-columns:9px 1fr;gap:12px;align-items:start;padding:15px 18px;border-bottom:1px solid var(--on-dark-a08);cursor:pointer;transition:background-color 200ms var(--ease-standard)} .con-task:hover{background:var(--on-dark-a04)} .con-task[aria-selected="true"]{background:rgba(245,163,27,.1)} .con-task s{width:7px;height:7px;border-radius:999px;margin-top:6px;text-decoration:none;display:block} .con-task .n{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;color:var(--on-dark-a30);direction:ltr} .con-task .t{font-size:14.5px;color:var(--paper-000);margin-top:5px;line-height:1.35} .con-feed{position:relative;flex:1;min-width:0;min-height:340px;overflow:hidden;background:#04060a} .con-feed img{width:100%;height:100%;object-fit:cover;display:block} .con-tabs{display:flex;min-width:0;flex-wrap:nowrap} .con-tabs button{appearance:none;background:none;border:0;border-inline-start:1px solid var(--on-dark-a08);padding:11px 16px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-a44);cursor:pointer;transition:color 200ms var(--ease-standard),background-color 200ms var(--ease-standard)} .con-tabs button:hover{color:var(--paper-000)} .con-tabs button[aria-pressed="true"]{color:var(--ink-900);background:var(--amber-500)} .mini{position:relative;height:150px;border-bottom:1px solid var(--on-dark-a08);overflow:hidden} .mini .ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid var(--on-dark-a08);border-radius:999px} .mini .swp{position:absolute;top:50%;left:50%;width:50%;height:1px;background:linear-gradient(to right,var(--amber-500),transparent);transform-origin:0 0;animation:sg-spin 4s linear infinite} @keyframes sg-spin{to{transform:rotate(360deg)}} .mini .tgt{position:absolute;width:6px;height:6px;border-radius:999px;background:var(--amber-500);animation:sg-blip 4s var(--ease-standard) infinite} @keyframes sg-blip{0%,100%{opacity:.2}45%,60%{opacity:1}} /* ticker */ .ticker{overflow:hidden;border-top:1px solid var(--on-dark-a14);border-bottom:1px solid var(--on-dark-a14);background:var(--ink-900)} .ticker-track{display:flex;gap:0;width:max-content;animation:sg-marq 42s linear infinite} .ticker:hover .ticker-track{animation-play-state:paused} .ticker-item{display:flex;align-items:center;gap:14px;padding:16px 30px;border-inline-start:1px solid var(--on-dark-a08);font-family:var(--font-mono);font-size:var(--type-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-a44);white-space:nowrap} .ticker-item b{color:var(--paper-000);font-weight:400} .ticker-item s{width:5px;height:5px;border-radius:999px;background:var(--amber-500);text-decoration:none;flex:0 0 auto} @keyframes sg-marq{from{transform:translateX(0)}to{transform:translateX(50%)}} /* mission selector */ .mx{display:grid;grid-template-columns:1.12fr .88fr;border-top:1px solid var(--rule)} .mx-list{border-inline-start:1px solid var(--rule)} .mx-item{display:grid;grid-template-columns:46px 1fr;gap:var(--s3);align-items:center;width:100%;text-align:right;appearance:none;background:none;border:0;border-bottom:1px solid var(--rule);padding:24px 28px;cursor:pointer;transition:background-color 220ms var(--ease-standard)} .mx-item:hover{background:var(--amber-a08)} .mx-item[aria-selected="true"]{background:var(--ink-900)} .mx-item[aria-selected="true"] .mt{color:var(--paper-000)} .mx-item[aria-selected="true"] .mi{color:var(--amber-500)} .mx-item .mi{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;color:var(--on-light-a28);direction:ltr} .mx-item .mt{font-family:var(--font-display);font-weight:700;font-size:18px;line-height:1.25;color:var(--text-strong)} .mx-panel{padding:52px 0;padding-inline-end:56px;display:flex;flex-direction:column;gap:var(--s4);min-height:440px} /* ---------- 10. FORMS (target Elementor Forms markup too) ---------- */ .field{display:flex;flex-direction:column;gap:9px} .field label,.site .elementor-field-label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-label)} .field input,.field select,.field textarea, .site .elementor-field-group input,.site .elementor-field-group select,.site .elementor-field-group textarea{appearance:none;font-family:var(--font-text);font-size:16px;color:var(--text-strong);background:transparent;border:0;border-bottom:1px solid var(--rule-strong);border-radius:0;padding:12px 0;min-height:48px;box-shadow:none;transition:border-color 220ms var(--ease-standard)} .field textarea,.site .elementor-field-group textarea{min-height:96px;resize:vertical} .field input:hover,.field select:hover,.field textarea:hover, .site .elementor-field-group input:hover,.site .elementor-field-group textarea:hover{border-bottom-color:var(--text-strong)} .field input:focus,.field select:focus,.field textarea:focus, .site .elementor-field-group input:focus,.site .elementor-field-group textarea:focus{border-bottom-color:var(--amber-500);box-shadow:none;outline:none} .field input::placeholder,.field textarea::placeholder,.site .elementor-field-group ::placeholder{color:var(--on-light-a28)} .site .elementor-button,.site .elementor-field-type-submit button{background:var(--amber-500);color:var(--ink-900);border-radius:0;min-height:54px;padding:0 30px;font-family:var(--font-text);font-weight:600;font-size:16px;border:0} .site .elementor-button:hover{background:#ffb336} .site .elementor-message{font-family:var(--font-text);font-size:15px;border-radius:0} .choice{display:flex;gap:0;flex-wrap:wrap;border:1px solid var(--rule-strong)} .choice button{appearance:none;background:none;border:0;min-height:48px;padding:0 20px;font-family:var(--font-text);font-size:15px;color:var(--text-muted);cursor:pointer;transition:background-color 200ms var(--ease-standard),color 200ms var(--ease-standard)} .choice button+button{border-inline-start:1px solid var(--rule-strong)} .choice button[aria-pressed="true"]{background:var(--ink-900);color:var(--paper-000)} /* ---------- 11. FOOTER ---------- */ .foot{background:var(--ink-900);color:var(--on-dark-a62);padding:var(--s7) 0 var(--s3)} .foot h5{margin:0 0 var(--s3);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-a30);font-weight:400} .foot ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14.5px} .foot a{color:var(--on-dark-a62);border-bottom-color:transparent} .foot a:hover{color:var(--paper-000);border-bottom-color:var(--accent)} .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s4)} .fbot{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding-top:var(--s3);margin-top:var(--s5);border-top:1px solid var(--on-dark-a08)} /* ---------- 12. REVEAL ON SCROLL ---------- */ .rv{opacity:0;transform:translateY(24px);transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out)} .rv.in{opacity:1;transform:none} .railbar{position:fixed;top:0;right:0;bottom:0;width:2px;background:var(--on-light-a08);z-index:30} .railbar i{position:absolute;top:0;left:0;right:0;background:var(--amber-500)} /* ---------- 13. TABLET ≤1024 ---------- */ @media (max-width:1024px){ .strip,.g4,.cols-4,.band{grid-template-columns:1fr 1fr} .g4>*:nth-child(n+3),.cols-4>*:nth-child(n+3),.band>*:nth-child(n+3){border-top:1px solid var(--rule)} .strip>div:nth-child(n+3){border-top:1px solid var(--on-dark-a14)} .strip>div:nth-child(odd){border-inline-start:0;padding-inline-start:0} .cols-4>*:nth-child(odd){border-inline-start:0;padding-inline-start:0} .gal{grid-template-columns:repeat(3,1fr)} .gal>div:nth-child(3n+1){border-inline-start:0} .gal>div:nth-child(n+4){border-top:1px solid var(--on-dark-a14)} .con{grid-template-columns:minmax(0,1fr) 268px} .con-col:first-child{display:none} .rl-row{grid-template-columns:40px 1fr 18px} .rl-row .d{display:none} .mx{grid-template-columns:1fr} .mx-list{border-inline-start:0;border-top:1px solid var(--rule)} .mx-panel{padding:0 0 34px;min-height:0;padding-inline-end:0} .navlinks{gap:16px} } /* ---------- 14. MOBILE ≤767 ---------- */ @media (max-width:767px){ .site{font-size:16px} .cols,.plates,.g3,.g4,.cols-2,.cols-3,.cols-4,.band,.fgrid,.g2{grid-template-columns:1fr} .cols>*{padding-inline:0} .cols>*+*{border-inline-start:0;border-top:1px solid var(--rule);padding-top:28px;margin-top:8px} .band>div+div{border-inline-start:0;border-top:1px solid var(--rule);padding-inline-start:0} .g2{gap:var(--s4)} .fgrid{gap:40px} .strip{grid-template-columns:1fr 1fr} .strip>div{padding:20px 0} .strip>div:nth-child(2n){border-inline-start:1px solid var(--on-dark-a14);padding-inline-start:18px} .hero{min-height:620px} .btn{width:100%} .taglist{gap:12px;flex-direction:column;align-items:flex-start} .taglist .tag+.tag{padding-inline-start:0;border-inline-start:0} .tag{min-height:26px} .rl-row{grid-template-columns:34px 1fr;gap:12px;padding:20px 0} .rl-row .a{display:none} .rl-row .t{font-size:19px} .gal{grid-template-columns:1fr 1fr} .gal>div{height:190px;border-inline-start:0;border-top:1px solid var(--on-dark-a14)} .gal>div:nth-child(2n){border-inline-start:1px solid var(--on-dark-a14)} .plates .pay{opacity:1;background:rgba(8,9,11,.55);backdrop-filter:blur(3px);padding:22px;justify-content:flex-start} .plates figcaption{display:none} .con{grid-template-columns:1fr;min-height:0} .con-col+.con-col{border-inline-start:0;border-top:1px solid var(--on-dark-a14)} .choice{flex-direction:column} .choice button+button{border-inline-start:0;border-top:1px solid var(--rule-strong)} .choice button{width:100%;text-align:right} .ticker-item{padding:14px 20px} .fbot{flex-direction:column;gap:14px;align-items:flex-start} .big{letter-spacing:-.02em} .railbar{display:none} } @media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none} .dot,.hin,.ticker-track,.mini .swp,.mini .tgt,.bbox{animation:none} .plates img,.thumb img{transition:none} .scan::before{animation:none} } /* ---------- 15. ELEMENTOR / THEME RESETS ---------- */ /* Elementor containers add their own gaps and max-widths; neutralise inside .site */ .site .elementor-widget:not(:last-child){margin-block-end:0} .site .e-con-inner,.site .elementor-container{max-width:none} .site img{max-width:100%;height:auto} .site ul,.site ol{margin:0;padding:0} .site .elementor-icon-list-items{list-style:none}