@font-face { font-family: 'PixeloidSans'; src: url('PixeloidSans-Bold.ttf') format('truetype'); font-weight: 700; } :root { --accent: #9869FF; --teal: #66F5FF; --card: #15181d; --muted: #c1cace; /* Shared hue for the dates separator + LIVE pill border (softened teal). Tweak this one value to recolour both together. */ --live-line: rgba(102, 245, 255, .5); --border: rgba(235, 235, 235, .18); --grad: linear-gradient(90deg, #844CFF 0%, #66F5FF 47.4%, #844CFF 94.8%); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* No overflow-x here — any overflow value on breaks the sticky navbar in mobile Safari. Horizontal scroll is handled by clipping the actual overflowing elements + body overflow-x:hidden. */ overscroll-behavior-x: none; } body { margin: 0; background: #000; color: #fff; font-family: 'fractul-variable', sans-serif; overflow-x: hidden; overscroll-behavior-x: none; position: relative; width: 100%; max-width: 100%; } /* Clips the few-pixel horizontal overflow that causes the tiny left-swipe scroll on mobile. Applied to a wrapper (NOT html/body) so the sticky navbar — which lives outside this wrapper as a direct child of body — keeps working. The register modal is position:fixed, so this clip does not affect it. */ .page-clip { overflow-x: hidden; } /* ── Helpers ─────────────────── */ .gradient-text { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .v-line { position: relative; width: 1px; background: var(--muted); flex-shrink: 0; } .h-line { border-color: var(--border) !important; } /* ── Navbar ─────────────────── */ .grid-nav { background: #000; height: 55px; position: sticky; top: 0; z-index: 1000; } .grid-nav .container { position: relative; } .grid-nav .navbar-brand img { height: 30px; } .grid-nav .nav-link { font-size: 1rem; font-weight: 600; color: #fff !important; transition: color .2s; } .grid-nav .nav-link:hover { color: var(--teal) !important; } .grid-nav .navbar-toggler { border: none; filter: invert(1); } /* ── CTA Button (SVG already contains the "REGISTER NOW" label) ── */ .btn-register { display: inline-block; width: 224px; max-width: 80vw; transition: transform .2s ease, filter .2s ease; } .btn-register img { width: 100%; display: block; } .btn-register:hover { transform: translateY(-3px); filter: drop-shadow(0 8px 22px rgba(152, 105, 255, 0.55)); } /* ── Hero ────────────────────── */ /* The wave lives on this wrapper (which spans the hero AND the about section) so it can bleed across the boundary instead of being clipped where the hero ends and the next section begins. */ .hero-bleed { position: relative; background-color: #000; } /* The wave lives on this pseudo-element (not the wrapper's own background) so it can be floated with transform — GPU-composited and independent of the tuned background-position below. The overscan inset (-14px) gives the float room so no edge gap shows as it drifts. */ .hero-bleed::before { content: ''; position: absolute; inset: -14px 0; background-image: url('../images/Grid8/Banner/grid-background.webp'); background-repeat: no-repeat; /* Full-width wave; height follows the image's aspect ratio */ background-size: 100% auto; /* The number below = distance from the top of the wrapper (= top of the hero) to the top of the image. Higher number pushes the wave DOWN, lower lifts it UP. Tuned so the middle of the wave sits ~60px below the Register button. */ background-position: center 400px; z-index: 0; pointer-events: none; /* Subtle, slow vertical float */ animation: wave-float 11s ease-in-out infinite; } /* Keep the hero/about content above the floating wave */ .hero-bleed>section { position: relative; z-index: 1; } @keyframes wave-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } } @media (prefers-reduced-motion: reduce) { .hero-bleed::before { animation: none; } } #hero { background: transparent; /* 780px was tuned for the old layout that had a Register Now button below the dates. With the button removed, the leftover space shows up as a gap between the dates and the About section. This value trims that gap while leaving the wave (.hero-bleed::before, positioned independently) in place. Tune up/down to taste. */ min-height: 640px; display: flex; flex-direction: column; align-items: center; } .hero-logo { width: 350px; max-width: 90vw; display: block; /* Pop in on page load: fade + scale up with a slight overshoot */ animation: logo-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes logo-pop { 0% { opacity: 0; transform: scale(0.6); } 100% { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .hero-logo { animation: none; } } .hero-subtitle { font-weight: 400; font-size: 1.5625rem; color: #fff; text-align: center; } .hero-heading { font-family: 'PixeloidSans', monospace; font-size: 3.3rem; line-height: 1.15; text-align: center; } .hero-dates { display: flex; align-items: center; gap: 44px; } .hero-dates .date-grp { text-align: center; } .hero-dates .date-lbl { display: block; font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; } .hero-dates .date-val { font-weight: 600; font-size: 0.9375rem; color: #fff; } .hero-dates .v-line { height: 36px; } .hero-stat-lbl { font-size: 0.875rem; color: var(--muted); } .hero-stat-val { font-size: 0.9375rem; font-weight: 700; color: #fff; } /* ── Registration-live pill (original: inline, under the stats row) ───── */ .reg-live-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.85rem; border-radius: 999px; border: 1px solid var(--teal); background: rgba(102, 245, 255, 0.08); color: var(--teal); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1; } .reg-live-beacon { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); flex: 0 0 auto; } /* Pulsing ring around the dot */ .reg-live-beacon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--teal); animation: reg-live-pulse 1.8s ease-out infinite; } @keyframes reg-live-pulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(3.2); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .reg-live-beacon::after { animation: none; } } /* ── About ───────────────────── */ #about { /* transparent so the wave from .hero-bleed shows through and blends */ background: transparent; } /* Section eyebrow tag — teal pixel label above headings (used across sections) */ .section-headline { font-family: 'PixeloidSans', monospace; font-size: 1.25rem; color: var(--teal); text-transform: uppercase; letter-spacing: 1.4px; text-align: center; display: block; } @media (max-width: 767.98px) { .section-headline { font-size: 1.1875rem; } } /* Loading-style ellipsis — the three dots blink on in sequence, then reset */ .loading-dots span { opacity: 0; animation: loading-dots 1.4s steps(1, end) infinite; } .loading-dots span:nth-child(2) { animation-delay: 0.35s; } .loading-dots span:nth-child(3) { animation-delay: 0.7s; } @keyframes loading-dots { /* dot is lit for the middle of the cycle, off as the loop resets */ 0% { opacity: 0; } 25%, 75% { opacity: 1; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .loading-dots span { animation: none; opacity: 1; } } /* White bolded sub-text (used across sections) */ .lead-text { font-weight: 700; font-size: 1.125rem; color: #fff; text-align: center; line-height: 20px; } .about-body { font-size: 1rem; color: var(--muted); line-height: 28px; max-width: 980px; text-align: center; } .about-cta { font-weight: 700; font-size: 1.25rem; color: #fff; text-align: center; line-height: 28px; } /* ── Democratize ─────────────── */ /* Shared section sub-headline (big statement heading, used across sections). Centered by default; add .text-lg-start where a left-aligned variant is needed. */ .section-subhead { font-size: 3rem; line-height: 50px; color: #fff; text-align: center; } .section-subhead .lw { font-weight: 300; } .section-subhead .bw { font-weight: 700; } .democratize-sub { font-size: 1.25rem; color: var(--muted); max-width: 860px; line-height: 30px; } /* ── Rewards ─────────────────── */ #rewards { background: #000; } .reward-card { background: var(--card); border-radius: 2rem; height: 100%; } .reward-card ul { list-style: none; } .reward-card li { font-size: 0.9375rem; color: var(--muted); line-height: 26px; position: relative; } .reward-card li::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); position: absolute; left: 0; top: 9px; } .prize-center-card { background: var(--card); border-radius: 2rem; height: 100%; overflow: hidden; } /* ── Eligibility ─────────────── */ #eligibility { background: #000; } .elig-head { font-weight: 700; font-size: 1.5rem; color: #fff; text-align: center; } /* ── Testimonials ────────────── */ .testi-sub { font-size: 1.125rem; color: var(--muted); text-align: center; } .testi-card { background: #15181D; border-radius: 2rem; overflow: hidden; height: 100%; border-bottom: solid 3px var(--accent); transition: transform .25s ease, box-shadow .25s ease; } .testi-card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(152, 105, 255, 0.35); } .testi-photo { width: 100%; height: 190px; object-fit: cover; display: block; } .testi-name { font-weight: 700; font-size: 1rem; color: #fff; text-transform: uppercase; letter-spacing: .36px; } .testi-role { font-size: 0.845rem; font-weight: 700; color: var(--accent); } .testi-quote { font-size: 0.875rem; color: #fff; line-height: 22px; } .read-more { font-weight: 700; font-size: 0.875rem; color: #fff; text-decoration: underline; cursor: pointer; background: none; border: none; padding: 0; } /* ── Testimonials carousel ── */ .testi-carousel-outer { position: relative; overflow: hidden; } .testi-carousel-track { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 0.25rem; } .testi-carousel-track::-webkit-scrollbar { display: none; } .testi-card-item { flex: 0 0 calc(33.333% - 1rem); scroll-snap-align: start; height: 480px; } /* Card becomes a column so the Read More CTA pins to the bottom and every card stays the exact same height regardless of text length. */ .testi-card { display: flex; flex-direction: column; } .testi-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .testi-quote { flex: 1 1 auto; } /* Carousel arrows — same shape as "Moments of Maximization", accent colour */ .testi-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 44px; height: 44px; border-radius: 50%; background: #9869FF; border: none; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0.9; padding: 0; line-height: 1; transition: opacity 0.2s ease; } .testi-arrow:hover { opacity: 1; } /* Thicken the chevron icon on hover */ .testi-arrow svg path { transition: stroke-width 0.2s ease; stroke: currentColor; stroke-width: 0; } .testi-arrow:hover svg path { stroke-width: 1.25; } .testi-arrow-prev { left: 0.75rem; } .testi-arrow-next { right: 0.75rem; } .testi-arrow--hidden { opacity: 0; pointer-events: none; } /* ── Testimonial modal ── */ /* 20% smaller than modal-xl (1140px → ~912px) */ .testi-modal .modal-dialog { max-width: 912px; } .testi-modal .modal-content { background: #15181D; border: 1px solid var(--accent); border-radius: 2rem; overflow: hidden; color: #fff; } .testi-modal-img { width: 100%; height: 100%; min-height: 256px; object-fit: cover; display: block; } .testi-modal-close { position: absolute; top: 1.25rem; right: 1.25rem; z-index: 5; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .4); background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s, border-color .2s; } .testi-modal-close:hover { background: rgba(255, 255, 255, .12); border-color: #fff; } .testi-modal-quote-mark { color: var(--accent); } /* Darker, more opaque backdrop behind the page */ .modal-backdrop.show { opacity: 0.85; } .testi-modal-text p { font-size: 0.8125rem; line-height: 22px; color: #fff; } .testi-modal-name { font-weight: 700; font-size: 1rem; color: var(--accent); text-transform: uppercase; letter-spacing: .36px; } .testi-modal-role { font-weight: 700; font-size: 0.8125rem; color: #fff; } .testi-modal-college { font-size: 0.75rem; color: var(--muted); } /* Modal on mobile: ~15% smaller in width & height, image cropped shorter */ @media (max-width: 767.98px) { .testi-modal .modal-dialog { max-width: 86vw; margin: 1.25rem auto; } .testi-modal .modal-content { max-height: 88vh; overflow-y: auto; } .testi-modal-img-mobile { width: 100%; height: auto; display: block; } .testi-modal-text { padding: 1.25rem 1.25rem 0.5rem !important; } .testi-modal-meta { padding: 0 1.25rem 1.25rem !important; } } @media (min-width: 992px) { .testi-carousel-outer { padding: 0 3.75rem; } .testi-arrow-prev { left: 0; } .testi-arrow-next { right: 0; } } @media (max-width: 991.98px) { .testi-card-item { flex: 0 0 calc(50% - 0.75rem); } } @media (max-width: 575px) { .testi-card-item { flex: 0 0 88%; } .testi-arrow { display: none; } } /* Wider viewports: same-length preview wraps into fewer lines, so trim the card height to keep the gap between quote and Read More ~20px. */ @media (min-width: 1200px) and (max-width: 1399.98px) { .testi-card-item { height: 470px; } } @media (min-width: 1400px) { .testi-card-item { height: 430px; } } /* ── Gallery ─────────────────── */ #moments { background: #000; } .gallery-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } /* Tile = fixed rounded frame; the image zooms inside it and is clipped here */ .gallery-tile { border-radius: 1rem; overflow: hidden; } .gallery-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .4s ease, filter .4s ease, opacity .5s ease; } /* Soft fade-in as each lazy image finishes loading. The `fade-in` class is added by JS, so without JS the images stay visible (no class = opacity 1). */ .gallery-grid.fade-in img { opacity: 0; } .gallery-grid.fade-in img.loaded { opacity: 1; } .gallery-tile:hover img { transform: scale(1.05); filter: brightness(1.1); } @media (prefers-reduced-motion: reduce) { .gallery-grid img { transition: none; } .gallery-tile:hover img { transform: none; } } /* ── Journey ─────────────────── */ #journey { background: #000; } .info-card { border: 1px solid var(--border); border-radius: 2rem; height: 100%; } .info-card-title { font-weight: 700; font-size: 1.125rem; color: var(--accent); text-transform: uppercase; letter-spacing: .18px; } .info-card-body { font-size: 1rem; color: var(--muted); line-height: 28px; } .rounds-wrap { border: 1px solid var(--border); border-radius: 2rem; } .round-col { border-left: 1px solid var(--border); } .round-col:first-child { border-left: none; } /* Journey rounds cascade in (Round 01 → 04) when scrolled into view */ .rounds-stagger .round-col { opacity: 0; transform: translateY(24px); transition: opacity .5s ease, transform .5s ease; } .rounds-stagger.in-view .round-col { opacity: 1; transform: none; } .rounds-stagger.in-view .round-col:nth-child(1) { transition-delay: 0s; } .rounds-stagger.in-view .round-col:nth-child(2) { transition-delay: .1s; } .rounds-stagger.in-view .round-col:nth-child(3) { transition-delay: .2s; } .rounds-stagger.in-view .round-col:nth-child(4) { transition-delay: .3s; } @media (prefers-reduced-motion: reduce) { .rounds-stagger .round-col { opacity: 1; transform: none; transition: none; } } .round-badge { display: inline-block; border: 1px solid var(--muted); border-radius: 2rem; font-size: 0.8125rem; color: #fff; } /* Purple content heading (used across sections) */ .content-heading { font-weight: 700; font-size: 1.25rem; color: var(--accent); } .round-desc { font-size: 0.9rem; color: var(--muted); line-height: 24px; } /* ── Your Path ───────────────── */ #yourpath { background: #000; } .yourpath-body { font-size: 1rem; color: var(--muted); line-height: 26px; } /* ── FAQ ─────────────────────── */ #faqs { background: #000; } .accordion-item { background: transparent; border-left: none; border-right: none; border-radius: 0 !important; border-color: var(--border); } .accordion-button { background: transparent !important; color: #fff !important; font-family: 'fractul-variable', sans-serif; font-weight: 500; font-size: 1.125rem; letter-spacing: -.36px; box-shadow: none !important; } .accordion-button::after { filter: brightness(0) invert(1); } .accordion-body { background: transparent; color: var(--muted); font-size: 1rem; line-height: 26px; /* Soft fade + slide: content eases in once the panel has expanded */ opacity: 0; transform: translateY(-6px); transition: opacity .35s ease, transform .35s ease; } .accordion-collapse.show .accordion-body { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .accordion-body, .accordion-collapse.show .accordion-body { opacity: 1; transform: none; transition: none; } } /* ── Footer ──────────────────── */ #footer { background: #000; border-top: 1px solid var(--border); } .footer-body { font-size: 0.875rem; color: var(--muted); line-height: 24px; } .beware-box { border: 1px solid rgba(0, 0, 0, 0.12); border-left: 4px solid var(--teal); border-radius: 1rem; background: rgba(0, 0, 0, 0.02); } .beware-title { font-size: 1.0625rem; font-weight: 700; color: var(--teal); } .beware-txt { font-size: 0.875rem; line-height: 1.7; color: var(--muted); } .beware-txt a { color: var(--teal); text-decoration: none; } .footer-links { font-size: 0.9375rem; line-height: 2; } .footer-links a { color: var(--muted); text-decoration: none; } .footer-links a:hover { color: #fff; } .fk-social a { color: #fff; display: inline-flex; align-items: center; } /* ── Responsive ──────────────── */ @media (max-width: 991.98px) { .hero-heading { font-size: 2.625rem; } .gallery-grid { grid-template-columns: repeat(3, 1fr); } /* Mobile: float the collapse below the bar so it never shifts the page */ .grid-nav #navMenu { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #15181d; border: 1px solid var(--border); border-radius: 20px; padding: 8px 16px 12px; z-index: 1000; } .grid-nav #navMenu .nav-link { padding: 8px 4px !important; text-align: center; } } @media (max-width: 767.98px) { .hero-bleed::before { /* Zoom in so part of the wave is visible (but not the whole width). Smaller % = more of the width shown. */ background-size: 160% auto; /* Middle of the wave below the Register button on mobile. Higher number pushes the wave DOWN, lower lifts it UP. */ background-position: center 600px; } .hero-heading { font-size: 1.875rem; } .hero-logo { width: 280px; } .hero-dates { flex-direction: column; gap: 12px; } .hero-dates .v-line { width: 60px; height: 1px; } .section-subhead { font-size: 2rem; line-height: 40px; } .gallery-grid { grid-template-columns: repeat(2, 1fr); } .round-col { border-left: none; border-top: 1px solid var(--border); } .round-col:first-child { border-top: none; } } /* ── Register modal ── */ .register-modal .modal-dialog { max-width: 600px; } .register-modal .modal-content { background: var(--card); border: 1px solid var(--accent); border-radius: 2rem; overflow: hidden; color: #fff; } .register-modal-eyebrow { font-family: 'PixeloidSans', monospace; font-size: 1rem; color: var(--teal); text-transform: uppercase; letter-spacing: 1.4px; display: block; text-align: center; } .register-modal-close { position: absolute; top: 1.25rem; right: 1.25rem; z-index: 5; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .4); background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s, border-color .2s; } .register-modal-close:hover { background: rgba(255, 255, 255, .12); border-color: #fff; } /* Education choice cards */ .edu-option { display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left; text-decoration: none; background: #000; border: 1px solid var(--border); border-radius: 1.25rem; padding: 1rem 1.25rem; color: #fff; transition: border-color .2s ease, transform .2s ease, background .2s ease; } .edu-option:hover, .edu-option:focus-visible { border-color: var(--accent); transform: translateY(-2px); background: #0d0f13; outline: none; } .edu-option-icon { width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(152, 105, 255, .15); color: var(--teal); } .edu-option:hover .edu-option-icon { background: rgba(152, 105, 255, .28); } .edu-option-text { flex: 1 1 auto; min-width: 0; } .edu-option-title { font-weight: 700; font-size: 1.0625rem; color: #fff; margin: 0; } .edu-option-desc { font-size: 0.8125rem; color: var(--muted); line-height: 18px; margin: 2px 0 0; } .edu-option-arrow { color: var(--muted); flex-shrink: 0; transition: color .2s ease, transform .2s ease; } .edu-option:hover .edu-option-arrow { color: var(--teal); transform: translateX(3px); } /* Footer bottom padding (the floating status bar has been removed). */ #footer { padding-bottom: 48px; } @media (max-width: 575.98px) { #footer { padding-bottom: 40px; } } /* ════════════════════════════════════════════════════════════════════ IN-HERO STATUS CONSOLE — used by grid8.0-postregistration.html The "status bar as a fixed item on the hero" variant. It replaces the old two-column registration-dates block on the post-registration page. TEXT lives in grid8status.css (.status-label / .status-hint), shared site-wide; edit the rules below only for LOOK (size / colour / glow). ════════════════════════════════════════════════════════════════════ */ /* Vertical stack: pixel eyebrow on top, capsule pill below. The hero is a centered flex column, so this block self-centers. */ .hero-status-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; } /* ── Pixel eyebrow ( < System Status > ) — echoes the section-headline motif ── */ .hero-status-eyebrow { margin: 0; font-family: 'PixeloidSans', monospace; font-size: 0.9rem; letter-spacing: 1.4px; text-transform: uppercase; color: var(--teal); opacity: .85; text-align: center; } /* ── The capsule ───────────────────────────────────────────────────── Glass fill + dual purple-above / teal-below glow (same signature as the floating pill) so the status reads as a premium, intentional hero focal point rather than a leftover widget. */ .hero-status { /* width:fit-content + margin auto guarantees the capsule hugs its content and stays centred — even if an ancestor would otherwise stretch it (which left the dot+text shifted to the left edge). justify-content centres the content within, belt-and-braces. */ display: flex; width: fit-content; margin-inline: auto; justify-content: center; align-items: center; gap: 9px; max-width: calc(100% - 24px); padding: 13px 32px; border-radius: 999px; background: rgba(21, 24, 29, .55); border: 1px solid var(--live-line); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); box-shadow: 0 -6px 24px rgba(132, 76, 255, .28), 0 8px 26px rgba(102, 245, 255, .22), 0 12px 36px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .07); white-space: nowrap; } /* ── Beacon: teal dot + expanding "live" ring ── */ .hero-status__beacon { position: relative; width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px rgba(102, 245, 255, .8); } .hero-status__beacon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--teal); animation: hero-status-pulse 1.9s ease-out infinite; } @keyframes hero-status-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3.4); opacity: 0; } } /* ── Text (content injected from grid8status.css) ── */ .hero-status .status-label { font-size: 1.05rem; font-weight: 600; letter-spacing: .2px; color: #fff; } .hero-status .status-hint { font-size: 1rem; font-weight: 400; color: var(--teal); } /* ── Mobile: beacon + label centred on line 1, hint centred on line 2 ── (grid8status.css already drops the "·" separator below 576px) Symmetric padding + a tight row-gap keeps the capsule short. */ @media (max-width: 575.98px) { .hero-status { /* back to auto width so the full-width hint can wrap to line 2 cleanly */ width: auto; flex-wrap: wrap; justify-content: center; gap: 6px 8px; /* row-gap / column-gap */ padding: 10px 20px; white-space: normal; } /* Beacon + label stay together as a centred group (label must NOT grow) */ .hero-status .status-label { flex: 0 0 auto; font-size: 1rem; line-height: 1.3; } /* Hint drops to its own centred line */ .hero-status .status-hint { flex: 1 0 100%; text-align: center; font-size: .95rem; line-height: 1.3; } } @media (prefers-reduced-motion: reduce) { .hero-status__beacon::after { animation: none; } }