/* PataSimu public site — the whole design system (owner C). This is the only stylesheet the public site loads besides fonts.css, and it is the thing that makes six independently-built page templates read as one website. The values here are not fresh design decisions: they are lifted from the concept build the director approved (patasimu/design/patasimu-site/assets/css/styles.css) and from the two approved renders, so anything that looks arbitrary below is almost certainly deliberate fidelity to those. Where a rule is genuinely a judgement call it carries a comment saying why. Three things in the concept are deliberately NOT reproduced, per contract section 3: the CSS-box "phone" (artwork is hand-crafted SVG from artwork.py), the emoji glyphs (every icon is a drawn path from _site_macros.html), and the Google Fonts link (fonts are self-hosted). Layout order below follows the page down: tokens, reset, shell, buttons, hero, sections, catalogue, product page, marketing bands, funnel and forms, content and legal, then every media query collected at the end so the breakpoints are auditable in one place. The breakpoints are the concept's own — 1100 / 850 / 560 — and the floor the site is tested at is 360px wide. Class names are the fixed vocabulary of contract section 12. Page owners may not invent classes here; anything page-specific lives in that page's own head_extra block under a ps- prefix. The handful of ps- classes defined in this file belong to the shared shell (site_base.html), which is owned by the same workstream as this file, and are marked as such. */ /* ── Tokens ──────────────────────────────────────────────────────────────────── The palette, elevation, radii and type stacks exactly as contract section 12 fixes them. Every colour on the site resolves through one of these, so a brand change is a change here and nowhere else. */ :root{ /* palette */ --navy:#0D3B45; --teal:#0FA3A6; --orange:#FF8A00; --soft:#F5F7F8; --line:#E6E9EC; --text:#183D46; --muted:#66777E; --white:#FFFFFF; --nav-ink:#46616A; --lead-ink:#3E6068; --pill-ink:#60727A; --orange-hover:#F07F00; --footer-bg:#082C34; --footer-link:#C4D5D8; --footer-accent:#73D1D0; --badge-ink:#157A69; --badge-bg:#E6F7F0; --tint-teal:#E3F3F3; --tint-orange:#FFF0E1; --cta-grad-a:#0D6570; --cta-grad-b:#078B92; /* elevation */ --shadow:0 12px 32px rgba(13,59,69,.09); --shadow-btn:0 8px 20px rgba(255,138,0,.22); /* radii */ --r-btn:12px; --r-card:20px; --r-tile:16px; --r-bcard:18px; --r-cta:24px; --r-pill:999px; /* type */ --font-display:'Manrope',sans-serif; /* 700/800: headings, brand, numerals */ --font-body:'DM Sans',sans-serif; /* 400-700: everything else */ } /* Status colours. The contract's token block has none, but its class vocabulary requires .flash.ok|.warn|.err, .field .error, .product-badge.oos, .legal-banner and .placeholder-clause — all of which have to state a condition in colour as well as in words. These are added here rather than typed into each rule so the site still has exactly one place where a colour is decided. Every one of them is AA against its own background, and none of them is the only signal: each carries an icon or a word too, because colour alone is not a status. */ :root{ --ok-ink:#0E6B58; --ok-bg:#E6F7F0; --ok-line:#B7E3D5; --warn-ink:#8A5300; --warn-bg:#FFF3E2; --warn-line:#F2D3A6; --err-ink:#A3271F; --err-bg:#FCECEA; --err-line:#EFC5C0; --oos-ink:#5C6C73; --oos-bg:#EDF0F1; } /* ── Reset and page ground ─────────────────────────────────────────────────── */ *{box-sizing:border-box} html{scroll-behavior:smooth} /* Anchored FAQ headings (the footer links /faqs#payments and /faqs#device) would otherwise land under the sticky 76px header. */ html{scroll-padding-top:92px} body{ margin:0; color:var(--text); font-family:var(--font-body); background:var(--white); line-height:1.55; font-size:15px; -webkit-font-smoothing:antialiased; /* A public site must never scroll sideways; several decorative elements are positioned outside the container on purpose and this is what contains them. */ overflow-x:hidden; } a{text-decoration:none;color:inherit} img,svg{max-width:100%} button{font-family:inherit} h1,h2,h3,h4{font-family:var(--font-display)} .container{width:min(1200px,calc(100% - 48px));margin:auto} /* Keyboard focus is visible everywhere, in the brand's own teal rather than the browser default, and never suppressed. */ :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{ outline:2px solid var(--teal); outline-offset:2px; border-radius:4px; } /* Shell-only helper (owner C). Sighted users never see it; keyboard users get out of the six-item nav in one keystroke. */ .ps-skiplink{ position:absolute;left:-9999px;top:0;z-index:200; background:var(--navy);color:var(--white); padding:12px 18px;border-radius:0 0 var(--r-btn) 0; font-weight:700;font-size:14px; } .ps-skiplink:focus{left:0} /* ── Header ─────────────────────────────────────────────────────────────────── Sticky, 76px, translucent white over a blur. The blur is the reason the background is rgba rather than solid: hero artwork scrolling under the header should stay faintly readable through it, which is what the render shows. */ .site-header{ position:sticky;top:0;z-index:50; background:rgba(255,255,255,.94); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid rgba(230,233,236,.8); } .nav-wrap{min-height:76px;display:flex;align-items:center;gap:28px;position:relative} .brand{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:800;letter-spacing:-.8px} .brand-mark{width:38px;height:38px;display:block;flex:none} .brand-name{font-size:28px;color:var(--navy);white-space:nowrap} .brand-name strong{color:var(--teal);font-weight:800} .nav{display:flex;gap:28px;margin-left:auto;font-size:14px;font-weight:600;color:var(--nav-ink)} .nav a{transition:color .2s} .nav a:hover{color:var(--teal)} .nav a[aria-current="page"]{color:var(--teal)} .nav-actions{display:flex;gap:10px;align-items:center} /* The toggle only appears below 850px (see the media queries). It holds two icons and CSS picks one, so the button never has to be re-labelled from JavaScript and the closed state is correct before any script runs. */ .mobile-menu{ display:none;border:0;background:none;padding:6px;margin-left:auto; color:var(--navy);cursor:pointer;line-height:0; } .mobile-menu .ico{width:26px;height:26px} .mobile-menu .ps-icon-close{display:none} .main-nav-open .mobile-menu .ps-icon-close{display:block} .main-nav-open .mobile-menu .ps-icon-menu{display:none} /* ── Buttons and inline links ─────────────────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:44px;padding:0 20px; border-radius:var(--r-btn);border:1px solid transparent; font-family:var(--font-body);font-weight:700;font-size:14px; cursor:pointer;transition:.2s;text-align:center; } .btn .ico{width:18px;height:18px;flex:none} .btn-primary{background:var(--orange);color:var(--white);box-shadow:var(--shadow-btn)} .btn-primary:hover{transform:translateY(-1px);background:var(--orange-hover)} .btn-outline{background:var(--white);color:var(--navy);border-color:#9DB0B5} .btn-outline:hover{border-color:var(--teal);color:var(--teal)} .btn-lg{min-height:52px;padding:0 22px} .btn-white{background:var(--white);color:var(--navy)} .btn-white:hover{transform:translateY(-1px)} .btn-ghost-white{color:var(--white);text-decoration:underline;text-underline-offset:4px} .btn-ghost-white:hover{opacity:.85} .btn[aria-disabled="true"],.btn:disabled{opacity:.55;pointer-events:none} .text-link{font-weight:800;color:var(--teal);display:inline-flex;align-items:center;gap:8px} .text-link .ico{width:18px;height:18px} .text-link:hover{text-decoration:underline;text-underline-offset:3px} /* ── Flash messages ───────────────────────────────────────────────────────── */ .flash{ display:flex;align-items:flex-start;gap:10px; margin:16px auto 0;padding:12px 16px; border:1px solid var(--line);border-radius:var(--r-btn); font-size:14px;font-weight:600; } .flash .ico{width:19px;height:19px;flex:none;margin-top:1px} .flash.ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-ink)} .flash.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-ink)} .flash.err{background:var(--err-bg);border-color:var(--err-line);color:var(--err-ink)} /* ── Hero ─────────────────────────────────────────────────────────────────── */ .hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff,#fbfdfd)} .hero-grid{min-height:540px;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:20px} .hero-copy{position:relative;z-index:1} .hero h1{ font:800 clamp(46px,5.8vw,76px)/.98 var(--font-display); letter-spacing:-2.8px;color:var(--navy);margin:0 0 18px; } .hero h1 span{color:var(--teal)} .hero-lead{font-size:24px;margin:0 0 22px;color:var(--lead-ink)} .hero-ctas{display:flex;gap:12px;flex-wrap:wrap} /* The hero art is one SVG from artwork.py (handsets, orb and orange dot together), so this box only has to reserve its height and let the drawing fill it. */ .hero-art{height:455px;position:relative;display:flex;align-items:center;justify-content:flex-end} .hero-art svg{height:100%;width:auto;max-width:none} /* The loose dot field at the top right of the render, drawn in CSS because it is pure texture — putting it in the artwork SVG would tie it to the artwork's box. */ .hero-dots{ position:absolute;right:0;top:30px;width:180px;height:180px; background-image:radial-gradient(#9FD5D5 1.6px,transparent 1.6px); background-size:12px 12px;opacity:.45;pointer-events:none; } .eyebrow{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.12em;color:var(--teal);margin-bottom:15px;text-transform:uppercase} .eyebrow.light{color:#A3E4E2} .trust-pills{display:flex;gap:20px;flex-wrap:wrap;margin-top:22px;color:var(--pill-ink);font-size:13px} .trust-pills>*{display:inline-flex;align-items:center} .pill-icon{ display:inline-grid;place-items:center;width:24px;height:24px; border:1px solid #8CB9BA;border-radius:50%;color:var(--teal); margin-right:7px;flex:none; } .pill-icon .ico{width:13px;height:13px} /* ── Section rhythm ───────────────────────────────────────────────────────── */ .section{padding:78px 0} .section-soft{background:linear-gradient(180deg,#F7FBFB,#F2F7F8)} .section-heading{margin-bottom:24px;max-width:760px} .section-intro h2,.section-heading h2{ font:800 36px/1.08 var(--font-display); letter-spacing:-1.4px;color:var(--navy);margin:0 0 12px; } .section-intro p,.section-heading p{color:var(--muted);margin:0 0 20px} /* The teal band that opens every interior page — the catalogue's "Find your phone." in the reference sheet, and the same treatment for How It Works, FAQs and the rest so an interior page is instantly distinguishable from the homepage. */ .page-head{ background:linear-gradient(115deg,var(--cta-grad-a),var(--cta-grad-b)); color:var(--white);padding:46px 0 52px;position:relative;overflow:hidden; } .page-head h1{font:800 clamp(32px,4vw,44px)/1.06 var(--font-display);letter-spacing:-1.4px;margin:0 0 10px} .page-head p{margin:0;max-width:620px;color:rgba(255,255,255,.84);font-size:17px} .page-head .eyebrow{color:#A3E4E2} /* The soft arc bleeding off the right edge, as in the render's teal header band. */ .page-head::after{ content:'';position:absolute;right:-90px;top:-70px;width:280px;height:280px; border-radius:50%;background:rgba(255,255,255,.06);pointer-events:none; } /* ── Catalogue: the featured strip, the grid, the cards ───────────────────── */ .phones-grid{display:grid;grid-template-columns:240px 1fr;gap:26px;align-items:center} .featured-products{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .product-card{ position:relative; border:1px solid var(--line);border-radius:var(--r-card); background:var(--white);box-shadow:var(--shadow); padding:16px;overflow:hidden; display:flex;flex-direction:column; transition:transform .2s,box-shadow .2s; } .product-card:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(13,59,69,.13)} .product-badge{ position:absolute;top:14px;right:14px;z-index:1; font-size:10px;font-weight:800;letter-spacing:.04em; color:var(--badge-ink);background:var(--badge-bg); border-radius:var(--r-pill);padding:5px 8px; } .product-badge.oos{color:var(--oos-ink);background:var(--oos-bg)} /* The tile behind the artwork. The render tints it per device; data-brand lets the card do that without a new class, and an untinted card is a valid default. */ .product-visual{ height:175px;border-radius:var(--r-tile); display:grid;place-items:center;position:relative; margin-bottom:14px;overflow:hidden; background:linear-gradient(160deg,#EDF9F9,#D9F4F3); } .product-visual[data-brand="zte"]{background:linear-gradient(160deg,#E8F5F5,#D2EFEF)} .product-visual[data-brand="vivo"]{background:linear-gradient(160deg,#EDF2FB,#DAE5F6)} .product-visual[data-brand="apple"]{background:linear-gradient(160deg,#EDEFF0,#D7DEE0)} .product-visual img,.product-visual svg{height:88%;width:auto;max-width:100%;object-fit:contain} .product-body{display:flex;flex-direction:column;flex:1} .product-body small{color:var(--muted);display:block;margin-bottom:1px;font-weight:700} .product-body h3{margin:0 0 3px;font:800 18px var(--font-display);color:var(--navy)} .product-body>span{font-size:12px;color:var(--muted)} .product-price{margin:12px 0;color:#6A787D;font-size:12px} .product-price strong{font-size:18px;color:var(--teal);font-family:var(--font-display);font-weight:800} .product-btn{width:100%;min-height:40px;margin-top:auto} .phones-grid .featured-products{grid-template-columns:repeat(3,1fr)} /* The full catalogue page: rail on the left, results on the right. */ .filter-rail{ border:1px solid var(--line);border-radius:var(--r-bcard); background:var(--white);padding:20px;align-self:start; position:sticky;top:92px; } .filter-group{padding:14px 0;border-top:1px solid var(--line)} .filter-group:first-child{padding-top:0;border-top:0} .filter-group h4{ margin:0 0 10px;font:800 12px var(--font-display); letter-spacing:.1em;text-transform:uppercase;color:var(--navy); } .filter-group>div{display:flex;flex-wrap:wrap;gap:8px} .chip{ display:inline-flex;align-items:center;gap:7px; min-height:36px;padding:0 14px; border:1px solid var(--line);border-radius:var(--r-pill); background:var(--white);color:var(--navy); font-size:13px;font-weight:600;cursor:pointer;transition:.18s; } .chip:hover{border-color:var(--teal);color:var(--teal)} .chip.active{background:var(--teal);border-color:var(--teal);color:var(--white)} .chip.active:hover{color:var(--white)} .chip[aria-disabled="true"]{opacity:.45;pointer-events:none} .chip small{font-weight:600;opacity:.7} .sort-select{ min-height:40px;padding:0 34px 0 14px; border:1px solid var(--line);border-radius:var(--r-btn); background:var(--white);color:var(--navy); font-family:var(--font-body);font-size:14px;font-weight:600;cursor:pointer; /* The chevron is drawn rather than left to the platform widget so the control looks the same on Android Chrome and desktop Safari. */ appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='%230D3B45' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.6 8.4 5.4 5.4 5.4-5.4'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 10px center;background-size:16px; } .results-count{font-size:14px;color:var(--muted);font-weight:600} .pagination{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:34px;flex-wrap:wrap} .pagination a,.pagination span{ min-width:40px;min-height:40px;padding:0 10px; display:inline-grid;place-items:center; border:1px solid var(--line);border-radius:var(--r-btn); font-size:14px;font-weight:700;color:var(--navy);background:var(--white); } .pagination a:hover{border-color:var(--teal);color:var(--teal)} .pagination [aria-current="page"]{background:var(--navy);border-color:var(--navy);color:var(--white)} .pagination .ico{width:16px;height:16px} /* ── Product detail ───────────────────────────────────────────────────────── */ .crumbs{font-size:13px;color:var(--muted);padding:18px 0;display:flex;flex-wrap:wrap;gap:6px;align-items:center} .crumbs a{color:var(--teal);font-weight:600} .crumbs a:hover{text-decoration:underline} .crumbs .ico{width:14px;height:14px;color:#9DAFB4} .pdp-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:start;padding-bottom:20px} .pdp-art{ background:linear-gradient(160deg,#EDF9F9,#DCEFEF); border-radius:var(--r-card);min-height:440px; display:grid;place-items:center;padding:28px;overflow:hidden; } .pdp-art img,.pdp-art svg{max-height:380px;width:auto} .pdp-thumbs{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap} .pdp-thumbs a,.pdp-thumbs button{ width:66px;height:66px;padding:6px; border:1px solid var(--line);border-radius:14px;background:var(--white); display:grid;place-items:center;cursor:pointer; } .pdp-thumbs [aria-current="true"],.pdp-thumbs [aria-pressed="true"],.pdp-thumbs .active{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)} /* Artwork arrives with its own width/height attributes, and a percentage max-height against a grid area does not resolve, so the thumbnail box drives both dimensions and preserveAspectRatio does the fitting. */ .pdp-thumbs img,.pdp-thumbs svg{width:100%;height:100%;object-fit:contain} .pdp-price{ border:1px solid var(--line);border-radius:var(--r-bcard); padding:18px 20px;margin:4px 0 20px;background:var(--white); } .pdp-price small{display:block;font-size:12px;color:var(--muted);font-weight:700;margin-bottom:2px} .pdp-price strong{font:800 30px var(--font-display);color:var(--navy);letter-spacing:-1px;display:block} .pdp-price .from{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);color:var(--muted);font-size:13px} .pdp-price .from b{font:800 22px var(--font-display);color:var(--teal)} .variant-chips,.colour-chips,.tenure-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px} /* A colour chip carries a swatch of the colour it names. The swatch is decorative and the name is always written beside it — a customer choosing "Midnight" must never have to distinguish it from "Black" by a 12px dot alone. */ .colour-chips .chip i{width:13px;height:13px;border-radius:50%;background:var(--sw,#333);border:1px solid rgba(13,59,69,.18);flex:none} /* Frequency and tenure pickers are real radio inputs so the page works with JavaScript off: without JS the form posts and the server re-renders the figure, with JS site.js swaps the precomputed value in place. */ .freq-toggle{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px} .freq-toggle label,.tenure-chips label{ display:inline-flex;align-items:center;gap:8px; min-height:40px;padding:0 16px; border:1px solid var(--line);border-radius:var(--r-pill); background:var(--white);color:var(--navy); font-size:13px;font-weight:700;cursor:pointer;transition:.18s; } .freq-toggle input,.tenure-chips input{position:absolute;opacity:0;width:1px;height:1px} .freq-toggle label:hover,.tenure-chips label:hover{border-color:var(--teal)} .freq-toggle input:checked+span,.tenure-chips input:checked+span{color:inherit} .freq-toggle label:has(input:checked),.tenure-chips label:has(input:checked){ background:var(--teal);border-color:var(--teal);color:var(--white); } /* :has() is well supported now but not everywhere; site.js also mirrors the checked state onto the label as .active, so the selection is never invisible. */ .freq-toggle label.active,.tenure-chips label.active{background:var(--teal);border-color:var(--teal);color:var(--white)} .freq-toggle label:focus-within,.tenure-chips label:focus-within{outline:2px solid var(--teal);outline-offset:2px} .estimate-block{ background:var(--tint-teal);border:1px solid #C7E6E5;border-radius:var(--r-tile); padding:20px;margin-bottom:16px; } .estimate-block small{display:block;font-size:12px;font-weight:700;color:var(--navy);opacity:.75;margin-bottom:4px} .estimate-block strong{font:800 28px var(--font-display);color:var(--navy);letter-spacing:-1px;display:block} .estimate-block strong span{font-size:15px;font-weight:700;color:var(--muted);letter-spacing:0} .estimate-block dl{display:grid;grid-template-columns:1fr auto;gap:6px 16px;margin:14px 0 0;font-size:13px} .estimate-block dt{color:#42636B} .estimate-block dd{margin:0;text-align:right;font-weight:700;color:var(--navy)} /* The indicative caption is not decoration. Every figure on this page is a representation to a consumer, and this line is what keeps it from reading as a binding offer, so it is styled to be read rather than skimmed past. */ .estimate-note{ font-size:12.5px;color:#4C6C74;background:var(--soft); border-left:3px solid var(--teal);border-radius:0 8px 8px 0; padding:10px 14px;margin:0 0 18px; } .estimate-note a{color:var(--teal);font-weight:700;text-decoration:underline;text-underline-offset:2px} .spec-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:26px 0} .spec-row>div{ border:1px solid var(--line);border-radius:14px;padding:14px; display:flex;gap:10px;align-items:flex-start;background:var(--white); } .spec-row .ico{width:20px;height:20px;color:var(--teal);flex:none;margin-top:2px} .spec-row strong{display:block;font:700 13px var(--font-display);color:var(--navy)} .spec-row span{font-size:12px;color:var(--muted)} /* ── How it works, benefits, audience, trust, CTA ─────────────────────────── */ .how-grid{display:grid;grid-template-columns:280px 1fr;gap:45px;align-items:center} .steps{display:flex;align-items:center;gap:18px} .step{position:relative;display:grid;grid-template-columns:58px 1fr;column-gap:14px;align-items:center;flex:1} .step-no{ position:absolute;left:0;top:-24px; font-size:12px;border:1px solid #9BB4B8;border-radius:50%; width:30px;height:30px;display:grid;place-items:center; color:var(--navy);font-weight:800;background:var(--white); font-family:var(--font-display); } .step-icon{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--tint-teal)} .step-icon .ico{width:28px;height:28px} .icon-orange{background:var(--tint-orange);color:var(--orange)} .icon-teal{background:var(--tint-teal);color:var(--navy)} .step h3{font-size:16px;margin:0 0 4px;font-family:var(--font-display);font-weight:800;color:var(--navy)} .step p{font-size:13px;color:var(--muted);margin:0} .step-arrow{color:#88A0A6;display:inline-grid;place-items:center;flex:none} .step-arrow .ico{width:26px;height:26px} .benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .benefit-card{border:1px solid var(--line);border-radius:var(--r-bcard);padding:22px;background:var(--white)} .benefit-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;margin-bottom:16px} .benefit-icon .ico{width:22px;height:22px} .benefit-card h3{font:800 17px var(--font-display);margin:0 0 6px;color:var(--navy)} .benefit-card p{color:var(--muted);font-size:13px;margin:0} /* The audience cards carry a hand-drawn scene from artwork.py behind the copy. The gradient below is the fallback ground the drawing sits on and also what shows through its transparent areas, so the two are tuned together per card. */ .audience-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .audience-card{ height:310px;border-radius:var(--r-card);overflow:hidden;position:relative; box-shadow:var(--shadow);background:linear-gradient(160deg,#6EA7A7,#1E444B); } .audience-card[data-audience="rider"]{background:linear-gradient(160deg,#6EA7A7,#1E444B)} .audience-card[data-audience="shop"]{background:linear-gradient(160deg,#B7985E,#5F4A29)} .audience-card[data-audience="pro"]{background:linear-gradient(160deg,#90A0A8,#2C3840)} .audience-card[data-audience="student"]{background:linear-gradient(160deg,#C97B79,#5B3C47)} .audience-card svg{position:absolute;inset:0;width:100%;height:100%} /* The scrim: without it the white copy at the foot of the card is unreadable over the lighter parts of the artwork. */ .audience-card::before{ content:'';position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.25),transparent 35%), linear-gradient(180deg,transparent 45%,rgba(8,27,31,.86) 100%); } .audience-copy{position:absolute;left:18px;right:18px;bottom:18px;color:var(--white);z-index:2} .audience-copy h3{margin:8px 0 3px;font:800 18px var(--font-display)} .audience-copy p{margin:0;color:rgba(255,255,255,.86);font-size:12px} .mini-chip{display:inline-grid;place-items:center;width:34px;height:34px;background:var(--teal);border-radius:50%;color:var(--white)} .mini-chip .ico{width:17px;height:17px} .trust-section{padding:26px 0;background:var(--navy);color:var(--white)} .trust-row{display:grid;grid-template-columns:repeat(4,1fr) 190px;gap:18px;align-items:center} .trust-item{display:flex;gap:10px;align-items:flex-start} .trust-icon{ width:40px;height:40px;border:1px solid rgba(255,255,255,.35);border-radius:50%; display:grid;place-items:center;flex:none;color:#65D4D3; } .trust-icon .ico{width:19px;height:19px} .trust-item strong{font:700 14px var(--font-display)} .trust-item p{font-size:11px;opacity:.72;margin:2px 0 0} .trust-ownership{ border-left:1px solid rgba(255,255,255,.2);padding-left:20px; text-align:right;color:#9DE3E2;font:700 14px var(--font-display); } .cta-section{padding:34px 0 80px} .cta-card{ position:relative;overflow:hidden; background:linear-gradient(110deg,var(--cta-grad-a),var(--cta-grad-b)); border-radius:var(--r-cta);padding:36px 44px; display:flex;justify-content:space-between;align-items:center;gap:20px; color:var(--white); } .cta-card h2{font:800 30px/1.1 var(--font-display);margin:0;max-width:600px;letter-spacing:-.8px} .cta-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:relative;z-index:1} .cta-arc{position:absolute;right:-38px;bottom:-70px;width:145px;height:145px;border-radius:50%;background:var(--orange)} /* ── Funnel and forms ─────────────────────────────────────────────────────── */ .funnel-rail{ display:flex;align-items:flex-start;justify-content:center; gap:0;margin:34px auto 30px;max-width:720px; } .funnel-step{ flex:1;display:flex;flex-direction:column;align-items:center;gap:8px; position:relative;font-size:13px;font-weight:600;color:var(--muted);text-align:center; } .funnel-step>span:first-child{ width:44px;height:44px;border-radius:50%; display:grid;place-items:center; background:var(--soft);border:1px solid var(--line); color:var(--muted);font:800 17px var(--font-display); } .funnel-step>span:first-child .ico{width:20px;height:20px} /* The connector runs from each step to the next; the last step has none. Drawn as a pseudo-element rather than a separate node so the markup stays one item per step. */ .funnel-step::after{ content:'';position:absolute;top:22px;left:calc(50% + 30px);right:calc(-50% + 30px); height:1px;background:var(--line); } .funnel-step:last-child::after{display:none} .funnel-step.done>span:first-child{background:var(--tint-teal);border-color:var(--teal);color:var(--teal)} .funnel-step.done::after{background:var(--teal)} .funnel-step.current>span:first-child{background:var(--navy);border-color:var(--navy);color:var(--white)} .funnel-step.current{color:var(--navy);font-weight:700} .form-card{ width:min(640px,100%);margin:0 auto 24px; background:var(--white);border:1px solid var(--line);border-radius:var(--r-card); box-shadow:var(--shadow);padding:34px 40px 36px; } .form-card>h1,.form-card>h2{ font:800 30px/1.12 var(--font-display);letter-spacing:-1.2px; color:var(--navy);margin:0 0 6px;text-align:center; } .form-card>p{color:var(--muted);margin:0 0 24px;text-align:center;font-size:15px} .field{margin-bottom:18px} .field label{display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:7px} .field label em{font-style:normal;font-weight:500;color:var(--muted)} .field input,.field select,.field textarea{ width:100%;min-height:48px;padding:12px 14px; border:1px solid var(--line);border-radius:var(--r-btn); background:var(--white);color:var(--text); font-family:var(--font-body);font-size:15px; } .field textarea{min-height:132px;resize:vertical} .field input::placeholder,.field textarea::placeholder{color:#9AA9AE} .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(15,163,166,.14); } .field .hint{display:block;font-size:12px;color:var(--muted);margin-top:6px} .field .error{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--err-ink);margin-top:6px} .field .error .ico{width:15px;height:15px;flex:none} .field:has(.error) input,.field:has(.error) select,.field:has(.error) textarea{border-color:var(--err-line)} .consent{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--text);margin:22px 0 20px} .consent input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--teal)} .consent a{color:var(--teal);font-weight:600;text-decoration:underline;text-underline-offset:2px} .otp-inputs{display:flex;gap:10px;justify-content:center;margin:8px 0 20px} /* One wide input is a normal stacked field, not a row of boxes. */ .otp-inputs:has(.ps-otp){display:block} /* Scoped off .ps-otp deliberately. These rules describe the six single-digit boxes of the concept; the build uses ONE six-digit input (better for autofill and for a screen reader) inside the same wrapper. As a type selector this rule outranks the .ps-otp class, so unscoped it squeezes that whole input down to 52px — one visible digit. */ .otp-inputs input:not(.ps-otp){ width:52px;height:62px;padding:0;text-align:center; font:800 24px var(--font-display);color:var(--navy); border:1px solid var(--line);border-radius:14px;background:var(--white); } .otp-inputs input:not(.ps-otp):focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(15,163,166,.14)} .summary-card{ background:var(--soft);border:1px solid var(--line);border-radius:var(--r-tile); padding:20px 22px;margin:0 0 20px; } .summary-card h3{font:800 15px var(--font-display);color:var(--navy);margin:0 0 12px} .summary-card dl{display:grid;grid-template-columns:1fr auto;gap:8px 18px;margin:0;font-size:13.5px} .summary-card dt{color:var(--muted)} .summary-card dd{margin:0;text-align:right;font-weight:700;color:var(--navy)} /* The application reference is the one string a customer will be asked to read back over the phone, so it is set large, spaced, and in the numeral face. */ .ref-badge{ display:inline-flex;align-items:center;gap:10px; background:var(--navy);color:var(--white); border-radius:var(--r-pill);padding:12px 24px; font:800 22px var(--font-display);letter-spacing:.09em; } /* ── Content pages, FAQs, legal ───────────────────────────────────────────── */ .prose{max-width:70ch} .prose h2{font:800 26px/1.16 var(--font-display);letter-spacing:-.8px;color:var(--navy);margin:34px 0 10px} .prose h3{font:800 17px var(--font-display);color:var(--navy);margin:24px 0 8px} .prose h2:first-child,.prose h3:first-child{margin-top:0} .prose p{margin:0 0 14px;color:#3F5A61} .prose ul,.prose ol{margin:0 0 16px;padding-left:20px;color:#3F5A61} .prose li{margin-bottom:7px} .prose a{color:var(--teal);font-weight:600;text-decoration:underline;text-underline-offset:3px} .prose strong{color:var(--navy)} .prose>:last-child{margin-bottom:0} /* FAQs are native
so they open with JavaScript off, are findable by the browser's own in-page search, and need no ARIA of their own. */ .faq-list{display:grid;gap:12px;max-width:840px} .faq-item{ border:1px solid var(--line);border-radius:var(--r-bcard); background:var(--white);overflow:hidden; } .faq-item>summary{ list-style:none;cursor:pointer; padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px; font:800 16px var(--font-display);color:var(--navy); } .faq-item>summary::-webkit-details-marker{display:none} .faq-item>summary .ico{width:20px;height:20px;color:var(--teal);flex:none;transition:transform .2s} .faq-item[open]>summary{border-bottom:1px solid var(--line)} .faq-item[open]>summary .ico{transform:rotate(90deg)} .faq-item>div{padding:16px 22px 20px;color:#3F5A61;font-size:14.5px} .faq-item>div>:first-child{margin-top:0} .faq-item>div>:last-child{margin-bottom:0} /* Both of these exist because the legal pages are honest about being unfinished. They are meant to be conspicuous — a reader must not mistake a drafting note for a term that binds them. */ .legal-banner{ display:flex;gap:12px;align-items:flex-start; background:var(--warn-bg);border:1px solid var(--warn-line); border-radius:var(--r-tile);padding:16px 18px;margin:0 0 26px; color:var(--warn-ink);font-size:14px;font-weight:600;max-width:70ch; } .legal-banner .ico{width:20px;height:20px;flex:none;margin-top:1px} .placeholder-clause{ border:1.5px dashed #A9BEC4;border-radius:12px; background:var(--soft);padding:14px 16px;margin:0 0 16px; color:#4A6971;font-size:13.5px;max-width:70ch; } .placeholder-clause strong{ display:block;font:800 11px var(--font-display);letter-spacing:.1em; text-transform:uppercase;color:var(--muted);margin-bottom:5px; } /* ── Footer ───────────────────────────────────────────────────────────────── */ .site-footer{background:var(--footer-bg);color:var(--white);padding:52px 0 24px} .footer-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr) 1fr;gap:28px} .brand-inverse .brand-name{color:var(--white)} .brand-inverse .brand-name strong{color:#66D2D1} .footer-brand>p{font-size:11px;color:#A6C7CB;letter-spacing:.13em;margin:14px 0} .socials{display:flex;gap:8px} .socials a{ width:30px;height:30px;border:1px solid rgba(255,255,255,.25);border-radius:50%; display:grid;place-items:center;color:var(--footer-link); } .socials a:hover{border-color:var(--footer-accent);color:var(--footer-accent)} .socials .ico{width:15px;height:15px} .footer-grid h4{font:800 11px var(--font-display);letter-spacing:.13em;color:var(--footer-accent);margin:3px 0 12px} .footer-grid>div:not(.footer-brand) a{display:block;color:var(--footer-link);font-size:12px;margin:7px 0} .footer-grid>div:not(.footer-brand) a:hover{color:var(--white)} .footer-help p{color:#B7CCCF;font-size:12px;margin:0 0 4px} .footer-help strong{font:800 18px var(--font-display);color:var(--footer-accent)} .footer-help strong .ico{width:17px;height:17px} /* The help column is a short piece of prose, not a link list, so it opts out of the display:block the four link columns above rely on. */ .footer-help a{display:inline;color:var(--footer-accent)} .footer-help strong a{display:inline-flex;align-items:center;gap:8px;color:inherit} .footer-bottom{ border-top:1px solid rgba(255,255,255,.12);margin-top:30px;padding-top:18px; display:flex;justify-content:space-between;gap:10px;color:#7FA0A5;font-size:11px; } /* ── Breakpoints ────────────────────────────────────────────────────────────── The concept's three, unchanged: 1100 where the four-up grids halve, 850 where the desktop nav becomes a sheet and the layout goes single-column, 560 where the type and the gutters come down for phones. Tested to 360px. */ @media(max-width:1100px){ .nav{gap:18px} .hero-grid{grid-template-columns:1fr .9fr} .benefit-grid,.audience-grid{grid-template-columns:repeat(2,1fr)} .trust-row{grid-template-columns:repeat(2,1fr)} .trust-ownership{display:none} .footer-grid{grid-template-columns:1.2fr repeat(3,1fr)} .spec-row{grid-template-columns:repeat(2,1fr)} .pdp-grid{gap:30px} .featured-products{grid-template-columns:repeat(2,1fr)} .phones-grid .featured-products{grid-template-columns:repeat(2,1fr)} } @media(max-width:850px){ .nav,.nav-actions{display:none} .mobile-menu{display:block} /* The nav opens as two extra rows inside the header rather than as a floating panel. It is still the same