/* Wolf Eclipse — Midnight Argent, on the web. The palette, the type pairing and the gold discipline are the app's own: one gold accent per surface, silver for everything structural, eclipse red reserved for the one mechanic it belongs to. */ :root { --void: #04060D; --ink950: #070B14; --ink900: #0C1220; --ink850: #121A2C; --ink800: #18223A; --ink750: #1F2C48; --ink700: #2A3958; --silver50: #F2F5FA; --silver200: #C7D0E0; --silver400: #8E9BB4; --silver600: #5C6981; --gold300: #F3D07A; --gold500: #E5B54D; --gold600: #B98A2E; --corona: #EA6D5B; --core: #C1394A; --copper: #D97B45; --epic: #A970E8; --legendary: #FFA83D; --rare: #4FA8E0; --success: #3FBF87; --shell: 1200px; --gut: clamp(14px, 4vw, 40px); --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --hairline: 1px solid rgba(199, 208, 224, 0.12); --hairline-gold: 1px solid rgba(229, 181, 77, 0.34); } * { box-sizing: border-box; } /* Grid and flex children default to min-width:auto, which means they REFUSE to shrink below their content. One long word in a table cell then widens the whole column, the column widens the page, and the page overflows sideways on a narrow phone. This is the single most common cause of that. */ .grid > *, .split > *, .stats > *, .footer-grid > *, .legal-layout > *, .hero-inner > *, .cookie-row > * { min-width: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* CLIP, not hidden. AOS parks a `fade-left` element 100px to the right until it scrolls into view, and the hero art is scaled past its box — both widen the document and give a phone a sideways scroll on landing. `clip` removes that without making a scroll container, which `hidden` would, and which breaks the sticky header. */ overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } body { margin: 0; background: var(--ink950); color: var(--silver200); font-family: 'Manrope', system-ui, -apple-system, sans-serif; font-size: clamp(15px, 0.4vw + 14px, 17px); line-height: 1.65; overflow-x: clip; -webkit-font-smoothing: antialiased; } /* The grain and the vignette the app paints under every screen. */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(120% 80% at 50% 0%, rgba(43, 58, 94, 0.34), transparent 62%), radial-gradient(90% 60% at 50% 100%, rgba(4, 6, 13, 0.9), transparent 70%); } img { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4 { font-family: 'Cinzel', Georgia, serif; color: var(--silver50); line-height: 1.12; text-wrap: balance; margin: 0; letter-spacing: 0.01em; } a { color: var(--gold300); text-decoration: none; } a:hover { color: var(--gold500); } :focus-visible { outline: 2px solid var(--gold500); outline-offset: 3px; border-radius: 4px; } .skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--gold500); color: var(--ink950); padding: 12px 18px; font-weight: 700; border-radius: 0 0 var(--r-sm) 0; } .skip:focus { left: 0; } .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); position: relative; z-index: 1; } /* ---------- Eyebrow / section heads ---------- */ .eyebrow { font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold500); display: flex; align-items: center; gap: 10px; margin: 0 0 14px; } .eyebrow::after { content: ''; height: 1px; flex: 1; max-width: 90px; background: linear-gradient(90deg, var(--gold600), transparent); } .eyebrow.is-centered { justify-content: center; } .eyebrow.is-centered::before { content: ''; height: 1px; flex: 1; max-width: 90px; background: linear-gradient(270deg, var(--gold600), transparent); } .section { padding-block: clamp(56px, 9vw, 118px); position: relative; } .section-head { max-width: 62ch; margin-bottom: clamp(28px, 4vw, 52px); } .section-head.is-centered { margin-inline: auto; text-align: center; } .section-head h2 { font-size: clamp(27px, 4.4vw, 46px); } .section-head p { margin: 16px 0 0; color: var(--silver400); font-size: clamp(15px, 0.5vw + 14px, 18px); } .rule { height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, rgba(199, 208, 224, 0.16), transparent); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; border-radius: var(--r-pill); font-weight: 800; font-size: 15px; letter-spacing: 0.01em; border: 1px solid transparent; cursor: pointer; text-align: center; /* Never wider than what holds it. A long label on a small button kept its natural width and pushed the page sideways at 250px. */ max-width: 100%; transition: transform 0.32s var(--ease), box-shadow 0.32s var(--ease), background 0.32s var(--ease), border-color 0.32s var(--ease); will-change: transform; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-sm { padding: 10px 18px; font-size: 13.5px; } /* The app's primary: a gold slab with ink text, never gold-on-dark type. */ .btn-gold { background: linear-gradient(180deg, var(--gold300), var(--gold500) 58%, var(--gold600)); color: #17130A; box-shadow: 0 10px 30px -12px rgba(229, 181, 77, 0.66), inset 0 1px 0 rgba(255, 255, 255, 0.42); } .btn-gold:hover { color: #17130A; box-shadow: 0 18px 40px -14px rgba(229, 181, 77, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.5); } .btn-ghost { background: rgba(24, 34, 58, 0.7); border-color: rgba(199, 208, 224, 0.2); color: var(--silver50); } .btn-ghost:hover { border-color: rgba(229, 181, 77, 0.5); color: var(--silver50); } .btn-quiet { background: transparent; color: var(--silver400); } .btn-quiet:hover { color: var(--silver50); } .btn[disabled], .btn.is-busy { opacity: 0.62; pointer-events: none; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 90; background: rgba(7, 11, 20, 0.72); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: var(--hairline); transition: background 0.4s var(--ease), border-color 0.4s var(--ease); } .site-header.is-scrolled { background: rgba(7, 11, 20, 0.94); } .header-row { display: flex; align-items: center; gap: 16px; min-height: 68px; } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--silver50); } .brand-mark { width: 34px; height: 34px; flex: none; } .brand-word { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: clamp(15px, 2.4vw, 19px); letter-spacing: 0.06em; white-space: nowrap; } .nav-desk { display: none; margin-left: auto; gap: 4px; } .nav-link { color: var(--silver400); font-size: 14px; font-weight: 600; padding: 9px 13px; border-radius: var(--r-pill); position: relative; white-space: nowrap; transition: color 0.3s var(--ease), background 0.3s var(--ease); } .nav-link:hover { color: var(--silver50); background: rgba(31, 44, 72, 0.6); } .nav-link.is-active { color: var(--gold300); } .nav-link.is-active::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--gold500); } .header-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; } .nav-desk + .header-cta { margin-left: 0; } .burger { width: 42px; height: 42px; border-radius: 12px; background: rgba(31, 44, 72, 0.7); border: var(--hairline); display: grid; place-content: center; gap: 5px; cursor: pointer; flex: none; } .burger span { display: block; width: 17px; height: 2px; border-radius: 2px; background: var(--silver200); transition: transform 0.3s var(--ease), opacity 0.2s var(--ease); } .burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; } .burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-mobile { display: grid; gap: 2px; padding: 8px var(--gut) 18px; border-top: var(--hairline); background: rgba(7, 11, 20, 0.97); } .m-link { color: var(--silver200); font-weight: 600; padding: 13px 14px; border-radius: var(--r-sm); font-size: 15px; } .m-link:hover, .m-link.is-active { background: rgba(31, 44, 72, 0.7); color: var(--gold300); } .m-cta { color: var(--gold300); border: var(--hairline-gold); margin-top: 8px; text-align: center; } @media (min-width: 1000px) { .nav-desk { display: flex; } .burger { display: none; } .nav-mobile { display: none !important; } } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; isolation: isolate; } .hero-art { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center 32%; transform: scale(1.06); } .hero-veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 11, 20, 0.62) 0%, rgba(7, 11, 20, 0.42) 42%, var(--ink950) 96%), radial-gradient(70% 50% at 50% 8%, rgba(229, 181, 77, 0.12), transparent 70%); } .hero-inner { display: grid; gap: clamp(34px, 5vw, 60px); padding-block: clamp(60px, 10vw, 132px) clamp(48px, 8vw, 108px); align-items: center; } .hero h1 { font-size: clamp(33px, 8vw, 78px); letter-spacing: 0.005em; } .hero h1 .lift { display: block; background: linear-gradient(100deg, var(--gold300), var(--copper) 52%, var(--corona)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-lede { margin: 20px 0 0; font-size: clamp(16px, 0.6vw + 15px, 20px); color: var(--silver200); max-width: 52ch; } .hero-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .hero-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 26px 0 0; padding: 0; list-style: none; color: var(--silver400); font-size: 13.5px; font-weight: 600; } .hero-meta li { display: inline-flex; align-items: center; gap: 8px; } .hero-meta i { color: var(--gold500); } @media (min-width: 940px) { .hero-inner { grid-template-columns: 1.05fr 0.95fr; } } /* ---------- Phone frame ---------- */ .phone { position: relative; width: min(300px, 74vw); margin-inline: auto; border-radius: 44px; padding: 9px; background: linear-gradient(160deg, #2A3958, #0C1220 42%, #1F2C48); box-shadow: 0 44px 90px -34px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(199, 208, 224, 0.13), inset 0 1px 0 rgba(242, 245, 250, 0.14); } .phone::after { content: ''; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 84px; height: 22px; border-radius: var(--r-pill); background: #04060D; z-index: 2; } .phone img { border-radius: 36px; width: 100%; } .phone-stack { position: relative; display: grid; place-items: center; } .phone-stack .phone { z-index: 2; } .phone-glow { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(229, 181, 77, 0.3), transparent 66%); filter: blur(46px); z-index: 0; } /* ---------- Cards ---------- */ .card { background: linear-gradient(168deg, rgba(24, 34, 58, 0.9), rgba(12, 18, 32, 0.94)); border: var(--hairline); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 30px); position: relative; overflow: hidden; transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease); } .card:hover { transform: translateY(-5px); border-color: rgba(229, 181, 77, 0.34); box-shadow: 0 26px 54px -30px rgba(0, 0, 0, 0.94); } .card h3 { font-size: clamp(18px, 1vw + 16px, 22px); margin-bottom: 10px; } .card p { margin: 0; color: var(--silver400); font-size: 15px; } .card-mark { width: 46px; height: 46px; border-radius: 14px; display: grid; place-content: center; margin-bottom: 18px; background: rgba(43, 58, 94, 0.72); border: var(--hairline); font-size: 19px; color: var(--gold500); } /* The app's struck marks ship as grey glyphs that the app tints at draw time. The website bakes the same tints in at build time (see _build/build assets), because masking a bitmap in CSS is not reliable across engines — and when it fails the element renders as a solid coloured block, not as the glyph. */ .card-mark .ico { width: 24px; height: 24px; } .grid { display: grid; gap: clamp(14px, 2vw, 22px); } .grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } @media (min-width: 640px) { .grid-2, .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } } /* ---------- Feature split ---------- */ .split { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; } @media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split.is-flipped .split-art { order: -1; } } .split h2 { font-size: clamp(25px, 3.6vw, 40px); } .split p { color: var(--silver400); } .tick { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; } .tick li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; } .tick i { color: var(--gold500); margin-top: 5px; flex: none; font-size: 13px; } /* The Eclipse meter, as the app draws it. */ .meter { margin-top: 28px; height: 8px; border-radius: var(--r-pill); background: var(--ink700); overflow: hidden; position: relative; } .meter span { display: block; height: 100%; width: 0; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--gold600), var(--gold500) 62%, var(--gold300)); box-shadow: 0 0 16px rgba(229, 181, 77, 0.6); transition: width 2.4s var(--ease); } .meter.is-full span { width: 100%; } .meter-label { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--silver600); } .meter-label b { color: var(--gold500); font-weight: 800; } /* ---------- Gallery ---------- */ .rail { display: flex; gap: clamp(14px, 2vw, 24px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 0 26px; scrollbar-width: thin; scrollbar-color: var(--ink700) transparent; } .rail::-webkit-scrollbar { height: 8px; } .rail::-webkit-scrollbar-thumb { background: var(--ink700); border-radius: var(--r-pill); } .shot { flex: 0 0 auto; width: min(232px, 62vw); scroll-snap-align: center; } .shot img { border-radius: 22px; border: var(--hairline); box-shadow: 0 26px 50px -28px rgba(0, 0, 0, 0.94); transition: transform 0.5s var(--ease), border-color 0.5s var(--ease); } .shot:hover img { transform: translateY(-6px); border-color: rgba(229, 181, 77, 0.38); } .shot figcaption { margin-top: 14px; font-size: 13.5px; color: var(--silver400); } .rail-nav { display: flex; gap: 10px; justify-content: flex-end; margin-bottom: 16px; } .rail-btn { width: 42px; height: 42px; border-radius: 50%; border: var(--hairline); background: rgba(31, 44, 72, 0.7); color: var(--silver200); cursor: pointer; transition: border-color 0.3s var(--ease), color 0.3s var(--ease); } .rail-btn:hover { border-color: var(--gold500); color: var(--gold300); } /* ---------- Moon strip ---------- */ .moons { display: flex; gap: clamp(10px, 2.6vw, 30px); justify-content: center; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; } .moons li { text-align: center; width: 74px; } .moons .ico { width: 44px; height: 44px; margin-inline: auto; opacity: 0.62; transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), color 0.4s var(--ease); } .moons li:hover .ico { opacity: 1; transform: scale(1.1); } .moons span { display: block; margin-top: 9px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--silver600); } .moons li.is-eclipse span { color: var(--corona); } .moons li.is-eclipse .ico { opacity: 1; } /* ---------- Stats ---------- */ .stats { display: grid; gap: 1px; background: rgba(199, 208, 224, 0.12); border: var(--hairline); border-radius: var(--r-lg); overflow: hidden; grid-template-columns: repeat(2, 1fr); } @media (min-width: 780px) { .stats { grid-template-columns: repeat(4, 1fr); } } .stat { background: var(--ink900); padding: clamp(20px, 3vw, 30px); text-align: center; } .stat b { display: block; font-family: 'Cinzel', Georgia, serif; font-size: clamp(26px, 3.4vw, 38px); color: var(--gold300); line-height: 1; } .stat span { display: block; margin-top: 9px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--silver600); } /* ---------- CTA band ---------- */ .cta-band { position: relative; overflow: hidden; border-radius: clamp(20px, 3vw, 32px); border: var(--hairline-gold); padding: clamp(34px, 6vw, 74px) clamp(20px, 4vw, 60px); text-align: center; background: linear-gradient(160deg, rgba(43, 58, 94, 0.8), rgba(7, 11, 20, 0.94)); } .cta-band::before { content: ''; position: absolute; inset: -40% 20% auto; height: 260px; background: radial-gradient(circle, rgba(234, 109, 91, 0.24), transparent 66%); filter: blur(40px); } .cta-band h2 { font-size: clamp(26px, 4.4vw, 46px); position: relative; } .cta-band p { color: var(--silver400); max-width: 54ch; margin: 16px auto 0; position: relative; } .cta-band .hero-acts { justify-content: center; position: relative; } /* ---------- Accordion (FAQ) ---------- */ .acc { border: var(--hairline); border-radius: var(--r-md); background: rgba(12, 18, 32, 0.7); overflow: hidden; } .acc + .acc { margin-top: 12px; } .acc summary { cursor: pointer; list-style: none; padding: 20px clamp(16px, 3vw, 26px); display: flex; gap: 16px; align-items: center; font-family: 'Cinzel', Georgia, serif; font-size: clamp(15px, 0.6vw + 14px, 18px); color: var(--silver50); font-weight: 600; } .acc summary::-webkit-details-marker { display: none; } .acc summary::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-left: auto; font-size: 12px; color: var(--gold500); transition: transform 0.35s var(--ease); flex: none; } .acc[open] summary::after { transform: rotate(180deg); } .acc summary:hover { background: rgba(31, 44, 72, 0.5); } .acc-body { padding: 0 clamp(16px, 3vw, 26px) 22px; color: var(--silver400); } .acc-body > :first-child { margin-top: 0; } .acc-body p { margin: 0 0 12px; } .acc-body p:last-child { margin-bottom: 0; } /* ---------- Forms ---------- */ .field { display: grid; gap: 8px; margin-bottom: 18px; } .field label { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--silver400); } .field input, .field textarea, .field select { width: 100%; background: rgba(7, 11, 20, 0.72); border: var(--hairline); border-radius: var(--r-sm); padding: 14px 16px; color: var(--silver50); font: inherit; font-size: 15px; transition: border-color 0.3s var(--ease), background 0.3s var(--ease); } .field textarea { min-height: 152px; resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: var(--silver600); } .field input:focus, .field textarea:focus, .field select:focus { border-color: rgba(229, 181, 77, 0.55); background: rgba(12, 18, 32, 0.9); outline: none; } .field .err { font-size: 13px; color: var(--corona); font-weight: 600; letter-spacing: 0; text-transform: none; min-height: 0; } .field.is-bad input, .field.is-bad textarea { border-color: var(--corona); } .form-note { font-size: 13px; color: var(--silver600); margin-top: 14px; } .form-status { margin-top: 18px; padding: 16px 18px; border-radius: var(--r-md); border: var(--hairline); background: rgba(12, 18, 32, 0.8); display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; } .form-status.is-ok { border-color: rgba(63, 191, 135, 0.5); color: var(--silver200); } .form-status.is-ok i { color: var(--success); } .form-status i { margin-top: 3px; } /* ---------- Legal pages ---------- */ .legal-head { padding-block: clamp(46px, 7vw, 92px) clamp(20px, 3vw, 34px); } .legal-head h1 { font-size: clamp(30px, 5.4vw, 56px); } .legal-head .stamp { margin-top: 16px; color: var(--silver600); font-size: 13.5px; font-weight: 600; } .legal-layout { display: grid; gap: clamp(26px, 4vw, 54px); align-items: start; padding-bottom: clamp(56px, 9vw, 110px); } @media (min-width: 1040px) { .legal-layout { grid-template-columns: 250px 1fr; } } .toc { position: sticky; top: 88px; border: var(--hairline); border-radius: var(--r-md); background: rgba(12, 18, 32, 0.72); padding: 18px; max-height: calc(100vh - 120px); overflow-y: auto; display: none; } @media (min-width: 1040px) { .toc { display: block; } } .toc h2 { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold500); font-family: 'Manrope', sans-serif; margin-bottom: 12px; } .toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: toc; } .toc a { display: block; color: var(--silver400); font-size: 13px; padding: 6px 9px; border-radius: 7px; line-height: 1.4; } .toc a:hover { background: rgba(31, 44, 72, 0.66); color: var(--silver50); } .prose { max-width: 78ch; } .prose h2 { font-size: clamp(19px, 1.5vw + 15px, 26px); margin: clamp(38px, 5vw, 58px) 0 16px; padding-top: 22px; border-top: var(--hairline); scroll-margin-top: 92px; } .prose h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; } .prose h2 .num, .prose h3 .num { color: var(--gold500); font-variant-numeric: tabular-nums; } .prose h3 { font-size: clamp(16px, 0.8vw + 14px, 19px); margin: 30px 0 12px; color: var(--silver50); } .prose p { margin: 0 0 14px; color: var(--silver200); } .prose ul { margin: 0 0 18px; padding-left: 0; list-style: none; display: grid; gap: 9px; } .prose ul li { position: relative; padding-left: 22px; color: var(--silver400); } .prose ul li::before { content: ''; position: absolute; left: 4px; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold600); } .table-wrap { overflow-x: auto; margin: 0 0 22px; border: var(--hairline); border-radius: var(--r-md); } .prose table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; } .prose th, .prose td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: var(--hairline); } .prose th { background: rgba(31, 44, 72, 0.6); color: var(--silver50); font-weight: 700; font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; } .prose td { color: var(--silver400); } .prose tr:last-child td { border-bottom: 0; } /* ---------- Footer ---------- */ .site-footer { border-top: var(--hairline); background: linear-gradient(180deg, transparent, rgba(4, 6, 13, 0.75)); padding-top: clamp(44px, 6vw, 76px); position: relative; z-index: 1; } .footer-grid { display: grid; gap: clamp(28px, 4vw, 44px); padding-bottom: clamp(34px, 5vw, 56px); } @media (min-width: 720px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } } .footer-brand .brand { margin-bottom: 16px; } .footer-blurb { color: var(--silver400); font-size: 14.5px; margin: 0 0 22px; max-width: 42ch; } .foot-h { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold500); font-family: 'Manrope', sans-serif; margin-bottom: 16px; } .foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .foot-list a { color: var(--silver400); font-size: 14.5px; } .foot-list a:hover { color: var(--gold300); } .foot-contact li { display: flex; gap: 11px; color: var(--silver400); font-size: 14.5px; line-height: 1.55; } .foot-contact i { color: var(--gold600); margin-top: 5px; flex: none; width: 15px; } .foot-cookie { margin-top: 18px; background: none; border: 0; padding: 0; color: var(--silver400); font: inherit; font-size: 14.5px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; } .foot-cookie:hover { color: var(--gold300); } .footer-base { border-top: var(--hairline); padding-block: 22px; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; color: var(--silver600); font-size: 13px; } .footer-base p { margin: 0; } .footer-note { max-width: 60ch; } /* ---------- Cookie bar ---------- */ .cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; background: rgba(7, 11, 20, 0.97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: var(--hairline-gold); padding-block: 18px; padding-bottom: max(18px, env(safe-area-inset-bottom)); transform: translateY(110%); transition: transform 0.5s var(--ease); } .cookie-bar.is-up { transform: translateY(0); } .cookie-row { display: grid; gap: 16px; align-items: center; } @media (min-width: 940px) { .cookie-row { grid-template-columns: 1fr auto; } } .cookie-copy h2 { font-size: 16px; margin-bottom: 6px; } .cookie-copy p { margin: 0; font-size: 13.5px; color: var(--silver400); } .cookie-acts { display: flex; flex-wrap: wrap; gap: 9px; } /* ---------- AOS, softened ---------- */ [data-aos] { pointer-events: none; } [data-aos].aos-animate { pointer-events: auto; } /* ---------- 250px floor ---------- */ @media (max-width: 380px) { .btn { padding: 12px 16px; font-size: 13.5px; width: 100%; } /* .btn-sm stays auto-width so the header and cookie-bar controls sit in a row, but an action stack still gets full-width buttons. */ .btn-sm { width: auto; } .hero-acts .btn-sm { width: 100%; } .hero-acts .btn { width: 100%; } .header-cta .btn span { display: none; } .header-cta .btn { padding: 10px 13px; } .stats { grid-template-columns: 1fr; } .cookie-acts .btn { width: 100%; } } @media (max-width: 300px) { :root { --gut: 10px; } .brand-word { font-size: 13px; } .brand-mark { width: 26px; height: 26px; } .phone { width: 100%; border-radius: 26px; padding: 6px; } .phone img { border-radius: 21px; } .phone::after { width: 54px; height: 15px; top: 13px; } .shot { width: 84vw; } .moons li { width: 56px; } .moons .ico { width: 34px; height: 34px; } .card { padding: 15px; border-radius: var(--r-md); } .prose table { min-width: 420px; } }