/* WChannels — the public site, redesigned around one story. * * Six named colours, one family in two scripts, one light source, one * scroll-driven stage. Everything else on the page is quiet on purpose. * See docs/redesign-brief.md for the reasoning; this file is that brief * turned into CSS. * * Bilingual by construction: logical properties everywhere, so * mirrors the page. i18n.js flips the attribute; nothing here needs to know. */ /* ---------- fonts: IBM Plex Sans + IBM Plex Sans Arabic, self-hosted ------ */ @font-face{ font-family:"Plex Sans"; src:url("fonts/plex-sans-400.woff2") format("woff2"); font-weight:400; font-display:swap; } @font-face{ font-family:"Plex Sans"; src:url("fonts/plex-sans-500.woff2") format("woff2"); font-weight:500; font-display:swap; } @font-face{ font-family:"Plex Sans"; src:url("fonts/plex-sans-600.woff2") format("woff2"); font-weight:600; font-display:swap; } @font-face{ font-family:"Plex Sans"; src:url("fonts/plex-sans-700.woff2") format("woff2"); font-weight:700; font-display:swap; } @font-face{ font-family:"Plex Mono"; src:url("fonts/plex-mono-400.woff2") format("woff2"); font-weight:400; font-display:swap; } @font-face{ font-family:"Plex Arabic"; src:url("fonts/plex-sans-arabic-400.woff2") format("woff2"); font-weight:400; font-display:swap; unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; } @font-face{ font-family:"Plex Arabic"; src:url("fonts/plex-sans-arabic-500.woff2") format("woff2"); font-weight:500; font-display:swap; unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; } @font-face{ font-family:"Plex Arabic"; src:url("fonts/plex-sans-arabic-600.woff2") format("woff2"); font-weight:600; font-display:swap; unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; } /* ---------- tokens ------------------------------------------------------- */ :root{ --stage:#070A12; /* page ground: blue-black, never flat black */ --backstage:#0E1320; /* panels, the enquiry card, inputs */ --screen:#EEF2F7; /* primary text */ --voice:#9AA6BD; /* secondary text, 6.5:1 on stage */ --key:#3EA6FF; /* the one interactive accent */ --tally:#FF3B4A; /* one element per viewport, only where it means "live" */ --violet:#B53CFF; /* far edge of the beam, and the logo; nowhere else */ --hair:rgba(238,242,247,.12); --hair-2:rgba(238,242,247,.24); --sans:"Plex Arabic","Plex Sans","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif; --mono:"Plex Mono",ui-monospace,"Cascadia Code",Consolas,monospace; --fs-body:1.0625rem; /* 17px */ --fs-small:.9375rem; --fs-h2:clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem); --fs-h1:clamp(2.5rem, 1.1rem + 5vw, 6rem); --measure:62ch; --col:1200px; --gap:clamp(56px, 8vw, 120px); /* section rhythm */ --ease:cubic-bezier(.22,1,.36,1); --dur:220ms; } *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; color-scheme:dark; scroll-padding-top:80px; -webkit-tap-highlight-color:transparent; } body{ font-family:var(--sans); font-size:var(--fs-body); line-height:1.6; background:var(--stage); color:var(--screen); -webkit-font-smoothing:antialiased; overflow-x:hidden; } :root[dir="rtl"] body{ line-height:1.8; } a, button, .btn, summary{ touch-action:manipulation; } a{ color:var(--key); text-decoration:none; } a:hover{ color:var(--screen); } :focus-visible{ outline:2px solid var(--key); outline-offset:4px; } img, video{ max-width:100%; display:block; } ::selection{ background:color-mix(in srgb, var(--key) 60%, transparent); color:#fff; } b, strong{ font-weight:600; } .skip-link{ position:absolute; inset-inline-start:0; top:-64px; z-index:100; background:var(--key); color:#04101d; padding:10px 16px; } .skip-link:focus{ top:0; } /* ---------- the light: one beam, CSS only --------------------------------- */ .beam{ position:fixed; inset:0; z-index:0; pointer-events:none; background: radial-gradient(60vw 70vh at 50% -10%, color-mix(in srgb, var(--key) 22%, transparent), transparent 70%), radial-gradient(40vw 40vh at 100% 110%, color-mix(in srgb, var(--violet) 10%, transparent), transparent 70%); } /* ---------- header ------------------------------------------------------- */ .site-head{ position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px clamp(16px, 4vw, 40px); background:color-mix(in srgb, var(--stage) 78%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--hair); } .brand{ display:flex; align-items:center; gap:10px; color:var(--screen); font-weight:600; letter-spacing:.02em; } .brand .mk{ width:28px; height:28px; display:grid; place-items:center; border-radius:7px; font-weight:700; color:#fff; background:linear-gradient(140deg, var(--key), var(--violet)); } .site-nav{ display:flex; align-items:center; gap:clamp(10px, 2vw, 26px); font-size:var(--fs-small); } .site-nav a{ color:var(--voice); } .site-nav a:hover{ color:var(--screen); } .lang-btn{ background:none; border:1px solid var(--hair-2); color:var(--screen); font:inherit; font-size:var(--fs-small); padding:6px 12px; border-radius:999px; cursor:pointer; } .lang-btn:hover{ border-color:var(--key); } .nav-toggle{ display:none; align-items:center; gap:8px; background:none; border:1px solid var(--hair-2); color:var(--screen); font:inherit; font-size:.8125rem; padding:6px 10px; border-radius:999px; cursor:pointer; } .nav-toggle .bars{ display:inline-grid; gap:3px; } .nav-toggle .bars i{ display:block; width:14px; height:1.5px; background:currentColor; } @media (max-width:760px){ .hide-sm{ display:none; } .nav-toggle{ display:inline-flex; order:1; } .site-nav{ order:2; } .site-head.is-open .site-nav{ position:absolute; top:100%; inset-inline:0; z-index:19; overscroll-behavior:contain; display:grid; gap:4px; padding:12px 16px 20px; background:var(--stage); border-bottom:1px solid var(--hair); max-height:calc(100dvh - 68px); overflow:auto; } .site-head.is-open .site-nav a{ display:block; padding:12px 6px; font-size:1.0625rem; color:var(--screen); border-bottom:1px solid var(--hair); } .site-head.is-open .site-nav .btn{ display:inline-flex; margin-top:10px; border-bottom:0; } .site-head.is-open .hide-sm{ display:block; } .site-head.is-open .lang-btn{ justify-self:start; margin-top:8px; } html.menu-open{ overflow:hidden; } } /* ---------- buttons ------------------------------------------------------ */ .btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:999px; font-weight:500; font-size:var(--fs-small); line-height:1; border:1px solid transparent; transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); cursor:pointer; } .btn.key{ background:var(--key); color:#04101d; } .btn.key:hover{ background:color-mix(in srgb, var(--key) 84%, white); color:#04101d; } .btn.ghost{ border-color:var(--hair-2); color:var(--screen); } .btn.ghost:hover{ border-color:var(--key); color:var(--screen); } .btn.sm{ padding:9px 14px; } /* ---------- layout ------------------------------------------------------- */ main{ position:relative; z-index:1; } .col{ width:min(var(--col), 100% - 2*clamp(16px, 4vw, 40px)); margin-inline:auto; } section{ padding-block:var(--gap); scroll-margin-top:72px; } h1, h2, h3{ font-weight:400; letter-spacing:-.02em; line-height:1.08; text-wrap:balance; } :root[dir="rtl"] h1, :root[dir="rtl"] h2, :root[dir="rtl"] h3{ letter-spacing:0; line-height:1.35; } h2{ font-size:var(--fs-h2); max-width:24ch; } .lede{ color:var(--voice); max-width:var(--measure); margin-top:18px; } .sec-head{ margin-bottom:clamp(28px, 4vw, 48px); } /* ---------- hero: W-Nova in the studio, the title over the dark wall ------- */ .title{ position:relative; padding:0; min-height:calc(100vh - 60px); min-height:calc(100dvh - 60px); display:flex; flex-direction:column; justify-content:space-between; gap:40px; overflow:hidden; isolation:isolate; } .title-art{ position:absolute; inset:0; z-index:-2; } .title-art img{ width:100%; height:100%; object-fit:cover; object-position:72% 50%; } /* the scrim: the studio wall is already dark on the left; this only guarantees the type stays readable when the crop shifts on odd viewports */ .title-scrim{ position:absolute; inset:0; z-index:-1; background: linear-gradient(90deg, color-mix(in srgb, var(--stage) 92%, transparent) 0%, color-mix(in srgb, var(--stage) 70%, transparent) 38%, transparent 62%), linear-gradient(180deg, transparent 55%, var(--stage) 100%); } /* lights on: the studio starts dim and the light comes up once, on load */ .title-veil{ position:absolute; inset:0; z-index:-1; background:var(--stage); opacity:.62; transition:opacity 1600ms var(--ease); pointer-events:none; } .lights-on .title-veil{ opacity:0; } .title-copy > *{ opacity:0; transform:translateY(18px); transition:opacity 700ms var(--ease), transform 900ms var(--ease); } .lights-on .title-copy > *{ opacity:1; transform:none; } .lights-on .title-copy > :nth-child(1){ transition-delay:250ms; } .lights-on .title-copy > :nth-child(2){ transition-delay:520ms; } .lights-on .title-copy > :nth-child(3){ transition-delay:720ms; } @media (prefers-reduced-motion:reduce){ .title-veil{ opacity:0; transition:none; } .title-copy > *{ opacity:1; transform:none; transition:none; } } /* the W breathes: a slow pulse of the blue and violet light where the chrome W stands (right third of the frame), over both the still and the loop */ .title-glow{ position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.55; background: radial-gradient(28vw 34vh at 78% 40%, color-mix(in srgb, var(--key) 55%, transparent), transparent 70%), radial-gradient(24vw 30vh at 92% 52%, color-mix(in srgb, var(--violet) 50%, transparent), transparent 70%); animation:breathe 7s ease-in-out infinite; } @keyframes breathe{ 0%,100%{ opacity:.3; } 50%{ opacity:.55; } } @media (max-width:820px){ .title-glow{ background: radial-gradient(60vw 34vh at 70% 32%, color-mix(in srgb, var(--key) 50%, transparent), transparent 70%), radial-gradient(50vw 30vh at 95% 42%, color-mix(in srgb, var(--violet) 45%, transparent), transparent 70%); } } @media (prefers-reduced-motion:reduce){ .title-glow{ animation:none; opacity:.5; } } /* Arabic mirrors the whole composition: the title sits on the right, so the studio is flipped (the W is symmetric) and Nova and the light move left */ :root[dir="rtl"] .title-art img{ transform:scaleX(-1); } :root[dir="rtl"] .title-scrim{ background: linear-gradient(270deg, color-mix(in srgb, var(--stage) 92%, transparent) 0%, color-mix(in srgb, var(--stage) 70%, transparent) 38%, transparent 62%), linear-gradient(180deg, transparent 55%, var(--stage) 100%); } :root[dir="rtl"] .title-glow{ transform:scaleX(-1); } .title-copy{ padding-top:clamp(56px, 12vh, 140px); } .title-copy > div{ max-width:min(560px, 46%); } .title h1{ font-size:clamp(2.4rem, 1rem + 4.2vw, 5.2rem); max-width:12ch; text-shadow:0 2px 24px rgba(0,0,0,.5); } .brand .mk{ width:34px; height:31px; display:block; background:none; border-radius:0; filter:drop-shadow(0 0 10px color-mix(in srgb, var(--key) 45%, transparent)); } @media (max-width:820px){ /* the portrait is a short opening frame; the offer sits under it on the stage colour, so the headline and the action share the first screen */ .title{ min-height:0; display:block; } .title-art{ display:block; position:relative; inset:auto; z-index:0; height:min(34vh, 280px); overflow:hidden; } .title-art img{ object-position:50% 10%; } .title-scrim, .title-veil, .title-glow{ height:min(34vh, 280px); bottom:auto; } .title-scrim{ background:linear-gradient(180deg, transparent 40%, var(--stage) 100%); } .title-copy{ padding-top:8px; display:flex; flex-direction:column; } .title-copy > div{ max-width:none; } .title h1{ text-shadow:none; font-size:clamp(2rem, 1rem + 5vw, 2.6rem); } /* on a phone the action comes straight after the headline; the description follows */ .title .acts{ order:2; margin-top:18px; } .title .kicker{ order:3; margin-top:18px; font-size:1rem; } } .title h1 .ar{ display:block; font-size:.62em; margin-top:.3em; color:var(--voice); letter-spacing:0; line-height:1.4; text-align:left; } :root[dir="rtl"] .title h1 .ar{ text-align:right; } :root[dir="rtl"] .title h1 .en{ text-align:right; } :root[dir="rtl"] .title h1{ display:flex; flex-direction:column; } :root[dir="rtl"] .title h1 .ar{ order:1; font-size:1em; color:var(--screen); } :root[dir="rtl"] .title h1 .en{ order:2; direction:ltr; text-align:right; } :root[dir="rtl"] .title h1 .en{ display:block; font-size:.5em; margin-top:.4em; color:var(--voice); letter-spacing:-.01em; } .title .kicker{ color:var(--voice); max-width:var(--measure); margin-top:28px; font-size:1.125rem; } .title .acts{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; } /* the strip of real frames under the title (DGC pattern) */ .strip{ position:relative; overflow:hidden; margin-top:24px; padding-block:18px; border-top:1px solid var(--hair); } .strip-track{ display:flex; gap:12px; width:max-content; animation:drift 60s linear infinite; } .strip-track.is-paused{ animation-play-state:paused; } .strip-pause{ position:absolute; inset-inline-start:clamp(16px, 4vw, 40px); bottom:24px; font:400 .8125rem/1 var(--mono); color:var(--voice); background:var(--stage); border:1px solid var(--hair); padding:6px 9px; border-radius:999px; cursor:pointer; } .strip-pause:hover, .strip-pause[aria-pressed="true"]{ color:var(--screen); border-color:var(--key); } .strip:hover .strip-track{ animation-play-state:paused; } .strip img{ height:clamp(96px, 14vw, 168px); aspect-ratio:9/16; object-fit:cover; border-radius:6px; background:var(--backstage); filter:saturate(.85); } .strip .note{ position:absolute; inset-inline-end:clamp(16px, 4vw, 40px); bottom:24px; font:400 .8125rem/1.3 var(--mono); color:var(--voice); background:var(--stage); padding:4px 8px; border:1px solid var(--hair); } @keyframes drift{ to{ transform:translateX(-50%); } } :root[dir="rtl"] .strip-track{ animation-name:drift-rtl; } @keyframes drift-rtl{ to{ transform:translateX(50%); } } /* ---------- the stage ---------------------------------------------------- */ .stage-wrap{ padding:0; height:640vh; position:relative; } /* six scenes + a breath */ .stage{ position:sticky; top:0; height:100vh; height:100dvh; overflow:hidden; display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); align-items:center; gap:clamp(24px, 4vw, 64px); } .stage .col{ display:contents; } .captions{ list-style:none; position:relative; min-height:16rem; } .captions li{ position:absolute; inset-inline:0; top:0; opacity:0; visibility:hidden; } .captions li.is-on{ opacity:1; visibility:visible; } .captions .n{ font:400 .8125rem/1 var(--mono); color:var(--key); display:block; margin-bottom:14px; } .captions h3{ font-size:clamp(1.5rem, 1rem + 1.8vw, 2.25rem); max-width:18ch; } .captions p{ color:var(--voice); margin-top:14px; max-width:44ch; } .progress{ position:absolute; inset-inline-start:0; bottom:8vh; display:flex; gap:6px; } .progress i{ width:28px; height:2px; background:var(--hair-2); display:block; } .progress i.is-on{ background:var(--key); } .artefact{ position:relative; height:min(78vh, 720px); } .a{ position:absolute; inset:0; display:grid; place-items:center; opacity:0; visibility:hidden; } .a.is-on{ opacity:1; visibility:visible; } .card{ background:var(--backstage); border:1px solid var(--hair); border-radius:14px; padding:clamp(20px, 3vw, 32px); width:min(100%, 520px); } .card .meta{ font:400 .8125rem/1.3 var(--mono); color:var(--voice); } .card q{ quotes:none; display:block; font-size:clamp(1.25rem, 1rem + 1.2vw, 1.75rem); line-height:1.3; letter-spacing:-.01em; margin-top:14px; } .card q.ar{ color:var(--voice); font-size:clamp(1.1rem, .9rem + 1vw, 1.5rem); line-height:1.6; margin-top:10px; letter-spacing:0; } .chip{ display:inline-block; font:400 .8125rem/1 var(--mono); color:var(--screen); border:1px solid var(--hair-2); border-radius:999px; padding:7px 11px; } .chip.key{ border-color:var(--key); color:var(--key); } .list{ list-style:none; margin-top:16px; display:grid; gap:8px; color:var(--voice); } .list li{ padding-inline-start:18px; position:relative; } .list li::before{ content:""; position:absolute; inset-inline-start:0; top:.7em; width:8px; height:1px; background:var(--key); } /* scene 3: the script and the client's click */ .script{ display:grid; gap:10px; margin-top:16px; } .script .turn{ display:grid; grid-template-columns:1.6rem 1fr; gap:10px; color:var(--screen); } .script .turn i{ font:400 .8125rem/1.6 var(--mono); color:var(--voice); } .approve{ margin-top:20px; display:flex; align-items:center; gap:12px; } .approve .btn{ transform-origin:center; } .approve .ok{ color:var(--voice); font-size:var(--fs-small); opacity:0; } .approve.is-done .btn{ background:color-mix(in srgb, var(--key) 30%, var(--backstage)); color:var(--screen); } .approve.is-done .ok{ opacity:1; } /* scene 4: voice bars, then frames */ .wave{ display:flex; align-items:center; gap:3px; height:64px; margin-top:16px; } .wave i{ width:4px; background:var(--key); border-radius:2px; height:var(--h, 20%); display:block; } .frames{ margin-top:16px; display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; } .frames div{ aspect-ratio:9/16; background:var(--stage); border:1px solid var(--hair); border-radius:6px; overflow:hidden; } .frames video, .frames img{ width:100%; height:100%; object-fit:cover; } /* scene 5: the phone, and the tally lamp */ .phone{ width:min(64vw, 280px); aspect-ratio:9/19; border-radius:32px; border:1px solid var(--hair-2); background:#000; overflow:hidden; position:relative; box-shadow:0 30px 80px rgba(0,0,0,.6); } .phone video{ width:100%; height:100%; object-fit:cover; } .phone .ui{ position:absolute; inset-inline:14px; bottom:18px; color:#fff; font-size:.8125rem; text-shadow:0 1px 6px rgba(0,0,0,.7); } .phone .ui b{ display:block; } .phone .ui .link{ display:inline-block; margin-top:6px; font:400 .75rem/1.2 var(--mono); color:#fff; background:rgba(0,0,0,.45); padding:4px 7px; border-radius:6px; } .tally{ position:absolute; top:14px; inset-inline-start:14px; display:inline-flex; align-items:center; gap:7px; font:400 .75rem/1 var(--mono); color:#fff; background:rgba(0,0,0,.5); padding:6px 9px; border-radius:999px; } .tally::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--tally); box-shadow:0 0 12px var(--tally); } /* scene 6: the enquiry lands */ .enquiry .row{ display:grid; grid-template-columns:7rem 1fr; gap:10px; padding:10px 0; border-top:1px solid var(--hair); font-size:var(--fs-small); } .enquiry .row span:first-child{ color:var(--voice); } .enquiry .stamp{ margin-top:16px; display:inline-flex; align-items:center; gap:8px; font:400 .8125rem/1 var(--mono); color:var(--tally); } .enquiry .stamp::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--tally); } /* stacked (no JS, reduced motion, or narrow) */ .stage-source{ color:var(--voice); font-size:var(--fs-small); max-width:var(--measure); padding-top:24px; } .stage-wrap.is-static{ height:auto; padding-block:var(--gap); } .stage-wrap.is-static .stage{ position:static; height:auto; display:block; } .stage-wrap.is-static .captions{ min-height:0; } .stage-wrap.is-static .captions li, .stage-wrap.is-static .a{ position:static; opacity:1; visibility:visible; } .stage-wrap.is-static .scene{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:32px; align-items:center; padding-block:40px; border-top:1px solid var(--hair); } .stage-wrap.is-static .artefact{ height:auto; } .stage-wrap.is-static .progress{ display:none; } @media (max-width:820px){ .stage{ grid-template-columns:1fr; align-content:start; padding-top:12vh; gap:24px; } .captions{ min-height:12rem; } .artefact{ height:52vh; } .stage-wrap.is-static .scene{ grid-template-columns:1fr; } } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } .stage-video{ display:none; } .phone{ background:url("img/etlad-poster.jpg") center/cover; } .strip-track{ animation:none; } *{ transition:none !important; } } /* ---------- quiet sections ---------------------------------------------- */ .two{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:clamp(24px, 4vw, 56px); } .two h3{ font-size:1.25rem; padding-bottom:12px; border-bottom:1px solid var(--hair-2); margin-bottom:14px; } .two ul{ list-style:none; display:grid; gap:10px; color:var(--voice); } .two li{ padding-inline-start:18px; position:relative; } .two li::before{ content:""; position:absolute; inset-inline-start:0; top:.75em; width:8px; height:1px; background:var(--key); } .two .soon li::before{ background:var(--hair-2); } .three{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:clamp(24px, 4vw, 48px); } .three article{ border-top:1px solid var(--hair-2); padding-top:18px; } .three h3{ font-size:1.25rem; } .three .for{ color:var(--voice); font-size:var(--fs-small); margin-top:6px; } .three .price{ margin-top:14px; color:var(--voice); font-size:var(--fs-small); } .three .price b{ color:var(--screen); font-weight:500; font-size:1.375rem; letter-spacing:-.01em; } .three-note{ margin-top:clamp(24px, 4vw, 40px); padding-top:20px; border-top:1px solid var(--hair); color:var(--voice); font-size:var(--fs-small); max-width:var(--measure); } .three-note b{ color:var(--screen); } .three ul{ list-style:none; margin-top:14px; display:grid; gap:8px; color:var(--voice); } .three li{ padding-inline-start:18px; position:relative; } .three li::before{ content:""; position:absolute; inset-inline-start:0; top:.75em; width:8px; height:1px; background:var(--key); } .three .btn{ margin-top:18px; } table.compare{ width:100%; border-collapse:collapse; font-size:var(--fs-small); } table.compare th, table.compare td{ text-align:start; padding:12px 10px; border-top:1px solid var(--hair); vertical-align:top; } table.compare th{ font-weight:500; color:var(--screen); } table.compare td{ color:var(--voice); } table.compare td.us{ color:var(--screen); } .table-wrap{ overflow-x:auto; } /* ---------- the quotation, where the checkout used to be ---------------- */ .quoted{ margin-top:clamp(20px, 3vw, 32px); padding:20px; border:1px solid var(--key); border-radius:12px; background:var(--backstage); max-width:var(--measure); } .quoted h3{ font-size:1.125rem; } .quoted p{ margin-top:10px; color:var(--voice); font-size:var(--fs-small); } .quoted-ref{ font-family:var(--mono); letter-spacing:.04em; } /* ---------- a voucher on the plan step ---------------------------------- */ .voucher{ margin-top:clamp(20px, 3vw, 32px); padding-top:18px; border-top:1px solid var(--hair); max-width:var(--measure); } .voucher label{ display:block; color:var(--voice); font-size:var(--fs-small); } .voucher-row{ display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; } .voucher-row input{ flex:1 1 220px; min-width:0; padding:11px 14px; border-radius:10px; letter-spacing:.06em; text-transform:uppercase; background:var(--backstage); border:1px solid var(--hair-2); color:var(--screen); font:inherit; font-size:var(--fs-small); } .voucher-row input:focus-visible{ outline:2px solid var(--key); outline-offset:2px; border-color:var(--key); } .voucher-row .btn{ flex:0 0 auto; } .voucher-msg{ margin-top:10px; min-height:1.2em; color:var(--voice); font-size:var(--fs-small); } .voucher-msg.good{ color:var(--key); } .voucher-msg.bad{ color:var(--tally); } .voucher.is-on input{ border-color:var(--key); } :root[dir="rtl"] .voucher-row input{ letter-spacing:0; } /* ---------- questions: native disclosure, one hairline per item ---------- */ .faq{ display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); gap:clamp(24px, 4vw, 64px); align-items:start; } .faq .sec-head{ margin-bottom:0; } .faq-list{ border-top:1px solid var(--hair-2); } .faq-item{ border-bottom:1px solid var(--hair); } .faq-item summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 4px; cursor:pointer; } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item h3{ font-size:1.125rem; line-height:1.35; letter-spacing:-.01em; text-wrap:balance; } .faq-item summary:hover h3{ color:var(--key); } .faq-item summary:focus-visible{ outline:2px solid var(--key); outline-offset:2px; border-radius:6px; } .faq-mark{ position:relative; flex:0 0 auto; width:20px; height:20px; } .faq-mark::before, .faq-mark::after{ content:""; position:absolute; inset:0; margin:auto; background:var(--key); transition:transform var(--dur) var(--ease); } .faq-mark::before{ width:14px; height:1px; } .faq-mark::after{ width:1px; height:14px; } .faq-item[open] .faq-mark::after{ transform:rotate(90deg); } .faq-item[open] .faq-mark::before{ transform:rotate(180deg); } .faq-a{ padding:0 4px 22px; color:var(--voice); max-width:var(--measure); } @media (max-width:820px){ .faq{ grid-template-columns:1fr; } } @media (prefers-reduced-motion:reduce){ .faq-mark::before, .faq-mark::after{ transition:none; } } .proof{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(24px, 4vw, 64px); align-items:start; } .proof .film{ aspect-ratio:16/9; border-radius:12px; overflow:hidden; border:1px solid var(--hair); background:var(--backstage); } .proof .film iframe{ width:100%; height:100%; border:0; } @media (max-width:820px){ .proof{ grid-template-columns:1fr; } } .cta{ border-top:1px solid var(--hair); } .cta .acts{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; } footer{ position:relative; z-index:1; border-top:1px solid var(--hair); padding:32px 0 48px; color:var(--voice); font-size:var(--fs-small); } footer .col{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; } footer nav{ display:flex; flex-wrap:wrap; gap:18px; } footer nav a{ color:var(--voice); } /* small screens: the header keeps one line */ @media (max-width:480px){ .site-head{ padding-inline:14px; } .brand span{ display:none; } .site-head:not(.is-open) .lang-btn{ display:none; } .site-head .btn.sm{ padding:8px 12px; font-size:.8125rem; white-space:nowrap; } .lang-btn{ padding:6px 10px; font-size:.8125rem; } .brand span:last-child{ font-size:.9375rem; } } /* ---------- the films and the deck ---------------------------------------- */ #films{ padding-top:clamp(40px, 6vw, 80px); } .films{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:clamp(18px, 3vw, 32px); } .film{ display:block; color:var(--screen); } .film .thumb{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; border-radius:12px; background:var(--backstage); border:1px solid var(--hair); } .film .thumb img, .film .thumb iframe{ width:100%; height:100%; object-fit:cover; display:block; border:0; } .film .thumb img{ transition:transform 600ms var(--ease); } .film:hover .thumb img{ transform:scale(1.03); } .film .play{ position:absolute; inset:0; display:grid; place-items:center; } .film .play::before{ content:""; width:64px; height:64px; border-radius:50%; background:color-mix(in srgb, var(--stage) 70%, transparent); border:1px solid var(--hair-2); backdrop-filter:blur(6px); } .film .play svg{ position:absolute; color:var(--screen); margin-inline-start:2px; } .film:hover .play svg{ color:#04101d; } .film:hover .play::before{ background:var(--key); border-color:var(--key); } .film b{ display:block; font-weight:500; margin-top:14px; } .film .sub{ display:block; color:var(--voice); font-size:var(--fs-small); margin-top:4px; } .film.deck .thumb::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--stage) 60%, transparent)); } /* ---------- the deck, chapter by chapter ---------------------------------- */ .chap-grid{ display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 5fr); gap:clamp(24px, 5vw, 80px); align-items:start; } .chap-stage{ position:sticky; top:calc(50vh - 17vw); } .chap-frame{ position:relative; aspect-ratio:1376/768; border-radius:14px; overflow:hidden; border:1px solid var(--hair); background:var(--backstage); box-shadow:0 30px 80px rgba(0,0,0,.5); } .chap-frame .slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 500ms var(--ease); } .chap-frame .slide.is-on{ opacity:1; } .chap-cards{ list-style:none; } .chap{ padding-block:clamp(48px, 14vh, 140px); border-top:1px solid var(--hair); } .chap:first-child{ border-top:0; padding-top:clamp(8px, 2vh, 24px); } .chap .n{ font:400 .8125rem/1 var(--mono); color:var(--key); display:block; margin-bottom:14px; } .chap h3{ font-size:clamp(1.5rem, 1rem + 1.6vw, 2.125rem); max-width:20ch; } .chap p{ color:var(--voice); margin-top:14px; max-width:48ch; } .chap ul{ list-style:none; margin-top:18px; display:grid; gap:10px; color:var(--screen); max-width:52ch; } .chap li{ padding-inline-start:18px; position:relative; } .chap li::before{ content:""; position:absolute; inset-inline-start:0; top:.75em; width:8px; height:1px; background:var(--key); } .chap-img{ display:none; } @media (max-width:900px){ .chap-grid{ grid-template-columns:1fr; } .chap-stage{ display:none; } .chap-img{ display:block; border-radius:12px; border:1px solid var(--hair); margin-bottom:20px; } .chap{ padding-block:40px; } } /* ---------- the guided setup (start.html) ---------------------------------- */ .wizard{ padding-block:clamp(32px, 6vh, 72px) var(--gap); } .col.narrow{ max-width:760px; } .wz-head h1{ font-size:clamp(2rem, 1rem + 3vw, 3.25rem); max-width:16ch; } .wz-steps{ list-style:none; display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; margin:32px 0 28px; } .wz-steps li{ display:flex; align-items:center; gap:8px; padding:10px 0; border-top:2px solid var(--hair-2); color:var(--voice); font-size:var(--fs-small); } .wz-steps li span{ font:400 .8125rem/1 var(--mono); } .wz-steps li.is-on{ border-top-color:var(--key); color:var(--screen); } .wz-steps li.is-done{ border-top-color:color-mix(in srgb, var(--key) 55%, transparent); } .wz-steps li b{ font-weight:500; } @media (max-width:600px){ .wz-steps li b{ display:none; } } .wz-step h2{ font-size:clamp(1.5rem, 1rem + 1.8vw, 2.25rem); } .wz-step .lede{ margin-top:12px; } .wz-note{ margin-top:16px; color:var(--voice); font-size:var(--fs-small); max-width:var(--measure); } .wz-form{ margin-top:24px; display:grid; gap:18px; } .wz-form label, .wz-field{ display:grid; gap:8px; } .wz-form label > span, .wz-field > span, .wz-form legend{ color:var(--voice); font-size:var(--fs-small); } .wz-form input:not([type=radio]):not([type=color]), .wz-form textarea, .wz-form select{ font:inherit; color:var(--screen); background:var(--backstage); border:1px solid var(--hair-2); border-radius:10px; padding:12px 14px; width:100%; } .wz-form input:focus-visible, .wz-form textarea:focus-visible, .wz-form select:focus-visible{ outline:2px solid var(--key); outline-offset:2px; border-color:var(--key); } .wz-form input[type=color]{ width:64px; height:44px; padding:4px; background:var(--backstage); border:1px solid var(--hair-2); border-radius:10px; cursor:pointer; } .wz-form input:disabled{ opacity:.5; } .wz-form fieldset{ border:0; display:grid; gap:8px; } .wz-form .radio{ display:flex; align-items:center; gap:10px; color:var(--screen); } .wz-form .radio input{ accent-color:var(--key); width:18px; height:18px; } .wz-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } @media (max-width:600px){ .wz-row{ grid-template-columns:1fr; } } .wz-acts{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; } .wz-msg{ color:var(--voice); font-size:var(--fs-small); min-height:1.4em; } .wz-msg.bad{ color:var(--tally); } .trap{ position:absolute; inset-inline-start:-9999px; width:1px; height:1px; opacity:0; } .wz-found{ margin-top:24px; border:1px solid var(--hair); border-radius:14px; padding:clamp(18px, 3vw, 28px); background:var(--backstage); } .found-head{ display:flex; align-items:center; gap:14px; } .found-head img{ width:56px; height:56px; object-fit:contain; border-radius:10px; background:#fff; padding:6px; } .found-head b{ display:block; font-weight:500; font-size:1.125rem; } .found-head small{ color:var(--voice); } .wz-found p{ color:var(--voice); margin-top:12px; } .chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; } .chips .chip{ display:inline-flex; align-items:center; gap:6px; } .chips .chip button{ background:none; border:0; color:var(--voice); font:inherit; cursor:pointer; line-height:1; } .chips .chip button:hover{ color:var(--tally); } .chips .chip.ghost{ color:var(--voice); border-style:dashed; } .chip-add{ display:flex; gap:8px; margin-top:10px; } .chip-add input{ flex:1; } .logo-box{ display:grid; place-items:center; min-height:88px; border:1px dashed var(--hair-2); border-radius:10px; padding:10px; color:var(--voice); font-size:var(--fs-small); } .logo-box img{ max-height:64px; max-width:100%; object-fit:contain; background:#fff; border-radius:6px; padding:6px; } .wz-wait{ display:grid; place-items:center; gap:18px; padding:48px 0; color:var(--voice); text-align:center; } .spin{ width:36px; height:36px; border-radius:50%; border:2px solid var(--hair-2); border-top-color:var(--key); animation:spin 900ms linear infinite; } @keyframes spin{ to{ transform:rotate(360deg); } } @media (prefers-reduced-motion:reduce){ .spin{ animation:none; border-top-color:var(--key); } } .card.draft{ width:100%; margin-top:20px; } .card.draft .row, .card.done .row{ display:grid; grid-template-columns:9rem 1fr; gap:10px; padding:10px 0; border-top:1px solid var(--hair); font-size:var(--fs-small); } .card.draft .row span:first-child, .card.done .row span:first-child{ color:var(--voice); } .card.draft h3{ font-size:1.125rem; margin-top:20px; } .mono{ font-family:var(--mono); font-size:.9em; } .angles{ list-style:none; counter-reset:a; display:grid; gap:12px; margin-top:12px; } .angles li{ padding-inline-start:28px; position:relative; } .angles li::before{ counter-increment:a; content:counter(a); position:absolute; inset-inline-start:0; top:.15em; font:400 .8125rem/1 var(--mono); color:var(--key); } .angles b{ display:block; font-weight:500; } .angles q{ display:block; quotes:none; color:var(--screen); font-size:var(--fs-small); margin-top:4px; } .angles small{ display:block; color:var(--voice); margin-top:4px; } .wz-profile{ margin-top:18px; color:var(--voice); } .wz-profile summary{ cursor:pointer; color:var(--screen); } .wz-profile dl{ display:grid; grid-template-columns:9rem 1fr; gap:8px 12px; margin-top:12px; font-size:var(--fs-small); } .wz-profile dt{ color:var(--voice); } .card.done{ width:100%; margin-top:8px; } .card.done .stamp{ display:inline-flex; align-items:center; gap:8px; font:400 .8125rem/1 var(--mono); color:var(--tally); } .card.done .stamp::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--tally); box-shadow:0 0 12px var(--tally); } .card.done h2{ margin-top:12px; font-size:clamp(1.75rem, 1rem + 2.4vw, 2.75rem); } .card.done .lede{ margin-top:12px; } .card.done .row{ margin-top:0; } .card.done .wz-acts{ margin-top:20px; } /* ---------- the inner pages: about, quote, deck, enquire ------------------ */ /* One narrow column, the same rhythm as the home page. The overline is the only small caps on the site; the heading is the page's one large thing. */ .page{ padding-block:clamp(40px, 8vh, 96px) var(--gap); } .page .col.narrow{ max-width:820px; } .page section{ padding-block:0; } .page section + section{ margin-top:var(--gap); padding-top:var(--gap); border-top:1px solid var(--hair); } .overline{ display:block; font:400 .8125rem/1 var(--mono); color:var(--key); letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px; } :root[dir="rtl"] .overline{ letter-spacing:0; text-transform:none; font-family:var(--sans); } .page h1{ font-size:clamp(2.25rem, 1rem + 3.6vw, 4rem); max-width:16ch; } .page h2{ max-width:22ch; } .page p{ max-width:var(--measure); } .page p + p{ margin-top:1em; } .page .lede{ font-size:1.125rem; } .page .sec-note{ color:var(--voice); font-size:var(--fs-small); margin-top:28px; } .page .cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; } .page .btn + .btn{ margin-inline-start:0; } /* the about page: two lists, a statement of facts */ .status{ margin-top:28px; } .fact{ display:grid; grid-template-columns:max-content 1fr; gap:10px 24px; margin-top:24px; font-size:var(--fs-small); } .fact dt{ color:var(--voice); } .fact dd{ color:var(--screen); } @media (max-width:480px){ .fact{ grid-template-columns:1fr; gap:2px; } .fact dd{ margin-bottom:10px; } } /* forms: the same field as the guided setup, laid out in a panel */ .form{ margin-top:32px; display:grid; gap:18px; } .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } @media (max-width:640px){ .grid-2{ grid-template-columns:1fr; } } .field{ display:grid; gap:8px; } .field > label, .field > span{ color:var(--voice); font-size:var(--fs-small); } .field .hint{ color:var(--voice); font-size:.8125rem; } .req{ color:var(--key); } .field input:not([type=checkbox]), .field select, .field textarea{ width:100%; background:var(--backstage); color:var(--screen); border:1px solid var(--hair-2); border-radius:10px; padding:12px 14px; font:inherit; font-size:var(--fs-body); line-height:1.4; transition:border-color var(--dur) var(--ease); } .field select{ appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--voice) 50%), linear-gradient(135deg, var(--voice) 50%, transparent 50%); background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size:6px 6px; background-repeat:no-repeat; padding-inline-end:38px; } :root[dir="rtl"] .field select{ background-position:20px 50%, 14px 50%; } .field select option{ background:var(--backstage); color:var(--screen); } .field textarea{ min-height:140px; resize:vertical; } .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{ outline:2px solid var(--key); outline-offset:2px; border-color:var(--key); } .field input::placeholder, .field textarea::placeholder{ color:color-mix(in srgb, var(--voice) 60%, transparent); } .checks{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap:10px 18px; } .check{ display:flex; align-items:flex-start; gap:10px; color:var(--screen); cursor:pointer; font-size:var(--fs-small); line-height:1.5; } .check input{ accent-color:var(--key); width:18px; height:18px; margin-top:3px; flex:none; } /* the honeypot stays in the layout but out of sight; see site-forms.js */ .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; flex-wrap:wrap; gap:16px; margin-top:8px; } .form-msg{ color:var(--voice); font-size:var(--fs-small); min-height:1.4em; margin:0; } .form-msg.ok{ color:var(--key); } .form-msg.err{ color:var(--tally); } .field-error, .field > .field-error, .wz-form label > .field-error{ color:var(--tally); font-size:.8125rem; } .page .chip{ margin-bottom:14px; } .field [aria-invalid="true"], .wz-form [aria-invalid="true"]{ border-color:var(--tally); } /* the two notes under the quote form */ .cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap:18px; margin-top:var(--gap); } .cards .card{ width:100%; } .cards .card h3{ font-size:1.125rem; font-weight:500; } .cards .card p{ color:var(--voice); margin-top:12px; font-size:var(--fs-small); } .cards .card ul{ list-style:none; margin-top:14px; display:grid; gap:10px; color:var(--voice); font-size:var(--fs-small); } .cards .card li{ padding-inline-start:18px; position:relative; } .cards .card li::before{ content:""; position:absolute; inset-inline-start:0; top:.75em; width:8px; height:1px; background:var(--key); } .cards .card .acts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; } /* the enquiry page: whose form this is */ .enq-brand{ display:block; font:400 .8125rem/1 var(--mono); color:var(--key); letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px; } :root[dir="rtl"] .enq-brand{ letter-spacing:0; text-transform:none; font-family:var(--sans); } .enq-offer{ margin-top:22px; padding:16px 18px; border:1px solid var(--hair-2); border-inline-start:2px solid var(--key); border-radius:10px; color:var(--screen); max-width:var(--measure); } /* the deck: one frame, arrows, a strip of thumbnails */ .page .col.wide{ max-width:1120px; } .deck-stage{ position:relative; margin-top:32px; aspect-ratio:1376/768; border-radius:14px; overflow:hidden; border:1px solid var(--hair); background:var(--backstage); box-shadow:0 30px 80px rgba(0,0,0,.5); } .deck-stage img{ width:100%; height:100%; object-fit:contain; display:block; } .deck-stage:fullscreen{ aspect-ratio:auto; width:100vw; height:100vh; border:0; border-radius:0; box-shadow:none; background:#000; } .deck-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:1px solid var(--hair-2); background:color-mix(in srgb, var(--stage) 70%, transparent); color:var(--screen); font-size:1.5rem; line-height:1; display:grid; place-items:center; cursor:pointer; backdrop-filter:blur(6px); transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .deck-arrow:hover{ background:var(--key); border-color:var(--key); color:#04101d; } .deck-arrow.prev{ inset-inline-start:14px; } .deck-arrow.next{ inset-inline-end:14px; } :root[dir="rtl"] .deck-arrow{ transform:translateY(-50%) scaleX(-1); } .deck-bar{ display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-top:18px; } .deck-cap{ flex:1 1 240px; color:var(--screen); } .deck-tools{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; } .deck-count{ font:400 .8125rem/1 var(--mono); color:var(--voice); font-variant-numeric:tabular-nums; margin-inline-end:6px; } .deck-strip{ display:flex; gap:10px; margin-top:18px; padding-bottom:10px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:var(--hair-2) transparent; } .deck-strip .thumb{ flex:0 0 132px; aspect-ratio:1376/768; padding:0; border:1px solid var(--hair); border-radius:8px; overflow:hidden; background:var(--backstage); cursor:pointer; opacity:.55; scroll-snap-align:center; transition:opacity var(--dur) var(--ease), border-color var(--dur) var(--ease); } .deck-strip .thumb img{ width:100%; height:100%; object-fit:cover; display:block; } .deck-strip .thumb:hover{ opacity:.85; } .deck-strip .thumb.active{ opacity:1; border-color:var(--key); } /* ---------- the plan step after approval (start.html) ---------------------- */ .plans{ margin-top:clamp(32px, 6vh, 64px); padding-top:clamp(24px, 4vh, 40px); border-top:1px solid var(--hair); } .plans h2{ font-size:clamp(1.5rem, 1rem + 1.8vw, 2.25rem); } .plan-term{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; } .plan-term .chip{ cursor:pointer; background:none; font-family:var(--sans); font-size:var(--fs-small); padding:9px 14px; } .plan-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; margin-top:20px; } .plan{ border:1px solid var(--hair); border-radius:14px; padding:clamp(18px, 3vw, 26px); background:var(--backstage); display:flex; flex-direction:column; gap:12px; } .plan.is-key{ border-color:var(--key); } .plan .n{ color:var(--voice); font-size:var(--fs-small); } .plan .price{ font-weight:500; font-size:1.75rem; letter-spacing:-.01em; line-height:1.1; } .plan .price small{ font-size:var(--fs-small); color:var(--voice); font-weight:400; } .plan p{ color:var(--voice); font-size:var(--fs-small); flex:1; } .plan .setup{ color:var(--voice); font-size:.8125rem; } .plan .btn{ align-self:flex-start; } .plan.is-busy .btn{ opacity:.6; pointer-events:none; } /* ============ Arabic lab: the spoken line, then two portrait clips ============ */ #arabic{ padding-top:clamp(40px, 6vw, 80px); } .ar-said{ max-width:var(--measure); margin-bottom:clamp(20px, 3vw, 32px); } .ar-said .note{ display:block; color:var(--voice); font-size:var(--fs-small); } .ar-line{ display:block; quotes:"«" "»"; font-size:clamp(1.15rem, .95rem + 1vw, 1.6rem); line-height:1.7; margin-top:8px; letter-spacing:0; } .ar-trans{ color:var(--voice); margin-top:6px; } .ar-trans:empty{ display:none; } .ar-lab{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 300px)); gap:clamp(18px, 3vw, 32px); } .ar-clip{ margin:0; } .ar-clip video{ display:block; width:100%; height:auto; aspect-ratio:9/16; border-radius:12px; border:1px solid var(--hair); background:var(--backstage); } .ar-clip b{ display:block; font-weight:500; margin-top:14px; } .ar-clip .sub{ display:block; color:var(--voice); font-size:var(--fs-small); margin-top:4px; } .ar-sub{ margin:clamp(32px, 5vw, 56px) 0 14px; font-weight:500; } .ar-sub:first-of-type{ margin-top:0; } .ar-four{ grid-template-columns:repeat(auto-fit, minmax(180px, 240px)); margin-top:clamp(16px, 2vw, 24px); }