/* Theme Name: WanTok New Theme URI: https://wantok.to Author: WanTok Author URI: https://wantok.to Description: A modern, responsive WordPress theme for WanTok — Simple. Reliable. Affordable. Built for the Kingdom of Tonga's leading ICT provider. Version: 2.0.0 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 7.4 License: Proprietary Text Domain: wantok-new Tags: custom-logo, custom-menu, featured-images, responsive-layout, translation-ready */ /* ===================================================================== WanTok Refresh — theme stylesheet Brand: the original ocean cyan/blue/purple gradient on a white canvas — restored per request after a brief tapa-cream/brown experiment. Tongan ngatu (tapa cloth) design is still present, but expressed as SHAPE rather than a colour swap: a zigzag "kupesi" stamp mark before every section eyebrow, a real recoloured kupesi motif band under the hero, and sharp/graphic radii (rather than soft rounded-app defaults) — all rendered in the company's own cyan/blue/purple, not earth tones. Type: Space Grotesk (display) + Inter (body). ===================================================================== */ :root { /* Brand — restored to the original cyan/blue/purple/navy set. */ --wt-cyan: #13b6e6; --wt-blue: #1170d6; --wt-blue-deep: #0a4fa6; --wt-purple: #7a39bb; --wt-purple-deep: #5a23a0; --wt-navy: #0c1330; --wt-navy-2: #131c44; /* Surfaces — back to white/cool blue-white, not tapa-cream. */ --wt-bg: #ffffff; --wt-surface: #f5f8fc; --wt-surface-2: #eef3fa; --wt-border: #dde5f0; /* Text */ --wt-ink: #131a2b; --wt-ink-2: #45506a; --wt-ink-3: #6b7690; --wt-on-dark: #f3f6fc; --wt-on-dark-2: #aab6d4; /* Gradient — cyan → blue → purple, the company's own colours. */ --wt-grad: linear-gradient(120deg, var(--wt-cyan) 0%, var(--wt-blue) 45%, var(--wt-purple) 100%); --wt-grad-soft: linear-gradient(120deg, rgba(19,182,230,0.12), rgba(122,57,187,0.12)); /* Flattened back to solid navy (16 July, later the same day) — Soana asked for the page banner ("header") and closing CTA band ("footer") to both go back to plain navy instead of the gradient added earlier today. Kept as its own variable (rather than replacing every --wt-navy-grad reference with --wt-navy directly) so both spots stay wired to one source of truth if a gradient's ever wanted again. */ --wt-navy-grad: var(--wt-navy); /* Type */ --wt-font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; --wt-font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Layout — smaller radii than the old soft-app defaults, closer to a printed panel than a rounded card. Kept from the tapa pass — this is shape language, not colour, and pairs with the kupesi motif below. */ --wt-maxw: 1180px; --wt-radius: 6px; --wt-radius-sm: 4px; --wt-shadow: 0 1px 2px rgba(12,19,48,0.06), 0 8px 24px rgba(12,19,48,0.07); --wt-shadow-lg: 0 18px 48px rgba(12,19,48,0.14); --wt-space: 1rem; } /* ---------- Reset-ish ---------- */ *, *::before, *::after { box-sizing: border-box; } /* overflow-x:hidden here (not on body, to avoid any risk of interfering with the sticky header below) clips a real layout bug: the "Services" nav dropdown (.mega-menu) and the partner-logo marquee are both wider than the viewport by design (a hidden-until-hover dropdown, and a duplicated-content infinite-scroll strip) but nothing was clipping that width at the document level, so the whole page's scrollable area silently extended past the viewport edge — invisible during normal browsing, but it showed up as blank canvas on the right of a full-page screenshot, and could cause a stray horizontal scrollbar. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---------- Reveal-on-scroll ---------- 15 July: theme.js already had a complete IntersectionObserver-driven reveal system (targets [data-reveal], .service-card, .plan-card, .news-card, .why-list li — see "Reveal-on-scroll" in theme.js) — it adds .reveal-init then .is-visible, with a reduced-motion bypass and a 2.5s safety net so nothing gets stuck invisible if the observer never fires. What was missing was this half: the actual hidden/visible look. Kept deliberately restrained — a short rise + fade, not a bounce or a slide from the side, and unobserved after the first reveal so it's a one-time entrance, not something that replays every time you scroll past a section. data-reveal was also added to each section's header block and the CTA band content, so headers ease in as one block just before their cards cascade in individually right after. */ .reveal-init { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal-init.is-visible { opacity: 1; transform: none; } body { margin: 0; font-family: var(--wt-font-body); font-size: 17px; line-height: 1.65; color: var(--wt-ink); background: var(--wt-bg); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--wt-blue); text-decoration: none; } a:hover { color: var(--wt-purple); } /* Scoped to "body.wp-theme-wantok-new" (a class WordPress adds to every page automatically for the active theme) rather than a bare tag selector — Elementor's global "Kit" stylesheet ships its own `.elementor-kit-1 h1`/`h2`/`h3`/`h4`/`h5`/`h6` rules (font-family: Nexa, and for h1 specifically a flat font-size:40px/font-weight:900 too), and a plain `h1, h2, h3, h4` selector has lower CSS specificity than that, so it was silently losing — every heading site-wide was quietly rendering in the wrong typeface (discovered 15 July while chasing why the hero title wouldn't get bigger no matter what value was set — it wasn't a sizing bug, the value was being overridden outright). This selector is one specificity tier higher so it wins regardless of stylesheet load order. */ body.wp-theme-wantok-new h1, body.wp-theme-wantok-new h2, body.wp-theme-wantok-new h3, body.wp-theme-wantok-new h4 { font-family: var(--wt-font-display); line-height: 1.15; color: var(--wt-ink); margin: 0 0 0.5em; font-weight: 700; letter-spacing: -0.01em; } p { margin: 0 0 1rem; } ul { margin: 0; padding: 0; } :focus-visible { outline: 3px solid var(--wt-blue); outline-offset: 2px; border-radius: 4px; } /* ---------- Accessibility helpers ---------- */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 9999; background: var(--wt-navy); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0; font-weight: 600; } .skip-link:focus { left: 0; color: #fff; } /* ---------- Layout ---------- */ .container { width: 100%; max-width: var(--wt-maxw); margin: 0 auto; padding: 0 22px; } .content-area { padding-top: 48px; padding-bottom: 64px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; font-family: var(--wt-font-display); font-weight: 600; font-size: 0.98rem; padding: 0.72em 1.4em; border-radius: 8px; border: 2px solid transparent; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease; text-align: center; line-height: 1.1; } .btn:hover { transform: translateY(-1px); } /* Round 27 (14 July) — the cyan/blue/purple gradient dropped in favour of plain navy, so nothing on the homepage still uses the old brand gradient (matches the monochrome-navy language the rest of the page settled on this session). */ .btn-primary { background: var(--wt-navy); color: #fff; box-shadow: 0 6px 18px rgba(12,19,48,0.35); } .btn-primary:hover { color: #fff; box-shadow: 0 10px 26px rgba(12,19,48,0.4); } .btn-outline { background: #fff; color: var(--wt-blue-deep); border-color: var(--wt-border); } .btn-outline:hover { color: var(--wt-purple); border-color: var(--wt-purple); } .btn-ghost { background: transparent; color: var(--wt-blue-deep); border-color: transparent; } .btn-ghost:hover { color: var(--wt-purple); } .btn-light { background: #fff; color: var(--wt-navy); } .btn-light:hover { color: var(--wt-purple-deep); } .btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); } .btn-ghost-light:hover { color: #fff; border-color: #fff; } /* Added 16 July for inner-page closing CTAs (starting with Support), per a reference design the client liked — a rounded pill filled with the brand gradient, for one primary action to stand out against a navy CTA band. This doesn't reverse Round 27's move away from the gradient on the homepage's own buttons above; it's a deliberate, separate accent used sparingly on inner pages only. */ .btn-gradient { background: var(--wt-grad); color: #fff; border-radius: 999px; box-shadow: 0 10px 26px rgba(90,35,160,0.35); } .btn-gradient:hover { color: #fff; filter: brightness(1.08); box-shadow: 0 14px 32px rgba(90,35,160,0.42); } /* ---------- Utility bar ---------- */ .utility-bar { background: var(--wt-navy); color: var(--wt-on-dark); font-size: 0.86rem; } .utility-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 42px; flex-wrap: wrap; } .utility-contact { display: flex; gap: 1.25rem; list-style: none; flex-wrap: wrap; } .utility-contact a { color: var(--wt-on-dark); display: inline-flex; align-items: center; gap: 0.4em; } .utility-contact a:hover { color: var(--wt-cyan); } .util-ico { opacity: 0.85; } /* 30 Aug 2026 — "Network Dock" redesign: phone and email must always show together (Soana: "very important to me to have both"), joined by this middot rather than two separate list items. Explicit colour needed — without it the separator inherits body's near-black ink colour and disappears against the navy bar. */ .util-sep { color: var(--wt-on-dark-2); } /* My WanTok + the social icons share this end of the utility bar (see header.php). Briefly moved into a floating nav card during the 30 Aug "Network Dock" round, then moved straight back here the same day when the header reverted to the flush "Network Rail" bar — see wantok_header_network_rail_revert_30aug.md. */ .utility-actions { display: flex; align-items: center; gap: 1rem; } .util-portal { color: #fff; font-weight: 600; background: rgba(255,255,255,0.08); padding: 5px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); } .util-portal:hover { color: #fff; background: rgba(19,182,230,0.25); border-color: var(--wt-cyan); } .utility-social { display: flex; gap: 0.4rem; list-style: none; } .utility-social a { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: rgba(255,255,255,0.08); color: var(--wt-on-dark); } /* Lighter navy rather than flat var(--wt-navy) — the bar itself is already navy, so a same-navy hover fill would be invisible. */ .utility-social a:hover { background: #3d4f96; color: #fff; } /* 28 August 2026 — real Facebook/X/LinkedIn/Instagram brand marks (wantok_social_icon_svg() in functions.php) replacing the old plain "f"/"X"/"in"/"ig" text-letter placeholders. The just inherits .utility-social a's own `color` via fill="currentColor", so the existing default/hover colours above still apply with no other change needed. Sized a little smaller than the 26px box so the mark doesn't crowd its edges. */ .utility-social .social-ico { width: 14px; height: 14px; display: block; } /* ---------- Header ---------- Navy by default everywhere — same var(--wt-navy) as .utility-bar right above it, and no border between them, so the two read as one seamless navy band instead of a dark strip stacked on a separate white bar (this was a deliberate change on 8 July: the previous solid-white header looked like two different-coloured bars stacked together). The one exception is .hero-overlay on the homepage, which starts fully transparent over the hero photo and only becomes this same navy once .is-scrolled fires (see theme.js) — text/logo colours don't need to change between the transparent and solid states, since both sit on a dark background either way; only the background itself toggles. */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--wt-navy); transition: background 0.25s ease, box-shadow 0.25s ease; } .site-header.is-scrolled { box-shadow: var(--wt-shadow-lg); } .header-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 72px; } .site-branding { flex: 0 0 auto; } .brand-wordmark { display: inline-flex; align-items: center; } .custom-logo { max-height: 46px; width: auto; } .custom-logo-link { display: inline-flex; align-items: center; } /* Real logo (assets/images/wantok-logo-{white,navy}.png) — updated 15 July to the fuller lockup with the "Simple. Reliable. Affordable." tagline baked in under the wordmark, replacing the wordmark-only crop. The header is navy in every state now, so the white mark is simply the default — the navy copy is kept only in case a future light-background header variant is wanted, but nothing currently shows it. Height bumped 34px→46px from the wordmark-only version so the tagline line stays legible at nav-bar scale. */ .wantok-logo-swap { position: relative; display: inline-block; height: 46px; } .wantok-logo-swap .wantok-logo { display: block; height: 46px; width: auto; transition: opacity 0.25s ease; } .wantok-logo-swap .wantok-logo-dark { position: absolute; inset: 0; opacity: 0; } .wantok-logo-swap .wantok-logo-light { opacity: 1; } /* Footer has real vertical room, so its copy of the same lockup can run larger — the tagline should be comfortably readable here, not just present. */ .footer-logo .wantok-logo-swap { height: 64px; } .footer-logo .wantok-logo-swap .wantok-logo { height: 64px; } /* Homepage-only: the header starts transparent, floating directly over the hero photo (the hero is pulled up underneath it via a matching negative margin in front-page.php's "front-main hero-overlay-page" wrapper) instead of sitting above it as a separate bar. The threshold for .is-scrolled is set in theme.js based on the hero's own height, not the default 8px scroll-shadow trigger, so it stays transparent through the hero and only goes navy once scrolled past it. Inner pages never get .hero-overlay, so their header is navy from the start. */ .site-header.hero-overlay { background: transparent; } .site-header.hero-overlay.is-scrolled { background: var(--wt-navy); box-shadow: var(--wt-shadow-lg); } /* The utility strip now lives inside #masthead (see header.php, "Network Dock" redesign), so it inherits the same transparent-over-the-hero / solid-once-scrolled behaviour as the nav card below purely by being a descendant of the same two classes — no separate JS toggle needed. */ .site-header.hero-overlay .utility-bar { background: transparent; } .site-header.hero-overlay.is-scrolled .utility-bar { background: var(--wt-navy); } /* ---------- Nav row ("Network Rail") ---------- 30 Aug 2026 — briefly rebuilt as a floating rounded "Network Dock" card (own padding/radius/shadow, translucent-then-blurred over the hero) and reverted the same day back to this: the branding + primary nav sit in a plain, full-width bar flush with the header's own edges — same navy band as the utility bar directly above it, no card, no shadow, no blur. Soana's call after comparing both built live: Network Rail's own signature (the line-and-node nav below) reads more clearly without competing for attention with a floating card shape, and it's one less browser-support caveat (no @supports/backdrop-filter path to maintain). See wantok_header_network_rail_revert_30aug.md. */ .nav-row { background: var(--wt-navy); } .site-header.hero-overlay .nav-row { background: transparent; } .site-header.hero-overlay.is-scrolled .nav-row { background: var(--wt-navy); } .header-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 72px; } .main-navigation { margin-left: auto; /* Round 8 (27 Aug) — positioning ancestor for .mega-menu (see that rule and .nav-menu li.menu-item-has-children below): anchoring the dropdown here instead of to the "Services and Plans"
  • itself keeps its right edge aligned with the header container's stable inner-right edge as the fluid header narrows, instead of drifting with that one nav item's on-screen position. */ position: relative; } /* "Network Dock" signature: a faint rail line runs behind the nav items with a small node under each link, lighting up cyan on hover and pulsing gently on the current page — replaces the old plain underline treatment on .current-menu-item. Pure CSS on the existing WP-rendered markup (wantok_render_primary_nav()/wantok_fallback_menu() in functions.php, untouched) — no new markup needed. */ .nav-menu { display: flex; align-items: center; gap: 0.35rem; list-style: none; position: relative; } .nav-menu::before { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 1px; background: rgba(255,255,255,0.16); z-index: 0; } .nav-menu li { position: relative; z-index: 1; } .nav-menu a { display: inline-block; padding: 0.55rem 0.85rem 0.95rem; border-radius: 8px; font-weight: 500; color: var(--wt-on-dark); font-size: 0.98rem; position: relative; /* Keeps every item (notably "Services and Plans" and "About Us") on one line as the card's own row shrinks it — without this, flexbox wraps the longer labels onto two lines well before the row actually runs out of space, taller-item first, which is what widened the 861-1080px squeeze below. Desktop-only selector (.nav-menu, not the mobile flyout's own — this is overridden back to normal wrapping inside the 860px flyout, where each item gets its own full-width row anyway). */ white-space: nowrap; } .nav-menu a::after { content: ""; position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.35); transition: background 0.2s ease, box-shadow 0.2s ease; } .nav-menu a:hover, .nav-menu .current-menu-item > a { color: #fff; background: rgba(255,255,255,0.14); } .nav-menu a:hover::after, .nav-menu .current-menu-item > a::after { background: var(--wt-cyan); box-shadow: 0 0 8px 2px rgba(19,182,230,0.55); } .nav-menu .current-menu-item > a::after { animation: wt-rail-pulse 2.4s ease-in-out infinite; } @keyframes wt-rail-pulse { 0%, 100% { box-shadow: 0 0 6px 1px rgba(19,182,230,0.5); } 50% { box-shadow: 0 0 12px 4px rgba(19,182,230,0.8); } } @media (prefers-reduced-motion: reduce) { .nav-menu .current-menu-item > a::after { animation: none; } } /* 30 Aug 2026 — the 861-1080px compaction band that used to live here (tightening .nav-card/.nav-menu/.nav-card-portal spacing) only existed because My WanTok briefly shared this row with the primary nav during the "Network Dock" round, pushing "Services and Plans" past the card's edge starting ~900px wide. Now that My WanTok has moved back to the utility bar (see wantok_header_network_rail_revert_30aug.md), the nav row only ever holds the logo + primary nav, which fit within the same 861px single-row-nav floor the Round 8/9 mega-menu notes above rely on without needing any extra squeeze — re-verified with the same Playwright width sweep, 861-1180px, zero wrap and zero overflow with this band removed entirely. */ /* Dropdowns */ .nav-menu li { position: relative; } /* Round 8 (27 Aug) — the mega-menu's own
  • ("Services and Plans") would otherwise be the closest positioned ancestor for its position:absolute .mega-menu child (per the rule just above), and its on-screen position shifts as the fluid header narrows, which is what pushed the dropdown off the left edge of the viewport at mid-range widths (see Round 7's 2x2 fallback comment, now removed below). Taking this one
  • back out of the positioning chain makes .main-navigation the containing block instead (see its "position: relative" above) — a stable anchor whose right edge tracks the header container's own right-inner-edge, not one nav item's position within it. Scoped to .menu-item-has-children specifically (only "Services and Plans" ever carries this class — confirmed in functions.php, both wantok_fallback_menu() and wantok_render_primary_nav() apply it to no other item) so no other nav
  • is affected. */ .nav-menu li.menu-item-has-children { position: static; } .nav-menu .sub-menu { position: absolute; top: 100%; left: 0; min-width: 230px; background: var(--wt-bg); border: 1px solid var(--wt-border); border-radius: var(--wt-radius-sm); box-shadow: var(--wt-shadow-lg); padding: 8px; list-style: none; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; z-index: 50; } .nav-menu li:hover > .sub-menu, .nav-menu li:focus-within > .sub-menu, .nav-menu li.submenu-open > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .nav-menu .sub-menu a { display: block; padding: 0.5rem 0.7rem; font-size: 0.93rem; } .submenu-toggle { display: none; } /* Mega menu (Services and Plans) — grouped columns instead of one long list. 26 August 2026 redesign, round 4: rounds 1-3 used a flat divider line between columns (grey, then cyan/purple-tinted) to show grouping. Soana said it read as "too much" and asked for the same soft cyan/ purple "glow" used elsewhere on the site instead (.services-showcase- card.glow-cyan/-purple, .plans .plan-card.glow-cyan/-purple, .feature-mosaic-tile.glow-cyan/-purple — see those for the same tinted-border + blurred-halo pattern) plus a rounder outer box. So: dropped the divider lines and the top gradient bar entirely, each group is now its own soft rounded tile with a coloured glow (or solid navy for "Coming Soon"), sitting in a real grid gap instead of sharing an edge — simpler markup-to-CSS mapping too, no more bleed/negative- margin hack for the "Coming Soon" panel. Round 5 (same day): the 4-across grid meant narrow columns, so short titles like "Consumer Broadband" wrapped onto two cramped lines. Shown three ways to fix it (wider row, 2x2 grid, single stacked column) — Soana picked the single stacked column: groups now stack top to bottom, full width, so every title always gets one line. Narrower box, taller drop — glow bumped to the upper end of the sitewide range since each tile is now a full-width surface. Round 7 (27 Aug) — Soana's boss asked to go back to a horizontal row instead. Round 5's "4-across" problem was equal-width (1fr) columns forcing every group into the same narrow box regardless of how long its content actually was — this time each column gets its own explicit width, sized off the REAL rendered text (measured via a Playwright probe against the live .mega-col-title/li a/.mega-item- disabled elements, not guessed or left to grid's own minmax/auto sizing — see the "gotcha" note this file's history already flagged about grid auto-sizing not reliably giving a column its true unwrapped width in a constrained container). Longest unwrapped content per group at this font: Connectivity 196px ("Starlink Satellite Service"), ICT 269px ("Utility Management System (UMS)"), Hardware 98px ("Anker Solix"), Coming Soon 125px text + ~58px for the "Soon" badge. Coming Soon is deliberately given the narrowest column of the four (180px, vs. 240/310/150 for the others) per Soana's "make Coming Soon smaller" ask — it's also given tighter internal padding below (.mega-col--panel) so it reads as visibly more compact, not just numerically narrower. */ .nav-menu .mega-menu { /* Anchored to the item's RIGHT edge, not left — "Services and Plans" sits mid-row with News/Support still to its right, so a left:0 anchor ran the menu off the right edge of the viewport at ordinary desktop widths. Round 9 (27 Aug) — Round 7's fixed 940px box width didn't actually match its own grid: 4 fixed columns (240+310+150+180=880) + 3 gaps (16px each, 48) + the box's own left/right padding (22px each, 44) adds up to 972px of required content width, 32px more than the 940px box declared — with no overflow:hidden on the box, that 32px of grid content (the rightmost column) rendered outside the rounded white card instead of inside it. Switching width to auto (shrink-to-fit, capped by max-width so it still can't run off a narrow viewport) and each column to minmax(min-content, cap) makes the box's own size and its grid's actual content size the same calculation, so the two can no longer disagree — the box is always exactly as wide as its columns need, up to each column's cap, and never wider than the viewport allows. Below the point where even min-content no longer fits (deep into the 861px mobile-flyout boundary), the longest item in a column wraps onto a second line same as any normal text box — it does not spill outside the card. Width is a definite min(972px, 94vw) rather than auto: an auto width on an absolutely-positioned box is resolved via shrink-to- fit against its CONTAINING block's own width (here, .main- navigation — see Round 8's note on why that's the positioning ancestor) — and .main-navigation is itself only as wide as its nav links need to be, not the leftover header space, so shrink-to-fit clamped the menu down to that much narrower figure on every viewport, wrapping every column's text unnecessarily. A definite width sidesteps that: 972px is the exact sum of the 4 columns' caps (240+310+150+180=880) + 3 gaps (16px, 48) + the box's own left/right padding (22px, 44) — so at full size every column gets its full cap with nothing left over and nothing overflowing, and the 94vw fallback still shrinks the box (and, via minmax, its columns) safely on narrower screens without changing the sizing quirk above. */ position: absolute; top: 100%; right: 0; left: auto; width: min(972px, 94vw); background: var(--wt-bg); border: none; border-radius: 22px; box-shadow: var(--wt-shadow-lg); padding: 22px; z-index: 50; display: grid; grid-template-columns: minmax(min-content, 240px) minmax(min-content, 310px) minmax(min-content, 150px) minmax(min-content, 180px); gap: 16px; /* Round 9 — was align-items: start, which let each column shrink to its own content height. With Connectivity/Hardware holding 2 items and ICT holding 4, that produced 4 visibly different-height tiles (a jagged bottom edge) instead of 4 matching "boxes". Stretch makes every column fill the row's full height — set by whichever column is tallest — so all four read as the same shape. */ align-items: stretch; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; } .nav-menu li:hover > .mega-menu, .nav-menu li:focus-within > .mega-menu, .nav-menu li.submenu-open > .mega-menu { opacity: 1; visibility: visible; transform: translateY(0); } .mega-col { padding: 18px 16px; border-radius: 16px; background: var(--wt-surface); border: 1px solid transparent; } .mega-col--cyan { border-color: color-mix(in srgb, var(--wt-cyan) 45%, transparent); box-shadow: 0 0 26px color-mix(in srgb, var(--wt-cyan) 20%, transparent); } .mega-col--purple { border-color: color-mix(in srgb, var(--wt-purple) 45%, transparent); box-shadow: 0 0 26px color-mix(in srgb, var(--wt-purple) 20%, transparent); } .mega-col-title { display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--wt-purple); margin-bottom: 0.85rem; } .mega-col--cyan .mega-col-title { color: var(--wt-blue-deep); } .mega-col--purple .mega-col-title { color: var(--wt-purple-deep); } .mega-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; } .mega-col li a { display: block; padding: 0.4rem 0.5rem; margin: 0 -0.5rem; border-radius: 8px; font-size: 0.92rem; font-weight: 500; color: var(--wt-ink); line-height: 1.4; } .mega-col li a:hover { color: var(--wt-blue); background: rgba(17,112,214,0.08); } .mega-col li a span[aria-hidden] { opacity: 0.6; font-size: 0.85em; margin-left: 1px; } .mega-item-disabled { display: inline-block; padding: 0.4rem 0.5rem; margin: 0 -0.5rem; font-size: 0.92rem; font-weight: 500; color: var(--wt-ink-3); line-height: 1.4; cursor: default; } .mega-badge { display: inline-block; margin-left: 0.4rem; padding: 2px 8px; border-radius: 999px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: #fff; background: var(--wt-purple); vertical-align: 1px; } /* "Coming Soon" — same rounded-tile treatment as the glow columns, just filled solid navy instead of tinted/glowing, so it still reads as distinct ("not live yet") without needing its own bleed/edge hack. */ /* Round 7 (27 Aug) — tighter padding/type scale than the other 3 tiles (18px 16px / 0.74rem title / 0.92rem items elsewhere) so "Coming Soon" reads as visibly smaller/lower-priority, not just narrower — Soana's boss asked for it to be smaller than the rest of the groups, and a narrower column alone (see .nav-menu .mega-menu's grid-template- columns) wasn't going to carry that on its own once the badge text is accounted for. */ .mega-col--panel { background: var(--wt-navy); border-color: transparent; padding: 14px 14px; } .mega-col--panel .mega-col-title { color: var(--wt-on-dark); font-size: 0.68rem; margin-bottom: 0.6rem; } .mega-col--panel .mega-col-desc { display: block; font-size: 0.72rem; color: var(--wt-on-dark-2); margin: -0.35rem 0 0.7rem; } .mega-col--panel .mega-item-disabled { color: var(--wt-on-dark-2); font-size: 0.85rem; padding: 0.3rem 0.4rem; margin: 0 -0.4rem; } .mega-col--panel .mega-badge { background: var(--wt-cyan); color: var(--wt-navy); font-size: 0.62rem; padding: 1px 7px; } .mega-col--panel ul { gap: 0.35rem; } /* "View all Services and Plans" — first tried as a quiet text row under the last tile; Soana asked for it at the top instead, as an actual focal point. Now the first thing the dropdown shows: a bold gradient banner using the site's existing .btn-gradient treatment (the cyan- blue-purple gradient reserved sitewide as "one primary action to stand out", see that rule's own note above) rather than a new pattern invented just for this menu. Scoped as ".mega-menu .mega-menu-cta" (not the bare class) so this out-specifies the site's ".nav-menu a" rule, which styles top-level nav links for the navy bar (light text) — without the extra ".mega-menu" ancestor, that rule would win here. */ .mega-menu .mega-menu-cta { /* Round 7 (27 Aug) — the menu's 4 groups now sit side by side in explicit grid columns instead of stacking full-width, so this banner (still meant to run the full width of the dropdown, above every group) needs an explicit span across all of them — without it, grid auto-placement would drop it into column 1 alone. */ grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 14px; padding: 14px 18px; border-radius: 16px; background: var(--wt-grad); box-shadow: 0 10px 26px rgba(90,35,160,0.35); font-family: var(--wt-font-display); font-size: 1rem; font-weight: 700; color: #fff; text-decoration: none; transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .mega-menu .mega-menu-cta:hover { /* Redeclares background (not just filter) -- ".nav-menu a:hover" (the navy-bar link hover state) includes the element type "a" in its selector, which out-specifies the *non-hover* ".mega-menu .mega- menu-cta" rule's background on hover even though this hover rule wins everywhere else, silently replacing the gradient with the nav bar's translucent-white hover fill. Restating it here keeps the gradient through the hover state instead. */ color: #fff; filter: brightness(1.08); box-shadow: 0 14px 32px rgba(90,35,160,0.42); background: var(--wt-grad); transform: translateY(-1px); } .mega-menu .mega-menu-cta-arrow { transition: transform 0.15s ease; } .mega-menu .mega-menu-cta:hover .mega-menu-cta-arrow { transform: translateX(3px); } /* Round 7 (27 Aug) had a 2x2 fallback grid here for the 861-1180px band, because the dropdown was anchored to the "Services and Plans"
  • itself and that item's on-screen position shifts as the fluid header narrows, pushing the full 940px-wide row off the left edge of the viewport in that range. Round 8 (27 Aug) fixes this at the root instead — see .main-navigation's "position: relative" and ".nav-menu li.menu-item-has-children { position: static; }" above — by re-anchoring the dropdown to the header's stable inner-right edge rather than to one nav item's drifting position. Soana's boss wanted one row, not a 2x2 fallback, and re-anchoring keeps the single 4-across row viable all the way down to the 861px mobile-flyout handoff, so this breakpoint override is no longer needed. Confirmed via the same Playwright bounding-box sweep across 861-1440px — zero overflow. */ .submenu-toggle { display: none; } .menu-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 40px; margin-left: auto; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3); border-radius: 10px; cursor: pointer; } .menu-toggle-bars { display: grid; gap: 4px; } .menu-toggle-bars span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; } .nav-open .menu-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-open .menu-toggle-bars span:nth-child(2) { opacity: 0; } .nav-open .menu-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ---------- Hero ---------- Full-bleed cover hero: the carousel images sit as an absolutely- positioned background layer spanning the whole section, a dark scrim sits above them for text contrast, and the copy is left-aligned on top — the header stays a normal solid bar above this section. */ .hero-overlay-page .hero { /* Pulls the hero up to close the gap the (now-transparent) header would normally occupy, so the header floats directly on the photo instead of sitting above it. The header itself keeps its normal sticky flow/ height — this is purely a visual overlap via z-index (.site-header is z-index:100, well above the hero's own stacking), not an absolute-positioning hack. 30 Aug 2026 — the utility bar lives inside #masthead (see header.php), so the header's total floating height is whatever utility-bar + nav-row actually render at. Reverted the same day from the "Network Dock" floating-card treatment back to a flush "Network Rail" bar — the card's own vertical padding is gone, so this value (and the phone-wrap exception below) was re-measured against the real markup, not carried over from the old numbers. The 861-1080px exception that used to exist here is gone too — that band only ever compensated for the floating card, and the flush bar doesn't change height in that range. My WanTok moving back into the utility bar also widened it enough to push the phone/email wrap point from 459px up to ~572px (measured, not guessed) — the exception below now triggers there instead. See wantok_header_network_rail_revert_30aug.md. */ margin-top: -114px; } @media (max-width: 572px) { .hero-overlay-page .hero { margin-top: -142px; } } .hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: min(88vh, 760px); color: var(--wt-on-dark); } .hero-bg { position: absolute; inset: 0; z-index: 0; background: var(--wt-navy); } /* Hero carousel — calmed down 14 July at Soana's request ("minimal, not overbearing"). This used to be a jagged kupesi-zigzag clip-path wipe plus a light streak sweeping the seam; both are gone now. Once each slide carried its own real copy (not one shared heading), that fast, busy transition was one motion too many on top of the text changing — so the whole thing steps down to a single plain opacity crossfade, and the only other movement left is a very slow, subtle zoom (ambient, not an "event" — nothing to notice happening, just a photo that feels alive) that settles right as the slide's turn ends. JS only ever toggles .is-active — no clip-path interpolation, no separate sweep element, no wipe timer to babysit. Falls back to the first slide only if JS never runs; the zoom is dropped entirely under reduced motion. */ .hero-carousel { position: absolute; inset: 0; z-index: 1; overflow: hidden; } .hero-carousel-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 0; transform: scale(1.04); transition: opacity 1.4s ease, transform 7s linear; } .hero-carousel-slide.is-active { opacity: 1; z-index: 2; transform: scale(1); } .hero-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: /* Top blend (14 July): fades the utility-bar/nav's solid navy down into the carousel photo, so the transparent header doesn't cut hard against the image — the hero now reads as emerging from behind the navy bar rather than starting abruptly beneath it. */ linear-gradient(180deg, rgba(12,19,48,0.92) 0%, rgba(12,19,48,0.55) 8%, rgba(12,19,48,0) 20%), linear-gradient(100deg, rgba(6,10,26,0.90) 0%, rgba(6,10,26,0.72) 30%, rgba(6,10,26,0.32) 56%, rgba(6,10,26,0.08) 76%), /* Bottom floor (14 July, hardened for the on-photo trust ribbon): deeper than the old 0.55 flat stop so the ribbon's text has a guaranteed dark floor to sit on across all 3 slides, not just whichever one happens to be dim there already. Mirrors the top blend above — the hero now has a deliberate top-and-bottom vignette bookending the photo instead of one-off patchwork. */ linear-gradient(0deg, rgba(6,10,26,0.85) 0%, rgba(6,10,26,0.5) 16%, transparent 36%); } .hero-carousel-dots { /* Homepage revamp (embed pass) — Soana: move the dots to bottom-middle at every width (they'd only lived on the left-edge rail ≥980px, reverting to a bottom-center row below that — see the removed 980px override that used to do this repositioning, folded into this base rule instead) and bump them up one size step (8px dot/8px padding → 10px dot/9px padding) so they read clearly as controls without turning into a distracting row of large blobs over the photo. .hero-copy-stack/.hero-actions no longer need a left offset to clear a rail that isn't there any more (see below). */ position: absolute; z-index: 3; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; flex-direction: row; align-items: center; gap: 12px; } .hero-carousel-dots::before { /* Hairline rail behind the dots — without it the dots read as loose marks floating in the photo; the line ties them into one component (a track you move a position along). Sized to the dot row's own width via inset:0 so it never needs separate tuning when a slide is added. */ content: ""; position: absolute; inset: 0; margin: auto; background: rgba(255,255,255,0.32); height: 1px; } .hero-carousel-dot { /* A real