/* ═══════════════════════════════════════════════════════════ Blue Arctic V6 · Shared components ────────────────────────────────── Announcement bar, header & navigation, mobile drawer, footer, cards, chips, reveal utilities. Reused site-wide. ═══════════════════════════════════════════════════════════ */ /* ── Announcement bar ──────────────────────────────────── */ .announce { /* Variable-driven, like .header-dark: a page sets --announce-bg on (e.g. body.theme-carbon in hero.css) and the bar follows the hero canvas, so announce → header → hero read as one surface. Default stays navy. */ background: var(--announce-bg, var(--navy-950)); color: #C4D8EA; font-size: var(--fs-tiny); } .announce-inner { display: flex; justify-content: center; } .announce-link { display: inline-flex; align-items: center; gap: .65rem; padding-block: .55rem; color: inherit; min-height: var(--announce-h); min-width: 0; max-width: 100%; } .announce-link:hover { text-decoration: none; color: #fff; } .announce-tag { background: rgba(95, 185, 238, .16); color: var(--sky-400); border: 1px solid rgba(95, 185, 238, .3); padding: .1rem .55rem; border-radius: var(--r-pill); font-weight: 600; white-space: nowrap; } .announce-arrow { transition: transform var(--dur-fast) var(--ease-out); } .announce-link:hover .announce-arrow { transform: translateX(3px); } @media (max-width: 640px) { .announce-inner { min-width: 0; } .announce-text { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .announce-tag, .announce-arrow { flex: none; } } /* ── Header ────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--dur-med), box-shadow var(--dur-med); } .site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px -18px rgba(8, 25, 45, .25); } .header-inner { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-h); } .header-logo { flex: none; display: inline-flex; } /* 28px matches the live site's rendered logo height (v1 nav.css: 28px in the same 80px header). Artwork is 563×84 (6.70:1), so 28px tall ≈ 188px wide. The header stays --header-h tall: the logo only reclaims vertical slack. */ .header-logo img { width: 188px; height: 28px; object-fit: contain; } /* Primary nav */ .primary-nav { flex: 1; display: flex; justify-content: center; } .nav-list { display: flex; align-items: center; gap: .5rem; list-style: none; padding: 0; } .nav-item { position: relative; } /* Top-level nav: primarily typographic. The trigger is a quiet text button with a small radius (not a large pill); hover is a subtle tint, the open state a soft neutral surface with brand-blue text. The dark homepage header inherits the same interaction language (see .header-dark overrides below). */ .nav-link { display: inline-flex; align-items: center; gap: .3rem; padding: .5rem .7rem; border: 0; background: transparent; border-radius: var(--r-sm); font-weight: 500; font-size: .95rem; white-space: nowrap; color: var(--ink); cursor: pointer; transition: color var(--dur-fast), background-color var(--dur-fast); } .nav-link:hover { color: var(--blue-600); background: rgba(20, 40, 60, .05); } .nav-caret { transition: transform var(--dur-fast) var(--ease-out); color: var(--ink-3); } .nav-item.open .nav-caret { transform: rotate(180deg); } .nav-item.open > .nav-link { color: var(--blue-600); background: var(--frost); } /* Dropdown panels: navigation, not floating content cards. Narrow, short, a light border and a restrained shadow; sits close under its trigger and is centered on it. */ .nav-panel { position: absolute; top: calc(100% + .4rem); left: 50%; transform: translateX(-50%) translateY(5px); min-width: 28rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 4px 12px rgba(8, 25, 45, .05), 0 18px 40px -26px rgba(8, 25, 45, .22); padding: .5rem; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast); } .nav-item.open .nav-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } /* The Hosting panel is the only wide one: three full-width product rows stacked in a single column, so the three choices read as a list of products rather than a grid of links. 35rem is the width at which its three action-bar CTAs sit on one line. Below that they wrap and the panel stops reading as a tidy close. */ .nav-panel-wide { min-width: 35rem; } /* It is also the widest panel under the LEFTMOST trigger, so centring it pushes its left edge past the viewport on narrow desktops. Anchor it to the trigger's left edge there instead; the entrance animation is unchanged. */ @media (max-width: 1279px) { .nav-panel-wide { left: 0; transform: translateX(0) translateY(5px); } .nav-item.open .nav-panel-wide { transform: translateX(0) translateY(0); } } .panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem; list-style: none; padding: 0; } .panel-grid-1 { grid-template-columns: 1fr; } /* One unified item pattern: [icon] title + description. Production-menu style (2026-07-22): the icon is a plain blue glyph, no tile/box, top-aligned with the bold title, with the description flowing beneath. The whole row is the link; hover is a restrained tint. */ .panel-item { display: flex; align-items: flex-start; gap: .8rem; padding: .55rem .6rem; border-radius: var(--r-sm); color: var(--ink); transition: background-color var(--dur-fast), color var(--dur-fast); } .panel-item:hover, .panel-item:focus-visible { background: var(--mist); text-decoration: none; } .panel-item:hover .panel-copy strong, .panel-item:focus-visible .panel-copy strong { color: var(--blue-700); } .panel-ico { flex: none; display: grid; place-items: center; color: var(--blue-600); /* optical nudge so the glyph centers against the title's first line */ margin-top: .15rem; } .panel-ico .ico { width: 22px; height: 22px; } .panel-copy { display: grid; gap: .15rem; min-width: 0; } .panel-copy strong { font-size: .95rem; font-weight: 700; line-height: 1.25; color: var(--ink); } .panel-copy small { font-size: var(--fs-tiny); color: var(--ink-3); line-height: 1.45; } /* Quiet footer row: one statement or a couple of links, never a promotional banner. */ .panel-foot { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin-top: .4rem; padding: .6rem .75rem; border-top: 1px solid var(--line); background: var(--mist); border-radius: 0 0 calc(var(--r-md) - 1px) calc(var(--r-md) - 1px); margin-inline: -0.5rem; margin-bottom: -0.5rem; padding-inline: 1rem; } .panel-foot a { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-tiny); font-weight: 600; color: var(--blue-600); } /* One action per bar may be urgent (Emergency Malware Cleanup). It stays in the bar's blue so the footer reads as one row, and earns its emphasis from weight and the alert glyph rather than a colour we do not have a token for. */ .panel-foot-urgent { font-weight: 700; } .panel-foot-urgent .ico { color: var(--blue-600); } .panel-note { display: inline-flex; align-items: flex-start; gap: .45rem; font-size: var(--fs-tiny); color: var(--ink-2); line-height: 1.45; } .panel-note .ico { margin-top: .1rem; color: var(--ok-600); } /* Secondary grouping inside a panel. A quiet hairline + label separates supporting links from the products above them, and the links themselves are deliberately lighter than .panel-item: smaller, gray hover, no description. Applications are not products: the visual weight has to say so before the copy does. */ .panel-section { margin-top: .3rem; padding: .6rem .6rem .15rem; border-top: 1px solid var(--line); } .panel-section-label { margin: 0 0 .45rem; font-size: .7rem; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; color: var(--ink-3); } .panel-apps { display: flex; flex-wrap: wrap; gap: .2rem; list-style: none; padding: 0; margin: 0; } .panel-app { display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .55rem; border-radius: var(--r-sm); font-size: var(--fs-tiny); font-weight: 600; color: var(--ink-2); transition: background-color var(--dur-fast), color var(--dur-fast); } .panel-app .ico { width: 16px; height: 16px; color: var(--blue-600); flex: none; } .panel-app:hover, .panel-app:focus-visible { background: var(--mist); color: var(--ink); text-decoration: none; } /* Header actions */ .header-actions { display: flex; align-items: center; gap: .6rem; flex: none; } .btn-header { padding: .7rem 1.45rem; } /* ── Dark header (homepage dark hero) ────────────────────── .header-dark sits on the navy surface so the announce bar, header, and hero read as one continuous dark canvas. Dropdown panels and the mobile drawer stay light (they float above). */ .site-header.header-dark { /* Solid, not glass. Glass would show the white body behind the sticky header and break the canvas. The colour is variable-driven: a page sets --header-dark-bg on (tokens.css) and the header follows it, so carbon heroes join the seam without a second header theme. Default stays the homepage navy. */ background: var(--header-dark-bg, var(--navy-900)); } .site-header.header-dark.is-scrolled { border-bottom-color: rgba(255, 255, 255, .08); box-shadow: 0 6px 24px -14px rgba(2, 8, 16, .6); } .header-dark .nav-link { color: #DCE8F3; } .header-dark .nav-link:hover, .header-dark .nav-item.open > .nav-link { color: #fff; background: rgba(255, 255, 255, .08); } .header-dark .nav-caret { color: #7A93AB; } .header-dark .btn-quiet { color: #DCE8F3; } .header-dark .btn-quiet:hover { color: #fff; background: rgba(255, 255, 255, .08); } .header-dark .nav-toggle { /* Lift the button off the navy hero: the .25 border blended in. */ background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .42); color: #E8F1F9; } .header-dark .mobile-nav { border-top-color: rgba(255, 255, 255, .1); } /* Mobile toggle */ .nav-toggle { display: none; border: 1px solid var(--line-2); background: var(--paper); border-radius: var(--r-sm); width: 2.6rem; height: 2.6rem; place-items: center; cursor: pointer; color: var(--ink); } .nav-toggle .nav-toggle-close { display: none; } .nav-toggle[aria-expanded="true"] .nav-toggle-open { display: none; } .nav-toggle[aria-expanded="true"] .nav-toggle-close { display: block; } /* ── Mobile drawer ─────────────────────────────────────── */ .mobile-nav { display: none; border-top: 1px solid var(--line); background: var(--paper); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; padding: 1rem var(--container-pad) 2rem; } .mobile-nav[data-open="true"] { display: block; } .m-group { border-bottom: 1px solid var(--line); } .m-group summary { display: flex; align-items: center; justify-content: space-between; padding: 1rem .25rem; font-weight: 600; cursor: pointer; list-style: none; } .m-group summary::-webkit-details-marker { display: none; } .m-group .m-caret { transition: transform var(--dur-fast); color: var(--ink-3); } .m-group[open] .m-caret { transform: rotate(180deg); } .m-group ul { padding: 0 .25rem 1rem; display: grid; gap: .1rem; } .m-group ul a { display: block; padding: .55rem .75rem; border-radius: var(--r-sm); color: var(--ink-2); font-size: .95rem; } .m-group ul a:hover { background: var(--mist); color: var(--blue-600); text-decoration: none; } /* Drawer equivalent of .panel-section-label: groups the supporting links under a heading without turning them into tappable rows. */ .m-label { margin: .7rem 0 .15rem; padding: .5rem .75rem 0; border-top: 1px solid var(--line); font-size: .7rem; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; color: var(--ink-3); } .m-actions { display: grid; gap: .6rem; padding-top: 1.25rem; } /* Narrow desktop: keep the roomier nav from overflowing */ /* Narrow desktop: six top-level items + logo + Login + Get Started do not fit at 992px on default metrics, so the bar is compressed rather than dropped to the drawer. Measured at 992/1060/1120/1199: Get Started must stay on screen and .header-inner must not overflow. If another top-level item is ever added, re-measure here first. */ @media (min-width: 992px) and (max-width: 1199px) { .nav-list { gap: .1rem; } .nav-link { padding: .5rem .45rem; font-size: .9rem; } .header-inner { gap: .5rem; padding-inline: 1.25rem; } .header-actions { gap: .4rem; } .header-actions .btn { padding-inline: .8rem; } } @media (max-width: 991px) { .primary-nav { display: none; } .header-actions .btn-quiet { display: none; } .nav-toggle { display: grid; } /* Balance the mobile header: logo hugs the left gutter, toggle hugs the right, equal optical margins on both sides (was left-packed). */ .header-inner { justify-content: space-between; } /* Slightly under desktop scale (~26px vs 28px tall) so the mark keeps its presence without crowding the Get Started button + toggle on phones. */ .header-logo img { width: 176px; height: auto; } } @media (max-width: 480px) { .header-actions .btn-header { display: none; } } /* Lock body scroll while drawer is open */ body.nav-open { overflow: hidden; } /* ── Chips & badges ────────────────────────────────────── */ .chip { display: inline-flex; align-items: center; gap: .45rem; padding: .38rem .85rem; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--paper); font-size: var(--fs-tiny); font-weight: 500; color: var(--ink-2); } .chip .ico { color: var(--ok-600); } .badge-pop { display: inline-block; padding: .3rem .8rem; border-radius: var(--r-pill); background: var(--blue-600); color: #fff; font-size: var(--fs-tiny); font-weight: 600; letter-spacing: .02em; } /* ── Generic card ──────────────────────────────────────── */ .card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-soft); } /* ── Plans, tabs & offer banner (shared: home + product pages) ── */ .plans-tabs { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .25rem; padding: .3rem; background: var(--frost); border: 1px solid var(--line); border-radius: var(--r-pill); margin-inline: auto; } /* Tabs are a JS enhancement; without JS all panels render stacked with their own headings and the tablist is hidden. */ html:not(.js) .plans-tabs { display: none; } .plans-tab { border: 0; background: transparent; padding: .6rem 1.35rem; border-radius: var(--r-pill); font-weight: 600; font-size: var(--fs-small); color: var(--ink-2); cursor: pointer; transition: background-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast); } .plans-tab:hover { color: var(--ink); } .plans-tab[aria-selected="true"] { background: var(--paper); color: var(--blue-600); box-shadow: var(--shadow-soft); } .plans-tablist-wrap { display: flex; justify-content: center; margin-bottom: 2.5rem; } /* The panel heading duplicates its tab label, so INSIDE the tab component it is hidden once JS upgrades the panels, and shown again without JS where the panels render stacked. Scoped to .plans-panel deliberately: pricing.php reuses this class for standalone "VPS Hosting" / "Virtual Dedicated Servers" section headings that sit outside any tab. The old unscoped `display:none` hid those too, which collapsed the gap between the VPS footnote and the VDS card grid. The "Most Popular" flag then overlapped the footnote text. */ .plans-panel-title { margin: 2.5rem 0 1.25rem; } .plans-panel .plans-panel-title { display: none; } html:not(.js) .plans-panel .plans-panel-title { display: block; } /* Until home.js upgrades the panels to tabs, JS-capable browsers see only the first panel (prevents a pre-init flash of all four). */ .js .plans-panels:not(.tabs-ready) .plans-panel:nth-child(n+2) { display: none; } .js .plans-panel[hidden] { display: none; } /* Plan cards */ .plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-card-gap); align-items: stretch; } .plan-card { position: relative; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 2rem 1.8rem; box-shadow: var(--shadow-soft); transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med); } .plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } .plan-card.is-popular { border-color: var(--blue-500); box-shadow: 0 0 0 1px var(--blue-500), var(--shadow-lift); } .plan-flag { position: absolute; top: -0.85rem; left: 50%; transform: translateX(-50%); white-space: nowrap; } .plan-name { font-size: 1.2rem; margin-bottom: .2rem; } .plan-for { font-size: var(--fs-tiny); color: var(--ink-3); min-height: 2.2em; } .plan-price { display: flex; align-items: baseline; gap: .3rem; margin-top: 1.1rem; } .plan-price .amount { font-family: var(--font-display); font-size: 2.35rem; font-weight: 800; letter-spacing: -0.02em; } .plan-price .period { color: var(--ink-3); font-size: var(--fs-small); } .plan-terms { font-size: var(--fs-tiny); color: var(--ink-3); margin-bottom: 1.2rem; } .plan-features { display: grid; gap: .6rem; padding-block: 1.35rem; font-size: var(--fs-small); color: var(--ink-2); } .plan-features li { display: flex; gap: .55rem; align-items: flex-start; } .plan-features .ico { color: var(--ok-600); flex: none; margin-top: .2rem; } .plan-cta { margin-top: auto; padding-top: .5rem; } .plan-cta .btn { width: 100%; } .plan-renewal { margin-top: .7rem; font-size: var(--fs-tiny); color: var(--ink-3); text-align: center; } .plans-footnote { margin-top: 1.75rem; text-align: center; font-size: var(--fs-small); color: var(--ink-2); } .plans-footnote + .plans-footnote { margin-top: .5rem; } /* Support copy under the plan grid: confident marketing lines, not legal footnotes (final pass 2026-07-21). */ .plans-note { margin: var(--space-band) auto 0; max-width: 46rem; text-align: center; font-size: var(--fs-body); color: var(--ink-2); line-height: 1.65; } .plans-note a { font-weight: 600; } .plans-honesty { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2rem; /* A trust row belongs to the cards above it: band spacing, not section spacing, so it never floats between two blocks. */ margin-top: var(--space-band); padding-top: var(--space-band); border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--ink-2); } .plans-honesty span { display: inline-flex; align-items: center; gap: .45rem; } .plans-honesty strong { color: var(--ink); font-weight: 650; } .plans-honesty .ico { color: var(--ok-600); } @media (max-width: 900px) { .plan-grid { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; } } /* ── 30-day trial band (shared: home + web-hosting) ────── */ .trial-band { /* Licensed abstract accent (accent-arctic-flow) kept far beneath a ~93% navy overlay: texture, never wallpaper. */ background: radial-gradient(800px 380px at 88% -30%, rgba(95, 185, 238, .18), transparent 60%), linear-gradient(120deg, rgba(12, 29, 46, .93), rgba(8, 20, 32, .96)), url(../images/stock/accent-arctic-flow-1600.jpg) center / cover no-repeat, linear-gradient(120deg, var(--navy-900), var(--navy-950)); border-radius: var(--r-xl); color: #A8BFD3; padding: clamp(2.25rem, 5vw, 3.5rem); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; overflow: hidden; } .trial-band h2 { color: #F4F9FD; margin-bottom: .8rem; } .trial-band .lead { color: #A8BFD3; font-size: var(--fs-lead); } .trial-cta { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; } .trial-renewal { font-size: var(--fs-small); color: #9DB4C9; max-width: 20rem; line-height: 1.5; } .trial-renewal strong { color: #E8F1F9; } /* Trial path: a three-stop route on a glass card (the same node-and-line brand grammar as the migration path). Gives the right side of the band real composition instead of a text list. NOTE: scoped as `.trial-band .trial-path` so this padding beats base.css's `ol[role="list"] { padding: 0 }` (element+attribute specificity), which otherwise zeroes the card's interior padding and crams the timeline against the border. */ .trial-band .trial-path { position: relative; display: grid; gap: 2.35rem; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r-xl); /* Generous interior framing: the border should frame the content, not touch it. Timeline inset from the left edge; even air around. */ padding: 2.9rem 3rem 2.9rem 2.75rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: var(--fs-small); } .trial-stop { position: relative; display: flex; gap: 1.15rem; } .trial-stop-marker { flex: none; position: relative; width: .8rem; height: .8rem; margin-top: .3rem; border-radius: 50%; background: var(--sky-400); box-shadow: 0 0 0 4px rgba(95, 185, 238, .18); } /* connecting line between stops */ .trial-stop:not(:last-child) .trial-stop-marker::after { content: ""; position: absolute; left: 50%; top: calc(100% + 7px); transform: translateX(-50%); width: 2px; height: 3rem; background: linear-gradient(180deg, rgba(95, 185, 238, .5), rgba(95, 185, 238, .12)); border-radius: 1px; } .trial-stop strong { display: block; color: #F4F9FD; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; margin-bottom: .4rem; } .trial-stop small { display: block; font-size: var(--fs-tiny); color: #9DB4C9; line-height: 1.6; max-width: 23rem; } @media (max-width: 900px) { .trial-band { grid-template-columns: 1fr; } } /* ── Footer ────────────────────────────────────────────── */ .site-footer { background: var(--navy-950); color: #9DB4C9; padding-block: clamp(3.5rem, 6vw, 5rem) 2rem; font-size: var(--fs-small); } .footer-top { display: grid; grid-template-columns: minmax(16rem, 1.15fr) 2.6fr; gap: clamp(2.5rem, 5vw, 5rem); padding-bottom: 3rem; border-bottom: 1px solid rgba(157, 180, 201, .16); } .footer-brand img { width: 181px; height: 27px; object-fit: contain; } .footer-tag { margin-top: 1.15rem; line-height: 1.65; max-width: 24rem; } /* Contact block: icon column + copy column so labels, links and sub-lines align on one clean left edge (no orphaned wraps). */ .footer-contact { display: grid; gap: .95rem; margin-top: 1.6rem; } .footer-contact li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); column-gap: .65rem; align-items: start; line-height: 1.5; } .footer-contact .ico { color: var(--sky-400); margin-top: .3rem; } .footer-contact a { color: #D7E5F1; font-weight: 500; overflow-wrap: anywhere; } .footer-hours { display: block; margin-top: .1rem; font-size: var(--fs-tiny); color: #7A93AB; } .footer-social { display: flex; gap: .5rem; margin-top: 1.5rem; } .footer-social a { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: var(--r-sm); border: 1px solid rgba(157, 180, 201, .2); color: #B9CBDD; transition: color var(--dur-fast), border-color var(--dur-fast), background-color var(--dur-fast); } .footer-social a:hover { color: #fff; border-color: var(--sky-400); background: rgba(95, 185, 238, .1); } .footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.25rem 2rem; } .footer-col h2 { font-family: var(--font-body); font-size: var(--fs-tiny); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #E8F1F9; margin-bottom: 1rem; } .footer-col ul { display: grid; gap: .55rem; } .footer-col a { color: #9DB4C9; } .footer-col a:hover { color: #fff; } .footer-bottom { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 2rem; justify-content: space-between; padding-top: 1.75rem; font-size: var(--fs-tiny); line-height: 1.6; color: #7A93AB; } /* Let the tagline wrap at the separators, never mid-phrase */ .footer-note span { white-space: nowrap; } @media (max-width: 900px) { .footer-top { grid-template-columns: 1fr; } .footer-cols { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 901px) and (max-width: 1100px) { .footer-cols { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1101px) { .footer-cols { grid-template-columns: repeat(3, 1fr); } } /* ── Scroll reveal (progressive enhancement) ───────────── */ /* Content is fully visible without JS; the .js gate ensures the initial hidden state only ever applies when main.js runs. */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }