/* ========================================================= YourFlix — premium streaming brand One accent colour. One motif (the signal wave). Change --accent to rebrand the entire site. ========================================================= */ :root{ /* --- Brand accent --- */ --accent: #00E0AE; --accent-2: #3BF3CE; --accent-ink: #04120E; --accent-soft: rgba(0, 224, 174, .12); --accent-line: rgba(0, 224, 174, .30); --accent-glow: rgba(0, 224, 174, .24); /* --- Charcoal / black base --- */ --bg: #08090B; --bg-2: #0B0D10; --surface: #101317; --surface-2: #15191E; --surface-3: #1B2027; --line: rgba(255,255,255,.08); --line-strong: rgba(255,255,255,.15); --text: #F5F7F9; --text-2: #C9D0D8; --muted: #939CA8; --muted-2: #6E7783; --shadow: 0 24px 60px -24px rgba(0,0,0,.85); --shadow-lg: 0 50px 110px -40px rgba(0,0,0,.95); --r-xs: 10px; --r-sm: 14px; --r: 20px; --r-lg: 26px; --r-xl: 34px; --r-pill: 999px; --ease: cubic-bezier(.22,.61,.36,1); --t: .26s var(--ease); --container: 1240px; --gutter: 24px; --nav-h: 74px; /* Vertical rhythm — tightened: spacious, not empty */ --sp-section: 100px; --sp-tight: 78px; --sp-head: 54px; --font-display: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* ============================ Reset ============================ */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px); } body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img,svg{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; } ul{ margin:0; padding:0; list-style:none; } h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; letter-spacing:-.028em; line-height:1.1; margin:0; text-wrap:balance; } p{ margin:0; } :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; } ::selection{ background:var(--accent); color:var(--accent-ink); } /* ============================ Layout ============================ */ .container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); } .container--narrow{ max-width:1080px; } .section{ position:relative; padding:var(--sp-section) 0; } .section--tight{ padding:var(--sp-tight) 0; } .section-head{ max-width:740px; margin:0 auto var(--sp-head); text-align:center; } .section-head--left{ margin-inline:0; text-align:left; } .eyebrow{ display:inline-flex; align-items:center; gap:9px; padding:7px 16px 7px 12px; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--surface); font-size:12.5px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--text-2); margin-bottom:22px; } .eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); } h1,.h1{ font-size:clamp(2.7rem, 5.6vw, 4.5rem); } h2,.h2{ font-size:clamp(2.15rem, 4vw, 3.15rem); } h3,.h3{ font-size:clamp(1.22rem, 1.7vw, 1.45rem); } .lead{ color:var(--text-2); font-size:clamp(1.06rem, 1.4vw, 1.22rem); line-height:1.65; } .section-head p{ margin-top:20px; color:var(--muted); font-size:1.08rem; } .accent{ color:var(--accent); } /* ============================================================ TO BE CONFIRMED Every unverified claim (figures, guarantees, response times) is wrapped in .tbc. While they are underlined so you can find them. Remove the attribute — or the class — once each claim is confirmed. ============================================================ */ .tbc{ text-decoration:none; } html[data-draft="true"] .tbc{ border-bottom:1px dashed var(--accent-line); padding-bottom:1px; } /* ============================ Buttons ============================ */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:16px 30px; border-radius:var(--r-pill); font-size:16px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; transition:transform var(--t), background var(--t), border-color var(--t), box-shadow var(--t), color var(--t); } .btn:hover{ transform:translateY(-2px); } .btn:active{ transform:translateY(0); } .btn svg{ width:17px; height:17px; flex:none; } .btn--primary{ background:linear-gradient(180deg, var(--accent-2), var(--accent)); color:var(--accent-ink); box-shadow:0 12px 34px -12px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.4); } .btn--primary:hover{ box-shadow:0 20px 46px -14px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.5); } .btn--ghost{ background:rgba(255,255,255,.035); border:1px solid var(--line-strong); color:var(--text); } .btn--ghost:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.28); } .btn--block{ width:100%; } .btn--sm{ padding:11px 22px; font-size:15px; } .btn--lg{ padding:19px 38px; font-size:17px; } /* ============================ Brand ============================ */ .brand{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; flex:none; } .brand__icon{ height:42px; width:42px; border-radius:10px; object-fit:contain; display:block; flex:none; transition:transform var(--t); } .brand:hover .brand__icon{ transform:scale(1.05); } .brand__text{ font-family:var(--font-display); font-weight:700; font-size:26px; line-height:1; letter-spacing:-.025em; color:#ffffff; display:inline-flex; align-items:center; user-select:none; } .brand__text span{ color:var(--accent); } .brand__ph{ font-size:9.5px; color:var(--muted-2); letter-spacing:.15em; text-transform:uppercase; display:block; line-height:1; margin-top:3px; } @media (max-width: 640px){ .brand{ gap:9px; } .brand__icon{ height:34px; width:34px; border-radius:8px; } .brand__text{ font-size:21px; } } /* ============================================================ THE SIGNAL MOTIF — the recurring brand element. Used sparingly: hero, section transitions, pricing, CTA, footer. ============================================================ */ .signal{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; } .signal svg{ width:100%; height:100%; } .signal path{ stroke:var(--accent); fill:none; opacity:.13; } .signal--soft path{ opacity:.075; } /* A thin signal line used to transition between sections */ .signal-rule{ position:relative; height:64px; overflow:hidden; pointer-events:none; } .signal-rule svg{ position:absolute; inset:0; width:100%; height:100%; } .signal-rule path{ stroke:var(--accent); fill:none; opacity:.16; } .signal-rule::after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px var(--accent-soft), 0 0 22px 2px var(--accent-glow); } .glow{ position:absolute; border-radius:50%; pointer-events:none; z-index:0; background:radial-gradient(circle, var(--accent-glow) 0%, rgba(0,224,174,0) 68%); filter:blur(18px); } /* ============================ Placeholders ============================ */ .ph{ position:relative; display:grid; place-items:center; border-radius:var(--r); border:1px dashed rgba(255,255,255,.16); background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.012)), repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 2px, transparent 2px 11px); color:var(--muted-2); overflow:hidden; } .ph__label{ position:relative; z-index:2; font-size:11.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; text-align:center; padding:10px 14px; line-height:1.6; } .ph--plain{ border-style:solid; border-color:var(--line); } /* ============================ Header ============================ */ .header{ position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h); display:flex; align-items:center; transition:background var(--t), border-color var(--t); border-bottom:1px solid transparent; } .header.is-stuck{ background:rgba(8,9,11,.84); backdrop-filter:blur(18px) saturate(140%); border-bottom-color:var(--line); } .header__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%; } .nav{ display:flex; align-items:center; gap:4px; } .nav a{ padding:9px 14px; border-radius:var(--r-pill); font-size:15px; font-weight:500; color:var(--text-2); transition:color var(--t), background var(--t); } .nav a:hover{ color:var(--text); background:rgba(255,255,255,.05); } .header__actions{ display:flex; align-items:center; gap:12px; } .burger{ display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--line-strong); background:rgba(255,255,255,.03); flex-direction:column; align-items:center; justify-content:center; gap:5px; } .burger span{ display:block; width:18px; height:1.8px; border-radius:2px; background:var(--text); transition:transform var(--t), opacity var(--t); } .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.8px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; } .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.8px) rotate(-45deg); } .mobile-nav{ position:fixed; inset:var(--nav-h) 0 0 0; z-index:99; background:var(--bg); padding:12px var(--gutter) 40px; overflow-y:auto; display:none; } .mobile-nav.is-open{ display:block; } .mobile-nav a{ display:block; padding:16px 4px; font-size:17px; font-weight:500; border-bottom:1px solid var(--line); color:var(--text-2); } .mobile-nav .btn{ margin-top:24px; border-bottom:0; padding:17px 28px; } .mobile-nav .btn--primary{ color:var(--accent-ink); } .mobile-nav__contact{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line); font-size:14px; color:var(--muted); } /* ============================================================ HERO — cinematic. Copy up top, the screen is the centrepiece. ============================================================ */ .hero{ position:relative; padding:calc(var(--nav-h) + 74px) 0 0; overflow:hidden; background: radial-gradient(1100px 620px at 50% -6%, rgba(0,224,174,.11), transparent 64%), radial-gradient(800px 500px at 88% 62%, rgba(0,224,174,.05), transparent 66%), var(--bg); } .hero__copy{ position:relative; z-index:3; max-width:940px; margin-inline:auto; text-align:center; } .hero h1{ margin-bottom:22px; } .hero h1 em{ font-style:normal; color:var(--accent); } .hero__copy .lead{ max-width:620px; margin-inline:auto; } .hero__cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:36px; } .hero__meta{ display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:center; margin-top:30px; } .hero__meta li{ display:flex; align-items:center; gap:8px; font-size:14.5px; color:var(--muted); } .hero__meta svg{ width:15px; height:15px; color:var(--accent); flex:none; } /* --- The stage: large streaming-interface placeholder --- */ .hero__stage{ position:relative; z-index:2; margin-top:58px; padding-bottom:110px; } .hero__stage .glow{ width:70%; height:78%; left:15%; top:6%; opacity:.9; } .stage{ position:relative; z-index:2; max-width:1120px; margin-inline:auto; border-radius:var(--r-xl); border:1px solid var(--line-strong); background:linear-gradient(180deg, var(--surface-2), var(--surface)); padding:12px; box-shadow:var(--shadow-lg), 0 0 0 1px rgba(0,224,174,.06); } .stage__frame{ position:relative; border-radius:calc(var(--r-xl) - 12px); overflow:hidden; aspect-ratio:16/9; background:var(--bg-2); display:flex; flex-direction:column; } /* Featured artwork area */ .stage__feature{ position:relative; flex:1; border:0; border-radius:0; display:grid; place-items:center; } .stage__feature::after{ content:""; position:absolute; inset:auto 0 0 0; height:52%; background:linear-gradient(180deg, transparent, rgba(8,9,11,.9)); pointer-events:none; } .stage__caption{ position:absolute; z-index:3; left:0; right:0; bottom:0; padding:0 28px 22px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; } .stage__caption h3{ font-size:clamp(1.1rem,1.9vw,1.6rem); } .stage__caption p{ margin-top:6px; font-size:13.5px; color:var(--muted); } .stage__chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 15px; border-radius:var(--r-pill); border:1px solid var(--line-strong); background:rgba(8,9,11,.7); font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-2); white-space:nowrap; } .stage__chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); } /* Poster rail inside the screen */ .stage__rail{ flex:none; min-height:0; display:grid; grid-template-columns:repeat(6,1fr); gap:12px; padding:16px 20px 20px; background:linear-gradient(180deg, rgba(8,9,11,.6), var(--bg-2)); } .stage__rail .ph{ aspect-ratio:2/3; border-radius:8px; } .stage__rail .ph__label{ font-size:9.5px; letter-spacing:.1em; } /* Floating device placeholder overlapping the stage */ .hero__phone{ position:absolute; z-index:4; right:2%; bottom:34px; width:150px; aspect-ratio:9/19; border-radius:22px; border:1px solid var(--line-strong); background:linear-gradient(180deg, var(--surface-2), var(--surface)); padding:7px; box-shadow:var(--shadow-lg); } .hero__phone .ph{ width:100%; height:100%; border-radius:16px; } .hero__phone .ph__label{ font-size:9px; letter-spacing:.1em; } .hero__badge{ position:absolute; z-index:4; left:2%; bottom:96px; display:flex; align-items:center; gap:12px; padding:14px 20px 14px 16px; border-radius:var(--r-sm); background:rgba(16,19,23,.94); border:1px solid var(--line-strong); backdrop-filter:blur(14px); box-shadow:var(--shadow); } .hero__badge b{ display:block; font-family:var(--font-display); font-size:16px; letter-spacing:-.02em; } .hero__badge span{ font-size:12.5px; color:var(--muted); } .hero__badge .dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); flex:none; } /* ============================================================ CONTENT CATEGORIES — large, cinematic, 3 × 2 ============================================================ */ .cats{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .cat{ position:relative; overflow:hidden; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--surface); transition:transform var(--t), border-color var(--t); } .cat:hover{ transform:translateY(-6px); border-color:var(--accent-line); } .cat__art{ position:relative; aspect-ratio:16/10; border:0; border-radius:0; } .cat__art::after{ content:""; position:absolute; inset:0; background:linear-gradient(175deg, transparent 34%, rgba(8,9,11,.55) 62%, rgba(8,9,11,.95)); } .cat__body{ position:absolute; z-index:2; inset:auto 0 0 0; padding:26px 26px 24px; } .cat__body h3{ font-size:1.5rem; } .cat__body p{ margin-top:8px; font-size:15px; color:var(--text-2); max-width:34ch; } .cat__tag{ position:absolute; z-index:3; top:18px; left:18px; padding:6px 13px; border-radius:var(--r-pill); background:rgba(8,9,11,.72); border:1px solid var(--line-strong); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text-2); } /* ============================================================ BENEFITS — one editorial panel, four quadrants ============================================================ */ .benefits{ display:grid; grid-template-columns:repeat(2,1fr); border-radius:var(--r-lg); border:1px solid var(--line); background:linear-gradient(180deg, var(--surface-2), var(--surface)); overflow:hidden; position:relative; } .benefit{ position:relative; z-index:2; padding:52px 48px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background var(--t); } .benefit:nth-child(2n){ border-right:0; } .benefit:nth-child(n+3){ border-bottom:0; } .benefit:hover{ background:rgba(255,255,255,.018); } .benefit__head{ display:flex; align-items:center; gap:18px; margin-bottom:20px; } .icon{ width:56px; height:56px; flex:none; border-radius:16px; display:grid; place-items:center; background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent); } .icon svg{ width:25px; height:25px; } .benefit h3{ font-size:1.5rem; } .benefit p{ color:var(--text-2); font-size:16px; max-width:44ch; } /* ============================================================ DEVICES — big centred mockup, platforms underneath ============================================================ */ .devices{ position:relative; background:var(--bg-2); border-block:1px solid var(--line); overflow:hidden; } .devices__stage{ position:relative; z-index:2; max-width:1000px; margin:0 auto; } .devices__stage .glow{ width:76%; height:82%; left:12%; top:6%; } .devices__mock{ position:relative; z-index:2; aspect-ratio:16/9; border-radius:var(--r-xl); box-shadow:var(--shadow-lg); } .devices__mock .ph__label{ font-size:12px; } .devices__sub{ position:relative; z-index:3; display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:440px; margin:-56px auto 0; } .devices__sub .ph{ aspect-ratio:16/11; border-radius:var(--r); box-shadow:var(--shadow); background-color:var(--surface); } .device-list{ display:grid; grid-template-columns:repeat(8,1fr); gap:14px; margin-top:54px; position:relative; z-index:2; } .device{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:24px 8px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface); font-size:13.5px; font-weight:500; color:var(--text-2); text-align:center; transition:border-color var(--t), background var(--t), transform var(--t); } .device:hover{ border-color:var(--accent-line); background:var(--surface-2); transform:translateY(-3px); } .device svg{ width:26px; height:26px; color:var(--accent); } /* ============================================================ HOW IT WORKS — a real timeline ============================================================ */ .steps{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .steps::before{ content:""; position:absolute; top:78px; left:8%; right:8%; height:1px; background:linear-gradient(90deg, transparent, var(--accent-line) 12%, var(--accent-line) 88%, transparent); } .step{ position:relative; padding:38px 34px 36px; border-radius:var(--r-lg); border:1px solid var(--line); background:linear-gradient(180deg, var(--surface-2), var(--surface)); overflow:hidden; transition:transform var(--t), border-color var(--t); } .step:hover{ transform:translateY(-5px); border-color:var(--accent-line); } .step__ghost{ position:absolute; right:18px; top:2px; z-index:0; font-family:var(--font-display); font-weight:700; font-size:7.5rem; line-height:1; letter-spacing:-.06em; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.06); pointer-events:none; user-select:none; } .step__node{ position:relative; z-index:2; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-size:19px; font-weight:600; color:var(--accent-ink); background:linear-gradient(180deg, var(--accent-2), var(--accent)); box-shadow:0 0 0 7px rgba(0,224,174,.08), 0 12px 30px -12px var(--accent-glow); margin-bottom:26px; } .step h3{ position:relative; z-index:2; margin-bottom:12px; font-size:1.42rem; } .step p{ position:relative; z-index:2; color:var(--text-2); font-size:15.5px; } /* ============================================================ PRICING ============================================================ */ .pricing{ position:relative; overflow:hidden; } .pricing .glow{ width:900px; height:560px; left:50%; top:-10%; transform:translateX(-50%); opacity:.75; } .selector{ position:relative; z-index:2; text-align:center; margin-bottom:56px; } .selector__label{ display:block; margin-bottom:16px; font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } .tabs{ display:inline-flex; gap:5px; padding:6px; border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--line-strong); } .tabs button{ padding:13px 26px; border-radius:var(--r-pill); font-size:15px; font-weight:600; color:var(--muted); transition:background var(--t), color var(--t); white-space:nowrap; } .tabs button:hover{ color:var(--text); } .tabs button.is-active{ background:var(--accent); color:var(--accent-ink); } .plans{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; align-items:stretch; padding-top:16px; } .plan{ position:relative; display:flex; flex-direction:column; padding:36px 30px 32px; border-radius:var(--r-lg); border:1px solid var(--line); background:linear-gradient(180deg, var(--surface-2), var(--surface)); transition:transform var(--t), border-color var(--t); } .plan:hover{ transform:translateY(-5px); border-color:var(--line-strong); } .plan--best{ border-color:var(--accent); background: radial-gradient(420px 200px at 50% 0%, rgba(0,224,174,.16), transparent 70%), linear-gradient(180deg, var(--surface-2), var(--surface)); box-shadow:0 0 0 1px var(--accent-line), 0 40px 80px -34px var(--accent-glow); transform:translateY(-14px); padding-bottom:44px; } .plan--best:hover{ transform:translateY(-19px); } .plan__tag{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); padding:7px 17px; border-radius:var(--r-pill); background:linear-gradient(180deg, var(--accent-2), var(--accent)); color:var(--accent-ink); font-size:11.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; white-space:nowrap; box-shadow:0 10px 24px -10px var(--accent-glow); } .plan__name{ font-family:var(--font-display); font-size:16px; font-weight:600; letter-spacing:.01em; color:var(--text-2); } .plan__price{ display:flex; align-items:baseline; gap:4px; margin:16px 0 6px; } .plan__price .cur{ font-family:var(--font-display); font-size:23px; font-weight:500; color:var(--text-2); } .plan__price .num{ font-family:var(--font-display); font-size:54px; font-weight:600; letter-spacing:-.05em; line-height:1; } .plan__per{ font-size:14.5px; color:var(--muted); } .plan__save{ margin-top:14px; font-size:14px; color:var(--accent); font-weight:600; min-height:21px; } .plan .btn{ margin:26px 0 0; } .plan__feats{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line); } .plan__feats li{ display:flex; align-items:flex-start; gap:11px; font-size:15px; color:var(--text-2); padding:7px 0; } .plan__feats svg{ width:16px; height:16px; color:var(--accent); flex:none; margin-top:4px; } .plan-includes{ display:none; margin-top:24px; padding:26px 24px 22px; border-radius:var(--r); border:1px solid var(--line); background:var(--surface); } .plan-includes h3{ font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; } .pay-note{ position:relative; z-index:2; margin-top:52px; text-align:center; } .pay-methods__img{ max-width:480px; width:100%; height:auto; margin:0 auto; display:block; } @media (max-width: 640px){ .pay-methods__img{ max-width:340px; } } .pay-chips{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; } .pay-note p{ margin-top:16px; font-size:14.5px; color:var(--muted); } .pay-chip{ padding:11px 20px; border-radius:var(--r-xs); border:1px solid var(--line); background:var(--surface); font-size:12px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--muted-2); } /* ============================================================ TESTIMONIALS + screenshot gallery ============================================================ */ .testimonials{ background:var(--bg-2); border-block:1px solid var(--line); } .quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .quote{ display:flex; flex-direction:column; padding:36px 32px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--surface); } .quote__mark{ font-family:var(--font-display); font-size:44px; line-height:.7; color:var(--accent); opacity:.5; margin-bottom:18px; } .stars{ display:flex; gap:3px; margin-bottom:16px; color:var(--accent); } .stars svg{ width:16px; height:16px; } .quote p{ font-size:16.5px; color:var(--text-2); line-height:1.66; flex:1; } .quote__who{ margin-top:28px; padding-top:22px; border-top:1px solid var(--line); } .quote__who b{ display:block; font-size:15px; font-weight:600; } .quote__who span{ font-size:13.5px; color:var(--muted); } .shots-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin:64px 0 24px; } .shots-head h3{ font-size:1.5rem; } .shots-head p{ margin-top:8px; font-size:15px; color:var(--muted); } .shots-hint{ font-size:13.5px; color:var(--muted-2); white-space:nowrap; } .shots{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .shots .ph{ aspect-ratio:9/16; border-radius:var(--r); } .shots .ph__label{ font-size:12px; } /* ============================================================ STATS — placeholder figures until confirmed ============================================================ */ .stats{ display:grid; grid-template-columns:repeat(4,1fr); border-radius:var(--r-lg); border:1px solid var(--line); background:linear-gradient(180deg, var(--surface-2), var(--surface)); overflow:hidden; } .stat{ padding:46px 28px; text-align:center; border-right:1px solid var(--line); } .stat:last-child{ border-right:0; } .stat b{ display:block; font-family:var(--font-display); font-weight:600; font-size:clamp(2.2rem, 3.4vw, 3rem); letter-spacing:-.045em; line-height:1; background:linear-gradient(180deg, var(--text), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; } .stat span{ display:block; margin-top:12px; font-size:15px; color:var(--muted); } .stats-note{ margin-top:22px; text-align:center; font-size:13.5px; color:var(--muted-2); } /* ============================================================ FAQ ============================================================ */ .faq{ max-width:900px; margin-inline:auto; } .faq__item{ border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); margin-bottom:12px; transition:border-color var(--t), background var(--t); } .faq__item.is-open{ border-color:var(--accent-line); background:var(--surface-2); } .faq__q{ display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; padding:25px 28px; text-align:left; font-family:var(--font-display); font-size:17.5px; font-weight:500; letter-spacing:-.018em; } .faq__q i{ position:relative; width:22px; height:22px; flex:none; border-radius:50%; border:1px solid var(--line-strong); transition:border-color var(--t); } .faq__q i::before,.faq__q i::after{ content:""; position:absolute; top:50%; left:50%; width:9px; height:1.5px; border-radius:2px; background:var(--text-2); transform:translate(-50%,-50%); transition:transform var(--t), background var(--t); } .faq__q i::after{ transform:translate(-50%,-50%) rotate(90deg); } .is-open .faq__q i{ border-color:var(--accent); } .is-open .faq__q i::before,.is-open .faq__q i::after{ background:var(--accent); } .is-open .faq__q i::after{ transform:translate(-50%,-50%) rotate(0deg); } .faq__a > div{ overflow:hidden; } .faq__a p{ padding:0 28px 26px; color:var(--muted); font-size:16px; max-width:72ch; } /* Without JS every answer stays open and readable */ .js .faq__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s var(--ease); } .js .is-open .faq__a{ grid-template-rows:1fr; } /* ============================================================ FINAL CTA — the conclusion of the page ============================================================ */ .cta{ position:relative; overflow:hidden; padding:0 0 var(--sp-section); background:var(--bg); } .cta__inner{ position:relative; z-index:2; padding:110px 56px 104px; border-radius:var(--r-xl); border:1px solid var(--accent-line); background: radial-gradient(900px 420px at 50% 122%, rgba(0,224,174,.24), transparent 68%), radial-gradient(600px 300px at 50% -20%, rgba(0,224,174,.08), transparent 70%), linear-gradient(180deg, var(--surface-2), var(--bg-2)); text-align:center; overflow:hidden; box-shadow:0 60px 120px -50px var(--accent-glow); } .cta__inner h2{ font-size:clamp(2.3rem, 4.6vw, 3.7rem); max-width:17ch; margin-inline:auto; } .cta__inner p{ max-width:54ch; margin:22px auto 0; color:var(--text-2); font-size:1.1rem; } .cta__buttons{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:40px; } .cta__note{ margin-top:28px; font-size:14px; color:var(--muted-2); } /* ============================================================ FOOTER ============================================================ */ .footer{ position:relative; border-top:1px solid var(--line); background:var(--bg-2); padding:78px 0 0; overflow:hidden; } .footer__grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.7fr repeat(4, 1fr); gap:48px 32px; } .footer__about p{ margin-top:22px; color:var(--muted); font-size:15px; max-width:36ch; } .footer__contact{ margin-top:24px; display:grid; gap:10px; } .footer__contact a{ display:flex; align-items:center; gap:10px; font-size:15px; color:var(--text-2); transition:color var(--t); } .footer__contact a:hover{ color:var(--accent); } .footer__contact svg{ width:17px; height:17px; color:var(--accent); flex:none; } .socials{ display:flex; gap:10px; margin-top:26px; } .socials a{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; border:1px solid var(--line); background:var(--surface); color:var(--muted); transition:color var(--t), border-color var(--t), background var(--t); } .socials a:hover{ color:var(--accent); border-color:var(--accent-line); background:var(--surface-2); } .socials svg{ width:17px; height:17px; } .footer h4{ font-size:13.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text); margin-bottom:18px; } .footer__col a{ display:block; padding:7px 0; font-size:15px; color:var(--muted); transition:color var(--t); } .footer__col a:hover{ color:var(--accent); } .footer__bottom{ position:relative; z-index:2; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-top:58px; padding:24px 0 28px; border-top:1px solid var(--line); font-size:14px; color:var(--muted-2); } .footer__bottom nav{ display:flex; flex-wrap:wrap; gap:22px; } .footer__bottom a:hover{ color:var(--accent); } /* ============================================================ Reveal — only ever applied when JS is running. Without JS the content is simply visible. ============================================================ */ .js .reveal{ opacity:0; transform:translateY(16px); } .js .reveal.is-in{ opacity:1; transform:none; transition:opacity .55s var(--ease), transform .55s var(--ease); } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; } .js .reveal{ opacity:1; transform:none; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1180px){ .device-list{ grid-template-columns:repeat(4,1fr); } } @media (max-width:1080px){ :root{ --sp-section:84px; --sp-tight:68px; --sp-head:44px; } .cats{ grid-template-columns:repeat(2,1fr); } .plans{ grid-template-columns:repeat(2,1fr); } .plan--best{ transform:none; padding-bottom:32px; } .plan--best:hover{ transform:translateY(-5px); } .footer__grid{ grid-template-columns:1fr 1fr 1fr; } .footer__about{ grid-column:1 / -1; } .benefit{ padding:42px 36px; } .hero__phone{ width:124px; right:1%; } } @media (max-width:920px){ :root{ --gutter:20px; --sp-section:72px; --sp-tight:60px; --sp-head:38px; } .nav, .header__actions .btn{ display:none; } .burger{ display:flex; } .hero{ padding-top:calc(var(--nav-h) + 48px); } .hero__stage{ margin-top:42px; padding-bottom:78px; } .hero__badge{ left:0; bottom:60px; padding:12px 16px; } .hero__phone{ width:104px; right:0; bottom:20px; } /* Fewer posters as the frame narrows, so the rail never wraps out of it */ .stage__rail{ grid-template-columns:repeat(4,1fr); } .stage__rail .ph:nth-child(n+5){ display:none; } .stage__caption{ padding:0 20px 18px; } .benefits{ grid-template-columns:1fr; } .benefit{ border-right:0; } .benefit:nth-child(3){ border-bottom:1px solid var(--line); } .quotes{ grid-template-columns:1fr; } .steps{ grid-template-columns:1fr; gap:14px; } .steps::before{ display:none; } .step{ padding:30px 26px 28px; } .step__node{ margin-bottom:20px; width:50px; height:50px; } .step__ghost{ font-size:5.5rem; } .stats{ grid-template-columns:1fr 1fr; } .stat{ padding:34px 20px; } .stat:nth-child(2n){ border-right:0; } .stat:nth-child(-n+2){ border-bottom:1px solid var(--line); } .cta__inner{ padding:72px 26px 68px; } .devices__sub{ max-width:340px; margin-top:-34px; } .shots-head{ margin:48px 0 20px; flex-direction:column; align-items:flex-start; gap:10px; } .shots-hint{ white-space:normal; } } @media (max-width:640px){ :root{ --sp-section:56px; --sp-tight:48px; --sp-head:28px; } body{ font-size:16px; } /* Mobile is designed, not just stacked: tighter rhythm, swipeable rows */ h1,.h1{ font-size:2.35rem; } h2,.h2{ font-size:1.95rem; } .section-head p{ margin-top:14px; font-size:1rem; } .eyebrow{ margin-bottom:16px; padding:6px 13px 6px 10px; font-size:11.5px; } .hero{ padding-top:calc(var(--nav-h) + 34px); } .hero__cta{ margin-top:28px; gap:12px; } .hero__meta{ margin-top:24px; } .hero__stage{ margin-top:30px; padding-bottom:52px; } /* Categories: two columns keeps the page short and the art large */ .cats{ grid-template-columns:1fr 1fr; gap:14px; } .cat__art{ aspect-ratio:4/5; } .cat__body{ padding:16px 16px 15px; } .cat__body h3{ font-size:1.12rem; } .cat__body p{ display:none; } .cat__tag{ top:12px; left:12px; padding:5px 10px; font-size:10px; } .benefit{ padding:26px 22px; } .benefit__head{ gap:14px; margin-bottom:12px; } .benefit p{ font-size:15px; } .icon{ width:48px; height:48px; border-radius:14px; } .benefit h3{ font-size:1.25rem; } .device-list{ grid-template-columns:repeat(4,1fr); gap:10px; margin-top:36px; } .device{ padding:16px 4px; font-size:11.5px; gap:9px; } .device svg{ width:21px; height:21px; } .devices__sub{ max-width:none; grid-template-columns:1fr 1fr; margin-top:16px; } /* Pricing: compact cards, shared feature list below */ .selector{ margin-bottom:30px; } .selector__label{ font-size:12px; margin-bottom:12px; } .tabs{ display:grid; grid-template-columns:1fr 1fr; width:100%; border-radius:var(--r-sm); gap:6px; } .tabs button{ border-radius:var(--r-xs); padding:14px 10px; text-align:center; } /* Plans become compact rows on a phone: price left, action right */ .plans{ grid-template-columns:1fr; gap:22px; padding-top:22px; } .plan{ display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto auto auto; align-items:center; column-gap:14px; padding:20px 20px; } .plan__name{ grid-area:1 / 1; } .plan__price{ grid-area:2 / 1; margin:3px 0 0; } .plan__per{ grid-area:3 / 1; font-size:13.5px; } .plan__per-dev{ display:none; } .plan__save{ grid-area:4 / 1; margin-top:5px; min-height:0; font-size:13.5px; } .plan__price .num{ font-size:36px; } .plan__price .cur{ font-size:18px; } .plan .btn{ grid-area:1 / 2 / 5 / 3; margin:0; width:auto; white-space:nowrap; padding:14px 20px; font-size:15px; } .plan__feats{ display:none; } .plan-includes{ display:block; margin-top:22px; } /* Screenshots scroll sideways rather than stacking */ .shots{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:calc(var(--gutter) * -1); padding:2px var(--gutter) 12px; scrollbar-width:none; } .shots::-webkit-scrollbar{ display:none; } .shots .ph{ flex:0 0 60%; scroll-snap-align:center; } .quotes{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:calc(var(--gutter) * -1); padding:2px var(--gutter) 14px; scrollbar-width:none; } .quotes::-webkit-scrollbar{ display:none; } .quote{ flex:0 0 84%; scroll-snap-align:center; padding:26px 22px; } .quote p{ font-size:15.5px; } .quote__mark{ font-size:34px; margin-bottom:12px; } .quote__who{ margin-top:20px; padding-top:18px; } .shots-head{ margin:36px 0 16px; } /* Tighter cards so the page reads quickly on a phone */ .step{ padding:24px 22px 22px; } .step__node{ margin-bottom:16px; width:46px; height:46px; font-size:17px; } .step h3{ font-size:1.2rem; margin-bottom:8px; } .step p{ font-size:15px; } .step__ghost{ font-size:4.6rem; } .steps{ gap:12px; } .faq__q{ padding:19px 20px; font-size:16px; } .faq__a p{ padding:0 20px 20px; font-size:15.5px; } .faq__item{ margin-bottom:10px; } .plan__name{ font-size:15px; } .plan__price{ margin:12px 0 5px; } .plan__save{ margin-top:10px; } .plan-includes{ padding:22px 20px 20px; } .pay-note{ margin-top:34px; } .stat{ padding:28px 16px; } .cta__inner{ padding:56px 22px 54px; } .cta__inner p{ font-size:1rem; margin-top:16px; } .cta__buttons{ margin-top:28px; } .footer{ padding-top:60px; } .footer__grid{ grid-template-columns:1fr 1fr; gap:36px 24px; } .footer__bottom{ flex-direction:column; align-items:flex-start; margin-top:40px; } .btn{ width:100%; } .hero__cta .btn,.cta__buttons .btn{ width:100%; } .hero__meta{ gap:8px 18px; } .hero__badge{ display:none; } .hero__phone{ width:82px; bottom:12px; border-radius:16px; padding:5px; } .hero__phone .ph{ border-radius:12px; } .hero__phone .ph__label{ display:none; } .stage{ padding:8px; border-radius:var(--r-lg); } /* Squarer frame on a phone so the featured area keeps real presence */ .stage__frame{ border-radius:var(--r); aspect-ratio:1/1; } .stage__rail .ph{ aspect-ratio:3/4; } /* The caption already names this slot — drop the duplicate label */ .stage__feature > .ph__label{ display:none; } .stage__caption h3{ font-size:1.15rem; } .stage__rail{ grid-template-columns:repeat(3,1fr); gap:8px; padding:12px 12px 14px; } .stage__rail .ph:nth-child(n+4){ display:none; } .stage__caption{ padding:0 14px 12px; } .stage__chip{ display:none; } } /* ============================================================ Simple content pages (terms / privacy / refund) ============================================================ */ .page{ padding:calc(var(--nav-h) + 72px) 0 90px; position:relative; overflow:hidden; } .page__inner{ max-width:760px; margin-inline:auto; position:relative; z-index:2; } .page h1{ font-size:clamp(2.2rem, 4vw, 3rem); margin-bottom:18px; } .page__updated{ font-size:14px; color:var(--muted-2); margin-bottom:40px; } .page h2{ font-size:1.32rem; margin:40px 0 14px; } .page p, .page li{ color:var(--text-2); font-size:16.5px; } .page p + p{ margin-top:16px; } .page__note{ margin-bottom:40px; padding:20px 24px; border:1px dashed rgba(255,255,255,.16); border-radius:var(--r-sm); background:rgba(255,255,255,.02); font-size:14.5px; color:var(--muted); } .page__back{ display:inline-flex; align-items:center; gap:9px; margin-top:52px; color:var(--accent); font-weight:600; font-size:15px; } .page__back svg{ width:16px; height:16px; transform:rotate(180deg); } /* ============================================================ INTERNAL PAGES — shared components Everything below reuses the homepage tokens: same accent, same radii, same spacing scale, same signal motif. ============================================================ */ /* --- Active navigation state --- */ .nav a[aria-current="page"]{ color:var(--text); background:rgba(255,255,255,.07); } .mobile-nav a[aria-current="page"]{ color:var(--accent); } /* --- Build notes: visible only while --- */ .build-note{ display:none !important; } .ph.is-filled .ph__label{ display:none !important; } html[data-draft="true"] .build-note{ display:block; margin:22px 0; padding:16px 20px; border:1px dashed var(--accent-line); border-radius:var(--r-sm); background:rgba(0,224,174,.04); font-size:14px; color:var(--text-2); } html[data-draft="true"] .build-note strong{ color:var(--accent); } /* --- Floating WhatsApp Widget (Kemotvmax style) --- */ .floating-whatsapp { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: #25D366; color: #ffffff !important; font-weight: 600; font-size: 14px; border-radius: 50px; box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4); text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; } .floating-whatsapp:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(37, 211, 102, 0.6); color: #ffffff !important; } .floating-whatsapp svg { width: 22px; height: 22px; fill: currentColor; } @media (max-width: 640px) { .floating-whatsapp span { display: none; } .floating-whatsapp { padding: 14px; border-radius: 50%; bottom: 18px; right: 18px; } } /* --- Small page hero for internal pages --- */ .page-hero{ position:relative; overflow:hidden; padding:calc(var(--nav-h) + 66px) 0 58px; border-bottom:1px solid var(--line); background: radial-gradient(820px 380px at 50% -20%, rgba(0,224,174,.10), transparent 66%), var(--bg); } .page-hero__inner{ position:relative; z-index:2; max-width:780px; } .page-hero h1{ font-size:clamp(2.3rem, 4.4vw, 3.4rem); } .page-hero p{ margin-top:20px; color:var(--text-2); font-size:clamp(1.02rem,1.35vw,1.16rem); line-height:1.65; max-width:62ch; } .page-hero__cta{ display:flex; flex-wrap:wrap; gap:13px; margin-top:32px; } .crumb{ position:relative; z-index:2; font-size:13.5px; color:var(--muted-2); margin-bottom:18px; } .crumb a{ transition:color var(--t); } .crumb a:hover{ color:var(--accent); } .crumb span{ color:var(--muted-2); padding:0 7px; } /* --- Generic tile grid --- */ .tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .tiles--2{ grid-template-columns:repeat(2,1fr); } .tiles--4{ grid-template-columns:repeat(4,1fr); } .tile{ display:flex; flex-direction:column; padding:30px 28px 28px; border:1px solid var(--line); border-radius:var(--r); background:linear-gradient(180deg, var(--surface-2), var(--surface)); transition:transform var(--t), border-color var(--t); } .tile:hover{ transform:translateY(-4px); border-color:var(--accent-line); } .tile__icon{ width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent); margin-bottom:20px; } .tile__icon svg{ width:22px; height:22px; } .tile h3{ font-size:1.24rem; margin-bottom:10px; } .tile p{ color:var(--text-2); font-size:15px; flex:1; } .tile__meta{ margin-top:16px; font-size:13.5px; color:var(--muted); } .tile__link{ display:inline-flex; align-items:center; gap:8px; margin-top:20px; font-size:14.5px; font-weight:600; color:var(--accent); transition:gap var(--t); } .tile__link:hover{ gap:12px; } .tile__link svg{ width:15px; height:15px; } /* --- Alternating feature rows --- */ .row{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; } .row + .row{ margin-top:84px; } .row--rev .row__media{ order:2; } .row__media{ position:relative; } .row__media .glow{ width:74%; height:76%; left:13%; top:12%; } .row__media .ph{ position:relative; z-index:2; aspect-ratio:16/10; border-radius:var(--r-lg); box-shadow:var(--shadow); } .row__body h2{ font-size:clamp(1.7rem,2.6vw,2.25rem); } .row__body p{ margin-top:18px; color:var(--text-2); font-size:16.5px; line-height:1.68; } .row__list{ margin-top:22px; display:grid; gap:11px; } .row__list li{ display:flex; align-items:flex-start; gap:11px; font-size:15.5px; color:var(--text-2); } .row__list svg{ width:16px; height:16px; color:var(--accent); flex:none; margin-top:4px; } /* --- Numbered instruction list --- */ .olist{ counter-reset:step; display:grid; gap:16px; margin-top:22px; } .olist li{ counter-increment:step; position:relative; padding-left:52px; font-size:16px; color:var(--text-2); } .olist li::before{ content:counter(step); position:absolute; left:0; top:-2px; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-size:14px; font-weight:600; color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-line); } .olist li b{ color:var(--text); font-weight:600; } /* --- Panels --- */ .panel{ padding:36px 34px; border:1px solid var(--line); border-radius:var(--r-lg); background:linear-gradient(180deg, var(--surface-2), var(--surface)); } .panel h3{ font-size:1.3rem; margin-bottom:14px; } .panel p{ color:var(--text-2); font-size:15.5px; } .panel--accent{ border-color:var(--accent-line); background:linear-gradient(180deg, rgba(0,224,174,.06), var(--surface)); } /* --- Forms --- */ .form{ display:grid; gap:18px; } .form__row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } .field{ display:grid; gap:8px; } .field label{ font-size:14px; font-weight:600; color:var(--text-2); } .field label .opt{ font-weight:400; color:var(--muted-2); } .field input, .field textarea, .field select{ width:100%; padding:14px 16px; border-radius:var(--r-xs); border:1px solid var(--line-strong); background:var(--surface); color:var(--text); font-family:var(--font-body); font-size:16px; transition:border-color var(--t), background var(--t); } .field textarea{ min-height:140px; resize:vertical; } .field select{ appearance:none; cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px); background-size:6px 6px, 6px 6px; background-repeat:no-repeat; } .field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--accent); background:var(--surface-2); } .field input::placeholder, .field textarea::placeholder{ color:var(--muted-2); } .form__note{ font-size:13.5px; color:var(--muted-2); } /* --- Order summary --- */ .order{ display:grid; grid-template-columns:1.25fr .95fr; gap:32px; align-items:start; } .summary{ position:sticky; top:calc(var(--nav-h) + 20px); padding:30px 28px; border:1px solid var(--accent-line); border-radius:var(--r-lg); background: radial-gradient(420px 200px at 50% 0%, rgba(0,224,174,.12), transparent 70%), linear-gradient(180deg, var(--surface-2), var(--surface)); box-shadow:0 40px 80px -40px var(--accent-glow); } .summary h3{ font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:20px; } .summary__line{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:11px 0; font-size:15px; color:var(--text-2); border-bottom:1px solid var(--line); } .summary__line b{ color:var(--text); font-weight:600; } .summary__total{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-top:22px; } .summary__total span{ font-size:15px; color:var(--muted); } .summary__total b{ font-family:var(--font-display); font-size:38px; font-weight:600; letter-spacing:-.045em; } .summary .btn{ margin-top:24px; } .summary__feats{ margin-top:24px; padding-top:20px; border-top:1px solid var(--line); } .summary__feats li{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:var(--text-2); padding:6px 0; } .summary__feats svg{ width:15px; height:15px; color:var(--accent); flex:none; margin-top:4px; } /* --- FAQ groups --- */ .faq-group + .faq-group{ margin-top:44px; } .faq-group__title{ font-size:13px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; } /* --- Blog --- */ .post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .post{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); overflow:hidden; transition:transform var(--t), border-color var(--t); } .post:hover{ transform:translateY(-5px); border-color:var(--accent-line); } .post__media{ aspect-ratio:16/9; border:0; border-radius:0; border-bottom:1px solid var(--line); } .post__body{ padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; } .post__cat{ align-self:flex-start; padding:5px 12px; border-radius:var(--r-pill); background:var(--accent-soft); border:1px solid var(--accent-line); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; } .post h3{ font-size:1.2rem; line-height:1.3; } .post p{ margin-top:10px; font-size:15px; color:var(--muted); flex:1; } .post__meta{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); display:flex; gap:14px; font-size:13px; color:var(--muted-2); } .post__more{ margin-top:16px; display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:600; color:var(--accent); transition:gap var(--t); } .post:hover .post__more{ gap:12px; } .post__more svg{ width:15px; height:15px; } .post--feature{ display:grid; grid-template-columns:1.15fr 1fr; gap:0; margin-bottom:40px; } .post--feature .post__media{ aspect-ratio:16/10; border-bottom:0; border-right:1px solid var(--line); height:100%; } .post--feature .post__body{ padding:44px 42px; justify-content:center; } .post--feature h3{ font-size:clamp(1.5rem,2.4vw,2rem); } .post--feature p{ font-size:16.5px; color:var(--text-2); flex:none; } .cat-filter{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:38px; justify-content:center; } .cat-filter a{ padding:10px 18px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--surface); font-size:14px; font-weight:500; color:var(--muted); transition:color var(--t), border-color var(--t), background var(--t); } .cat-filter a:hover{ color:var(--text); border-color:var(--line-strong); background:var(--surface-2); } /* --- Article --- */ .article{ max-width:740px; margin-inline:auto; } .article__meta{ display:flex; flex-wrap:wrap; gap:8px 18px; font-size:14px; color:var(--muted); margin-top:22px; } .article__meta span{ display:flex; align-items:center; gap:7px; } .article__meta svg{ width:15px; height:15px; color:var(--accent); } .article__hero{ aspect-ratio:16/9; border-radius:var(--r-lg); margin:0 0 44px; } .article__body h2{ font-size:1.6rem; margin:44px 0 16px; } .article__body h3{ font-size:1.25rem; margin:32px 0 12px; } .article__body p{ color:var(--text-2); font-size:17px; line-height:1.75; } .article__body p + p{ margin-top:18px; } .article__body ul{ margin:20px 0; display:grid; gap:11px; } .article__body ul li{ display:flex; gap:12px; align-items:flex-start; color:var(--text-2); font-size:16.5px; } .article__body ul li::before{ content:""; width:6px; height:6px; margin-top:11px; border-radius:50%; background:var(--accent); flex:none; } .article__body .ph{ margin:32px 0; aspect-ratio:16/9; border-radius:var(--r); } .article__lead{ font-size:19px; color:var(--text); line-height:1.6; margin-bottom:8px; } /* --- Centred pages (404, thank you) --- */ .center-page{ position:relative; overflow:hidden; min-height:78vh; display:grid; place-items:center; padding:calc(var(--nav-h) + 70px) 0 90px; text-align:center; background:radial-gradient(900px 460px at 50% 10%, rgba(0,224,174,.10), transparent 66%), var(--bg); } .center-page__inner{ position:relative; z-index:2; max-width:640px; margin-inline:auto; } .center-page h1{ font-size:clamp(2.3rem,4.6vw,3.4rem); margin-bottom:20px; } .center-page p{ color:var(--text-2); font-size:1.08rem; } .center-page__cta{ display:flex; flex-wrap:wrap; gap:13px; justify-content:center; margin-top:36px; } .center-page .brand__mark{ width:64px; height:64px; border-radius:18px; margin:0 auto 28px; } .center-page .brand__mark svg{ width:32px; height:32px; } /* --- Social placeholders (no live profile URLs yet) --- */ .socials span{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; border:1px dashed var(--line-strong); background:var(--surface); color:var(--muted-2); cursor:default; } .socials span svg{ width:17px; height:17px; } /* --- Availability / small print --- */ .smallprint{ margin-top:34px; padding:18px 22px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); font-size:13.5px; color:var(--muted); line-height:1.6; } /* ============================================================ INTERNAL PAGES — responsive ============================================================ */ @media (max-width:1080px){ .tiles, .post-grid{ grid-template-columns:repeat(2,1fr); } .tiles--4{ grid-template-columns:repeat(2,1fr); } .order{ grid-template-columns:1fr; } .summary{ position:static; } .post--feature{ grid-template-columns:1fr; } .post--feature .post__media{ border-right:0; border-bottom:1px solid var(--line); aspect-ratio:16/9; } .post--feature .post__body{ padding:32px 28px; } } @media (max-width:920px){ .page-hero{ padding:calc(var(--nav-h) + 44px) 0 44px; } .row{ grid-template-columns:1fr; gap:32px; } .row + .row{ margin-top:56px; } .row--rev .row__media{ order:0; } .panel{ padding:28px 24px; } } @media (max-width:640px){ .tiles, .tiles--2, .tiles--4, .post-grid{ grid-template-columns:1fr; gap:14px; } .tile{ padding:24px 22px; } .form__row{ grid-template-columns:1fr; } .page-hero__cta .btn, .center-page__cta .btn{ width:100%; } .article__body p{ font-size:16px; } .article__lead{ font-size:17px; } .cat-filter{ justify-content:flex-start; margin-bottom:28px; } .summary{ padding:24px 22px; } .summary__total b{ font-size:32px; } } /* ============================================================ Expandable guides — native
, so they work with no JS ============================================================ */ .guide{ border:1px solid var(--line); border-radius:var(--r); background:var(--surface); margin-bottom:14px; overflow:hidden; transition:border-color var(--t), background var(--t); } .guide[open]{ border-color:var(--accent-line); background:var(--surface-2); } .guide > summary{ display:flex; align-items:center; gap:16px; padding:22px 26px; cursor:pointer; list-style:none; font-family:var(--font-display); font-size:18px; font-weight:500; letter-spacing:-.018em; } .guide > summary::-webkit-details-marker{ display:none; } .guide > summary::after{ content:""; margin-left:auto; flex:none; width:10px; height:10px; border-right:1.8px solid var(--muted); border-bottom:1.8px solid var(--muted); transform:rotate(45deg) translate(-2px,-2px); transition:transform var(--t), border-color var(--t); } .guide[open] > summary::after{ transform:rotate(-135deg) translate(-3px,-3px); border-color:var(--accent); } .guide__icon{ width:44px; height:44px; flex:none; border-radius:13px; display:grid; place-items:center; background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent); } .guide__icon svg{ width:21px; height:21px; } .guide__body{ padding:4px 26px 28px; border-top:1px solid var(--line); margin-top:2px; padding-top:24px; } .guide__body h4{ font-family:var(--font-display); font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:26px 0 12px; } .guide__body h4:first-child{ margin-top:0; } .guide__body p, .guide__body li{ color:var(--text-2); font-size:15.5px; } .guide__body ul{ display:grid; gap:9px; } .guide__body ul li{ display:flex; gap:11px; align-items:flex-start; } .guide__body ul li::before{ content:""; width:6px; height:6px; margin-top:10px; border-radius:50%; background:var(--accent); flex:none; } .guide__body .olist{ margin-top:0; } .guide__foot{ margin-top:26px; padding-top:20px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:12px; align-items:center; } .guide__foot span{ font-size:14px; color:var(--muted); } @media (max-width:640px){ .guide > summary{ padding:18px 18px; font-size:16.5px; gap:13px; } .guide__icon{ width:38px; height:38px; border-radius:11px; } .guide__icon svg{ width:18px; height:18px; } .guide__body{ padding:20px 18px 24px; } } /* --- Blog category filter: selected state --- */ .cat-filter a[aria-current="true"]{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600; } .cat-filter a[aria-current="true"]:hover{ background:var(--accent-2); border-color:var(--accent-2); color:var(--accent-ink); } .cat-count{ text-align:center; margin:-18px 0 34px; font-size:14.5px; color:var(--muted); } .post[hidden]{ display:none !important; } @media (max-width:640px){ .cat-count{ text-align:left; margin:-10px 0 24px; } } /* ============================================================ FILLED IMAGE SLOTS Same wrapper as the placeholder, so aspect ratios, corner radii and the readability gradients on .cat__art keep working. The image covers its box — never stretched, never distorted. ============================================================ */ .ph.is-filled{ border:0; background:var(--surface); } .ph.is-filled > .ph__label{ display:none; } .ph .media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; border-radius:inherit; } /* Device mockups are transparent PNG/SVG cut-outs — show them whole */ .ph.is-filled.devices__mock .media, .ph.is-filled.stage__device .media{ object-fit:contain; background:none; } .ph.is-filled.devices__mock, .ph.is-filled.stage__device{ background:none; box-shadow:none; } /* Keep the subject centred as crops change across breakpoints */ @media (max-width:920px){ .cat__art .media{ object-position:center 40%; } } @media (max-width:640px){ .ph.is-filled.article__hero .media, .ph.is-filled.post__media .media{ object-position:center 45%; } } /* Readability gradients must sit ABOVE the image, below the text. Without this the overlaid titles lose contrast once a slot is filled. */ .ph .media{ z-index:0; } .stage__feature::after, .cat__art::after{ z-index:1; } .stage__caption, .cat__body, .cat__tag{ z-index:2; } /* ------------------------------------------------------------ Per-image crop anchoring. The Live TV photograph is 2.40:1 — much wider than any slot it sits in — so `cover` crops its sides. The anchor desk and globe screen sit left of centre, and the narrower the slot the more of them a centred crop would lose. Nudging the focal point left keeps the studio in frame down to the 4:5 mobile card. Nothing is stretched: this only moves the crop window. ------------------------------------------------------------ */ @media (max-width:1080px){ [data-slot="cat-livetv"] .media{ object-position:42% center; } } @media (max-width:640px){ [data-slot="cat-livetv"] .media{ object-position:38% center; } } /* is only a wrapper — it must not affect layout */ .ph picture{ display:contents; }