/* * VEDU marketing site — vedu's palette in cuberto.com's design language. * * What is borrowed from Cuberto is *form*, never colour: oversized display type, generous section * rhythm, big-radius media, pill CTAs that fill on hover. Not their line-height ~1 or -.035em * tracking, which Latvian diacritics collide in — see the display-type block below. Not their * blend-mode cursor, and not their marquee: a strip of scrolling nav labels said nothing. * * What stays vedu is everything you can see: Poppins, the palette below (measured off * getvedu.app), and every word of copy. * * Motion is progressive enhancement. Every `[data-reveal]` is visible by default and only hidden * once site.js confirms it can animate — so with JS off, or under prefers-reduced-motion, the page * is simply a static page. Never invert that. */ /* The palette. Do not introduce a colour that isn't in this block. */ :root { --brand: #994fe7; /* primary: CTAs, accents, hover fills */ --brand-d: #7f3fca; /* the only derived value — a darker brand for :hover */ --blue: #788dec; /* body links */ --green: #8ac926; /* eyebrow dot, ticks, success */ --yellow: #ffd600; /* accent */ --ink: #424242; /* body copy and headings */ --dark: #0a0a0a; /* the palette's darkest: buttons, footer, the dark CTA band */ --muted: #6f6f6f; --ink-70: rgba(66, 66, 66, .82); --canvas: #f8f8f8; /* page background */ --surface: #ffffff; /* cards and alternating sections sit above the canvas */ --line: rgba(66, 66, 66, .14); --danger: #cf2e2e; --radius: 28px; --radius-s: 14px; --container: 1440px; --gutter: clamp(20px, 4.4vw, 72px); --section: clamp(80px, 11vw, 168px); --ease: cubic-bezier(.22, 1, .36, 1); /* the long, heavy out-expo everything uses */ --ease-io: cubic-bezier(.76, 0, .24, 1); } *, *::before, *::after { box-sizing: border-box; } /* * The browser's own `[hidden] { display: none }` is a UA rule, so ANY author `display` beats it — * `.btn { display: inline-flex }` silently un-hid the wizard's Back and "Create account" buttons on * step one. Anything toggled with the `hidden` property needs this to actually disappear. */ [hidden] { display: none !important; } html { scroll-behavior: smooth; scroll-padding-top: 100px; } /* * The JS scroller drives `scrollTo()` on every frame; native smooth scrolling would try to animate * each of those hops and the page would crawl. `html.has-smooth-scroll` is set only once the JS * scroller is actually running, so the native behaviour above stays the no-JS fallback. */ html.has-smooth-scroll { scroll-behavior: auto; } body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 17px/1.6 Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, video { max-width: 100%; height: auto; display: block; } /* Links inherit their surroundings by default; long-form and contact links take the brand blue. */ a { color: inherit; } .contact-emails a { color: var(--blue); } p { margin: 0; } /* ── display type ────────────────────────────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5 { margin: 0; color: var(--ink); font-weight: 600; } /* * Cuberto's signature is enormous type at line-height ~1 — but that assumes plain Latin. Latvian * stacks a diacritic on top and a descender below, and in Poppins the tallest of them is the caron * (Č Š Ž) at 0.928em above the baseline — taller than the macron (Ā Ē Ī Ū), which is the trap: a * value tuned on "Ā" alone still collides on "Š". With descenders (g ļ ķ ņ ģ) reaching 0.289em * below, one line's ink spans 1.217em, so that is the hard floor for the distance between baselines. * * 1.24 clears it by ~2px at the hero's 84px. Never take these below 1.22 — re-measure with * canvas `actualBoundingBoxAscent` on "ĀĒĪŪČŠŽ" and "gļķņģpj" if you change the font. * * The tracking has the same problem sideways. Cuberto sets -.035em; at that value the macrons in * "izglītības" and "pašvaldībām" run into the ascenders beside them and the word grows a solid bar * across its top. -.015em is the tightest that still reads as separate marks at 84px. */ h1 { font-size: clamp(38px, 6.6vw, 92px); line-height: 1.24; letter-spacing: -.015em; } h2 { font-size: clamp(32px, 5.2vw, 74px); line-height: 1.24; letter-spacing: -.015em; } h3 { font-size: clamp(24px, 2.6vw, 38px); line-height: 1.26; letter-spacing: -.012em; } h4 { font-size: clamp(19px, 1.5vw, 23px); line-height: 1.3; letter-spacing: -.01em; font-weight: 600; } h5 { font-size: 19px; line-height: 1.35; letter-spacing: -.01em; font-weight: 600; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .section { padding: var(--section) 0; } .section--tight { padding: clamp(56px, 6vw, 96px) 0; } .section--alt { background: var(--surface); } .section--dark { background: var(--dark); color: #fff; } .section--dark h2, .section--dark h3 { color: #fff; } /* The small label above a headline: a purple dot and tracked-out caps. */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 24px; } .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; } .section--dark .eyebrow { color: rgba(255, 255, 255, .6); } .lede { color: var(--muted); font-size: clamp(17px, 1.35vw, 21px); line-height: 1.65; } .section__head { max-width: 900px; margin-bottom: clamp(48px, 5vw, 88px); } .section__head p { margin-top: 24px; color: var(--muted); line-height: 1.7; max-width: 62ch; } .section__head--center { margin-left: auto; margin-right: auto; text-align: center; } .section__head--center p { margin-left: auto; margin-right: auto; } /* ── buttons ─────────────────────────────────────────────────────────────────────────────────── */ /* Pill with a fill that sweeps up from the bottom on hover. `span` sits above the sweep. */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer; isolation: isolate; overflow: hidden; padding: 20px 40px; border-radius: 200px; font: 500 16px/1 Poppins, sans-serif; letter-spacing: -.01em; text-decoration: none; background: var(--dark); color: #fff; transition: color .35s var(--ease); } .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--brand); transform: translateY(101%); transition: transform .5s var(--ease); } .btn:hover::after, .btn:focus-visible::after { transform: translateY(0); } .btn:active { transform: scale(.98); } .btn[disabled] { opacity: .5; cursor: progress; } .btn--block { display: flex; width: 100%; } .btn--light { background: #fff; color: var(--dark); } .btn--light::after { background: var(--brand); } .btn--light:hover { color: #fff; } .btn--outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); } .btn--outline:hover { color: #fff; } /* An arrow that nudges on hover. */ .btn svg { width: 16px; height: 16px; transition: transform .4s var(--ease); } .btn:hover svg { transform: translateX(4px); } /* Text link with an underline that draws in. */ .link { position: relative; text-decoration: none; padding-bottom: 2px; } .link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: currentColor; transition: right .4s var(--ease); } .link:hover::after { right: 0; } /* * There is no custom cursor. The native one is never hidden — `cursor: none` anywhere on this site * is a bug. The blend-mode follower we used to ship inverted the brand purple to a muddy #66b018 * over a hovered pill, and its enlarged state stuck open whenever a native