/* ========================================================================== variables.css — every design token for the Finskool Global theme. Nothing in this file styles anything. Components read from here only. Responsive overrides redeclare tokens inside media queries at the bottom; they never restyle components. ========================================================================== */ :root { /* --- Brand palette ----------------------------------------------------- CONTRAST RULE: both greens are surface/accent colours only. --green on --surface = 1.65:1 FAILS (never use for text) --lime on --surface = 1.19:1 FAILS (never use for text) --green on --ink = 11.26:1 passes AAA --lime on --ink = 16.58:1 passes AAA --ink on --surface = 18.5:1 passes AAA Green text is allowed ONLY on --ink / --ink-card backgrounds. On light backgrounds green is a fill, a rule, a dot or an underline. --green-ink is the darkened green reserved for green-on-light text. --------------------------------------------------------------------- */ --green: #7DD502; /* primary */ --lime: #D6F34A; /* accent */ --ink: #010205; /* text + dark surfaces */ --surface: #F2F2F2; /* light surface */ --green-ink: #4C8300; /* 4.61:1 on --white — the only green legal as text on light */ /* Green words inside headings on LIGHT sections ("Real Stories", "Insights", "Investments"). The Figma uses --green here, which measures 1.65:1 and fails WCAG even at display size. This token keeps the build faithful to the design; switching it to var(--green-ink) fixes every instance in one line without touching a component. */ --green-display: var(--green); --green-hover: #8FE416; --green-press: #6DBC02; /* --- Neutrals ---------------------------------------------------------- */ --white: #FFFFFF; --surface-alt: #FAFAFA; /* section fill used across the design */ --line: #E6E6E6; --line-strong: #D4D4D4; --ink-80: rgba(1, 2, 5, 0.80); --ink-64: rgba(1, 2, 5, 0.64); --ink-48: rgba(1, 2, 5, 0.48); --ink-24: rgba(1, 2, 5, 0.24); --ink-12: rgba(1, 2, 5, 0.12); --ink-08: rgba(1, 2, 5, 0.08); --on-dark: #F5F7F6; --on-dark-72: rgba(245, 247, 246, 0.72); --on-dark-40: rgba(245, 247, 246, 0.40); --on-dark-12: rgba(245, 247, 246, 0.12); /* --- Dark surfaces ------------------------------------------------------ The design's dark panels are #020609 under a glossy black render (the "Glossy finish" layer in components.css, image set as --gloss-img from the Home page) and a film-grain noise layer. Neutral — no green in the surface; green is reserved for accents. */ --ink-card: #020609; --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); --noise-opacity: 0.07; /* --- Typography --------------------------------------------------------- Plus Jakarta Sans → display + headings + numerals Geist → body, UI, labels Both self-hosted variable woff2 (latin + latin-ext), OFL. */ --font-display: 'Plus Jakarta Sans Variable', 'Plus Jakarta Sans', system-ui, sans-serif; --font-body: 'Geist Variable', 'Geist', system-ui, -apple-system, sans-serif; --w-regular: 400; --w-medium: 500; --w-semi: 600; --w-bold: 700; --w-extra: 800; /* Body copy runs through one dial. The design's sizes are the 1x values; --body-scale multiplies every body-copy size AND its line-height, so the leading ratio is preserved rather than the text crowding itself. Headings and display sizes are NOT affected — set --display-scale if you want those to move too. */ --body-scale: 1.3; --display-scale: 1; /* size / line-height pairs, measured off the 1280 design frame */ --t-display-1: calc(56px * var(--display-scale)); --lh-display-1: calc(64px * var(--display-scale)); /* hero h1 */ --t-display-2: calc(40px * var(--display-scale)); --lh-display-2: calc(46px * var(--display-scale)); /* section h2 */ --t-display-3: calc(32px * var(--display-scale)); --lh-display-3: calc(40px * var(--display-scale)); /* service title */ --t-stat: calc(48px * var(--display-scale)); --lh-stat: calc(58px * var(--display-scale)); /* hero 230+ */ --t-stat-sm: calc(32px * var(--display-scale)); --lh-stat-sm: calc(38px * var(--display-scale)); /* about 500k+ */ --t-h4: calc(24px * var(--display-scale)); --lh-h4: calc(34px * var(--display-scale)); /* feature card */ --t-h5: calc(18px * var(--display-scale)); --lh-h5: calc(27px * var(--display-scale)); /* faq q */ --t-body-lg: calc(18px * var(--body-scale)); --lh-body-lg: calc(29px * var(--body-scale)); /* section intro */ --t-body: calc(16px * var(--body-scale)); --lh-body: calc(26px * var(--body-scale)); --t-body-sm: calc(15px * var(--body-scale)); --lh-body-sm: calc(23px * var(--body-scale)); --t-caption: calc(14px * var(--body-scale)); --lh-caption: calc(22px * var(--body-scale)); --t-micro: calc(13px * var(--body-scale)); --lh-micro: calc(18px * var(--body-scale)); /* eyebrow, footer h */ --t-nano: calc(11px * var(--body-scale)); --lh-nano: calc(16px * var(--body-scale)); /* article category */ --track-display: -0.02em; --track-tight: -0.01em; --track-normal: 0; --track-wide: 0.04em; /* --- Spacing scale — 4px base ------------------------------------------ */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 96px; --s-13:120px; --s-14:160px; /* --- Layout -------------------------------------------------------------- --container is the CONTENT width of a normal section. Everything else is derived from it, so changing this one value rescales the whole grid. The design was drawn on a 1280 frame with 1104 content; at 1340 the proportions hold because every grid uses fr units, not fixed columns. --page-max = container + both gutters (1516px) --card-width = container + --card-bleed (1464px) --card-inset = half the difference (26px, as designed) --------------------------------------------------------------------- */ --container: 1340px; --gutter: 88px; --card-bleed: 124px; /* how much wider the inset card is than a section */ --page-max: calc(var(--container) + var(--gutter) * 2); --card-width: calc(var(--container) + var(--card-bleed)); --card-inset: calc((var(--page-max) - var(--card-width)) / 2); --section-pad-y: 96px; --header-h: 88px; /* --- Radii -------------------------------------------------------------- */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-2xl: 32px; --r-pill: 999px; /* --- Elevation ---------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(1, 2, 5, 0.06); --shadow-md: 0 8px 24px rgba(1, 2, 5, 0.07); --shadow-lg: 0 24px 64px rgba(1, 2, 5, 0.10); /* --- Motion ------------------------------------------------------------- --ease-reveal is easeOutExpo: the curve every scroll reveal uses. */ --ease-reveal: cubic-bezier(0.16, 1, 0.30, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --d-fast: 180ms; --d-base: 320ms; --d-slow: 620ms; --d-reveal: 900ms; --reveal-y: 32px; /* distance a revealing block travels up */ --reveal-stagger: 90ms; /* delay step between siblings */ --image-scale: 1.12; /* image reveal starts scaled to this */ --parallax: 0.10; /* media drift per px of scroll, set by reveals.js */ --curtain: var(--surface-alt); /* image-reveal curtain fill */ /* --- Services scroll section -------------------------------------------- MUST EXCEED: --svc-visual-h must be >= the tallest service visual card, otherwise the sticky column clips the phone mockup. --svc-stride is the scroll distance that advances one service. */ --svc-visual-h: 452px; --svc-gap: 90px; /* design: visual ends 550, list starts 640 */ --svc-stride: 240px; --svc-sticky-top: 140px; /* keeps the visual clear of the fixed header */ --svc-idle-op: 0.28; /* inactive service rows */ /* --- Journey (About page) ----------------------------------------------- A horizontal track advanced one card at a time. --jr-card-w plus --jr-gap is the exact distance the track translates per step, so the two must stay in step with each other. */ --jr-card-w: 594px; --jr-card-h: 360px; --jr-gap: 24px; --jr-idle-veil: 0.82; /* how far an inactive card washes out */ } /* --- Tablet and small laptops ------------------------------------------- The 88px gutter only pays for itself on a wide screen; below ~1180 it eats the columns the design needs, so the page switches to the tablet metrics. */ @media (max-width: 1180px) { :root { --container: 100%; --gutter: 40px; --card-bleed: 0px; --page-max: 100%; --card-width: 100%; --card-inset: 20px; --section-pad-y: 72px; --t-display-1: calc(44px * var(--display-scale)); --lh-display-1: calc(52px * var(--display-scale)); --t-display-2: calc(34px * var(--display-scale)); --lh-display-2: calc(40px * var(--display-scale)); --t-display-3: calc(26px * var(--display-scale)); --lh-display-3: calc(34px * var(--display-scale)); --t-stat: calc(40px * var(--display-scale)); --lh-stat: calc(48px * var(--display-scale)); --svc-sticky-top: 100px; --svc-visual-h: 380px; } } /* --- Mobile -------------------------------------------------------------- */ @media (max-width: 720px) { :root { /* phone text: the 1.3 uplift that suits a desktop column is too loud in a 350px measure, so body sizes step back while the display scale holds */ --body-scale: 1.15; --gutter: 20px; --card-inset: 12px; --card-width: 100%; --section-pad-y: 56px; --header-h: 68px; --t-display-1: calc(34px * var(--display-scale)); --lh-display-1: calc(42px * var(--display-scale)); --t-display-2: calc(28px * var(--display-scale)); --lh-display-2: calc(35px * var(--display-scale)); --t-display-3: calc(22px * var(--display-scale)); --lh-display-3: calc(30px * var(--display-scale)); --t-stat: calc(34px * var(--display-scale)); --lh-stat: calc(42px * var(--display-scale)); --t-stat-sm: calc(26px * var(--display-scale)); --lh-stat-sm: calc(32px * var(--display-scale)); --t-h4: calc(20px * var(--display-scale)); --lh-h4: calc(29px * var(--display-scale)); --t-body-lg: calc(16px * var(--body-scale)); --lh-body-lg: calc(26px * var(--body-scale)); --reveal-y: 22px; --image-scale: 1.08; --svc-visual-h: 320px; } } /* --- Reduced motion ------------------------------------------------------ Zeroing the tokens neutralises every reveal without touching components. */ @media (prefers-reduced-motion: reduce) { :root { --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; --d-reveal: 1ms; --reveal-y: 0px; --reveal-stagger: 0ms; --image-scale: 1; } }