/* ============================================================= SiloTech Engineering — website styles Navy + cream first · charcoal for depth · orange < 10% accent. Type per design system: IBM Plex Sans (body/UI), IBM Plex Mono (technical) + JetBrains Mono (eyebrows/labels), Airlock (display). ============================================================= */ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600;700&family=Archivo:wght@400;500;600;700&family=Sora:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&display=swap"); @font-face { font-family: "Airlock"; src: url("fonts/Airlock.otf") format("opentype"); font-weight: 400 900; font-style: normal; font-display: swap; } :root { /* brand */ --st-navy: #233558; --st-navy-600: #1B2A47; --st-navy-700: #142036; --st-navy-800: #0E1626; --st-navy-900: #080D17; --st-navy-100: #C6C7C5; --st-navy-200: #989995; --st-navy-300: #6C6D69; --st-navy-400: #4A4B47; --st-orange: #B8541F; --st-orange-300: #D27843; --st-orange-500: #9A4316; --st-charcoal: #14181C; --st-charcoal-200: #1A1E22; --st-charcoal-100: #20252A; --st-cream: #F9F9F2; --st-stone: #C7CDCE; --st-stone-50: #F1F3F4; --st-stone-100: #E0E3E4; --st-stone-200: #C7CDCE; --st-stone-300: #ADB4B6; --st-stone-400: #8C9396; --st-stone-500: #6E7578; --st-stone-600: #545A5C; --st-stone-700: #3D4143; /* fonts */ --font-display: "Airlock", "IBM Plex Sans", system-ui, sans-serif; --font-body: "Sora", "IBM Plex Sans", system-ui, sans-serif; --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --font-mono-display: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace; /* accent intensity (overridden by data-accent) */ --accent: var(--st-orange); --accent-soft: var(--st-orange-300); --tick: var(--st-orange); /* eyebrow ticks / small rules */ --diagram-accent: var(--st-orange); /* layout — Graphite Monolith: one warm-neutral dark temperature (was blue-leaning navy) */ --bg-deep: #0F1318; /* primary dark surface (page + former-light sections) */ --bg-panel: #161B22; /* secondary dark surface */ --bg-inset: #0A0C10; /* deepest inset surface */ --chrome-navy: #16233E; /* unified navy used for top/bottom chrome */ --chrome-navy-hair: #243456; /* hairline on the navy chrome */ --content-max: 1200px; --gutter: clamp(20px, 5vw, 56px); --section-pad-y: clamp(72px, 9vw, 132px); /* density-controlled */ --nav-h: 64px; /* motion */ --ease: cubic-bezier(0.2, 0, 0, 1); } /* ---- accent intensity ---- */ html[data-accent="subtle"] { --tick: var(--st-navy-300); --diagram-accent: var(--st-orange); } html[data-accent="bold"] { --tick: var(--st-orange); --accent-soft: var(--st-orange); } /* ---- density ---- */ html[data-density="compact"] { --section-pad-y: clamp(48px, 6vw, 80px); } html[data-density="spacious"] { --section-pad-y: clamp(96px, 12vw, 184px); } /* ---- body-font templates (display stays Airlock, untouched) ---- */ html[data-font="plex"] { --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, system-ui, sans-serif; } html[data-font="archivo"] { --font-body: "Archivo", "IBM Plex Sans", system-ui, sans-serif; } html[data-font="sora"] { --font-body: "Sora", "IBM Plex Sans", system-ui, sans-serif; letter-spacing: -0.006em; } html[data-font="hanken"] { --font-body: "Hanken Grotesk", "IBM Plex Sans", system-ui, sans-serif; } html[data-font="jet"] { --font-body: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace; } * { box-sizing: border-box; } /* overflow-x: clip prevents horizontal scroll WITHOUT making a scroll container, so position:sticky (the nav) keeps working on mobile/iOS. (hidden + overflow-y:auto broke it.) */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg-deep); color: var(--st-stone-100); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; letter-spacing: -0.005em; overflow: visible; } img { max-width: 100%; } a { color: inherit; text-decoration: none; } /* ============================================================= TYPOGRAPHY PRIMITIVES ============================================================= */ .display, .h1, .h2, .h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.04; color: var(--st-cream); margin: 0; text-wrap: balance; } .display { font-size: clamp(2.6rem, 6.4vw, 5rem); line-height: 0.98; } .h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); } .h2 { font-size: clamp(1.5rem, 3vw, 2.3rem); } .h3 { font-size: clamp(1.15rem, 1.7vw, 1.45rem); letter-spacing: 0.015em; } .on-dark .display, .on-dark .h1, .on-dark .h2, .on-dark .h3 { color: var(--st-cream); } .eyebrow { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-mono-display); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--st-navy-100); } .eyebrow .num { color: var(--accent); } .eyebrow .bar { width: 22px; height: 2px; background: var(--tick); display: inline-block; } .on-dark .eyebrow { color: var(--st-navy-100); } .on-dark .eyebrow .num { color: var(--accent-soft); } .lead { font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.5; color: var(--st-navy-100); max-width: 60ch; text-wrap: pretty; } .on-dark .lead { color: var(--st-navy-100); } p { text-wrap: pretty; } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ============================================================= LAYOUT ============================================================= */ .wrap { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); } .wrap-wide { max-width: 1360px; margin-inline: auto; padding-inline: var(--gutter); } section { padding-block: var(--section-pad-y); position: relative; } section + section { border-top: 1px solid rgba(249,249,242,0.10); } .section-cream { background: var(--bg-deep); color: var(--st-stone-100); } .section-navy { background: #172741; color: var(--st-cream); } .section-charcoal { background: var(--st-charcoal); color: var(--st-stone-100); } .section-stone { background: var(--bg-panel); color: var(--st-stone-100); } /* charcoal (near-black) sections: living SiloTech-orange drafter grid that parallax-scrolls + glows under the cursor (wired in site.js) */ .section-charcoal { position: relative; isolation: isolate; --grid-orange: rgba(184,84,31,0.12); } .section-charcoal::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--grid-orange) 1px, transparent 1px), linear-gradient(90deg, var(--grid-orange) 1px, transparent 1px); background-size: 46px 46px; background-position: 0 var(--grid-shift, 0px); } .section-charcoal::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(184,84,31,0.22), transparent 72%); opacity: var(--glow, 0); transition: opacity 0.35s var(--ease); } .dot-grid { background-image: radial-gradient(rgba(249,249,242,0.16) 1px, transparent 1.6px); background-size: 28px 28px; } .dot-grid-navy { background-image: radial-gradient(rgba(35,53,88,0.10) 1px, transparent 1.6px); background-size: 26px 26px; } /* ============================================================= CINEMATIC STAGE — opt-in dramatic section ground. A deep stage with a fine accent drafter-grid (vignette-masked) and a cursor-tracked glow (wired in site.js). Used deliberately for hero + focal sections, never as a flat site-wide wash. Accent-aware via --accent so program pages inherit their colour. ============================================================= */ .cine-stage { position: relative; isolation: isolate; overflow: hidden; background: #090B0F; --stage-line: color-mix(in srgb, var(--accent) 9%, transparent); --stage-glow: color-mix(in srgb, var(--accent) 20%, transparent); } .cine-stage > .wrap, .cine-stage > .wrap-wide { position: relative; z-index: 2; } .cine-stage::before { content: ""; position: absolute; inset: -2px; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--stage-line) 1px, transparent 1px), linear-gradient(90deg, var(--stage-line) 1px, transparent 1px); background-size: 46px 46px; background-position: 0 var(--grid-shift, 0px); -webkit-mask-image: radial-gradient(125% 105% at 50% 32%, #000 0%, rgba(0,0,0,0.5) 54%, transparent 86%); mask-image: radial-gradient(125% 105% at 50% 32%, #000 0%, rgba(0,0,0,0.5) 54%, transparent 86%); } .cine-stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), var(--stage-glow), transparent 70%), radial-gradient(95% 60% at 50% -8%, rgba(150,152,150,0.10), transparent 60%), radial-gradient(140% 110% at 50% 50%, transparent 54%, rgba(0,0,0,0.5) 100%); opacity: 1; } .cine-stage .stage-glow-track { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), var(--stage-glow), transparent 70%); opacity: var(--glow, 0); transition: opacity 0.4s var(--ease); } /* ============================================================= SILOFORGE PAGE WORLD — navy base, plan-view shell-ring radar + drawing-sheet ruler. Distinct from the services drafter grid. Scoped to body[data-page="siloforge"] (programs + hub + subpages). ============================================================= */ body[data-page="siloforge"] { background: #0A1120; } /* contain the radar world to the HERO; every other section gets its own ground */ .pg-hero { position: relative; isolation: isolate; overflow: hidden; background: #0A1120; } .pg-hero > .wrap { position: relative; z-index: 2; } body[data-page="siloforge"] .pg-hero.cine-stage::before { display: none; } body[data-page="siloforge"] .pg-hero.cine-stage::after { z-index: 1; background: radial-gradient(440px circle at var(--mx,50%) var(--my,30%), color-mix(in srgb, var(--accent) 15%, transparent), transparent 70%), radial-gradient(95% 55% at 84% -8%, rgba(35,53,88,0.30), transparent 60%); } /* What it designs — grain-strata navy */ body[data-page="siloforge"] .svc2-thesis { position: relative; isolation: isolate; overflow: hidden; background: #0C1526; } body[data-page="siloforge"] .svc2-thesis::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: repeating-linear-gradient(180deg, transparent 0 26px, rgba(202,208,222,0.05) 26px 27px), radial-gradient(70% 90% at 96% 50%, rgba(184,84,31,0.05), transparent 60%); -webkit-mask-image: linear-gradient(90deg,#000,transparent 80%); mask-image: linear-gradient(90deg,#000,transparent 80%); } body[data-page="siloforge"] .svc2-thesis > .wrap { position: relative; z-index: 1; } body[data-page="siloforge"] .svc2-t-plate { background: rgba(16,26,48,0.5); -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15); } /* thesis body — calm, spacious */ body[data-page="siloforge"] .svc2-t-body { grid-template-columns: 1.1fr 0.9fr; gap: clamp(34px,5vw,68px); align-items: start; } body[data-page="siloforge"] .svc2-t-body .t-prose p { font-size: clamp(1.02rem,1.35vw,1.18rem); line-height: 1.7; color: var(--st-navy-100); } body[data-page="siloforge"] .svc2-t-key { background: transparent; border-left: 2px solid var(--accent); padding: 4px 0 4px 24px; gap: 16px; } body[data-page="siloforge"] .svc2-t-key .q { color: var(--st-navy-100); } body[data-page="siloforge"] .svc2-t-key .q em { color: var(--accent-soft); font-style: normal; } @media (max-width: 760px) { body[data-page="siloforge"] .svc2-t-body { grid-template-columns: 1fr; } } /* SiloForge Overview — pricing + how-step emphasis */ body[data-page="siloforge"] .svc2-cap-row p strong { color: var(--st-cream); font-weight: 700; } .sf-price-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: clamp(30px,4vw,52px); align-items: stretch; } .sf-price { position: relative; display: flex; flex-direction: column; gap: 13px; padding: clamp(24px,2.6vw,32px); background: #121A2D; border: 1px solid rgba(202,208,222,0.13); border-radius: 6px; } .sf-price.feat { border-color: rgba(184,84,31,0.5); } .sf-price.feat::before { content: "All-access"; position: absolute; top: 0; right: 18px; transform: translateY(-50%); font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; background: var(--accent); padding: 4px 10px; border-radius: 2px; } .sf-price .pt { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-soft); } .sf-price h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.012em; font-size: 1.2rem; color: var(--st-cream); margin: 4px 0 0; line-height: 1.1; } .sf-price .pd { font-size: 0.92rem; color: var(--st-navy-100); line-height: 1.5; margin: 0; } .sf-price ul { list-style: none; margin: 6px 0 0; padding: 16px 0 0; display: flex; flex-direction: column; gap: 9px; border-top: 1px solid rgba(202,208,222,0.12); } .sf-price li { position: relative; padding-left: 18px; font-size: 0.87rem; color: var(--st-navy-100); line-height: 1.4; } .sf-price li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; background: var(--accent); } .sf-addon-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 16px; } .sf-addon { padding: 18px 20px; border: 1px solid rgba(202,208,222,0.12); background: rgba(255,255,255,0.018); } .sf-addon h4 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.012em; font-size: 0.92rem; color: var(--st-cream); margin: 0 0 6px; } .sf-addon p { font-size: 0.84rem; color: var(--st-navy-100); margin: 0; line-height: 1.5; } .sf-note { margin-top: 22px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.03em; color: var(--st-navy-200); display: flex; gap: 10px; max-width: 84ch; line-height: 1.65; } .sf-note::before { content: ""; width: 14px; height: 2px; background: var(--accent); flex: none; margin-top: 7px; } @media (max-width: 820px) { .sf-price-grid, .sf-addon-grid { grid-template-columns: 1fr; } } /* remove perspective floor + orange horizon behind the coverflow */ body[data-page="siloforge"] section:has(.cflow)::before, body[data-page="siloforge"] section:has(.cflow)::after { content: none !important; display: none !important; } /* ============================================================= ABOUT WORLD — editorial "dossier": warm ink, vertical ledger columns, horizontal baselines, an orange document spine. Distinct from the services grid and the SiloForge radar. ============================================================= */ body[data-page="about"] { background: #0C0D12; } body[data-page="about"] .section-navy, body[data-page="about"] .section-charcoal, body[data-page="about"] .section-cream, body[data-page="about"] .section-stone { background: transparent; } body[data-page="about"] .dot-grid, body[data-page="about"] .dot-grid-navy { background-image: none; } body[data-page="about"] section + section { border-top: 1px solid rgba(202,203,200,0.07); } body[data-page="about"]::before { content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none; background-image: repeating-linear-gradient(90deg, rgba(202,203,200,0.05) 0 1px, transparent 1px 14.2857%), repeating-linear-gradient(0deg, rgba(202,203,200,0.028) 0 1px, transparent 1px 74px); -webkit-mask-image: radial-gradient(135% 120% at 50% 26%, #000 28%, transparent 90%); mask-image: radial-gradient(135% 120% at 50% 26%, #000 28%, transparent 90%); } body[data-page="about"]::after { content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none; background: linear-gradient(90deg, rgba(184,84,31,0.45) 0 2px, transparent 2px) 0 0/2px 100% no-repeat, radial-gradient(92% 60% at 12% -6%, rgba(184,84,31,0.07), transparent 55%), radial-gradient(140% 120% at 50% 50%, transparent 52%, rgba(0,0,0,0.52) 100%); } body[data-page="about"] .phead { padding-block: clamp(94px,13vh,168px) clamp(46px,6vw,78px); } body[data-page="about"] .phead .display { font-size: clamp(2.8rem,7vw,5.4rem); line-height: 0.95; } /* charcoal sections on About: orange drafter-grid ground */ body[data-page="about"] .section-charcoal { background-color: rgba(8,9,13,0.55); background-image: linear-gradient(rgba(184,84,31,0.075) 1px, transparent 1px), linear-gradient(90deg, rgba(184,84,31,0.075) 1px, transparent 1px); background-size: 32px 32px; } /* What it checks — load-path spine + node-badge steps */ body[data-page="siloforge"] .svc2-cap { position: relative; isolation: isolate; overflow: hidden; background: #090E1C; } body[data-page="siloforge"] .svc2-cap::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(60% 90% at 10% 50%, rgba(184,84,31,0.06), transparent 62%); } body[data-page="siloforge"] .svc2-cap > .wrap { position: relative; z-index: 1; } body[data-page="siloforge"] .svc2-caplist { border-top: 0; position: relative; max-width: 860px; } body[data-page="siloforge"] .svc2-caplist::before { content:""; position:absolute; left:16px; top:26px; bottom:26px; width:2px; background: linear-gradient(var(--accent), rgba(202,208,222,0.12)); } body[data-page="siloforge"] .svc2-cap-row { grid-template-columns: 50px 1fr; align-items: center; gap: 22px; border-bottom: 1px solid rgba(202,208,222,0.1); padding: 18px 0; } body[data-page="siloforge"] .svc2-cap-row::before { content: none; } body[data-page="siloforge"] .svc2-cap-row .rn { position: relative; z-index: 1; width: 34px; height: 34px; font-size: 0.84rem; border: 1px solid var(--accent); border-radius: 50%; display: grid; place-items: center; color: var(--accent-soft); background: #090E1C; transition: background 0.18s var(--ease), color 0.18s var(--ease); } body[data-page="siloforge"] .svc2-cap-row:hover .rn { background: var(--accent); color: #0A0F1C; } body[data-page="siloforge"] .svc2-cap-row p { font-size: clamp(1rem,1.4vw,1.18rem); color: var(--st-cream); } /* Output & codes — keep cursor glow, micro-grid ground */ body[data-page="siloforge"] .svc-codes-stage { background: #0B1224; } body[data-page="siloforge"] .svc-codes-stage.cine-stage::before { display: block; inset: 0; z-index: 0; background-image: linear-gradient(rgba(202,208,222,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(202,208,222,0.045) 1px, transparent 1px); background-size: 30px 30px; -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 30%, transparent 82%); mask-image: radial-gradient(120% 100% at 50% 40%, #000 30%, transparent 82%); } body[data-page="siloforge"] .svc-codes-stage.cine-stage::after { z-index: 1; background: radial-gradient(440px circle at var(--mx,50%) var(--my,40%), color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); } /* Explore the suite — perspective floor stage */ body[data-page="siloforge"] section:has(.cflow) { position: relative; isolation: isolate; overflow: hidden; background: #0A1020; } body[data-page="siloforge"] section:has(.cflow)::before { content:""; position:absolute; left:0; right:0; bottom:0; height:48%; z-index:0; pointer-events:none; background-image: repeating-linear-gradient(90deg, rgba(202,208,222,0.07) 0 1px, transparent 1px 70px), repeating-linear-gradient(0deg, rgba(202,208,222,0.07) 0 1px, transparent 1px 42px); transform: perspective(440px) rotateX(62deg); transform-origin: bottom; opacity: 0.5; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); } body[data-page="siloforge"] section:has(.cflow)::after { content:""; position:absolute; left:0; right:0; bottom:46%; height:1px; z-index:0; background: linear-gradient(90deg, transparent, var(--accent-soft), transparent); opacity:0.4; } body[data-page="siloforge"] section:has(.cflow) > .wrap { position: relative; z-index: 1; } /* Get started CTA — navy glow, no grid */ body[data-page="siloforge"] .svc2-cta { background: #0B1326; } body[data-page="siloforge"] .svc2-cta.cine-stage::before { display: none; } body[data-page="siloforge"] .svc2-cta.cine-stage::after { background: radial-gradient(520px circle at 50% 42%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), radial-gradient(95% 70% at 50% 120%, rgba(35,53,88,0.3), transparent 60%); } /* program hero — Apple-keynote: centered headstack, demo as the centerpiece below */ body[data-page="siloforge"] .pg-hero { padding-block: clamp(78px,10vh,128px) clamp(56px,7vh,104px); } body[data-page="siloforge"] .pg-hero .svc2-hgrid { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: clamp(40px,5vw,66px); } body[data-page="siloforge"] .pg-hero .svc2-hgrid > .reveal { width: 100%; } body[data-page="siloforge"] .pg-hero .svc2-hgrid > .reveal:first-child { max-width: 760px; margin: 0 auto; } body[data-page="siloforge"] .pg-hero .eyebrow, body[data-page="siloforge"] .pg-hero .btn-row, body[data-page="siloforge"] .pg-hero .svc2-meta { justify-content: center; } body[data-page="siloforge"] .pg-hero h1 { font-size: clamp(3rem,8.5vw,6.2rem) !important; } body[data-page="siloforge"] .pg-hero .lead { margin-left: auto; margin-right: auto; } body[data-page="siloforge"] .pg-hero .pdemo { max-width: 980px; } html[data-motion="on"] body[data-page="siloforge"] .pg-hero .svc2-hgrid > .reveal.reveal-d1 { transform: translateY(46px) scale(0.95); transition: opacity 1s var(--ease) 0.2s, transform 1s var(--ease) 0.2s; } html[data-motion="on"] body[data-page="siloforge"] .pg-hero .svc2-hgrid > .reveal.reveal-d1.in { transform: none; } @media (max-width: 760px) { body[data-page="siloforge"] .pg-hero h1 { font-size: clamp(2.6rem,12vw,3.6rem) !important; } } body[data-page="siloforge"] section + section { border-top: 1px solid rgba(202,208,222,0.06); } /* fixed world layers (injected by site.js) */ .forge-world { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .forge-world .fw-rings { position: absolute; inset: 0; background: repeating-radial-gradient(circle at 84% 13%, transparent 0 46px, rgba(202,208,222,0.05) 46px 47px), repeating-radial-gradient(circle at 84% 13%, transparent 0 184px, rgba(184,84,31,0.085) 184px 186px); -webkit-mask-image: radial-gradient(135% 130% at 84% 13%, #000 16%, transparent 78%); mask-image: radial-gradient(135% 130% at 84% 13%, #000 16%, transparent 78%); } .forge-world .fw-radar { position: absolute; width: 2400px; height: 2400px; left: 84%; top: 13%; margin: -1200px 0 0 -1200px; background: conic-gradient(from 0deg, color-mix(in srgb, var(--accent, #B8541F) 16%, transparent) 0deg, transparent 26deg, transparent 360deg); border-radius: 50%; -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 62%); mask-image: radial-gradient(circle, #000 0%, transparent 62%); transform-origin: 50% 50%; } html[data-motion="on"] .forge-world .fw-radar { animation: fw-sweep 16s linear infinite; } @keyframes fw-sweep { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .forge-world .fw-radar { animation: none; } } .forge-world .fw-core { position: absolute; left: 84%; top: 13%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--accent, #B8541F); box-shadow: 0 0 14px var(--accent, #B8541F); } .forge-world .fw-vig { position: absolute; inset: 0; background: radial-gradient(140% 120% at 46% 44%, transparent 48%, rgba(0,0,0,0.55) 100%); } /* fixed drawing-sheet ruler down the left margin */ .forge-ruler { position: absolute; left: 0; top: 0; bottom: 0; width: 28px; z-index: 1; pointer-events: none; border-right: 1px solid rgba(202,208,222,0.12); background: rgba(255,255,255,0.012); background-image: repeating-linear-gradient(180deg, rgba(202,208,222,0.28) 0 1px, transparent 1px 22px); background-position: 0 0; background-size: 6px 22px; background-repeat: repeat-y; } .forge-ruler::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background-image: repeating-linear-gradient(180deg, var(--accent-soft, #D9844B) 0 1.5px, transparent 1.5px 110px); } @media (max-width: 1120px) { .forge-ruler { display: none; } } /* ============================================================= TOP CHROME — always navy ============================================================= */ .nav { position: sticky; top: 0; z-index: 100; background: rgba(22,35,62,0.72); /* footer navy (#16233E), glass */ -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25); border-bottom: 1px solid var(--chrome-navy-hair); height: var(--nav-h); transition: box-shadow 0.22s var(--ease), background 0.22s var(--ease); } .nav.scrolled { background: rgba(22,35,62,0.92); /* footer navy, more solid on scroll */ box-shadow: 0 1px 0 0 rgba(8,13,23,0.5), 0 10px 26px -14px rgba(8,13,23,0.8); } .nav-logo img { transition: height 0.22s var(--ease); } .nav.scrolled .nav-logo img { height: 21px; } .nav-inner { max-width: 1360px; margin-inline: auto; height: 100%; padding-inline: var(--gutter); display: flex; align-items: center; gap: 32px; } .nav-logo { display: flex; align-items: center; height: 100%; margin-right: auto; flex: 0 0 auto; } .nav-logo img { height: 25px; width: auto; display: block; } .nav-links { display: flex; align-items: center; gap: 4px; height: 100%; } .nav-links a { font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--st-navy-100); padding: 8px 13px; position: relative; transition: color var(--dur, 0.14s) var(--ease); } .nav-links a:hover { color: var(--st-cream); } .nav-links a.active { color: var(--st-cream); } .nav-links a.active::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 0; height: 2px; background: var(--accent); } .nav-cta { font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--st-cream); background: var(--accent); padding: 10px 18px; border-radius: 2px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; will-change: transform; transition: background var(--dur, 0.14s) var(--ease), transform 0.3s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)); } .nav-cta:hover { background: var(--st-orange-500); } html[data-motion="off"] .nav-cta { transform: none !important; } .nav-cta-alt { font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--st-cream); background: transparent; border: 1px solid var(--st-cream); padding: 9px 17px; border-radius: 2px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: background var(--dur, 0.14s) var(--ease), color var(--dur, 0.14s) var(--ease); } .nav-cta-alt:hover { background: var(--st-cream); color: var(--st-navy); } .nav-toggle { display: none; } /* scroll-progress bar — glowing accent line at the very top, fills as you scroll */ .scroll-prog { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--accent); z-index: 300; box-shadow: 0 0 12px rgba(184,84,31,0.55); pointer-events: none; } /* ============================================================= NAV DROPDOWNS — JS-built (.nav-item / .nav-caret button / .nav-menu) ============================================================= */ .nav-item { position: relative; display: flex; align-items: center; height: 100%; } .nav-item.has-menu > a[data-nav] { padding-right: 4px; } .nav-caret { display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; padding: 10px 9px 10px 2px; color: var(--st-navy-200); transition: color 0.14s var(--ease), transform 0.18s var(--ease); } .nav-item:hover > .nav-caret, .nav-item.open > .nav-caret { color: var(--st-cream); } .nav-item.open > .nav-caret { transform: rotate(180deg); } .nav-menu { position: absolute; top: 100%; left: 0; min-width: 234px; background: var(--st-navy-700); border: 1px solid var(--st-navy-600); box-shadow: 0 20px 44px -20px rgba(8,13,23,0.92); padding: 6px; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none; transition: opacity 0.16s var(--ease), transform 0.16s var(--ease), visibility 0.16s var(--ease); z-index: 120; } .nav-item:hover > .nav-menu, .nav-item:focus-within > .nav-menu, .nav-item.open > .nav-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .nav-menu a { font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.035em; text-transform: uppercase; color: var(--st-navy-100); padding: 11px 14px; white-space: nowrap; border-left: 2px solid transparent; transition: color 0.14s var(--ease), background 0.14s var(--ease), border-color 0.14s var(--ease); } .nav-menu a:hover, .nav-menu a.active { color: var(--st-cream); background: var(--st-navy-600); border-left-color: var(--accent); } .nav-menu a::after, .nav-menu a.active::after { display: none; } /* SiloForge mega-menu: two columns to hold all 10 programs + platform links */ .nav-item:has(> a[data-nav="siloforge"]) .nav-menu { min-width: 476px; display: grid; grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(6,auto); grid-auto-flow: column; gap: 2px 28px; padding: 14px 16px; } .nav-item:has(> a[data-nav="siloforge"]) .nav-menu a { padding: 11px 12px; } .nav-item:has(> a[data-nav="siloforge"]) .nav-menu a:first-child { color: var(--accent-soft); border-bottom: 1px solid var(--st-navy-600); margin-bottom: 4px; } /* Services dropdown — same treatment: overview accented + divider, 2 columns filling top-to-bottom */ .nav-item:has(> a[data-nav="services"]) .nav-menu { min-width: 540px; display: grid; grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(4,auto); grid-auto-flow: column; gap: 2px 28px; padding: 14px 16px; } .nav-item:has(> a[data-nav="services"]) .nav-menu a { padding: 11px 12px; } .nav-item:has(> a[data-nav="services"]) .nav-menu a:first-child { color: var(--accent-soft); border-bottom: 1px solid var(--st-navy-600); margin-bottom: 4px; } @media (max-width: 1340px) { /* ---- collapsed bar: logo left, hamburger right ---- */ .nav { height: auto; } .nav-inner { flex-wrap: wrap; column-gap: 24px; row-gap: 0; align-items: center; min-height: var(--nav-h); } .nav-logo { order: 1; margin-right: auto; } .nav-toggle { display: inline-flex; flex-direction: column; gap: 4px; order: 2; margin-left: auto; background: none; border: 0; padding: 10px; cursor: pointer; } .nav-toggle span { width: 22px; height: 2px; background: var(--st-cream); display: block; } .nav-links, .nav .nav-cta, .nav .nav-cta-alt { display: none; } /* ---- expanded drawer (pushes content down, full-width rows) ---- */ .nav.open .nav-inner { padding-bottom: 18px; } .nav.open .nav-links { display: flex; flex-direction: column; align-items: stretch; gap: 0; order: 3; flex-basis: 100%; width: 100%; height: auto; margin-top: 10px; border-top: 1px solid var(--st-navy-600); } /* every top-level row: full width, even divider */ .nav.open .nav-links > a, .nav.open .nav-item { width: 100%; border-bottom: 1px solid var(--st-navy-600); } .nav.open .nav-links > a { display: block; padding: 15px 2px; font-size: 0.85rem; letter-spacing: 0.05em; } .nav.open .nav-links a.active::after { display: none; } /* rows with a dropdown: link + caret share one line, submenu wraps below */ .nav.open .nav-item { display: flex; flex-wrap: wrap; align-items: center; height: auto; position: relative; } .nav.open .nav-item > a[data-nav] { flex: 1 1 auto; display: block; padding: 15px 2px; font-size: 0.85rem; letter-spacing: 0.05em; } .nav.open .nav-caret { flex: 0 0 auto; position: static; transform: none; padding: 12px 4px; margin: 0; color: var(--st-navy-100); } .nav.open .nav-item.open > .nav-caret { transform: rotate(180deg); } .nav-menu { position: static; opacity: 1; visibility: visible; transform: none; pointer-events: auto; border: 0; box-shadow: none; background: transparent; min-width: 0; } .nav.open .nav-item > .nav-menu { flex-basis: 100%; width: 100%; flex-direction: column; padding: 2px 0 8px 16px; display: none; } .nav-item:hover > .nav-menu, .nav-item:focus-within > .nav-menu { display: none; } .nav.open .nav-item.open > .nav-menu { display: flex; } /* ---- CTAs: full-width, stacked, evenly spaced inside the drawer ---- */ .nav.open .nav-cta-alt, .nav.open .nav-cta { display: inline-flex; justify-content: center; width: 100%; flex-basis: 100%; margin: 0; padding: 13px 18px; transform: none; } .nav.open .nav-cta-alt { order: 4; margin-top: 16px; } .nav.open .nav-cta { order: 5; margin-top: 10px; } } /* ============================================================= BUTTONS ============================================================= */ .btn { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-family: var(--font-display); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; border-radius: 2px; padding: 14px 22px; border: 1px solid transparent; transition: all 0.14s var(--ease); } .btn .arr { transition: transform 0.18s var(--ease); } .btn:hover .arr { transform: translateX(3px); } .btn-primary { background: var(--accent); color: var(--st-cream); } .btn-primary:hover { background: var(--st-orange-500); } .btn-ghost { background: transparent; color: var(--st-cream); border-color: var(--st-navy-300); } .btn-ghost:hover { background: var(--st-cream); color: var(--st-navy); border-color: var(--st-cream); } .on-dark .btn-ghost { color: var(--st-cream); border-color: var(--st-navy-300); } .on-dark .btn-ghost:hover { background: var(--st-cream); color: var(--st-navy); border-color: var(--st-cream); } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; } /* ============================================================= CARDS ============================================================= */ .card { background: #181D25; border: 1px solid rgba(199,205,206,0.10); border-radius: 6px; box-shadow: none; color: var(--st-stone-100); padding: 26px; transition: box-shadow 0.18s var(--ease), transform 0.18s var(--ease), border-color 0.18s var(--ease); } .card-hover { position: relative; } .card-hover::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform 0.22s var(--ease); border-radius: 6px 6px 0 0; } .card-hover:hover { box-shadow: 0 16px 38px -16px rgba(0,0,0,0.7); transform: translateY(-3px); border-color: rgba(249,249,242,0.18); } .card-hover:hover::after { transform: scaleX(1); } .on-dark .card-deep.card-hover::after, .card-deep.card-hover::after { border-radius: 6px 6px 0 0; } .card-deep { background: var(--st-charcoal-200); border: 1px solid rgba(199,205,206,0.12); border-radius: 6px; padding: 26px; color: var(--st-stone-100); } /* dimension rule — draws on scroll like a measured dimension */ .dim-rule { display: inline-flex; align-items: center; width: var(--dim-w, 132px); margin-top: 20px; } .dim-rule .t { width: 1px; height: 9px; background: var(--accent); flex: none; } .dim-rule .ln { flex: 1; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform 0.8s var(--ease) 0.1s; } .dim-rule.drawn .ln { transform: scaleX(1); } html[data-motion="off"] .dim-rule .ln { transform: scaleX(1) !important; transition: none; } @media (prefers-reduced-motion: reduce) { .dim-rule .ln { transform: scaleX(1) !important; transition: none; } } /* section heading block */ .sec-head { max-width: 760px; } .sec-head .h1, .sec-head .h2 { margin-top: 18px; } .sec-head .lead { margin-top: 18px; } /* ============================================================= SCROLL REVEAL ============================================================= */ .reveal { opacity: 0; transform: translateY(10px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal-d1 { transition-delay: 0.06s; } .reveal-d2 { transition-delay: 0.12s; } .reveal-d3 { transition-delay: 0.18s; } .reveal-d4 { transition-delay: 0.24s; } html[data-motion="off"] .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* diagram draw-in: accent strokes wipe in once in view */ .diagram .fi-accent { transition: stroke-dashoffset 0.9s var(--ease) 0.25s, opacity 0.4s var(--ease) 0.25s; } html[data-motion="on"] .diagram:not(.drawn) .fi-accent { opacity: 0; } html[data-motion="off"] .diagram .fi-accent { opacity: 1 !important; stroke-dashoffset: 0 !important; } /* ============================================================= SILOFORGE ICON — the orange (accent) elements come alive on hover and on click (.fi-active). Marching CAD dashes + a breathing rust glow on strokes; a pulse on accent nodes. ============================================================= */ .fi-icon { cursor: pointer; } .fi-icon .fi-accent, .fi-icon .fi-accent-fill { transition: filter 0.2s var(--ease); } /* static glow — also the reduced-motion / motion-off fallback */ .fi-icon:hover .fi-accent, .fi-icon.fi-active .fi-accent, .fi-icon:hover .fi-accent-fill, .fi-icon.fi-active .fi-accent-fill { filter: drop-shadow(0 0 3px rgba(184, 84, 31, 0.7)); } @media (prefers-reduced-motion: no-preference) { html[data-motion="on"] .fi-icon:hover path.fi-accent, html[data-motion="on"] .fi-icon.fi-active path.fi-accent { stroke-dasharray: 5 6; animation: fi-march 0.6s linear infinite, fi-glow 1.25s ease-in-out infinite; } html[data-motion="on"] .fi-icon:hover circle.fi-accent, html[data-motion="on"] .fi-icon.fi-active circle.fi-accent, html[data-motion="on"] .fi-icon:hover .fi-accent-fill, html[data-motion="on"] .fi-icon.fi-active .fi-accent-fill { transform-box: fill-box; transform-origin: center; animation: fi-node-pulse 0.9s ease-in-out infinite, fi-glow 1.25s ease-in-out infinite; } } @keyframes fi-march { to { stroke-dashoffset: -11; } } @keyframes fi-glow { 0%, 100% { filter: drop-shadow(0 0 2px rgba(184, 84, 31, 0.55)); } 50% { filter: drop-shadow(0 0 6px rgba(184, 84, 31, 0.95)); } } @keyframes fi-node-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); } } /* ============================================================= FOOTER ============================================================= */ .footer { background: var(--chrome-navy); border-top: 1px solid var(--chrome-navy-hair); color: var(--st-navy-100); padding-block: 48px 32px; } .footer-grid { display: grid; grid-template-columns: minmax(260px,1.35fr) repeat(3,minmax(150px,1fr)); gap: clamp(32px,4vw,48px); padding-bottom: 44px; border-bottom: 1px solid rgba(249,249,242,0.12); } .footer-grid > * { min-width: 0; } .footer h4 { font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--st-navy-200); margin: 0 0 16px; font-weight: 500; } .footer-links { display: flex; flex-direction: column; gap: 10px; } .footer-links a { font-size: 0.9rem; color: var(--st-navy-100); transition: color 0.14s var(--ease); } .footer-links a:hover { color: var(--st-cream); } .footer-brand { display: flex; flex-direction: column; align-items: flex-start; } .footer-brand img { height: 44px; max-width: min(100%, 220px); width: auto; display: block; margin-bottom: 16px; } .footer-brand p { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; line-height: 1.55; color: var(--st-navy-100); max-width: 32ch; margin: 0; text-wrap: balance; } .footer-brand p span { display: block; } .footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding-top: 26px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--st-navy-300); } .foot-legal { display: flex; gap: 18px; flex-wrap: wrap; } .footer-bottom a { color: var(--st-navy-200); transition: color 0.14s var(--ease); } .footer-bottom a:hover { color: var(--st-cream); } @media (max-width: 980px) { .footer-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 760px) { .footer { padding-block: 42px 28px; } .footer-grid { grid-template-columns: 1fr; gap: 28px; padding-bottom: 34px; } .footer-brand { padding-bottom: 4px; } .footer-brand img { height: 38px; margin-bottom: 12px; } .footer-brand p { max-width: 100%; font-size: 0.76rem; line-height: 1.55; } .footer h4 { margin-bottom: 10px; } .footer-links { gap: 8px; } .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 22px; line-height: 1.55; letter-spacing: 0.08em; } .footer-bottom > span { max-width: 100%; } } /* ============================================================= FORMS ============================================================= */ .field { display: flex; flex-direction: column; gap: 8px; } .field label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--st-stone-600); font-weight: 500; } .field input, .field select, .field textarea { font-family: var(--font-body); font-size: 0.95rem; color: var(--st-charcoal); background: #fff; border: 1px solid var(--st-stone-300); border-radius: 2px; padding: 13px 14px; width: 100%; transition: border-color 0.14s var(--ease), box-shadow 0.14s var(--ease); } .field textarea { resize: vertical; min-height: 130px; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(184,84,31,0.18); } /* Mobile: form controls must be >=16px or iOS Safari zooms the viewport on focus. */ @media (max-width: 760px) { input, select, textarea, .field input, .field select, .field textarea, .fn-input { font-size: 16px; } } /* ============================================================= TWEAKS PANEL (solid — brand has no blur/glass) ============================================================= */ .twk { position: fixed; right: 16px; bottom: 16px; z-index: 2147483646; width: 264px; background: #fff; color: var(--st-charcoal); border: 1px solid var(--st-stone-300); border-radius: 6px; box-shadow: 0 12px 28px -8px rgba(20,24,28,0.28); font-family: var(--font-body); font-size: 12px; display: none; overflow: hidden; } .twk.show { display: block; } .twk-hd { display: flex; align-items: center; justify-content: space-between; background: var(--st-navy); color: var(--st-cream); padding: 11px 12px 11px 14px; cursor: move; } .twk-hd b { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; } .twk-x { background: none; border: 0; color: var(--st-navy-100); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 4px; } .twk-x:hover { color: #fff; } .twk-body { padding: 14px; display: flex; flex-direction: column; gap: 16px; max-height: 70vh; overflow-y: auto; } .twk-row { display: flex; flex-direction: column; gap: 7px; } .twk-row > span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--st-stone-600); } .twk-seg { display: flex; border: 1px solid var(--st-stone-300); border-radius: 2px; overflow: hidden; } .twk-seg button { flex: 1; background: #fff; border: 0; border-left: 1px solid var(--st-stone-200); cursor: pointer; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--st-stone-600); padding: 8px 4px; transition: all 0.12s var(--ease); } .twk-seg button:first-child { border-left: 0; } .twk-seg button.on { background: var(--st-navy); color: var(--st-cream); } .twk-seg button:not(.on):hover { background: var(--st-stone-50); color: var(--st-charcoal); } /* utility */ .stack-sm > * + * { margin-top: 10px; } .divider { height: 1px; background: var(--st-stone-200); border: 0; margin: 0; } .on-dark .divider { background: rgba(249,249,242,0.14); } /* ============================================================= FOOTER NEWSLETTER · Split Console (.footer-news) Balanced 50/50 slab + console · ~20% shorter · mobile-safe. Drop-in replacement for the full block (rules + @media + keyframe). ============================================================= */ .footer-news { display: grid; grid-template-columns: 1fr 1fr; /* even, deliberate 50/50 split */ align-items: stretch; margin-bottom: 48px; border: 1px solid var(--chrome-navy-hair); border-radius: 3px; overflow: hidden; } /* ---- ORANGE SLAB (left) — now filled, no dead space ---- */ .footer-news .fn-slab { position: relative; background: var(--accent); color: var(--st-cream); padding: 26px 30px; /* matched to console; was 36/40 */ display: flex; flex-direction: column; justify-content: center; overflow: hidden; } /* subtle engineered diagonal hatch — fills the empty orange area */ .footer-news .fn-slab::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient( -45deg, rgba(249,249,242,0.07) 0, rgba(249,249,242,0.07) 1px, transparent 1px, transparent 9px ); pointer-events: none; } /* mono eyebrow label — markup is frozen, so injected via pseudo-element */ .footer-news .fn-slab::after { content: "DISPATCH / NEWSLETTER"; position: absolute; top: 26px; left: 30px; font-family: var(--font-mono); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--st-cream); opacity: 0.78; } .footer-news .fn-h { position: relative; /* sit above the ::before hatch */ margin: 16px 0 0; /* clears the absolute eyebrow */ font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.012em; line-height: 1.02; font-size: clamp(1.2rem, 1.7vw, 1.5rem); color: var(--st-cream); max-width: 16ch; } /* ---- NAVY CONSOLE (right) ---- */ .footer-news .fn-console { background: var(--chrome-navy); padding: 26px 30px; /* matches slab exactly (was 34/40) */ display: flex; flex-direction: column; justify-content: center; } .footer-news .fn-stat { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; } .footer-news .fn-led { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(184,84,31,0.22); } html[data-motion="on"] .footer-news .fn-led { animation: fn-pulse 2.4s ease-in-out infinite; } @keyframes fn-pulse { 50% { opacity: 0.5; } } .footer-news .fn-stat span { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--st-navy-200); } /* ---- FORM ---- */ .footer-news .fn-form { position: relative; display: flex; align-items: stretch; border: 1px solid var(--chrome-navy-hair); background: rgba(255,255,255,0.04); transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease); } .footer-news .fn-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(184,84,31,0.28); } .footer-news .fn-input { flex: 1 1 auto; min-width: 0; /* lets input shrink, never overflows */ box-sizing: border-box; /* padding folds into width */ height: 46px; /* >= 44px tap target */ padding: 0 14px; border: 0; background: transparent; color: var(--st-cream); font-family: var(--font-mono); font-size: 0.88rem; letter-spacing: 0.02em; outline: none; } .footer-news .fn-input::placeholder { color: var(--st-navy-300); } .footer-news .fn-input[readonly] { opacity: 0.7; } .footer-news .fn-btn { flex: none; box-sizing: border-box; /* padding folds into width */ height: 46px; /* >= 44px tap target */ padding: 0 20px; border: 0; border-radius: 0; background: var(--accent); color: var(--st-cream); font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.16s var(--ease); } .footer-news .fn-btn span { transition: transform 0.16s var(--ease); } .footer-news .fn-btn:hover { background: var(--st-orange-500); } .footer-news .fn-btn:hover span { transform: translateX(3px); } .footer-news .fn-btn:disabled { cursor: default; background: var(--st-navy-600); color: var(--st-navy-100); } .footer-news .fn-note { margin: 12px 0 0; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.08em; color: var(--st-navy-300); } .footer-news .fn-msg { margin: 8px 0 0; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em; color: var(--accent-soft); } .footer-news .fn-msg:empty { display: none; } .footer-news .fn-msg.err { color: #E8A87C; } /* ============================================================= MOBILE — single column, short slab, stacked full-width form. Form goes vertical so the Subscribe button is its own full-width row and can NEVER be clipped (global *{box-sizing:border-box} means full-width children fit their parent at any viewport). ============================================================= */ @media (max-width: 760px) { .footer-news { grid-template-columns: 1fr; } /* short slab: eyebrow drops into normal flow so the block is compact */ .footer-news .fn-slab { padding: 22px 24px; } .footer-news .fn-slab::after { position: static; display: block; margin-bottom: 8px; } .footer-news .fn-h { margin: 0; max-width: none; } .footer-news .fn-console { padding: 22px 24px; } /* stack the form: input on top, button full-width directly below */ .footer-news .fn-form { flex-direction: column; align-items: stretch; } .footer-news .fn-input { width: 100%; height: 48px; } .footer-news .fn-btn { width: 100%; height: 48px; padding: 0 16px; border-top: 1px solid var(--chrome-navy-hair); } }