/* WChannels — the public marketing site. * * The foundation (typeface, palette, spacing, radii, elevation) comes from * tokens.css, the same file the console and the client portal load. This file * carries only what a marketing page needs and the console does not: a sticky * site header, section rhythm, card grids, a comparison table and forms. * * It deliberately does NOT link style.css — that file defines .btn, .stat, * .stats, .vid and .empty for console widgets of the same name. Load order is * tokens.css then site.css. * * Bilingual by construction: every rule that would hard-code a side uses * logical properties (margin-inline, padding-inline, text-align:start), so * switching to rtl for Arabic mirrors the page without a second * stylesheet. i18n.js flips the attribute; nothing here needs to know which * language is showing. */ *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ font-family:var(--sans); background:var(--bg0); color:var(--ink); overflow-x:hidden; line-height:var(--lh); -webkit-font-smoothing:antialiased; } /* The console honours this; the landing page animates continuously — drifting glows, a bobbing scroll hint, hover lifts — so it has to honour it louder. */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ animation:none !important; transition:none !important; } } a{ color:var(--violet-2); text-decoration:none; } /* The browser's default selection is a saturated blue that swallows text on a dark ground — highlight anything and it becomes hard to read. */ ::selection{ background:color-mix(in srgb, var(--violet) 78%, transparent); color:#fff; } ::-moz-selection{ background:color-mix(in srgb, var(--violet) 78%, transparent); color:#fff; } a:hover{ color:var(--ink); } :focus-visible{ outline:2px solid var(--violet-2); outline-offset:3px; border-radius:var(--r-1); } img{ max-width:100%; } /* Arabic is set in the same Plex family for Latin fallback, but the Arabic glyphs come from whatever the reader's system provides — Plex Sans Arabic is not vendored here, and a webfont we do not ship is a webfont that does not arrive. The stack below covers macOS/iOS, Windows and Android. */ :root[dir="rtl"] body{ font-family:"Noto Naskh Arabic","Geeza Pro","Segoe UI",Tahoma,"Plex Sans",system-ui,sans-serif; line-height:1.75; } :root[dir="rtl"] .tagline, :root[dir="rtl"] .wordmark, :root[dir="rtl"] .overline{ letter-spacing:normal; text-indent:0; } /* Parked above the viewport rather than off to one side: an element pushed 9999px past the inline edge is invisible in LTR but adds 9999px of scrollable width in RTL, which is a horizontal scrollbar across the whole Arabic site. */ .skip-link{ position:absolute; inset-inline-start:0; top:-64px; z-index:100; background:var(--violet); color:#fff; padding:10px 16px; border-radius:0 0 var(--r-2) 0; } .skip-link:focus{ top:0; } /* ---------- ambient ground (aurora.js paints into .glow) ------------------ */ /* The CSS fallback mirrors the shader's staging: blue raking from the left, violet from the right, a shaft up the middle, black everywhere else. */ .glow{ position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; background: radial-gradient(1100px 520px at 4% 58%, color-mix(in srgb, var(--lite-b) 30%, transparent), transparent 62%), radial-gradient(1100px 520px at 96% 54%, color-mix(in srgb, var(--lite-v) 28%, transparent), transparent 62%), radial-gradient(520px 760px at 50% 30%, color-mix(in srgb, var(--lite-b) 12%, transparent), transparent 70%), radial-gradient(900px 420px at 50% 104%, color-mix(in srgb, var(--aur-3) 16%, transparent), transparent 70%); } .glow canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; } /* On a phone the beams cross the body copy rather than passing behind it — there is no room for them to miss it — so the whole ground is damped. */ @media (max-width:640px){ .glow{ opacity:.72; } } /* The floor the logo art stands on: a receding grid, brighter towards the viewer, fading out at the horizon so it reads as depth rather than as a pattern laid over the page. */ .grid-floor{ position:fixed; left:-10%; right:-10%; bottom:0; height:42vh; z-index:0; pointer-events:none; opacity:.5; background-image: linear-gradient(rgba(120,190,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(150,120,255,.14) 1px, transparent 1px); background-size:52px 52px; transform:perspective(420px) rotateX(66deg); transform-origin:bottom; -webkit-mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,.55) 42%, transparent 88%); mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,.55) 42%, transparent 88%); } main{ position:relative; z-index:1; } /* ---------- site header --------------------------------------------------- */ .site-head{ position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:var(--sp-4); padding:12px clamp(16px,4vw,40px); background:color-mix(in srgb, var(--bg0) 82%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--brd); } .site-head .brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.18em; color:var(--ink); } .site-head .brand .mk{ width:30px; height:30px; display:grid; place-items:center; border-radius:9px; font-weight:900; background:linear-gradient(150deg,var(--aur-1),var(--aur-2)); color:#0b0820; } .site-nav{ display:flex; align-items:center; gap:var(--sp-5); margin-inline-start:auto; flex-wrap:wrap; } .site-nav a{ color:var(--ink-2); font-size:14px; font-weight:500; } .site-nav a:hover{ color:var(--ink); } @media (max-width:920px){ .site-nav .hide-sm{ display:none; } } /* Between roughly a small laptop and the phone breakpoint the bar runs out of room and wraps into two rows. Tighten the spacing first, then drop the one link a prospect does not need — the client portal, which is in every footer and is only ever used by people who already have an account. */ @media (max-width:1140px){ .site-nav{ gap:16px; } .site-nav a{ font-size:13.5px; } } @media (max-width:1024px){ .site-nav .hide-md{ display:none; } } /* Below this the brand, the language switch and the call to action stop fitting on one line and the header wraps into an L shape. Shrink all three rather than let it. */ @media (max-width:520px){ .site-head{ gap:8px; padding:10px 14px; } .site-head .brand{ font-size:13.5px; letter-spacing:.1em; gap:8px; } .site-head .brand .mk{ width:26px; height:26px; border-radius:8px; font-size:14px; } .site-nav{ gap:8px; flex-wrap:nowrap; } .lang-btn{ padding:6px 11px; font-size:12px; } .site-head .btn.sm{ padding:8px 14px; font-size:13px; } } /* On the narrowest phones the mark alone carries the brand, so "Request a quote" keeps one line — a wrapped call to action reads as a mistake. */ @media (max-width:430px){ .site-head .brand .bn{ display:none; } } @media (max-width:360px){ .site-head{ padding:10px 10px; } .lang-btn{ padding:5px 9px; font-size:11.5px; } .site-head .btn.sm{ padding:7px 11px; font-size:12.5px; } } .lang-btn{ border:1px solid var(--brd-2); background:rgba(255,255,255,.04); color:var(--ink-2); border-radius:var(--r-pill); padding:7px 14px; font:600 13px/1 var(--sans); cursor:pointer; transition:var(--dur-1) var(--ease); } .lang-btn:hover{ color:var(--ink); border-color:var(--violet-2); } /* ---------- buttons ------------------------------------------------------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; padding:13px 26px; border-radius:var(--r-pill); font-weight:700; font-size:15px; border:1px solid transparent; cursor:pointer; transition:var(--dur-2) var(--ease); text-align:center; } .btn.primary{ background:var(--violet); color:#fff; box-shadow:var(--lift); } .btn.primary:hover{ transform:translateY(-2px); box-shadow:var(--lift-2); color:#fff; } .btn.ghost{ border-color:var(--brd-2); color:var(--ink-2); background:rgba(255,255,255,.03); } .btn.ghost:hover{ border-color:var(--violet-2); color:var(--ink); } .btn.sm{ padding:9px 18px; font-size:13.5px; } .btn[disabled]{ opacity:.55; cursor:progress; transform:none; } /* ---------- hero ---------------------------------------------------------- */ /* .pre-motion is set in and cleared by site-motion.js (and by a timer, and it is skipped under reduced motion) — three ways for the hero never to be stranded invisible. */ .pre-motion .w-mark, .pre-motion .wordmark, .pre-motion .tagline, .pre-motion .hero-rule, .pre-motion .cta-row, .pre-motion .scroll-hint{ opacity:0; } .hero{ position:relative; min-height:min(88vh,860px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:56px 20px 40px; } /* The two beams cross the middle of the hero, which is exactly where the lede sits — words landing on the cyan core turned cyan and stopped reading as text. This puts a soft dark base under the copy only; the beams still play around it. */ .hero::before{ content:""; position:absolute; z-index:-1; left:50%; top:50%; transform:translate(-50%,-50%); width:min(1100px,96vw); height:min(760px,86%); background:radial-gradient(closest-side, rgba(3,5,14,.82), rgba(3,5,14,.55) 58%, transparent 100%); pointer-events:none; } .w-mark{ font-size:clamp(96px,18vw,190px); font-weight:900; line-height:.9; letter-spacing:-.04em; background:linear-gradient(150deg,var(--aur-1) 0%,#e9e2ff 38%,var(--aur-2) 66%,var(--aur-3) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 42px color-mix(in srgb, var(--aur-1) 42%, transparent)) drop-shadow(0 0 110px color-mix(in srgb, var(--aur-2) 34%, transparent)); } /* --beat is written by brand-beat.js, 0..1, either from the analyser reading the real track or from the silent metronome before sound is turned on. Both the scale and the glow read from it, so the mark breathes as one thing. */ /* Three bands, written by brand-beat.js, each moving a different part of the mark: --beat is the kick (scale and bloom), --beat-mid the body of the track (rim brightness), --beat-high the hats (sparkle). Before sound is turned on the metronome writes --beat alone, so the mark still breathes. */ .w-mark{ --beat:0; --beat-mid:0; --beat-high:0; line-height:0; } .w-svg{ display:block; width:clamp(190px,30vw,380px); height:auto; margin-inline:auto; transform:scale(calc(1 + var(--beat) * 0.035)); will-change:transform; overflow:visible; } .w-svg .w-halo{ opacity:calc(0.20 + var(--beat) * 0.50); } .w-svg .w-glow{ opacity:calc(0.34 + var(--beat) * 0.52); } .w-svg .w-edge{ opacity:calc(0.86 + var(--beat-mid) * 0.14); } .w-svg .w-sheen{ opacity:calc(0.60 + var(--beat-mid) * 0.40); } .w-svg .w-flare{ opacity:calc(0.42 + var(--beat-high) * 0.58); } /* The image path stays supported: config.brandMark still replaces the drawing with the rendered logo art if one is ever supplied. */ .w-mark.has-img .w-svg{ display:none; } .w-mark.has-img img{ display:block; width:clamp(190px,30vw,380px); height:auto; margin-inline:auto; transform:scale(calc(1 + var(--beat) * 0.035)); filter:drop-shadow(0 0 calc(26px + var(--beat) * 60px) color-mix(in srgb, var(--aur-1) calc(28% + var(--beat) * 34%), transparent)) drop-shadow(0 0 calc(60px + var(--beat) * 90px) color-mix(in srgb, var(--aur-2) calc(20% + var(--beat) * 30%), transparent)); } /* One-shot flare per detected kick — a transition cannot do this, because the next kick has to be able to interrupt the previous one. */ @keyframes wkick{ 0%{ transform:scale(1.05); } 100%{ transform:scale(1); } } .w-mark.kick .w-svg, .w-mark.kick img{ animation:wkick 260ms var(--ease); } /* The sound control sits under the hero's buttons: never autoplaying, always saying which state it is in. */ .beat-btn{ margin:18px auto 0; display:block; border:1px solid var(--brd-2); background:rgba(255,255,255,.03); color:var(--ink-2); border-radius:var(--r-pill); padding:8px 18px; font:600 13px/1 var(--sans); cursor:pointer; transition:var(--dur-1) var(--ease); } .beat-btn:hover{ color:var(--ink); border-color:var(--violet-2); } .beat-btn[aria-pressed="true"]{ border-color:var(--violet); color:var(--ink); } @media (prefers-reduced-motion:reduce){ .w-mark{ transform:none; } } .wordmark{ font-weight:800; font-size:clamp(26px,5vw,44px); letter-spacing:.34em; margin-top:14px; text-indent:.34em; background:linear-gradient(90deg,var(--ink),#cfc4f5); -webkit-background-clip:text; background-clip:text; color:transparent; } .tagline{ margin-top:12px; font-size:clamp(12px,2.2vw,15px); letter-spacing:.34em; text-indent:.34em; color:var(--ink-2); font-weight:600; } .tagline b{ background:linear-gradient(90deg,var(--aur-1),var(--aur-2),var(--aur-3)); -webkit-background-clip:text; background-clip:text; color:transparent; } .hero-rule{ margin-top:20px; width:min(420px,70vw); height:2px; border-radius:2px; background:linear-gradient(90deg,transparent,var(--aur-1),var(--aur-2),transparent); box-shadow:0 0 22px color-mix(in srgb, var(--aur-2) 55%, transparent); } .hero-lede{ margin-top:24px; max-width:760px; font-size:clamp(15px,2.4vw,19px); color:var(--ink); text-shadow:0 1px 18px rgba(3,5,14,.9); } .cta-row{ margin-top:30px; display:flex; gap:14px; flex-wrap:wrap; justify-content:center; } .scroll-hint{ margin-top:44px; color:var(--dim); font-size:12px; letter-spacing:.2em; animation:bob 2.4s ease-in-out infinite; } @keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(7px); } } /* ---------- section rhythm ------------------------------------------------ */ /* scroll-margin keeps an anchored section's heading clear of the sticky header — without it, #packages lands with its title under the bar. */ section{ max-width:1120px; margin:0 auto; padding:clamp(56px,8vw,88px) clamp(18px,4vw,24px); scroll-margin-top:88px; } section.narrow{ max-width:880px; } .overline{ display:block; text-align:center; font-size:var(--fs-1); letter-spacing:var(--track-wide); text-transform:uppercase; color:var(--dim); margin-bottom:10px; } .sec-t{ font-size:clamp(23px,4vw,34px); font-weight:800; text-align:center; margin-bottom:12px; line-height:1.25; background:linear-gradient(90deg,#e8ecff,#b9c3ef); -webkit-background-clip:text; background-clip:text; color:transparent; } .sec-sub{ text-align:center; color:var(--dim); font-size:clamp(14px,2vw,16px); max-width:720px; margin:0 auto 40px; } .sec-note{ text-align:center; color:var(--dim); font-size:14px; margin-top:28px; } .sec-note b{ color:var(--ink-2); } /* ---------- cards --------------------------------------------------------- */ /* min(x,100%) rather than a bare track minimum: on a 320px phone a 320px minimum is wider than the column it sits in, and the card overflows the page. The min() clamps it to the space that actually exists. */ .cards{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); } .cards.two{ grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); } .cards.four{ grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr)); } .card{ border:1px solid var(--brd); border-radius:var(--r-4); padding:26px 24px; text-align:start; background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015)),var(--bg1); box-shadow:var(--sh-1), inset 0 1px 0 rgba(255,255,255,.07); transition:var(--dur-2) var(--ease); } .card:hover{ transform:translateY(-3px); border-color:var(--brd-2); box-shadow:var(--sh-2); } .card h3{ font-size:var(--fs-5); font-weight:700; margin-bottom:8px; color:var(--ink); } .card p{ color:var(--ink-2); font-size:15px; } .card .ico{ font-size:24px; line-height:1; margin-bottom:14px; display:block; } .card .num{ font-size:13px; font-weight:800; letter-spacing:.1em; color:var(--violet-2); display:block; margin-bottom:10px; } .card ul{ margin-top:12px; padding-inline-start:18px; color:var(--ink-2); font-size:14.5px; } .card li{ margin-bottom:6px; } /* the three council members read as one row of equals */ .member .who{ font-size:var(--fs-1); letter-spacing:var(--track-wide); text-transform:uppercase; color:var(--dim); display:block; margin-bottom:6px; } .member h3 em{ font-style:normal; color:var(--violet-2); } /* A Lottie host reserves its own height so the section does not jump when the animation arrives — and collapses to nothing on a phone, where it is the first thing worth cutting. */ .lottie{ width:min(600px,100%); height:130px; margin:0 auto 34px; } .lottie svg{ display:block; width:100%; height:100%; } @media (max-width:640px){ .lottie{ display:none; } } /* ---------- the loop ------------------------------------------------------ */ /* Four across, two rows: eight stations that each have room to say what they actually do. Below 900px they stack into one column and read as a list. */ .loop{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); } .step{ border:1px solid var(--brd); border-radius:var(--r-3); padding:18px 17px 19px; background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.01)),var(--bg1); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); transition:var(--dur-2) var(--ease); } .step:hover{ border-color:var(--brd-2); transform:translateY(-2px); } .step-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; } .step .n{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex:none; font-size:12px; font-weight:800; color:#05070f; background:linear-gradient(150deg,var(--aur-1),var(--aur-2)); } /* The icon is the illustration: one stroked drawing per station, inheriting the accent so it lights with the card when the loop plays. */ .stp-ic{ width:26px; height:26px; flex:none; fill:none; stroke:var(--violet-2); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:.85; transition:var(--dur-2) var(--ease); } .step:hover .stp-ic, .step.is-lit .stp-ic{ stroke:var(--aur-1); opacity:1; } .step h4{ font-size:15.5px; font-weight:700; margin-bottom:6px; color:var(--ink); } .step p{ font-size:13px; line-height:1.6; color:var(--ink-2); } .icon-sprite{ position:absolute; width:0; height:0; overflow:hidden; } /* The rail fills as the pinned loop plays. It is decorative: with no JS it simply sits empty, which is why it carries aria-hidden. */ .loop-rail{ height:2px; border-radius:2px; background:var(--brd); margin:0 4px 18px; overflow:hidden; } .loop-rail span{ display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:left center; background:linear-gradient(90deg,var(--aur-1),var(--aur-2),var(--aur-3)); } :root[dir="rtl"] .loop-rail span{ transform-origin:right center; } /* Lit by GSAP as each station comes up. Never set from CSS: a visitor with the script blocked must see all eight stations at full strength. */ .step.is-lit{ border-color:var(--violet-2); box-shadow:var(--lift); } .step.is-lit .n{ box-shadow:0 0 18px color-mix(in srgb, var(--aur-2) 70%, transparent); } /* ---------- highlight band ------------------------------------------------ */ .band{ margin-top:28px; border:1px solid var(--brd-2); border-radius:var(--r-4); padding:24px 26px; text-align:center; background:linear-gradient(120deg, color-mix(in srgb, var(--violet) 22%, var(--bg1)), var(--bg1)); box-shadow:var(--sh-glass); } .band b{ font-size:clamp(17px,3vw,22px); font-weight:800; color:var(--ink); display:block; } .band span{ display:block; margin-top:8px; color:var(--ink-2); font-size:15px; } .equation{ display:flex; align-items:center; justify-content:center; gap:clamp(12px,3vw,28px); flex-wrap:wrap; margin-bottom:26px; } .equation .term{ text-align:center; } .equation .term .v{ font-size:clamp(30px,6vw,52px); font-weight:900; line-height:1; background:linear-gradient(180deg,#fff,var(--aur-2)); -webkit-background-clip:text; background-clip:text; color:transparent; } .equation .term .k{ display:block; margin-top:6px; font-size:13px; color:var(--dim); } .equation .op{ font-size:clamp(20px,4vw,32px); color:var(--dim); font-weight:300; } /* ---------- comparison table --------------------------------------------- */ .table-wrap{ overflow-x:auto; border:1px solid var(--brd); border-radius:var(--r-4); background:var(--bg1); } table.compare{ width:100%; border-collapse:collapse; min-width:560px; } table.compare th, table.compare td{ padding:16px 18px; text-align:start; border-bottom:1px solid var(--brd); font-size:15px; } table.compare thead th{ font-size:var(--fs-2); letter-spacing:var(--track); text-transform:uppercase; color:var(--dim); font-weight:600; } table.compare tbody th{ font-weight:600; color:var(--ink-2); width:1%; white-space:nowrap; } table.compare td.old{ color:var(--dim); } table.compare td.new{ color:var(--ink); font-weight:600; } table.compare td.new b{ color:var(--aur-1); } table.compare tr:last-child td, table.compare tr:last-child th{ border-bottom:0; } /* ---------- packages ------------------------------------------------------ */ .pack{ position:relative; display:flex; flex-direction:column; } .pack.featured{ border-color:var(--violet-2); box-shadow:var(--lift); } .pack .tag{ position:absolute; top:-11px; inset-inline-start:24px; background:var(--violet); color:#fff; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:4px 12px; border-radius:var(--r-pill); } .pack .price{ font-size:15px; font-weight:700; color:var(--violet-2); margin:4px 0 12px; } .pack .btn{ margin-top:auto; align-self:start; } /* ---------- clients ------------------------------------------------------- */ .clients{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr)); } .client{ display:flex; align-items:center; justify-content:center; min-height:92px; padding:20px 18px; border:1px solid var(--brd); border-radius:var(--r-3); background:var(--bg1); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); color:var(--ink-2); text-align:center; transition:var(--dur-2) var(--ease); } a.client:hover{ color:var(--ink); border-color:var(--brd-2); transform:translateY(-2px); box-shadow:var(--sh-2); } .cl-name{ font-size:16px; font-weight:700; letter-spacing:.04em; } /* Client logos come in every colour and most of them are drawn for white backgrounds. Muting them to the page's own ink keeps the strip from looking like a jumble, and hover returns the real thing. */ .cl-logo{ max-width:100%; max-height:52px; width:auto; height:auto; display:block; filter:brightness(0) invert(1) opacity(.72); transition:var(--dur-2) var(--ease); } a.client:hover .cl-logo{ filter:none; } /* ---------- films, reels and the facade player ---------------------------- */ /* A facade is a still and a play button; the iframe replaces it on click. Both states have to occupy exactly the same box or the page jumps under the visitor's cursor at the moment they press play — hence the aspect-ratio on the card and the absolute fill on both children. */ .films{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); } .facade{ position:relative; border:1px solid var(--brd); border-radius:var(--r-4); overflow:hidden; background:var(--bg1); box-shadow:var(--sh-1); transition:var(--dur-2) var(--ease); } .facade.wide{ aspect-ratio:16/9; } .facade.tall{ aspect-ratio:9/16; } .facade:hover{ transform:translateY(-3px); border-color:var(--violet-2); box-shadow:var(--lift); } .facade-btn{ position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; cursor:pointer; background:#0d1030; display:block; } .facade-btn img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.86; transition:var(--dur-2) var(--ease); } .facade-btn:hover img{ opacity:1; transform:scale(1.03); } .facade iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } /* The play badge is drawn, not an image: one less request, and it takes the accent colour from the tokens like everything else. */ .facade .play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:58px; height:58px; border-radius:50%; background:color-mix(in srgb, var(--violet) 88%, transparent); box-shadow:var(--lift); pointer-events:none; transition:var(--dur-2) var(--ease); } .facade .play::after{ content:""; position:absolute; top:50%; left:54%; transform:translate(-50%,-50%); border-style:solid; border-width:11px 0 11px 18px; border-color:transparent transparent transparent #fff; } .facade-btn:hover ~ .play, .facade-btn:hover .play{ transform:translate(-50%,-50%) scale(1.08); } .facade-cap{ position:absolute; inset-inline:0; bottom:0; padding:14px 14px 12px; pointer-events:none; background:linear-gradient(180deg,transparent,rgba(5,3,15,.86)); } .facade-cap .t{ display:block; font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.4; } .facade-cap .m{ display:block; margin-top:5px; font-size:12px; color:var(--dim); } /* tenant tabs */ .tabs{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:22px; } .tab{ border:1px solid var(--brd-2); background:rgba(255,255,255,.03); color:var(--ink-2); border-radius:var(--r-pill); padding:9px 20px; font:600 14px/1 var(--sans); cursor:pointer; transition:var(--dur-1) var(--ease); } .tab:hover{ color:var(--ink); border-color:var(--violet-2); } .tab.active{ background:var(--violet); border-color:var(--violet); color:#fff; box-shadow:var(--lift); } /* The reel scrolls sideways and snaps, which is what a phone already does well — no carousel library, no 50KB, and the native momentum is better than any re-implementation of it. Cards are 9:16 because the product is Shorts. */ .reel{ /* flex-start, not the default stretch: a 16:9 long-form card in a row of 9:16 Shorts would otherwise be stretched to their height and lose its ratio. */ display:flex; align-items:flex-start; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 4px 18px; scrollbar-width:thin; scrollbar-color:var(--brd-2) transparent; } .reel.hidden{ display:none; } .reel::-webkit-scrollbar{ height:8px; } .reel::-webkit-scrollbar-thumb{ background:var(--brd-2); border-radius:999px; } .reel .facade{ flex:0 0 auto; width:min(232px,62vw); scroll-snap-align:center; } .reel .facade.wide{ width:min(400px,86vw); } .reel .facade .play{ width:46px; height:46px; } .reel .facade .play::after{ border-width:9px 0 9px 15px; } /* ---------- live figures + showcase (ids read by site-motion.js) ---------- */ .stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr)); gap:16px; } .stat{ border:1px solid var(--brd); border-radius:var(--r-4); padding:28px 20px; text-align:center; background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015)),var(--bg1); box-shadow:var(--sh-1), inset 0 1px 0 rgba(255,255,255,.07); } .stat .v{ font-size:clamp(28px,5vw,42px); font-weight:900; font-variant-numeric:tabular-nums; background:linear-gradient(180deg,#fff,var(--aur-2)); -webkit-background-clip:text; background-clip:text; color:transparent; } .stat .k{ margin-top:8px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); } .empty{ text-align:center; color:var(--dim); padding:28px; border:1px dashed var(--brd); border-radius:var(--r-3); } /* ---------- the deck viewer (deck.html) ----------------------------------- */ .deck-sec{ max-width:1120px; margin:0 auto; padding:clamp(32px,5vw,56px) clamp(14px,3vw,24px) 60px; } .deck-stage{ position:relative; margin:0 auto; border:1px solid var(--brd); border-radius:var(--r-4); overflow:hidden; background:#05030f; box-shadow:var(--sh-2); aspect-ratio:1376/768; } .deck-stage img{ width:100%; height:100%; object-fit:contain; display:block; } /* In fullscreen the element is the whole screen, which is rarely 16:9 — let the image letterbox instead of cropping the slide's text. */ .deck-stage:fullscreen{ aspect-ratio:auto; width:100vw; height:100vh; border:0; border-radius:0; } .deck-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; border:1px solid var(--brd-2); background:color-mix(in srgb, var(--bg0) 72%, transparent); color:var(--ink); font-size:26px; line-height:1; cursor:pointer; backdrop-filter:blur(6px); transition:var(--dur-1) var(--ease); } .deck-arrow:hover{ background:var(--violet); border-color:var(--violet); } .deck-arrow.prev{ inset-inline-start:14px; } .deck-arrow.next{ inset-inline-end:14px; } /* The glyphs are literal ‹ › — in RTL the reading order flips, so swap them. */ :root[dir="rtl"] .deck-arrow.prev, :root[dir="rtl"] .deck-arrow.next{ transform:translateY(-50%) scaleX(-1); } .deck-bar{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:16px; } .deck-cap{ font-size:15px; font-weight:600; color:var(--ink-2); flex:1 1 240px; } .deck-tools{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .deck-count{ font:600 13px/1 var(--mono); color:var(--dim); font-variant-numeric:tabular-nums; } .deck-strip{ display:flex; gap:10px; overflow-x:auto; padding:18px 2px 8px; scrollbar-width:thin; scrollbar-color:var(--brd-2) transparent; } .deck-strip::-webkit-scrollbar{ height:8px; } .deck-strip::-webkit-scrollbar-thumb{ background:var(--brd-2); border-radius:999px; } .thumb{ flex:0 0 auto; width:132px; padding:0; border:1px solid var(--brd); border-radius:var(--r-2); overflow:hidden; background:#05030f; cursor:pointer; opacity:.55; transition:var(--dur-1) var(--ease); } .thumb img{ width:100%; aspect-ratio:1376/768; object-fit:cover; display:block; } .thumb:hover{ opacity:.85; border-color:var(--violet-2); } .thumb.active{ opacity:1; border-color:var(--violet); box-shadow:var(--lift); } /* ---------- forms --------------------------------------------------------- */ .form{ border:1px solid var(--brd); border-radius:var(--r-4); padding:clamp(22px,4vw,34px); background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012)),var(--bg1); box-shadow:var(--sh-glass); } .grid-2{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); } .field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; } .field label{ font-size:13px; font-weight:600; color:var(--ink-2); } .field .hint{ font-size:12px; color:var(--dim); } .field input, .field select, .field textarea{ width:100%; background:var(--well); color:var(--ink); border:1px solid var(--brd); border-radius:var(--r-2); padding:11px 13px; font:400 15px/1.5 var(--sans); transition:var(--dur-1) var(--ease); } .field textarea{ min-height:120px; resize:vertical; } .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--violet-2); box-shadow:var(--ring); } .field input::placeholder, .field textarea::placeholder{ color:var(--dim); } .field select option{ background:var(--bg2); color:var(--ink); } .checks{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr)); } .check{ display:flex; align-items:flex-start; gap:9px; font-size:14px; color:var(--ink-2); cursor:pointer; } .check input{ width:17px; height:17px; margin-top:2px; accent-color:var(--violet); flex:none; } /* The honeypot: a real field to a bot, nothing to a person or a screen reader. Clipped rather than shoved off-screen, for the same RTL reason as .skip-link above — and it must stay in the layout, because a bot that reads display:none skips the trap. */ .hp{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); opacity:0; pointer-events:none; } .form-foot{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:8px; } .form-msg{ font-size:14px; } .form-msg.ok{ color:var(--green); } .form-msg.err{ color:var(--red); } .req{ color:var(--violet-2); } /* the compact e-mail capture that sits inside a section, not on its own page */ .subscribe{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:22px; } .subscribe input{ flex:1 1 280px; max-width:380px; background:var(--well); color:var(--ink); border:1px solid var(--brd); border-radius:var(--r-pill); padding:13px 20px; font:400 15px/1 var(--sans); } .subscribe input:focus{ outline:none; border-color:var(--violet-2); box-shadow:var(--ring); } /* ---------- footer -------------------------------------------------------- */ footer.site-foot{ position:relative; z-index:1; border-top:1px solid var(--brd); padding:40px clamp(18px,4vw,24px) 48px; text-align:center; color:var(--dim); font-size:13.5px; } footer.site-foot .fm{ font-weight:800; letter-spacing:.28em; text-indent:.28em; color:var(--ink-2); margin-bottom:8px; } footer.site-foot a{ color:var(--dim); } footer.site-foot a:hover{ color:var(--ink); } .foot-links{ display:flex; gap:20px; justify-content:center; margin-top:16px; flex-wrap:wrap; } .foot-legal{ margin-top:18px; font-size:12px; color:var(--dim); } /* Visually hidden, still read aloud — used for labels the layout does not need to show (the compare table's corner cell, the subscribe input). */ .sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }