/* ============================================================ PRIME ACADEMY GROUP — v6.1.2 system.css — tokens and primitives for the simplified homepage. Two rules govern this file: 1. Colour. Six approved brand values are declared. Everything else is a color-mix of them. No new hex is invented. 2. Shape. Four radii, each with a job and each named below. Do not add a fifth, and do not set a raw pixel radius anywhere. ============================================================ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ /* ── THE SIX ── */ --deep:#0D47A1; /* Deep Blue primary action */ --navy:#14213D; /* Midnight Navy ink and dark surface */ --azure:#2196F3; /* Bright Blue secondary, large only */ --red:#E53935; /* Signal Red marks only, rare */ --slate:#757575; /* Slate Grey neutral, unused for text */ --mist:#F2F4F7; /* Mist light surface */ --white:#FFFFFF; /* ── DERIVED ── */ /* The page ground. Mist lifted toward white, then given a 3% azure cast so it reads blue rather than grey. A grey ground under blue panels looks like a print proof; a blue ground under white panels looks like the product. */ --ground:color-mix(in srgb, color-mix(in srgb, var(--mist) 60%, var(--white) 40%) 97%, var(--azure) 3%); --panel:var(--white); --ink:var(--navy); /* Navy at 72%, not Slate. Slate is a true grey and goes dead against a blue ground. Navy-derived muted keeps the page one temperature. 5.8:1 on ground. */ --muted:color-mix(in srgb, var(--navy) 72%, var(--white)); --faint:color-mix(in srgb, var(--navy) 64%, var(--white)); /* 4.9:1 on white */ --hair:color-mix(in srgb, var(--navy) 12%, transparent); --hair-soft:color-mix(in srgb, var(--navy) 7%, transparent); --deep-press:color-mix(in srgb, var(--deep) 84%, #000); --wash:color-mix(in srgb, var(--deep) 5%, var(--white)); --font-display:'Montserrat','Segoe UI',system-ui,sans-serif; --font-body:'Poppins','Segoe UI',system-ui,sans-serif; /* ── TEXT SCALE. Four sizes, one line height each, and nothing else. Every Poppins rule on the site picks a pair from here rather than setting its own, so the same size is never drawn two ways. The spacing rises as the size falls. Small type sets short lines that are easy to lose your place in and needs the air; large type does not, and at 20px 1.7 left the intros floating apart. FLUID. Every size slides with the window rather than holding still. The headings were already fluid and these were not, so as the window narrowed the headings shrank and the text under them stayed put, and the balance between them drifted. clamp(floor, rem + vw, ceiling). The middle is a rem PLUS a vw and never a bare vw: the rem part is what a reader's own browser text size still acts on, so somebody who has set larger text keeps it. The floor and the ceiling stop it running away at either end. Tuned to reach the ceiling at 1920 and the floor at 1280: 1280 1920 lead 18 20 text 14 15 small 13 14 fine 12 13 ── */ --t-lead:clamp(1.125rem, .875rem + .3125vw, 1.25rem); --lh-lead:1.5; --t-text:clamp(.875rem, .75rem + .15625vw, .9375rem); --lh-text:1.65; --t-small:clamp(.8125rem, .6875rem + .15625vw, .875rem); --lh-small:1.7; --t-fine:clamp(.75rem, .625rem + .15625vw, .8125rem); --lh-fine:1.75; /* ── SHAPE. Three, and a job for each. ── */ --r-panel:16px; /* the inset section panels, and only those */ --r-card:16px; /* cards, image frames, and 56px icon chips */ --r-chip:10px; /* small 40px chips — 16px on a 40px box is a squircle, and this keeps the corner looking the same weight as --r-card does on the larger chips */ --r-pill:999px; /* buttons, nothing else */ /* ── ELEVATION. One shadow. Tinted navy, never black. ── */ --lift:0 2px 4px color-mix(in srgb, var(--navy) 4%, transparent), 0 18px 40px -12px color-mix(in srgb, var(--navy) 16%, transparent); /* ── SPACE. 4px base. The section rhythm is deliberately large. ── */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; /* Full frame. The panels run the width of the window; the bleed is the only thing held back, because the ground showing on all four sides is what makes a panel read as a panel rather than as a band. */ --frame:100%; /* panel width */ --bleed:clamp(20px,4vw,80px); /* page edge to panel edge */ --pad:clamp(24px,4vw,80px); /* panel edge to content */ --rhythm:clamp(72px,9vw,132px); /* between section blocks */ /* The break between the three footer link columns. It scales, because fixed at 160px it held its width while the window lost it and the brand block paid for the difference. */ --foot-gap:clamp(40px,8.4vw,160px); --ease:cubic-bezier(.33,1,.68,1); /* One hover speed for the whole page. 180ms read as a snap; 300 lets a change be seen happening without holding anybody up. Everything that answers a pointer uses this and nothing sets its own. */ --fast:300ms; --reveal:620ms; /* Between the two: slower than answering a pointer, quicker than a whole block rising. Used by anything that arrives on its own but is smaller than a section — the timeline's labels. */ --arrive:420ms; } html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} /* Lenis' own four rules. The last three matter: while Lenis is running it sets the scroll position itself every frame, so the browser's native smooth scrolling has to be switched off or the two fight each other. */ html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto !important} .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain} .lenis.lenis-stopped{overflow:hidden} body{background:var(--ground);color:var(--ink); font:400 var(--t-text)/var(--lh-text) var(--font-body); padding:var(--s6) var(--bleed) var(--bleed)} /* ═══════════ THE SIGNATURE DEVICE ═══════════ Content lives in white panels floating on the tinted ground, inset from the page edge on every side. The ground is never content, only air. */ .panel{background:var(--panel);border-radius:var(--r-panel);padding:var(--pad); max-width:var(--frame);margin:0 auto var(--s5); display: flex; flex-direction: column;} /* ── type ── ONE HEADING WEIGHT. Every Montserrat title on the site is 500. There is no 600 title and no light/heavy pair inside a heading: size alone separates a page title from a section title from a card title. Buttons and small caps labels keep 600, because they are controls and labels, not titles. */ /* h1 named alongside .display: the hero h1 carried no family of its own and fell through to the body font, so it was the one heading on the page not in Montserrat. Naming the element fixes it here and on every page after. */ h1{font-family:var(--font-display);font-weight:300} /* ONE WEIGHT. Section titles were a light cut with a heavy phrase inside them; they are now a single medium 500 throughout, so size alone carries the step from a section title down to a card title. The is kept in the markup so the split can come back without touching the pages. */ h2{font-family:var(--font-display);font-weight:500; font-size:clamp(1.9rem,3.2vw,2.75rem);line-height:1.12;letter-spacing:-.025em} h2 b{font-weight:500} h3{font-family:var(--font-display);font-weight:500; font-size:clamp(1.15rem,1.5vw,1.375rem);line-height:1.3;letter-spacing:-.01em} /* h4 named too. Without it an h4 takes the body's 1.75 line height, which is a reading measure, not a heading one — the same words then sit in a much taller box and every gap under them looks bigger than the number set. */ h4{font-family:var(--font-display);font-weight:500;font-size:1rem; line-height:1.3;letter-spacing:-.01em} .lead{font-weight:300;font-size:var(--t-lead);line-height:var(--lh-lead); color:var(--muted);max-width:62ch} p{max-width:65ch;color:var(--muted)} /* Same ink as the heading under it. The eyebrow and the title are one block of type, so they read as one thing rather than a blue label with a separate navy sentence beneath it. */ code{font:.8125rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; background:var(--wash);border-radius:6px;padding:2px 6px;color:var(--deep)} strong{font-weight:600;color:var(--ink)} .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ── section head. Left aligned and stacked. Never headline-left with a small paragraph floating right: that split reads as filler. ── */ .head{margin-bottom:var(--s7);max-width:940px} .head .lead{max-width:76ch} /* A shorter measure for a lead whose last phrase would otherwise be stranded on its own line. Set per paragraph rather than on .head, because the other leads are the right shape at 76ch and narrowing them adds a third line. */ .lead--tight,.head .lead--tight{max-width:58ch} .head .eyebrow{display:block;margin-bottom:var(--s3)} .head h2{margin-bottom:var(--s4)} /* ── controls ── */ .btn{display:inline-flex;align-items:center;gap:var(--s2); font:600 .9375rem/1 var(--font-display);letter-spacing:.01em;white-space:nowrap; padding:15px 26px;border-radius:var(--r-pill);border:1px solid transparent; text-decoration:none;cursor:pointer; transition:background var(--fast) var(--ease),transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease),border-color var(--fast) var(--ease), color var(--fast) var(--ease)} .btn svg{width:15px;height:15px;flex:none;transition:transform var(--fast) var(--ease)} .btn:hover svg{transform:translateX(3px)} .btn:active{transform:translateY(1px)} .btn-primary{background:var(--deep);color:var(--white)} .btn-primary:hover{background:var(--deep-press)} .btn-secondary{background:var(--panel);color:var(--ink);border-color:var(--hair)} .btn-secondary:hover{border-color:var(--deep);color:var(--deep)} /* No underline on hover. The link answers by changing colour and moving its arrow, which is enough and keeps the line of type unbroken. */ .link{display:inline-flex;align-items:center;gap:6px;color:var(--deep); font-weight:500;text-decoration:none;font-size:var(--t-text); transition:color var(--fast) var(--ease)} .link svg{width:14px;height:14px;transition:transform var(--fast) var(--ease)} /* Both selectors, because on the option cards the whole card is the link and the pointer is rarely on the words themselves. */ .link:hover,a:hover .link{color:var(--azure)} .link:hover svg,a:hover .link svg{transform:translateX(3px)} a:focus-visible,button:focus-visible{outline:2px solid var(--deep);outline-offset:3px} /* ── the option card. Two by two, because the client asked for a small number of LARGE product-style cards. Four across makes each one narrow. ── */ /* Absolutely positioned, not a flex child: a percentage height against an aspect-ratio box does not resolve reliably, and the image vanished. */ /* Screenshots crop from the top: the meaningful part of a UI is its header and first rows. Photographs crop from the centre, where the subject is. */ /* ── image frames. The platform interface is already built in these blues, so on a pale blue ground an unframed screenshot dissolves. The frame is what makes one an object: a white ring, a hairline, the lift. ── */ /* ── reveal. IntersectionObserver, never a scroll listener. ── */ .rise{opacity:0;transform:translateY(18px)} .js .rise{transition:opacity var(--reveal) var(--ease),transform var(--reveal) var(--ease)} .rise.in{opacity:1;transform:none;} @media (max-width:1000px){ .swatches{grid-template-columns:repeat(2,1fr)} .shapes{grid-template-columns:repeat(2,1fr)} } @media (max-width:820px){ .spec{grid-template-columns:1fr;gap:var(--s2)} .frames{grid-template-columns:1fr} .cards{grid-template-columns:1fr} .slot{aspect-ratio:auto;min-height:180px} } @media (max-width:560px){ .swatches,.shapes{grid-template-columns:1fr} .rbar{grid-template-columns:1fr;gap:var(--s1)} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important} .rise{opacity:1;transform:none} }