/* ========================================================================= Riya Connect Landing — LAYER 2: PAGE TOKENS ------------------------------------------------------------------------- Load second, after rc-brand-tokens.css and before rc-land-components.css. Layer 1 says what the brand's colours and typefaces ARE. This file says what they MEAN on this page: which red is a call to action, which warm grey is a hairline, how far a card lifts on hover, how tall the hero art is. Every component rule in Layer 3 reads a token from here, never from Layer 1 directly and never a literal. Three rules: 1. NEVER redefine a Layer 1 token here. If a page needs a different red, it needs a different --c-* alias pointing at a different --brand-*. 2. Every value is either an alias of a Layer 1 token, a `calc()` over other tokens, or a fluid `clamp()`. A bare literal is allowed only in the LAYOUT and GEOMETRY blocks, where the number is a measurement of a drawing rather than a design decision — those two blocks say so. 3. The responsive layer at the bottom of this file redefines TOKENS inside media queries. It never restates a component declaration; that is Layer 3's job, and only for changes that are structural (a grid going from three columns to one) rather than dimensional. ========================================================================= */ :root { /* ======================================================================= COLOUR — ink Five steps. Do not add a sixth: two inks a reader cannot tell apart are one ink and one bug. ===================================================================== */ --c-ink: var(--brand-navy); /* headlines, card titles, figures */ --c-ink-body: var(--n-ink-body); /* body copy, nav labels */ --c-ink-muted: var(--n-ink-mute); /* captions, field hints, legends */ --c-ink-faint: var(--n-ink-soft); /* placeholders, decorative dots */ --c-on-brand: var(--n-white); /* type on a red fill */ /* ======================================================================= COLOUR — accent --c-accent is the fill red; --c-accent-ink is the red that small text is allowed to be. Everything gold routes through --c-premium-*, which is how the page keeps its second accent to a strict handful of uses. ===================================================================== */ --c-accent: var(--brand-red); --c-accent-strong: var(--brand-red-deep); --c-accent-ink: var(--brand-red-deep); --c-accent-tint: var(--brand-red-tint); --c-accent-wash: var(--brand-red-wash); --c-accent-line: var(--brand-red-line); --c-accent-ring: var(--brand-red-a14); --c-premium: var(--brand-gold); --c-premium-ink: var(--brand-gold-ink); --c-premium-line: var(--brand-gold-soft); --c-premium-tint: var(--brand-gold-tint); /* ======================================================================= COLOUR — surfaces ===================================================================== */ --c-canvas: var(--n-white); /* the page ground */ --c-surface: var(--n-white); /* a card */ --c-surface-soft: var(--n-paper); /* a panel one shade off the page */ --c-surface-mute: var(--n-mist); /* the technology cards */ --c-surface-tile: var(--n-sand); /* an icon tile, a quiet pill */ /* Two service glyphs ship without a tile of their own, so the page draws one behind them. These are the only two hues on the page that are neither brand nor neutral, and they exist to match the artwork. */ --c-tile-violet: #f1edff; --c-tile-mint: #e9f7f1; /* The legal banner's sky. Sampled from the supplied artwork's own left edge (#ebf6fe) so the band and the illustration are one surface — and so the band still reads correctly on a phone, where the art is hidden and this gradient is all that is left of it. */ --c-legal-sky: #ebf6fe; --c-legal-sky-fade: #f8fbff; /* ======================================================================= COLOUR — lines ===================================================================== */ --c-line: var(--n-line); --c-line-firm: var(--n-line-firm); --c-line-hover: var(--n-line-hover); --c-line-dash: var(--n-line-mid); /* ======================================================================= TYPOGRAPHY — scale Fluid where a headline would otherwise need a breakpoint; fixed from the lead down, where a 1px change is noise rather than rhythm. NO media query in this system resizes text — if a size is wrong on a phone, its clamp() is wrong. ===================================================================== */ /* 26 → 60px. A steeper curve off a lower base than the rest of the scale: the headline is a long sentence, and a clamp gentle enough to look right at 1440 left it at 46px on a tablet, where it swallowed the fold. Fitted through 36px at 768 and 56px at 1440, so the desktop size is unchanged and only the small end comes down. Retune the curve, never add a font-size media query — see the responsive contract. */ --fs-hero: clamp(1.625rem, 0.82rem + 2.98vw, 3.75rem); /* 26 → 60px */ --fs-h2: clamp(1.625rem, 1.32rem + 1.36vw, 2.375rem);/* 26 → 38px */ --fs-h3: clamp(1.375rem, 1.2rem + 0.78vw, 1.875rem); /* 22 → 30px */ --fs-h4: 1.0625rem; /* 17px — a technology card's title */ --fs-h5: 0.9375rem; /* 15px — a service card's title */ --fs-lead: 0.90625rem; /* 14.5px — every section lead and paragraph */ --fs-body: 0.875rem; /* 14px — long-form editorial copy */ --fs-sm: 0.8125rem; /* 13px — supporting lines, highlight labels */ --fs-xs: 0.78125rem; /* 12.5px— service card descriptions */ --fs-2xs: 0.71875rem; /* 11.5px— field labels, contact captions */ --fs-3xs: 0.6875rem; /* 11px — the smallest legal size on the page*/ --fs-cta: 0.8125rem; /* 13px — every button label */ --fs-cta-sm: 0.75rem; /* 12px — the two buttons in the header */ --fs-eyebrow: 0.6875rem; /* 11px — all-caps kickers */ --fs-nav: clamp(0.75rem, 0.66rem + 0.28vw, 0.8125rem);/* 12 → 13px */ /* ======================================================================= SPACE One 4px scale. Component padding snaps to it. ===================================================================== */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-9: 36px; --sp-10: 40px; --sp-12: 48px; --sp-14: 56px; --sp-16: 64px; /* The page's vertical rhythm. Every band pays the same top and bottom padding, so the distance between any two headings is a constant. */ --section-pad-y: clamp(3.5rem, 1.9rem + 6.6vw, 6rem); /* 56 → 96px */ --band-gap: clamp(2.5rem, 1.4rem + 4.4vw, 4rem); /* 40 → 64px */ --grid-gap: clamp(1.75rem, 0.9rem + 3.4vw, 3.5rem);/* 28 → 56px */ /* ======================================================================= LAYOUT Literals allowed: these are measurements, not palette choices. ===================================================================== */ --wrap-max: 1360px; /* the widest band — hero, offer, insight */ --wrap-max-text: 1160px; /* narrower, for bands that are mostly prose */ --wrap-pad: clamp(1.25rem, 0.7rem + 2.2vw, 2.5rem); /* 20 → 40px */ --header-h: 72px; --control-h: 44px; /* the minimum comfortable touch target */ --control-h-sm: 40px; /* the header's two buttons, which sit in a 72px bar and cannot be 44 without crowding it — they keep 40px of height and gain the rest of the target from the bar's padding. */ --control-h-lg: 52px; --control-px: var(--sp-4); /* A button's own side padding. Tokenised rather than inlined because the longest label on the page — "Onboard with Riya Connect", uppercased and tracked out, next to a 26px arrow disc — does not fit a 320px screen at the desktop padding, and the fix belongs in the responsive layer. */ --btn-px: var(--sp-6); --btn-px-lg: var(--sp-8); --logo-h: clamp(2.125rem, 1.6rem + 2.1vw, 3.375rem); /* 34 → 54px */ --logo-h-sm: 36px; /* the lockup under the hero headline */ /* ======================================================================= ELEVATION Wide, soft and navy-tinted: the shadows read as light falling on paper, not as a dark drop behind a box. ===================================================================== */ --shadow-bar: 0 1px 0 var(--brand-navy-a06); --shadow-bar-lift: 0 6px 20px rgba(28, 24, 74, 0.07); --shadow-tile: 0 8px 22px rgba(28, 24, 74, 0.05); --shadow-card: 0 14px 34px rgba(28, 24, 74, 0.09); --shadow-card-hover: 0 22px 46px rgba(28, 24, 74, 0.14); --shadow-panel: 0 22px 54px rgba(28, 24, 74, 0.09); --shadow-float: 0 26px 60px var(--brand-navy-a10); --shadow-brand: 0 12px 26px var(--brand-red-a26); --shadow-brand-lift: 0 16px 32px var(--brand-red-a26); /* ======================================================================= MOTION — roles Component rules name a ROLE (--dur-hover), never a primitive (--t-fast). Retuning "how fast does a card answer the pointer" is then one edit, and it cannot accidentally retune the section reveal. ===================================================================== */ --dur-hover: var(--t-fast); --dur-nav: var(--t-mid); --dur-photo: var(--t-slow); /* an image's scale — slow on purpose */ --dur-reveal: var(--t-reveal); --dur-enter: var(--t-enter); --ease-hover: var(--ease-out); --ease-reveal: var(--ease-out); --ease-nav: var(--ease-inout); /* Section reveal. --reveal-shift is the whole system's travel distance: one value, so no two bands arrive from different heights. */ --reveal-shift: 22px; --reveal-step: 0.09s; /* the gap between staggered children */ /* Hover deltas. Every card on the page lifts by the same amount. */ --lift-card: -6px; --lift-tile: -3px; --zoom-photo: 1.045; --shift-arrow: 4px; /* The hero's load entrance. The art is slower and later than the copy: the sentence arrives, then the product it is describing. */ --enter-lift: 26px; --enter-lift-art: 34px; --enter-base: 0.1s; --enter-step: 0.11s; --enter-art-delay: 0.28s; /* The hero art's idle float. Long-period and small — a product shot that bobs is a toy, one that breathes is a product. */ --dur-float: 9s; --float-rise: 12px; --dur-pulse: 2.2s; /* the live dot in the hero eyebrow */ /* The hero showcase's turn. The card rotates a quarter turn about its own Y axis until it is edge-on, changes face where nothing can be seen, and turns back — so the four products read as one device showing them in turn rather than as four pictures cross-fading. --hero-flip-hold and --hero-flip-edge are read back by rc-land.js. That is deliberate: the whole motion system's timing lives in this file, and a flip whose dwell was hard-coded in the script could not be retuned alongside the transition it has to stay in step with. --hero-flip-edge is how long the card waits at 90deg, and it must be at least --dur-flip or the face would change before the card finished turning away. */ --dur-flip: 0.32s; --ease-flip: var(--ease-inout); --hero-flip-angle: 90deg; --hero-flip-hold: 3.9s; /* how long a face is held, edge to edge */ --hero-flip-edge: 0.34s; /* how long the card stays edge-on */ --hero-flip-depth: 1600px; /* perspective. Shallower reads as a gimmick. */ /* ======================================================================= GEOMETRY — the technology marquee Literals allowed: these are drawing coordinates. How the loop is built (the maths matters if you retune it): the stage is a container (`container-type: inline-size`), so a card can be told to travel in `cqw` — percentages of the STAGE's width — and the loop stays exact at every viewport with no script measuring anything. The stage sits inside .rc-wrap, so that width is the page's content column — up to --wrap-max less the gutters — and not the viewport. The strip therefore starts and ends where every other band does. A card starts at --tech-x-start (queued off to the right, out of sight) and ends at --tech-x-end (one card-width off to the left). Ten cards share the cycle with evenly spaced negative delays, so the spacing between two cards is (240cqw + 110%) / 10 = 24cqw + 11% of a card ≈ 335px on a 1280px stage — a 250px card and an 85px gap, which puts roughly four cards on screen at once. --tech-x-start and --tech-cycle move TOGETHER. Shortening the travel without shortening the cycle slows the strip down: the pace is (travel / cycle), ~84px/s, and that is the number to hold constant. Change --tech-count and you MUST add or remove an :nth-child delay rule in Layer 3; nothing else derives the count. ===================================================================== */ --tech-count: 10; --tech-cycle: 40s; --tech-card-w: 250px; /* Every travelling card is this tall, so the strip reads as one row of equal objects rather than ten cards of assorted height bobbing past. Measured from the tallest — "Available On Mobile, Desktop Or Laptop", which is three lines of title plus a caption — with a little headroom for a font fallback. Raise it if a card ever grows past it; content is top-aligned, so the slack always falls at the bottom. */ --tech-card-h: 268px; --tech-stage-h: 330px; --tech-mark: 72px; --tech-x-start: 240cqw; --tech-x-end: -110%; /* The arc. A card is at its highest when it is centred in the stage — ~76% of the way through its travel with the numbers above, not 50%, because most of the cycle is spent queued off to the right. That 76%, and the offsets either side of it, are HARD-CODED into the @keyframes in Layer 3, because keyframe offsets cannot read a custom property. Change --tech-x-start and you must re-derive them; the formula is in the comment above rc-tech-arc. Leaving them behind is what makes the card enter flat and then lurch. */ --tech-arc-drop: 78px; --tech-arc-tilt: 12deg; --tech-arc-mid: 0.34; /* how much of the drop is left at the shoulders */ /* How wide the fade at each edge of the stage is. Cards must not appear or vanish at a hard line. */ --tech-mask: 8%; /* ======================================================================= GEOMETRY — hero, cards, product preview Literals allowed: measurements again. ===================================================================== */ --hero-art-max: 440px; /* The showcase's box. All four faces are `object-fit: contain`ed into it, so the tallest one (flights, 660x800) sets the ratio and the other three sit inside it with a little slack — the card therefore never changes size as it turns, and the band never shifts. */ --hero-art-ratio: 660 / 800; --hero-sky-fade: 0.55; /* the backdrop photo's opacity */ --hero-icon: 56px; /* a service glyph in the hero row */ --servicebar-gap: clamp(var(--sp-5), 2.4vw, var(--sp-9)); --card-media-h: 150px; /* a service card's image area */ --card-max: 320px; /* a service card in the three-column layout */ --hub-mark: 150px; /* the logo disc at the centre of "What We Offer" */ --icon-tile: 52px; --icon-tile-sm: 40px; /* The product screenshot's own dimensions (1800x958). The frame is reserved at this ratio before the image loads, so nothing shifts. Re-measure it if the shot is replaced. */ --dash-ratio: 1800 / 958; /* ======================================================================= Z-INDEX Five named layers. Nothing on this page may invent a sixth — add a name here instead, and say what sits on it. ===================================================================== */ --z-under: 0; /* the hero backdrop, the decorative routes */ --z-base: 1; /* the content that sits over them */ --z-dock: 40; /* the floating dock — below the header on purpose, so the mobile menu and its scrim cover it */ --z-header: 50; --z-nav: 60; /* the mobile navigation panel and its scrim */ /* ======================================================================= GEOMETRY — the floating dock ===================================================================== */ --dock-inset: clamp(1rem, 2.4vw, 1.75rem); /* from the viewport corner */ --dock-gap: var(--sp-3); --dock-size: 48px; /* the round back-to-top button */ --dock-shift: var(--sp-4); /* how far it slides up as it arrives */ /* How far down the page the dock appears, as a multiple of the viewport height. Read back by rc-land.js. Below this the hero's own call to action is still on screen, and a floating shortcut to the same place is noise rather than help. */ --dock-reveal-vh: 0.9; /* ======================================================================= GEOMETRY — the footer ===================================================================== */ /* ======================================================================= GEOMETRY — the legal pages (privacy policy, terms and conditions) ===================================================================== */ /* The band's height is set by its copy, and the art is cover-fitted into it — so there is no ratio to reserve, only a floor to keep the banner from collapsing around a short headline. */ --legal-hero-min: clamp(13rem, 9rem + 16vw, 19rem); /* How far the content card rides up over the banner. */ --legal-card-lift: clamp(1.5rem, 0.9rem + 2.4vw, 2.75rem); --legal-num-w: 2.25rem; /* the "01" badge in the accordion */ /* The embedded enquiry form (Zoho Forms) inside the contact card. The frame cannot size itself to its content, so this is the height the form's fields need with Zoho's own title and description switched off (the card above the frame already carries them); too short and the frame scrolls inside the card. Retune it if the form grows. */ --form-embed-h: 720px; --footer-logo-h: 42px; /* Half the space either side of a column rule. The footer grid has no column gap — this padding IS the gap, split across the hairline, so the rule sits midway between two blocks of text. */ --footer-col-pad: clamp(var(--sp-5), 2.6vw, var(--sp-10)); } /* =========================================================================== RESPONSIVE — token overrides only --------------------------------------------------------------------------- Everything here is a re-measurement, not a re-layout. Structural changes (a three-column band becoming one) live in Layer 3's responsive block. ========================================================================= */ /* The one band where the hero copy column is narrow AND still sharing the row with the product shot: between 992px and 1280px six 56px glyphs at their full gap need ~577px and the column offers ~490–606px, so the row wraps 5 + 1 and leaves "Visa" stranded on a line of its own. Smaller glyphs and a fixed gap need 440px, which fits across the whole band. Below 62em the hero is one column and the row has the full width again. */ @media (min-width: 62em) and (max-width: 79.999em) { :root { --hero-icon: 44px; --servicebar-gap: var(--sp-4); } } /* Below the desktop marquee's threshold the technology cards are a grid, so the stage's reserved height would only be empty space. */ @media (max-width: 63.999em) { :root { --tech-stage-h: auto; } } /* Tablet: the bands come closer together and the hero art gives back some width to the copy beside it. */ @media (max-width: 61.999em) { :root { --grid-gap: var(--sp-10); /* Smaller than the desktop 440: the product now sits between the headline and the button rather than beside them, so its height comes straight out of the fold. Sized so the whole hero clears a 1024-tall tablet and an 844-tall phone without scrolling. */ --hero-art-max: 300px; } } /* Phone: tighter rhythm, shallower reveal travel (a 22px lift is a large fraction of a small screen), and a shorter hero glyph row. */ @media (max-width: 47.999em) { :root { --section-pad-y: clamp(2.75rem, 2rem + 4vw, 3.5rem); --band-gap: var(--sp-10); --reveal-shift: 16px; --enter-lift: 18px; --enter-lift-art:22px; --hero-icon: 48px; --card-media-h: 140px; --hub-mark: 112px; --header-h: 64px; --logo-h: 34px; } } /* Small phone: the last dimensional step before the layout itself changes. */ @media (max-width: 29.999em) { :root { --wrap-pad: var(--sp-4); --hero-icon: 44px; --icon-tile: 46px; --control-h-lg: var(--control-h); /* 320px minus the page gutter minus the closing panel's own padding leaves 240px for a button. At the desktop padding the longest label needs 250 and gets cut off inside the panel. */ --btn-px: var(--sp-4); --btn-px-lg: var(--sp-4); } } /* Large desktop: the rhythm tokens top out well below 1920px, so on a wide monitor the page starts to read as cramped against its own margins. */ @media (min-width: 100em) { :root { --section-pad-y: 7rem; --grid-gap: var(--sp-16); } } /* --------------------------------------------------------------------------- Reduced motion — collapse the durations at the TOKEN level. Layer 3 additionally switches off the ambient loops and the marquee, because a duration of 0 stops a transition but not an infinite animation. ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --dur-hover: 0.01ms; --dur-nav: 0.01ms; --dur-photo: 0.01ms; --dur-reveal: 0.01ms; --dur-enter: 0.01ms; --reveal-shift: 0px; --reveal-step: 0s; --enter-lift: 0px; --enter-lift-art: 0px; --enter-base: 0s; --enter-step: 0s; --enter-art-delay: 0s; --lift-card: 0px; --lift-tile: 0px; --zoom-photo: 1; --shift-arrow: 0px; --float-rise: 0px; /* rc-land.js does not start the showcase's turn under reduced motion. Flattening the angle too means that even if the class were applied some other way, the card would not move. */ --hero-flip-angle: 0deg; --dur-flip: 0.01ms; } }