/* Shared stylesheet for every page. Extracted verbatim from the original single-file build; the chrome wrappers below are the only addition. */ @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap"); /* GameMantra brand tokens — the identity sheet, verbatim. NOT imported by site.css yet. This file is the source of truth; site.css still carries the pixel-sampled palette from 2026-09-09 and has not been migrated. The eight are the Colour System row of the identity sheet. The --*-on-white values are derived, not brand: same hue, same saturation, lightness lowered only until white ink or the white page clears 4.5:1. Nothing else is invented. */ :root{ /* Shiva Indigo Depth white 15.94:1 black 1.32:1 on indigo 1.00:1 */ --gm-shiva-indigo:#0B1F4D; /* Himalayan Blue Clarity white 2.68:1 black 7.84:1 on indigo 5.95:1 */ --gm-himalayan-blue:#0EA5FF; /* Peacock Teal Awareness white 2.26:1 black 9.28:1 on indigo 7.05:1 */ --gm-peacock-teal:#00C2A8; /* Kartikeya Gold Focus white 1.88:1 black 11.15:1 on indigo 8.47:1 */ --gm-kartikeya-gold:#F6B024; /* Shakti Orange Energy white 2.91:1 black 7.22:1 on indigo 5.48:1 */ --gm-shakti-orange:#FF663D; /* Moon Silver Balance white 1.24:1 black 16.96:1 on indigo 12.88:1 */ --gm-moon-silver:#E5E7EB; /* Stone Stability white 4.75:1 black 4.42:1 on indigo 3.35:1 */ --gm-stone:#667488; /* Earth Grounded white 11.37:1 black 1.85:1 on indigo 1.40:1 */ --gm-earth:#3A3A3A; /* derived — for the fixed white page, where the brights run 2.26-2.91:1 as text. ONLY TWO OF THE FOUR MAY BE DARKENED. Each hue has a maximum chroma it can hold at a given lightness, and they peak in different places (CIE Lab, measured): L*35 L*45 L*55 L*65 L*75 cost of the darkened step Kartikeya Gold 45 55 64 73 83 -24.6% chroma, and the hue turns brown Peacock Teal 28 33 39 44 49 -24.5% Himalayan Blue 35 43 50 56 42 -15.5% Shakti Orange 70 85 99 72 44 +17.7% — it gets MORE vivid Gold and Teal peak light, so darkening them to pass white ink destroys them: #9F6C07 is brown, not gold. They are light fills with dark ink on white, never text. Blue and Orange survive, so they are the two that may carry interface text. */ --gm-himalayan-blue-on-white:#007BC4; /* L38 · white 4.54:1 · -15.5% chroma */ --gm-shakti-orange-on-white:#E02F00; /* L44 · white 4.59:1 · +17.7% chroma */ /* Kartikeya Gold and Peacock Teal have no on-white text value by design. To make them read on white, give the fill a dark edge instead — gold against Shiva Indigo is dE 122 against white's 79, so a hairline or an indigo-tinted shadow buys locally what an indigo ground buys globally. Area matters too: a 44px gold pill reads gold, 12px gold text reads brown. */ --gm-edge-on-white:inset 0 0 0 1.5px var(--gm-shiva-indigo); --gm-lift-on-white:0 8px 22px rgba(11,31,77,.30); /* ── MATERIALS ───────────────────────────────────────────────────────────────────── A flat token cannot look like the mark, and this is why: measured off static/img/gm-logo-full.webp, EVERY colour family in the artwork spans about 90 L* units inside a single face — from a near-black shadow to a near-white specular — and the chroma at the ends far exceeds the token's: family artwork peak C* the token's C* blue 107 54 <- the mark's blue is TWICE as colourful orange 100 76 gold 92 75 teal 59 47 The hue also travels along the ramp: blue swings 58 degrees from blue-violet in shadow to pale cyan at the highlight; orange swings 44 from red to gold. That hue travel is where the punch comes from, and holding the hue while darkening — which is what I did in the first derivation — throws it away. So each token is the MID of a three-stop material. Use the flat token for text, hairlines and anything under about 20px. Use the material for surfaces, buttons, discs, bands — anything with area. Stops below are measured pixels from the mark, with the brand token substituted as the mid so the material stays brand-true. */ --gm-himalayan-deep:#0047FD; --gm-himalayan-spec:#92D9FD; --gm-peacock-deep:#0E8A6E; --gm-peacock-spec:#14F4C6; --gm-kartikeya-deep:#9C7C2E; --gm-kartikeya-spec:#FFF71D; --gm-shakti-deep:#F41300; --gm-shakti-spec:#FFC40C; --gm-indigo-deep:#061433; --gm-indigo-spec:#16336F; --gm-mat-himalayan:linear-gradient(165deg,#92D9FD 0%,#0EA5FF 42%,#0047FD 100%); --gm-mat-peacock:linear-gradient(165deg,#14F4C6 0%,#00C2A8 46%,#0E8A6E 100%); --gm-mat-kartikeya:linear-gradient(165deg,#FFF71D 0%,#F6B024 46%,#9C7C2E 100%); --gm-mat-shakti:linear-gradient(165deg,#FFC40C 0%,#FF663D 46%,#F41300 100%); --gm-mat-indigo:linear-gradient(165deg,#16336F 0%,#0B1F4D 55%,#061433 100%); /* the lit edge — the mark's faces are bevelled, so every surface has a light top edge and a dark bottom one. Without it a gradient still reads as a printed shape, not a lit one. */ --gm-bevel:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.28); /* the sheet's own ramp: Foundation -> Awareness -> Focus -> Energy -> Balance */ --gm-sweep:linear-gradient(90deg,#0B1F4D 0%,#0EA5FF 26%,#00C2A8 45%,#F6B024 64%,#FF663D 80%,#E5E7EB 100%); } /* Plus Jakarta Sans replaces the two embedded Bloomreach Sans woff2 blocks. */ site-cookie,site-header,site-footer,site-crumb{display:contents} /* v2: the crumb is pre-rendered too, so its wrapper gets the rule the JS used to set inline */ /* ============================================================ 1. TOKENS — the whole design system lives in this block ============================================================ */ :root{ /* Brand values are the production --e-global-color-* tokens verbatim. */ /* The three yellow tokens have no readers left: every button, badge, chip, tile, swatch and focus ring that used to read them is himalayan blue now. Kept, not deleted, because they are the production --e-global-color-* values and are what a source comparison against the saved originals is checked against. */ --yellow:#FFD500; /* c442edd — was buttons and accents; unread */ --yellow-hover:#FFDD33; /* 32c9961 — was button hover; unread */ --yellow-ink:#002840; /* was the ink on both; unread */ --purple:#8873FF; /* 1e8e11d — was the ticker band. No rule reads the TOKEN, but .pp__eyebrow still writes #8873FF as a literal, so the colour is on the page even though the variable is dead. */ --cyan:#019ACE; /* f97dbcb */ /* Verbatim from .bx-lbl-num:before (the numbered ring). There is no teal stop upstream — it goes #FFFB00 -> #FFD500 -> #00B2DB. --grad-pill was the same ramp; it is now himalayan blue, because .chcard__badge sets a white label on it and the old near stop, #FFFB00, carried that label at 1.07:1. */ --grad-loomi:linear-gradient(236deg,#0179F8 -44.11%,#0461C8 -17.1%,#00B2DB 81.53%); /* The brand sweep, Clarity -> Awareness -> Focus -> Energy: four of the sheet's five meanings in its own order, and the monogram's own left-to-right ramp — blue through cyan to gold and orange. Read by .chcard__badge alone. Foundation and Balance are deliberately NOT in it. The full sweep cannot carry a label: dark ink is 1.28:1 on the Foundation indigo and white is 1.24:1 on Balance silver, so no single ink survives end to end. Measured across every interpolated step of THIS ramp, dark ink never drops below 7.01:1. */ /* The monogram coin's rim, unrolled — measured every 15deg on a least-squares fit of the ring itself. Read by .acc__num::before and the hero eyebrow, so it lives here rather than being written out twice. */ --gm-coin-ring:conic-gradient(#9BFCFF 0deg,#ED5B00 45deg,#FFDD38 90deg,#FED466 135deg, #00EAFB 180deg,#0099FC 225deg,#00EEFF 270deg,#008AFD 315deg,#9BFCFF 360deg); --grad-pill:linear-gradient(90deg,#0EA5FF 0%,#00C2A8 33%,#F6B024 67%,#FF663D 100%); /* neutrals — light surface (their navy-based ramp, not a grey one) */ --white:#FFFFFF; --surface:#F5F5F5; /* the value actually used for light cards here */ --line:#E5E9EC; /* 388c9b9 */ --text:#002840; /* 8611160 — body text is navy, not black */ /* neutrals — dark surface */ --black:#000000; --line-dark:#335366; /* a0d4d64 */ --text-inv:#FFFFFF; /* pastel panels — production container backgrounds 3a5baab (marketing agent) / 3d56b74 (shopping agent) / 3749890 (connect) */ --lilac:#F5F4FF; --aqua:#EDF8FB; --mint:#EBFAF5; /* radius — production uses 10 / 16 / 20 / 40 / 50, with 20px dominant */ --r-lg:20px; --r-pill:99px; /* space scale — production gaps run 8/10/16/20/24/30/40/50, sections at 120px */ --s2:8px; --s4:16px; --s5:24px; --s6:30px; --s7:40px; --s8:50px; --s9:120px; --s10:160px; /* type scale */ /* Lifted from the production Elementor global typography tokens. The real site has only two weights (400 Regular / 500 Medium) — there is no bold anywhere — letter-spacing is 0 throughout, and line-heights sit at ~1.2 on display sizes. */ /* Production has the hero at 50/60 (230d2b0) and every section heading at 60/72 (519bad6, 3db7d05, 995d5de, 3e16eab, c35a048, 09d1edf). I had these inverted. */ --f-display:50px; --lh-display:60px; --f-h1:clamp(38px,5vw,60px); --lh-h1:1.2; --f-h3:24px; --lh-h3:34px; --f-body:16px; --lh-body:26px; --f-sm:16px; --f-xs:14px; --wrap:1220px; /* production --content-width */ } /* ============================================================ 2. BASE ============================================================ */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:76px} /* the header is in its scrolled 60px state by the time a jump lands */ body{ margin:0; font-family:"Plus Jakarta Sans",Poppins,"Helvetica Neue",Arial,sans-serif; font-size:var(--f-body); line-height:var(--lh-body); color:var(--text); background:var(--white); -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,p{margin:0} h1,h2,h3,h4{font-weight:500;letter-spacing:0} strong{font-weight:500} img,video{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;border:0;background:none;color:inherit} .wrap{max-width:calc(var(--wrap) + 30px);margin-inline:auto;padding-inline:15px} .section{padding:var(--s9) 0 0} .section--journey{padding-bottom:100px} /* 120 / 100 */ .section--int{padding-top:var(--s10);padding-bottom:100px} /* 160 / 100 */ .section--cta{padding-top:100px;padding-bottom:140px} /* 100 / 140 */ .section--tight{padding-block:var(--s8)} .dark{background:var(--black);color:var(--text-inv)} .dark .lead{color:#fff} /* ============================================================ 3. TYPOGRAPHY COMPONENTS ============================================================ */ .display{font-size:var(--f-display);font-weight:500;line-height:var(--lh-display);letter-spacing:0} .h1{font-size:var(--f-h1);font-weight:500;line-height:var(--lh-h1);letter-spacing:0} .h3{font-size:var(--f-h3);font-weight:500;line-height:var(--lh-h3);letter-spacing:0} .h1,.h3{color:#000} @media(max-width:1024px){:root{--f-h3:18px;--lh-h3:29px;--f-display:30px;--lh-display:38px}} .dark .h1,.dark .h3{color:inherit} /* measured across the source: 16/26 on 19 of 34 body paragraphs, colour #002840 on light and #fff on dark — no paragraph uses a muted grey */ .lead{font-size:16px;line-height:26px} .caps{font-size:13px;font-weight:500;line-height:13px;color:#000} /* bx-lbl-label */ .walllabel{font-size:16px;font-weight:500;line-height:16px;color:#000} .chiprow{font-size:14px;font-weight:500;line-height:20px;text-transform:uppercase;color:#000} /* Himalayan blue. The largest single cluster of that family in the logo — 29.4% of its pixels — sits at lightness 45-50, and its mean is this. On the .dark section's black it reads 5.09:1, so it carries the 60px headline. The .cta band uses the same hue and saturation at lightness 40 and 28, because there it is a ground, not ink. */ .hl{color:#01CE7F} /* per-section header measures, taken from the source */ .shead{display:grid;text-align:center;margin-inline:auto} .shead--intel{gap:30px;max-width:none;margin-bottom:100px} @media(max-width:1024px){.shead--intel{margin-bottom:50px}} @media(max-width:767px){.shead--intel{margin-bottom:30px}} .shead--intel .lead{max-width:600px;margin-inline:auto} .shead--journey{gap:30px;max-width:1000px;margin-bottom:80px} .shead--journey .h1{font-size:50px;line-height:60px} /* this one h2 is 50/60 */ @media(max-width:1024px){.shead--journey .h1{font-size:30px;line-height:38px}} .shead--journey .lead{max-width:600px;margin-inline:auto} .shead--cases{gap:16px;max-width:540px;margin-bottom:50px} .shead--cases .lead{text-wrap:balance} .shead--cases > .h1{margin-bottom:10px;max-width:520px;margin-inline:auto} /* ============================================================ 4. BUTTONS ============================================================ */ /* Production kit button: 16px/500/26px, radius 99px, padding 11px 32px. */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--s2); padding:11px 32px;border-radius:var(--r-pill); font-size:var(--f-sm);font-weight:500;line-height:26px; transition:transform .15s ease,background .15s ease,color .15s ease; } .btn:hover{transform:translateY(-1px)} /* Himalayan blue at lightness 40, where white ink reads 5.92:1; the hover goes deeper rather than lighter, because the family's bright end drops white to 4.13:1 and this button's label is 13px. The class name still says yellow — renaming it would mean editing markup on every page that carries the cookie bar. */ .btn--yellow{background:#0461C8;color:#fff} .btn--yellow:hover{background:#03448C} .btn--ghost{background:transparent;color:inherit;border:1px solid var(--line)} .btn--sm{padding:9px 18px;font-size:var(--f-xs)} /* underlined text link (used all over the light sections) */ .tlink{font-weight:500;color:var(--cyan);text-decoration:underline;text-underline-offset:4px;align-self:flex-start} /* icon button (carousel arrows) */ /* .br-swiper-arrows buttons: 64x64 circles, hover scale(1.1), 24px icon, disabled at opacity .35 with pointer-events off. */ /* .smart-arrow — the journey rail's arrows */ .iconbtn{ position:static;display:flex;align-items:center;justify-content:center; width:52px;height:auto;aspect-ratio:1/1;border-radius:50%;margin:0; background:#019ACE;color:#fff; transition:opacity 200ms ease-in-out,transform 200ms ease-in-out } .iconbtn:not([disabled]):hover{transform:scale(1.1)} .iconbtn[disabled]{opacity:.5;cursor:auto} /* width only, as the source sets it: the svg keeps its height="24" attribute */ .iconbtn svg{width:20px} /* .br-swiper-arrows .swiper-button-* — the case-study rail's arrows, with the e9e2db4 widget override that repaints them yellow */ .iconbtn--yellow{width:64px;background:#0461C8;color:#fff; transition:transform 200ms ease-in-out,opacity 200ms ease-in-out} .iconbtn--yellow svg{width:24px} .iconbtn--yellow[disabled]{opacity:.35;pointer-events:none} @media(max-width:1800px){.iconbtn--yellow{width:48px}} /* ============================================================ 5. BADGES / PILLS / DOTS ============================================================ */ .badge{ display:inline-flex;align-items:center;gap:6px; padding:4px 12px;border-radius:var(--r-pill); font-size:var(--f-xs);font-weight:500;line-height:1.4 } .badge--pink{background:#F24165;color:#fff;font-size:13px;font-weight:500;line-height:1; text-transform:uppercase;padding:5px 8px 3px;border-radius:100px;margin-left:4px} /* also paints the "Live" and the count pills in the nav dropdown — one rule, several labels. Dark ink: white on this green is 2.07:1, #050505 is 9.84:1. */ .badge--count{background:#01CE7F;color:#050505;font-size:11px;padding:1px 8px} /* the gradient-outlined "loomi" chip */ .hero__chip{display:block;width:84px;height:32px} .dot{flex:none;display:block;width:16px;height:16px;border-radius:50%} .dot--orb{border-radius:20px;object-fit:cover} .dot--yellow{background:#0179F8} /* ============================================================ 6. NAVBAR ============================================================ */ /* Production header variables: top bar 40px, main bar 90px, 80px side padding, inner max-width 1720px (wider than the 1220px content wrap). --hdr-top is 0 since 2026-09-12: the utility bar (.nav__top) is commented out in the template in site.js, and this token is what .nav-space and the scroll retract read, so at 40px the flow stayed open for a bar that no longer renders — a 40px band between header and hero. Back to 40px if the bar returns. */ :root{--hdr-top:0px;--hdr-nav:90px;--hdr-pad:80px;--hdr-maxw:1720px;--navitem-pad:24px} /* Lockup: the icon box and the wordmark width, held as one pair so the retract plate and the two breakpoints below cannot drift from them. 60/204 is the original 40/136 at 1.5x. */ :root{--logo-icon:60px;--logo-text:204px} /* The header shrinks with the viewport, and the top bar is zeroed out below 1200 so the drawer's top offset stays flush with the bar. */ @media(max-width:1600px){:root{--hdr-pad:40px}} @media(max-width:1199px){:root{--hdr-top:0px;--hdr-nav:60px;--hdr-pad:15px;--navitem-pad:20px}} @media(max-width:575px){:root{--hdr-nav:48px}} .nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:#fff; transition:transform 600ms ease-in-out,box-shadow 600ms ease-in-out} /* .brheader.scroll — past 30px the top bar slides away, the nav bar shrinks 90->60, a shadow appears and the wordmark slides out behind the icon. */ .nav.scroll{--hdr-nav:60px;box-shadow:0 0 40px rgba(11,31,77,.08); transform:translateY(calc(var(--hdr-top) * -1))} @media(max-width:575px){.nav.scroll{--hdr-nav:48px}} .nav__main{transition:height 250ms ease-in-out} .nav__top{position:relative;z-index:1200;display:flex;align-items:center;height:var(--hdr-top); color:#fff;font-size:12px;background:var(--gm-shiva-indigo);padding-inline:var(--hdr-pad)} .nav__top__in{display:flex;align-items:center;justify-content:space-between;width:100%; max-width:var(--hdr-maxw);height:100%;margin-inline:auto;gap:var(--s5)} .nav__top a{color:#fff} .nav__top a:hover{color:var(--gm-himalayan-blue)} .nav__top__links{display:flex;align-items:normal;gap:16px;white-space:nowrap} .nav__top__links > *{height:26px;line-height:26px} .nav__promo{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ---- TOP-BAR DROPDOWNS (Company / Login / EN) ---- Hover-driven, matching .brheader__top__nav__dropdown: the panel is always in the DOM and fades+slides in, so nothing reflows when it opens. */ .nav__top__item{position:relative;display:block;color:#fff;font-size:12px;cursor:default} .nav__top__item:hover{color:var(--gm-himalayan-blue)} .nav__top__chev{display:inline-block;width:6.23px;height:8px;vertical-align:-1px} .nav__top__dd{position:absolute;top:26px;right:-10px;padding-top:10px;opacity:0;pointer-events:none; transform:translateY(10px); transition:transform 250ms ease-in-out,opacity 250ms ease-in-out} .nav__top__item:hover .nav__top__dd{opacity:1;pointer-events:auto;transform:translateY(0)} .nav__top__dd__box{display:flex;flex-direction:column;background:var(--gm-shiva-indigo);padding:20px 24px;border-radius:8px} .nav__top__dd__box a{display:block;color:#fff;font-size:12px;font-weight:400;line-height:26px;white-space:nowrap} .nav__top__dd__box a:hover{color:var(--gm-himalayan-blue)} .nav__top__dd__box--login ul{display:flex;flex-wrap:wrap;gap:0;list-style:none;margin:0;padding:0} .nav__top__dd__box--login li{width:100%;padding:4px 0;line-height:19.8px} .nav__top__dd__box--login a{display:inline;font-size:13.2px;line-height:19.8px} .nav__top__dd__box--login a svg{width:6.23px;color:var(--gm-himalayan-blue);margin-right:3px} .nav__top__dd__box--lang span{display:inline-block;width:20px;margin:4px 4px 4px 0;padding:3px; background:var(--gm-himalayan-blue-on-white);color:#fff;font-size:12px;line-height:1.2;border-radius:4px;text-align:center} .nav__promo em{font-style:normal;font-weight:500;color:var(--gm-kartikeya-gold)} .nav__promo em svg{width:6.23px;height:8px;vertical-align:-1px} @media(max-width:1100px){.nav__top{display:none}} .nav__main{position:relative;z-index:1100;height:var(--hdr-nav);background:#fff;padding-inline:var(--hdr-pad); display:flex;align-items:center;border-bottom:1px solid var(--gm-moon-silver)} .nav__in{display:flex;align-items:center;justify-content:flex-start; width:100%;max-width:var(--hdr-maxw);height:100%;margin-inline:auto;gap:0} .logo{position:relative;overflow:hidden;display:flex;align-items:center;gap:8px; transition:transform 250ms ease-in-out} .nav .logo:hover{transform:scale(1.05)} /* The retract plate: the wordmark slides left behind it, the icon sits above it. It must be the ICON'S box, not the row's. `height:100%` assumed the row was as tall as the icon; it is not. `.l-text` is gm-text.png, 2172x724, so at width:204px it renders 68px tall and the row is 68px while the icon is 60 — and 44 once .nav.scroll shrinks it. The plate was inheriting the wordmark's height, so it stood 4px proud of the icon at rest and 12px once scrolled, which is the white bar above and below the coin. Centred and sized to --logo-icon it matches the icon in every state: 60, 48, 36, 44. */ .nav .logo::before{content:"";position:absolute;z-index:2;top:50%;left:0; width:var(--logo-icon);height:var(--logo-icon);transform:translateY(-50%); background:var(--white)} .logo img{position:relative;z-index:3;display:block;border-radius:0} .logo .l-icon{width:var(--logo-icon);height:var(--logo-icon); transition:width 250ms ease-in-out,height 250ms ease-in-out} .logo .l-text{z-index:1;width:var(--logo-text);height:auto;transform:translateX(0); transition:transform 600ms ease-in-out} /* the same 1.5x on both steps: 32/109 -> 48/163, 24/82 -> 36/123 */ @media(max-width:1199px){:root{--logo-icon:48px;--logo-text:163px}} @media(max-width:575px){:root{--logo-icon:36px;--logo-text:123px}} /* Scrolled, the desktop bar drops 90 -> 60. A 60px icon in a 60px bar sits flush against both edges (measured: 0px above, 1px below) and .logo:hover scale(1.05) then pushes it past them. 44px gives back the 8px of clearance the 40px icon had. Below 1200 the bar does not shrink, so the step is scoped away from there. */ @media(min-width:1200px){.nav.scroll{--logo-icon:44px}} .nav.scroll .logo .l-text{transform:translateX(-120%)} .nav__links{display:flex;align-items:center;gap:26px;margin:0 0 0 46px} .nav__links a{display:flex;align-items:center;gap:5px;color:var(--gm-shiva-indigo);font-size:15px;font-weight:500; line-height:1.85;padding:7px 5px 3px} .nav__links a:hover{color:var(--gm-himalayan-blue-on-white)} .nav__cta{display:flex;align-items:center;gap:0;margin-left:auto} .nav__cta a{display:inline-block;color:#050505;font-size:15px;font-weight:500;line-height:26px; padding:9px 24px 7px;background:linear-gradient(180deg,#FFD95A 0%,#F6B024 100%);border-radius:50px; box-shadow:0 7px 20px rgba(246,176,36,.24),inset 0 1px 0 rgba(255,255,255,.28); transition:background 250ms ease-in-out,box-shadow 220ms ease,filter 220ms ease} .nav__cta a:hover{background:linear-gradient(180deg,#FFE07A 0%,#E7A51E 100%);filter:brightness(1.025); box-shadow:0 10px 26px rgba(246,176,36,.30),inset 0 1px 0 rgba(255,255,255,.34)} /* "Log in" pill. Upstream this slot was "Loomi AI platform" with an inline arrow svg and an hover label, so the rule padded 46px on the right for the arrow; with plain text that left a 22px hole and the label off-centre. Symmetric now; the svg/em rules went with them. */ .nav__cta a.nav__ctaloomi{position:relative;background:transparent;border:1px solid var(--gm-shiva-indigo);color:var(--gm-shiva-indigo); padding:9px 24px 7px;margin-left:33px; transition:background 250ms ease-in-out,color 250ms ease-in-out,transform 250ms ease-in-out} .nav__cta a.nav__ctaloomi:hover{background:var(--gm-shiva-indigo);color:#fff} .nav__cta a.nav__ctaloomi::before{content:"";position:absolute;top:0;bottom:0;left:-18px; width:1px;background:var(--gm-moon-silver)} /* Two outlined pills now (GameMantra AI, then Log in). The divider and the 33px gap belong between the filled CTA and the FIRST of them; the second just sits alongside. */ .nav__cta a.nav__ctaloomi + a.nav__ctaloomi{margin-left:10px} .nav__cta a.nav__ctaloomi + a.nav__ctaloomi::before{content:none} /* mobiletop and the mobile-only list only exist inside the drawer */ .nav__mobiletop{display:none} @media(max-width:1399px){ .nav__links{gap:16px} .nav__cta a{padding:7px 16px 5px} .nav__cta a.nav__ctaloomi{padding:7px 16px 5px;margin-left:10px} } @media(max-width:767px){.nav__cta a.nav__ctaloomi{display:none}} @media(max-width:575px){.nav__cta a{font-size:12px;padding:3px 12px 1px}} /* ---- DRAWER (.brheader__main__nav below 1200): fixed panel sliding in from the right ---- */ @media(max-width:1199px){ .nav__top{display:none!important} .nav__links{ position:fixed;top:var(--hdr-nav);left:0;width:100%;height:100vh;background:#fff; padding:20px 0 300px;border-top:1px solid var(--gm-moon-silver); transition:transform 400ms ease-in-out;transform:translateX(100%); overflow-y:auto;display:flex;flex-direction:column;justify-content:flex-start; align-items:flex-start;gap:0;margin:0} .nav.menu-active .nav__links{transform:translateX(0)} .nav__links > a,.nav__links .nav__item{ position:relative;width:100%;font-size:24px;line-height:1.85; padding:5px 0 5px var(--hdr-pad);justify-content:flex-start} .nav__links .nav__item > span{position:absolute;right:15px;top:50%;font-size:16px; display:flex;transform:translateY(-50%) rotate(270deg)} .nav__links .nav__item > span svg{width:12.45px;height:16px} .nav__mobiletop{display:flex;align-items:center;justify-content:space-between; margin:0 var(--hdr-pad) 10px;width:calc(100% - var(--hdr-pad) * 2)} } /* EN / Login disclosures inside the drawer */ .nav__mob{position:relative;color:var(--gm-shiva-indigo);font-size:14px;font-weight:500;cursor:pointer;background:none;padding:0} .nav__mob i{display:inline-block;font-style:normal;font-size:11px;position:relative;top:-2px; transition:transform 250ms ease-in-out} .nav__mob.active i{transform:rotate(180deg)} .nav__mob__dd{opacity:0;pointer-events:none;transform:translateY(10px);position:absolute;z-index:1500; top:100%;left:0;width:200px;padding-top:5px; transition:opacity 250ms ease-in-out,transform 250ms ease-in-out} .nav__mob.active .nav__mob__dd{opacity:1;pointer-events:auto;transform:translateY(0)} .nav__mob--login .nav__mob__dd{left:auto;right:0} .nav__mob__dd__box{display:flex;flex-direction:column;gap:16px;background:#fff;border-radius:5px; box-shadow:0 0 10px rgba(11,31,77,.06);border:1px solid var(--gm-moon-silver);padding:16px;text-align:left} .nav__mob--lang a{display:block;color:var(--gm-shiva-indigo);font-size:14px;padding:0;border-radius:4px} .nav__mob--login .nav__mob__dd__box a{display:inline-block;width:auto;color:var(--gm-shiva-indigo);font-size:14px;font-weight:400;padding:0;line-height:1.2} .nav__mob--login .nav__mob__dd__box ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px} .nav__mob--lang a:hover{color:#fff;background:var(--gm-himalayan-blue-on-white)} .nav__mob--lang .nav__mob__dd__box span{display:inline-block;width:20px;color:#fff;font-size:12px; font-weight:500;text-align:center;line-height:1.2;border-radius:4px;background:var(--gm-himalayan-blue-on-white); padding:3px;margin:4px 4px 4px 0} .nav__mob--login ul{display:flex;flex-wrap:wrap;gap:0;padding:0;margin:5px 0 0;list-style:none} .nav__mob--login ul li{position:relative;width:100%;color:var(--gm-shiva-indigo);font-size:14px;padding:10px 0 8px 12px} .nav__mob--login ul li:not(:last-child){border-bottom:1px dotted var(--gm-moon-silver)} .nav__mob--login ul li::before{content:"";position:absolute;opacity:.6;top:calc(50% - 2px);left:0; width:4px;height:4px;background:var(--gm-shiva-indigo);border-radius:50%} /* holds the flow open under the fixed header, as .brheader-space does upstream */ .nav-space{height:calc(var(--hdr-top) + var(--hdr-nav))} .nav__burger{display:none;position:relative;left:10px;flex-direction:column;align-items:center; justify-content:center;gap:6px;padding:10px;margin-left:auto;background:none;cursor:pointer} @media(max-width:575px){.nav__burger{gap:5px;left:5px;padding:5px}} .nav__burger span{display:block;width:24px;height:2px;background:var(--gm-shiva-indigo);border-radius:2px; transition:transform 200ms ease-in-out,opacity 150ms ease-in-out} @media(max-width:575px){.nav__burger span{width:20px}} @media(max-width:1199px){.nav__burger{display:flex;margin-left:0} .nav__in{justify-content:flex-start;gap:0} .nav__cta{margin-left:auto}} /* burger -> X, matching .brheader.menu-active */ .nav.menu-active .nav__burger span:nth-child(1){transform:translateY(8px) rotate(45deg)} .nav.menu-active .nav__burger span:nth-child(2){opacity:0} .nav.menu-active .nav__burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)} @media(max-width:575px){ /* gap drops 6->5, so the bars meet 1px closer */ .nav.menu-active .nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav.menu-active .nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}} /* ---- SUBNAV PANELS (.brheader__subnav et al, verbatim spec) ---- Upstream the panel is position:fixed at its static position; this header is sticky, so it is absolutely placed at the header's bottom edge for the same result without a fixed-position containing-block dependency. */ .nav__item{position:relative;display:flex;align-items:center;gap:5px;color:var(--gm-shiva-indigo);font-size:15px;font-weight:500; line-height:1.85;padding:7px 15px 3px 5px;cursor:pointer;background:none;font-family:inherit} .nav__item > span{position:absolute;right:0;top:50%;display:flex;align-items:center; transform:translateY(-50%);font-size:10px} .nav__item > span svg{width:8px;height:10px} .nav__item:hover,.nav__item.active{color:var(--gm-himalayan-blue-on-white)} .nav__links .nav__item.inactive{opacity:.55} .brheader__subnav{position:absolute;top:100%;left:0;width:100%;z-index:1050;color:var(--gm-shiva-indigo);background:#fff; border-top:1px solid var(--gm-moon-silver);padding:32px var(--hdr-pad) 64px;box-shadow:0 0 0 rgba(11,31,77,.06); transform:translateY(calc(-100% - 5px)); /* visibility is held until the slide-out finishes, otherwise the panel vanished instantly on close and only the opening half of the animation was ever seen */ transition:transform 400ms ease-in-out,box-shadow 400ms ease-in-out,visibility 0s linear 400ms; visibility:hidden} .brheader__subnav.active{transform:translateY(0);box-shadow:0 0 40px rgba(11,31,77,.08); visibility:visible;transition:transform 400ms ease-in-out,box-shadow 400ms ease-in-out,visibility 0s linear 0s} .brheader__maxw{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1720px;height:100%} .brheader__maxw--subnav{display:flex;align-items:stretch;gap:32px;max-width:1400px;margin-inline:auto;height:auto} .brheader__subnav__back{position:relative;left:-10px;cursor:pointer;display:flex;align-items:center; justify-content:flex-start;gap:8px;width:100%;color:var(--gm-shiva-indigo);font-size:16px;font-weight:500;line-height:1.2; padding:5px 10px;margin:-10px 0} .brheader__subnav__back span{font-size:11px} @media(min-width:1200px){.brheader__subnav__back{display:none}} .brheader__subnav__left{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch} .brheader__subnav__left{width:65%} .brheader-label{position:relative;color:var(--gm-shiva-indigo);font-size:12px;font-weight:500;line-height:29px; text-transform:uppercase;padding:0 var(--navitem-pad);margin:16px 0 8px} .brheader-label:first-child{margin-top:0} .brheader__b-tiles{display:flex;flex-wrap:wrap;gap:8px} .brheader__b-tile{cursor:pointer;position:relative;display:flex;flex-direction:column;gap:8px; width:calc(50% - 4px);color:var(--gm-shiva-indigo);padding:var(--navitem-pad);border-radius:16px;background:#fff; transition:background 250ms ease-in-out,color 250ms ease-in-out} .brheader__b-tile--three{width:calc(33% - 5px)} .brheader__b-tile--smallpad{padding:16px 24px} .brheader__b-tile--lconnect{width:100%;max-width:340px} /* the agent tile: upstream's own geometry -- 64px left padding with a 32px icon parked at 24/13, and a gradient wash that fades in under the tile on hover (its yellow/cyan, our sheet) */ .brheader__b-tile--agent{padding:16px 24px 16px 64px} .brheader__b-tile--agent > img{position:absolute;z-index:5;top:13px;left:24px; width:32px;height:32px;border-radius:0} .brheader__b-tile--agent::before{content:"";position:absolute;inset:0;z-index:1;opacity:0;border-radius:16px; pointer-events:none;transition:opacity 250ms ease-in-out; background:linear-gradient(266deg,rgba(246,176,36,.10) -5%,rgba(14,165,255,.10) 84%,rgba(0,194,168,.10) 108%)} .brheader__b-tile--agent:hover{background:transparent} .brheader__b-tile--agent:hover::before{opacity:1} .brheader__b-tile__title{position:relative;z-index:5;font-size:24px;font-weight:500;line-height:1.2} .brheader__b-tile--lconnect .brheader__b-tile__title{font-size:18px;padding-top:4px} @media(max-width:1400px){nav[data-subnav="products"] .brheader__b-tile__title{font-size:20px}} @media(max-width:1300px){nav[data-subnav="products"] .brheader__b-tile__title{font-size:18px}} /* ---- panel content: badges, tile text, the integrations row ---- Every class below is in the header markup; none of them had a rule. */ .brheader__badge{color:#fff;background:var(--gm-himalayan-blue-on-white);padding:1px 6px;border-radius:30px; font-size:10px;font-weight:500;line-height:1;margin-left:5px;transition:background 250ms ease-in-out} .brheader__badge--large{position:relative;top:-2px;padding:4px 8px 2px} .brheader__b-tile__title .brheader__badge--large{top:-4px;margin-left:0} .brheader__b-tile:hover .brheader__badge{background:#fff;color:var(--gm-himalayan-blue-on-white)} .brheader__b-tile__cta{position:relative;z-index:5;color:var(--gm-himalayan-blue-on-white);font-size:12px;line-height:1.5; transition:color 250ms ease-in-out} .brheader__b-tile:hover .brheader__b-tile__cta{color:var(--gm-shiva-indigo);text-decoration:underline} .brheader__b-tile__description{position:relative;z-index:5;font-size:12px;line-height:1.5; transition:color 250ms ease-in-out} .brheader__integrations{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:10px} .brheader__integrations a{color:var(--gm-shiva-indigo);font-weight:400} .brheader__integrations a:hover{text-decoration:underline} .brheader__integrations a strong{padding-left:10px} .brheader__integrations img{display:block;width:26px;height:26px;border-radius:0; transform:scale(1.1);transition:transform 150ms linear} .brheader__integrations a:hover img{transform:scale(1.4)} .brheader__integrations__more{line-height:1.2;text-transform:none} /* ---- the panel's right column and its list items: upstream's own rules, ported for the Product flyout now that it carries the six capability pages. width 35% beside the 65% left column; a two-column list of pill links, 14px, 24px icon. Hover wash is the sheet's. */ .brheader__subnav__right{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;width:35%} .brheader__b-2col{display:flex;gap:8px} .brheader__b-2col__col{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:5px;width:100%} .brheader__b-item{display:flex;align-items:center;justify-content:flex-start;gap:8px;color:var(--gm-shiva-indigo);font-size:14px; line-height:1.4;border-radius:50px;padding:11px var(--navitem-pad) 9px;transition:background 250ms ease-in-out} .brheader__b-item img{position:relative;top:-1px;flex:none;width:24px;height:24px;border-radius:0} @media(min-width:1200px){.brheader__b-item:hover{background:rgba(14,165,255,.08)}} @media(max-width:1360px){.brheader__b-item{padding:11px 16px 9px}} /* ---- the header panels below 1200: a sheet over the drawer, not a dropdown ---- Measured off the source's own @media(max-width:1199px) rules. */ @media(max-width:1199px){ .brheader__subnav{z-index:1150;left:0;width:100%;height:100vh;padding:0; transform:translateX(100%)} .brheader__subnav.active{transform:translateX(0);box-shadow:none} /* height:100% is what makes overflow-y:auto bite: the desktop rule sets height:auto, which let the column grow past the sheet and hid everything below the fold. */ .brheader__maxw--subnav{overflow-y:auto;height:100%;flex-direction:column; justify-content:flex-start;align-items:flex-start;gap:0;padding:20px var(--hdr-pad) 300px} .brheader__subnav__right{width:100%;gap:10px} .brheader__b-2col__col{align-items:stretch} .brheader__b-item{padding:5px 0} .brheader__subnav__left{ width:100%!important;gap:10px!important} .brheader-label{padding:15px 0 0;border-top:1px solid var(--gm-moon-silver);margin:20px 0 0!important} .brheader__b-tiles{flex-direction:column;gap:20px} .brheader__b-tile{padding:0;gap:5px;width:100%;max-width:265px} .brheader__b-tile__title{font-size:18px;padding-top:0!important} .brheader__b-tile__cta{display:none} /* both classes sit on the same element, so this has to outrank the 18px rule above */ .brheader__lconnect{order:-5} .brheader__lconnect-label{order:-10} } /* nothing on this page had a visible keyboard focus state */ a:focus-visible,button:focus-visible,summary:focus-visible,label:focus-visible{ outline:3px solid #0179F8;outline-offset:3px;border-radius:6px} .cookie{position:fixed;inset:auto 0 0;z-index:99;background:#fff;color:var(--text); border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(0,0,0,.12); padding:var(--s5);display:flex;gap:var(--s5);align-items:flex-start} .cookie[hidden]{display:none} .cookie__actions{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap;margin-top:var(--s4)} @media(max-width:640px){.cookie{flex-direction:column}} /* the preference centre -- upstream's CookieYes dialog, drawn here on the identity sheet */ /* above the fixed header (1000) and its flyouts (up to 1500): a consent dialog is modal */ .cookie__modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center; padding:24px;background:rgba(11,31,77,.55)} .cookie__modal[hidden]{display:none} .cookie__dialog{width:100%;max-width:1040px;max-height:calc(100vh - 48px);display:flex;flex-direction:column; background:#fff;color:var(--gm-shiva-indigo);border-radius:8px; box-shadow:0 30px 80px rgba(11,31,77,.35);outline:none} .cookie__dialog__head{display:flex;align-items:center;justify-content:space-between;gap:16px; padding:28px 32px;border-bottom:1px solid var(--gm-moon-silver)} .cookie__dialog__title{font-size:24px;line-height:1.2;font-weight:600;margin:0} .cookie__dialog__close{flex:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center; border-radius:50%;border:2px solid var(--gm-himalayan-blue-on-white);background:#fff; color:var(--gm-shiva-indigo);cursor:pointer;padding:0} .cookie__dialog__close:hover{background:rgba(14,165,255,.08)} .cookie__dialog__body{overflow:auto;padding:8px 32px 0} .cookie__dialog__body p{font-size:16px;line-height:1.6;color:var(--gm-earth);margin:14px 0} .cookie__cat{padding:18px 0 6px;border-top:1px solid var(--gm-moon-silver)} .cookie__cat__head{display:flex;align-items:center;justify-content:space-between;gap:16px} .cookie__cat__head h3{font-size:20px;line-height:1.2;font-weight:600;margin:0;color:var(--gm-shiva-indigo)} .cookie__cat__always{font-size:16px;font-weight:600;color:var(--gm-peacock-deep)} /* the switch: a 44x24 pill; the thumb rides on the checked state */ .cookie__switch{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:44px;height:24px; margin:0;border-radius:12px;border:0;background:var(--gm-moon-silver);cursor:pointer; transition:background 200ms ease} .cookie__switch::before{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%; background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform 200ms ease} .cookie__switch:checked{background:var(--gm-himalayan-blue-on-white)} .cookie__switch:checked::before{transform:translateX(20px)} .cookie__dialog__foot{display:flex;align-items:center;justify-content:flex-end;gap:16px;flex-wrap:wrap; padding:24px 32px 32px;border-top:1px solid var(--gm-moon-silver)} .cookie__dialog__link{margin-right:auto;background:none;border:0;padding:0;cursor:pointer; font:inherit;font-weight:600;color:var(--gm-himalayan-blue-on-white);text-decoration:underline} @media(max-width:640px){ .cookie__modal{padding:0;align-items:flex-end} .cookie__dialog{max-height:100vh;border-radius:8px 8px 0 0} .cookie__dialog__head,.cookie__dialog__body,.cookie__dialog__foot{padding-left:20px;padding-right:20px} .cookie__dialog__foot{flex-direction:column;align-items:stretch} .cookie__dialog__link{margin:0;text-align:center}} /* ============================================================ 7. HERO ============================================================ */ .hero{position:relative;background:var(--black);color:#fff;overflow:hidden} /* d86885c inside a 1440-capped e-con-inner: the ratio box never exceeds 1440 wide */ /* The hero copy hugs the stage padding edge (not the centred content wrap); upstream insets it a further 110px only from 1500px up. */ .hero__in{max-width:none;margin-inline:0} @media(min-width:1500px){.hero__copy{margin-inline-start:110px}} .hero__stage{position:relative;width:100%;max-width:1440px;margin-inline:auto; aspect-ratio:1440/886;display:flex;align-items:center} @media(max-width:1024px){.hero__stage{padding-block:60px}} @media(max-width:767px){.hero__stage{aspect-ratio:auto;display:block;padding:80vw 0 40px} .hero__copy .lead{display:none}} /* elementor-hidden-mobile */ /* Production treatment (.elementor-element-d86885c): the video runs at full brightness and only the two vertical edges fade to black over 100px. No full-surface scrim — that is what was making this hero look muddy. */ .hero__bg{position:absolute;inset:0;background:var(--black);overflow:hidden} .hero__bg::before,.hero__bg::after{ content:"";pointer-events:none;position:absolute;z-index:2;top:0;width:100px;height:100%; background:linear-gradient(90deg,rgba(0,0,0,1),rgba(0,0,0,0))} /* The left scrim is the SOURCE's, not a 100px edge fade. Upstream .elementor-element-043bddd is a full-hero overlay at z-index 2 carrying linear-gradient(90deg, rgba(0,0,0,.5) 7.5%, rgba(0,0,0,0) 50%) — the whole left HALF is progressively darkened, which is what covers a left-aligned copy column. This build had inherited only the shared 100px edge fade, so the copy ran from x=15 to x=495 across almost entirely unprotected video: measured behind the lead, 68% of the area was under 4.5:1 for white text, against 12% upstream. The right-hand ::after keeps its 100px fade — widening that one would dim the hero art. */ .hero__bg::before{left:0;width:100%; background:linear-gradient(90deg,rgba(0,0,0,.5) 7.5%,rgba(0,0,0,0) 50%)} .hero__bg::after{left:auto;right:0;background:linear-gradient(-90deg,rgba(0,0,0,1),rgba(0,0,0,0))} /* The source has NO text-shadow on the hero copy — the scrim does the work. Ours was a rebuild-only addition standing in for the missing scrim, and it cost the hero CTA: the blur bled over the button so only 9.6% of its area was the declared fill, against 84.9% upstream. Removed with the scrim restored. */ .hero__in{position:relative;z-index:3;width:100%;display:grid;grid-template-columns:1fr;gap:var(--s8);align-items:center} /* c51b0c3: max-width 600px, align-items flex-start | d5d9c8f: gap 15px */ .hero__copy{display:grid;gap:30px;justify-items:stretch;align-items:flex-start;max-width:600px} .hero__copy > :not(.hero__actions){max-width:480px} /* The hero eyebrow reuses .caps rather than a bespoke class. Upstream this slot held an 84x32 .hero__chip image with a gradient border; the pill is drawn instead, on the same ring technique as .acc__num — a ::before inset to 0 with 1px of padding, filled with the coin gradient and masked so only the border shows. Both read --gm-coin-ring. .caps is color:#000 for the light sections it was written for, and .hero__copy is a grid with justify-items:stretch, so the pill needs its own colour and its own width here. Scoped to .hero__copy: every other .caps on the site is untouched. */ .hero__copy .caps{position:relative;justify-self:start;width:fit-content; padding:9px 18px 7px;border-radius:100px;color:#fff; background:rgba(11,31,77,.34);backdrop-filter:blur(3px)} .hero__copy .caps::before{content:"";position:absolute;inset:0;border-radius:inherit; padding:1px;pointer-events:none;background:var(--gm-coin-ring); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor;mask-composite:exclude} @media(max-width:1024px){.hero__copy{gap:15px}} @media(max-width:1024px){.hero__copy{max-width:50%}} @media(max-width:767px){.hero__copy{max-width:100%}} .hero__actions{display:flex;gap:10px;flex-wrap:nowrap} /* upstream stacks the hero CTAs from the tablet breakpoint down, not just on mobile */ @media(max-width:1024px){.hero__actions{align-items:flex-start;flex-direction:column}} @media(max-width:980px){.hero__in{grid-template-columns:1fr}} /* ============================================================ 8. CARD PRIMITIVES ============================================================ */ /* 3a5baab: flex column, padding 32px, gap 16px, border-radius 20px. It was an inline display:grid on the markup: when the sibling card ran taller from longer copy, grid stretched every row and the spare 60px landed in the gaps (16 -> 28); a column keeps it at the bottom, as upstream does. */ .panel{display:flex;flex-direction:column;border-radius:20px;padding:32px;gap:16px} @media(max-width:1024px){.panel{padding:20px}} .panel--lilac{background:var(--lilac)} /* --mint had exactly one reader, this rule, and now has none. Kept in :root as the production value rather than deleted, like the other retired brand tokens. */ .panel--mint{background:#FFC8DE} /* Loomi Connect feature card (3749890). Its own component: the image keeps its natural 620/438 ratio, so it cannot share .shot's 16/10 cover with the videos */ .connect{display:flex;flex-direction:row;align-items:center;gap:40px} .connect__img{flex:0 0 310px;width:310px;max-width:100%;height:auto;border-radius:20px} .connect__col{display:flex;flex-direction:column;gap:16px;max-width:630px} .connect__title{font-size:24px;font-weight:500;line-height:34px;color:#000} .connect__body{font-size:16px;line-height:26px;color:#002840} /* #04C586 measured 1.56:1 on this panel's #FFC8DE — the link was all but invisible. Nothing saturated survives that ground: cyan 2.24, #0179F8 2.86, #0461C8 4.10, purple 2.45 — only dark ink clears 4.5. #0B1F4D is 11.06:1 and is the deep navy the rebrand already uses; the underline keeps it reading as a link next to #002840 body copy. */ .connect__link{font-size:16px;font-weight:500;color:#0B1F4D;text-decoration:underline} .connect__link:hover{text-decoration:none} @media(max-width:1024px){.connect{padding:20px}} @media(max-width:767px){.connect{flex-direction:column;align-items:stretch} .connect__img{flex-basis:auto;width:100%}} .panel--aqua{background:var(--aqua)} /* device/screenshot placeholder — stands in for real product art. The 20px under it was on a .vid-fix wrapper that also carried the "Live"/"2.0" badge; both removed 2026-09-12, the margin (source: the video block is m 0 0 20px) now lives on the video itself. */ .shot{display:block;width:100%;height:auto;aspect-ratio:5/3;border-radius:16px;object-fit:cover;margin-bottom:20px} /* Section 9 (the hand-built email preview card, signal chips and mini product tiles) is gone: upstream both cards are single images, so this page uses those assets and the ~40 lines of CSS that reproduced them are no longer referenced. */ /* .br-cta — the hover is an expanding circle behind the label, not a colour swap */ .br-cta{overflow:hidden;position:relative;cursor:pointer;display:block;color:#050505;font-size:16px; text-align:center;line-height:1.5;padding:13px 35px 11px;border-radius:50px; border:1px solid var(--gm-kartikeya-gold); /* REVERTED 2026-09-15 on the user's call: var(--gm-mat-kartikeya) ends on #9C7C2E and var(--gm-bevel) adds inset 0 -1px 0 rgba(0,0,0,.28), which together read as the button fading to black at the bottom. This is the gold it carried before 2026-09-14 -- the top lit edge only. Do not re-apply the material here without asking. */ background:linear-gradient(180deg,#FFD95A,var(--gm-kartikeya-gold)); box-shadow:0 7px 20px rgba(246,176,36,.24),inset 0 1px 0 rgba(255,255,255,.28); transition:border-color 300ms ease-in-out,box-shadow 220ms ease,filter 220ms ease} .br-cta strong{position:relative;z-index:5;pointer-events:none;font-weight:500} .br-cta span{position:absolute;top:50%;left:50%;z-index:1;display:block;width:0;aspect-ratio:1/1; border-radius:50%;background-color:#E7A51E;transform:translate(-50%,-50%); transition:width 300ms ease-in,height 300ms ease-in} .br-cta:hover{color:#050505;border-color:#E7A51E;filter:brightness(1.025); box-shadow:0 10px 26px rgba(246,176,36,.30),inset 0 1px 0 rgba(255,255,255,.28)} .br-cta:active{box-shadow:0 5px 14px rgba(246,176,36,.20)} .br-cta:focus-visible{outline:2px solid #0179F8;outline-offset:5px} .br-cta:hover span{width:201%} /* the modifier restates the base's gradient, so it has to move with it -- or anything wearing --hero-y keeps whichever gold the base has just left */ .br-cta--hero-y{color:#050505;background:linear-gradient(180deg,#FFD95A,var(--gm-kartikeya-gold)); border-color:var(--gm-kartikeya-gold)} .br-cta--hero-y span{background-color:#E7A51E} .br-cta--hero-y:hover{color:#050505;border-color:#E7A51E} /* The ghost CTA was #02010100 — fully transparent, copied verbatim from the source, so it sat straight on the video. Measured across five frames it was the only hero text that did not clear 4.5:1 everywhere: min 4.12:1 with 1% of its area under. The other four are 4.70 to 12.58:1 at 0%. A 28% Shiva Indigo veil lifts its worst frame to 5.20:1 and uses the same language as the eyebrow pill. A divergence from source, and the reason is the requirement that the hero text read on any frame. */ /* Ghost CTA: no fill, the source value #02010100, fully transparent. The label goes to 600 because the face changed. Plus Jakarta Sans 500 is lighter than the Bloomreach Sans this was matched against, and with no fill behind it the label was washing into the video. Measured glyph ink inside the label box, mean of two frames: 500 12.8% of the box, 92.0% of it at full strength 600 15.2% (+19% ink), 93.2% 700 17.0% (+33% ink), 94.4% 600 balances the primary CTA. 700 reads BOLDER than the primary, whose label is 500 on an opaque fill, which inverts the hierarchy — so 600, not 700. Scoped to this button: .br-cta strong stays 500 everywhere else. */ .br-cta--hero-g{color:#fff;background:#02010100;border-color:#02010100} .br-cta--hero-g strong{font-weight:600} .br-cta--hero-g span{background-color:#02010100} .br-cta--hero-g:hover{color:#fff;border-color:#fff} /* Himalayan blue. The border takes the family's bright end so the outline reads on white AND on the black footer; the hover circle takes lightness 40, because that is where white label text clears AA on it (5.92:1 against 4.13:1 on the bright stop). */ .br-cta--secondary{color:#03448C;background:transparent;border-color:#0179F8} .br-cta--secondary span{background-color:#0461C8} .br-cta--secondary:hover{color:#fff} /* the places it sits on a dark ground -- including the design guide's own dark board, which was showing the variant at 2.21:1 and so misrepresenting the component it documents */ .dark .br-cta--secondary,.ls__hero__cta .br-cta--secondary, .dg-board--dark .br-cta--secondary{color:#fff} .br-cta--custom{color:#002840;background:#fff;border-color:#fff} .br-cta--custom span{background-color:#F5F5F5} .br-cta--custom:hover{color:#000;border-color:#F5F5F5} /* The glow and the inset sheen belong to the gold fill, so every variant that replaces the fill replaces them too. Left on the base alone they painted a warm halo and a white top line around a blue outline button and a transparent one. `:hover` is listed explicitly because `.br-cta:hover` is (0,2,0) and outranks a bare variant class. */ .br-cta--hero-g,.br-cta--hero-g:hover, .br-cta--secondary,.br-cta--secondary:hover, .br-cta--ca-ghosty,.br-cta--ca-ghosty:hover, .br-cta--ca-ghostk,.br-cta--ca-ghostk:hover{box-shadow:none} .br-cta--custom,.br-cta--custom:hover{box-shadow:0 7px 20px rgba(0,0,0,.16)} /* ---- real media swapped in for the original placeholders ---- */ /* Was 455px at aspect-ratio 909/882, copied from the production rule for .elementor-element-bf377f0. Those numbers belong to hero-ab-floating.webp, whose artwork fills its 909x882 canvas 100% x 100%. The replacement does not and is a different shape: hero-widget.png measured 1274x1235 with content filling 98.0% x 69.4%, true aspect 1.460. Contained in a 1.031 frame it fitted by width and floated in a third of a box of nothing, which is why it read as smaller than source. Asset is now cropped to its content (1251x857) and re-encoded to webp — 434KB against the PNG's 1.5MB, and 2.31x density in the box below. Frame takes the artwork's own aspect. Width 542, not 455, because the artwork is wider and shorter than the original: matching width alone would land at 68% of the source's visual weight, while 542 makes the rendered area 201,243px2 against the source frame's 200,876 — inside 0.2%. The 1199 step is 42vw, NOT the 1.191-proportional 48. Below 1200 the obstacle is .hero__actions, whose right edge is pinned at 570px from 1034 up to 1440; the pinch is at 1034, where anything over 42vw puts the art into the button row. 48vw collided by 42px there and by 7px at 1100. The consequence is that below 1200 this artwork cannot carry the area the old one did — it is wide and short, and the space left of the buttons is narrow. Above 1200 there is room: the tightest is exactly 1200, 68px clear. */ .hero__art{position:absolute;pointer-events:none;z-index:3;right:20px;bottom:100px; width:542px;height:auto;aspect-ratio:1251/857; background:url('https://media.gamemantra.ai/static/img/hero-widget.webp') no-repeat center/contain} @media(max-width:1199px){.hero__art{bottom:5vw;width:42vw}} /* 300px -> 332px. Below 767 the art sits ABOVE the copy, and the eyebrow added in this build is 44px of height the source never had (29px pill + the 15px grid gap), so the art tracked the taller hero downward and landed on it: clearance ran 16px at 390, 11px at 340 and -15px at 320, a 151x15 overlap. +32px restores 17px at 320 and leaves the mid widths comfortable. A deliberate divergence from the matched geometry, caused by adding an element the source did not have. */ @media(max-width:767px){.hero__art{bottom:calc(10vw + 332px);width:60vw}} .tabdd{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;width:100%} .tabdd__img{position:relative;width:50%;max-width:550px} .tabdd__txt{width:50%;max-width:550px;margin-top:40px} /* two stacked frames, cross-faded by the tab toggle */ .intel__art{opacity:0;width:100%;height:auto;display:block;border-radius:var(--r-lg); transition:opacity 200ms ease-in-out} .intel__art.imgone{opacity:1} .intel__art.imgtwo{position:absolute;top:0;left:0} .tabdd:has(#mode-blast:checked) .imgone{opacity:0} .tabdd:has(#mode-blast:checked) .imgtwo{opacity:1} @media(max-width:767px){.tabdd{flex-direction:column-reverse;gap:20px} .tabdd__img,.tabdd__txt{width:100%;max-width:100%} .tabdd__txt{margin-top:0}} @media(max-width:1199px){.hero__art{width:42vw}} @media(max-width:980px){.hero__art{margin-inline:auto}} @media(max-width:767px){.hero__art{width:min(60vw,381px)}} /* brightness(.8) is a divergence from the source, chosen deliberately. The source scrim alone (restored above) takes the worst video frame from 68% to 18% of the copy area under 4.5:1 for white text. Measured across five frames at 0.5/2.5/5/7.5/9.5s: source scrim only worst frame 18% under 4.5:1, min 3.01:1 deeper scrim .62 to 55% worst frame 3% under 4.5:1, min 3.78:1 scrim + brightness(.8) worst frame 0% under 4.5:1, min 4.46:1 Only the last is legible on every frame, which is the requirement. It is a filter on the element, not a re-encode, so it is one number to dial or drop. */ .hero__video{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover; filter:brightness(.8)} /* logos keep their intrinsic dimensions rather than a single forced height */ /* the six GameMantra marks are outlined Didot from tools/ticker_mark.py; the width/height are the file's own aspect at 16px, as every production logo is */ .ticker__logo{flex:none;display:block;border-radius:0} /* The same slot carries a FIGURE on the stat items ("+71%"): the marks are , a figure is a , so the type only lands on the span and every existing mark is untouched. */ span.ticker__logo{font-size:24px;font-weight:600;line-height:40px;letter-spacing:-.01em;color:#fff} /* the attribution after a stat — .caps is the site's eyebrow, written for light sections, so the band gives it its own ink here exactly as .hero__copy does */ .ticker .caps{flex:none;color:rgba(255,255,255,.6);letter-spacing:.08em;text-transform:uppercase} /* 6b3ace8: grid repeat(4,1fr) x repeat(3,1fr), gap 16px, max-width 1020px. The assets are 484x192 with the mark centred in generous padding, so they fill the cell rather than being capped — capping them at 36px was what cramped the row. */ /* 0e2fc0f: align-items center, gap 16px | 09d1edf: 60/72 centred | 79ad957: max 540px */ .int__head{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:50px} .int__title{margin-bottom:10px} .int__title{font-size:60px;font-weight:500;line-height:72px;letter-spacing:0;text-align:center;color:#000} .int__sub{text-align:center;max-width:540px;font-size:var(--f-body);line-height:var(--lh-body)} @media(max-width:1024px){.int__title{font-size:36px;line-height:45px}} .intgrid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr); gap:16px;max-width:1020px;margin-inline:auto;align-items:center;justify-items:center} .intgrid img{width:100%;height:auto;object-fit:contain} @media(max-width:767px){.intgrid{grid-template-columns:repeat(2,1fr);grid-template-rows:auto}} /* The SDK flow, replacing the logo grid on index.html. Cut from one flat 2172x724 artwork into five pieces so the wording is real text: the YOUR GAME / GAMEMANTRA labels, the engine names and the closing line all reflow and are readable, where the flat image baked them in at a single size and a single language. */ .sdkflow{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(150px,0.5fr) minmax(0,1.25fr); align-items:start;gap:24px;max-width:1250px;margin-inline:auto} .sdkflow__connector{align-self:center} .sdkflow__engine,.sdkflow__core{display:flex;flex-direction:column;align-items:center;gap:18px} .sdkflow__label{font-size:13px;font-weight:500;letter-spacing:.22em; text-transform:uppercase;color:var(--meta)} /* the shot spans both rows; the two engine boxes stack beside it, as in the artwork */ .sdkflow__engines{display:grid;grid-template-columns:auto auto;align-items:center; justify-content:center;gap:12px} .sdkflow__shot{grid-row:1/3;width:100%;max-width:375px;height:auto} .sdkflow__engines span{display:flex;flex-direction:column;align-items:center;gap:8px; width:88px;padding:14px 8px;border-radius:16px;background:var(--surface); font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text)} .sdkflow__engines span img{width:40px;height:auto} .sdkflow__connector{display:flex;align-items:center;width:100%} .sdkflow__connector img{flex:none;width:72px;height:auto} /* the two glowing connector pieces, supplied as art: a dot-and-line into the chip and a line-and-arrowhead out of it. Sized `auto 100%` and anchored to the OUTER edge, so the dot and the arrowhead stay pinned while any slack in the column falls in the middle. */ .sdkflow__connector i,.sdkflow__connector b{flex:1 1 30px;min-width:22px; background-repeat:no-repeat;background-size:auto 100%} .sdkflow__connector i{height:26px;background-position:left center; background-image:url("https://media.gamemantra.ai/static/img/gm-sdk-arrow-start.webp")} .sdkflow__connector b{height:22px;background-position:right center; background-image:url("https://media.gamemantra.ai/static/img/gm-sdk-arrow-end.webp")} .sdkflow__core img{width:100%;max-width:470px;height:auto} .sdkflow__reassurance{display:flex;flex-direction:column;align-items:center;gap:8px; margin-top:44px;text-align:center} .sdkflow__reassurance strong{font-size:28px;font-weight:600;line-height:36px;color:#000} .sdkflow__reassurance span{font-size:16px;line-height:26px;color:var(--text);max-width:540px} /* three across needs ~1020px; below that it reads top to bottom and the connector turns */ @media(max-width:1023px){.sdkflow{grid-template-columns:1fr;justify-items:center;gap:18px} .sdkflow__connector{flex-direction:column} .sdkflow__connector i,.sdkflow__connector b{flex:none;width:2px;height:26px;min-width:0; background:linear-gradient(180deg,#0EA5FF,#0179F8)} .sdkflow__reassurance{margin-top:32px} .sdkflow__reassurance strong{font-size:24px;line-height:32px}} @media(max-width:520px){.sdkflow__shot{grid-row:auto;grid-column:1/-1} .sdkflow__engines{justify-items:center;gap:12px 16px}} /* ============================================================ 10. TICKER (marquee band) ============================================================ */ /* container 14926d9: 32px block padding; .marquee-item is 40px tall, white text */ /* Band drawn from the "G" of the monogram. Sampling that glyph's saturated pixels by hue: 37% cyan, 23% himalayan blue, 10% blue, 5% indigo/violet -- all at ~50% lightness, so none of them can be a band on its own. Taken to 18% lightness at their own hue and saturation they become these three stops, and white reads 13.18:1, 15.67:1 and 17.68:1 across them. The band MUST stay dark: every .ticker__logo asset is white artwork (90.1% pure #FFFFFF, no filter), so on a pale ground they vanish -- a pale sky measured 1.18:1. */ .ticker{background:linear-gradient(100deg,#00315C 0%,#001E5C 52%,#17005B 100%); color:#fff;overflow:hidden;padding-block:32px;width:100%} .ticker__track{display:flex;width:max-content;will-change:transform;animation:marquee 38s linear infinite} /* duration is set from the track width in JS: the source scrolls at 40px/s */ .ticker:hover .ticker__track{animation-play-state:paused} .ticker__item{display:flex;align-items:center;gap:12px;height:40px;color:#fff;white-space:nowrap} /* the separator is a star asset, not a text glyph */ .ticker__item::after{content:"";flex:none;width:10px;height:10px;margin:0 32px 0 20px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0c.45 2.65 1.9 4.1 5 5-3.1.9-4.55 2.35-5 5-.45-2.65-1.9-4.1-5-5 3.1-.9 4.55-2.35 5-5z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center center} @keyframes marquee{to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.ticker__track{animation:none}} /* ============================================================ 11. LOGO WALL ============================================================ */ /* ca1df92: repeat(4,1fr) x repeat(2,1fr), gap 16px, max-width 1020px, radius 20px b90864a: column, align center, gap 50px, padding 60px 15px */ .wallwrap{display:flex;flex-direction:column;align-items:center;gap:50px} @media(max-width:767px){.wallwrap{gap:30px}} .logowall{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr); gap:16px;width:100%;max-width:1020px;margin-inline:auto} .logowall__cell{background:var(--surface);border-radius:var(--r-lg);min-height:96px;display:grid;place-items:center;font-weight:500;font-size:20px;color:#111} /* Upstream never needed this: every source logo was a uniform 484x192, so they all rendered the same height for free. The GameMantra marks are raw brand assets of mixed aspect — 1200x628, 200x200, 1000x1000, 1128x191 — and with no constraint each one painted at its own height: 13px next to 128px in the same row. Cap them instead. */ .logowall__cell img{width:auto;height:auto;max-width:74%;max-height:46px;object-fit:contain} /* 46px is the WORDMARK cap upstream's customer logos want: short, wide, text-only marks. The fallback team-type marks are a different kind of art -- ~2.7:1 icon+label lockups whose label is part of the raster -- and under that cap the mark renders 108x46 in a 243x96 cell (45% of it) with the label near 12px, downscaled 4x from its 186px source. Unreadable, which is an asset-shape problem, not a cap to relax for everyone: raising it for the client wall would resize marks that are correct. The modifier is on the block the template already switches, so both states stay in this one rule set. */ .logowall--marks .logowall__cell img{max-width:86%;max-height:76px} @media(max-width:767px){.logowall{grid-template-columns:repeat(2,1fr);grid-template-rows:auto;gap:8px} .logowall__cell{min-height:70px}} /* ============================================================ 12. SEGMENTED TOGGLE (CSS-only, radio driven) ============================================================ */ .segmented{display:inline-flex;align-items:center;justify-content:flex-start;gap:5px;margin-bottom:50px} .tabs{display:grid} .tabs > input{position:absolute;opacity:0;pointer-events:none} .tabs .acc{display:none} #mode-ai:checked ~ .acc[data-panel="intelligence"]{display:grid} #mode-blast:checked ~ .acc[data-panel="blast"]{display:grid} #mode-ai:checked ~ .segmented label[for="mode-ai"], #mode-blast:checked ~ .segmented label[for="mode-blast"]{cursor:default;color:#000;background:#fff;border:1px solid #fff} #mode-ai:checked ~ .segmented label[for="mode-ai"]:hover, #mode-blast:checked ~ .segmented label[for="mode-blast"]:hover{background:#fff} .tabs > input:focus-visible ~ .segmented label{outline:3px solid #0179F8;outline-offset:3px} .segmented label{ cursor:pointer;display:flex;color:#fff;font-size:15px;font-weight:500; padding:10px 16px 8px;border-radius:100px;border:1px solid #5C5C5C; transition:color 200ms ease-in-out,background 200ms ease-in-out,border 200ms ease-in-out } .segmented label:hover{background:#5C5C5C} @media(max-width:767px){.segmented{justify-content:center;margin-bottom:30px}} @media(max-width:400px){.segmented label{font-size:14px;padding:8px 12px 6px}} /* ============================================================ 13. NUMBERED ACCORDION (native
) ============================================================ */ .acc{display:grid} .acc__item{display:flex;flex-direction:column;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.16);margin-bottom:16px} @media(max-width:767px){.acc__item{padding-bottom:10px;margin-bottom:10px}} /* .tabdd-dd-top: relative, gap 14px, 30px right gutter for the absolutely placed icon */ .acc__item summary{ list-style:none;position:relative;display:flex;align-items:center; justify-content:flex-start;gap:14px;padding-right:30px;cursor:pointer } .acc__item summary::-webkit-details-marker{display:none} .acc__num{ position:relative;flex:none;width:36px;height:auto;border-radius:100px; font-size:16px;font-weight:500;text-align:center;padding:3px 0 1px;color:var(--text-inv); transition:color 200ms ease-in-out,background 200ms ease-in-out } /* The ring is the outer circle of the monogram coin, unrolled: a conic gradient puts each stop at the angle it sits at on the coin. Re-measured 2026-09-09 on a least-squares fit of the ring itself -- centre (266.2, 340.9), R 224.5, residual 1.02px mean. The first pass took the circle from the artwork's alpha bounding box, which is 43px off in y because the glow is not symmetric, so its angles were skewed and it read shadowed interior pixels as rim. Sampled every 15deg, most saturated opaque pixel between 0.90 and 1.06 R: gold from 1 o'clock to 4:30, cyan and himalayan blue from 5:30 back round to 12. */ .acc__num::before{ content:"";position:absolute;inset:0;border-radius:inherit;padding:1px; background:var(--gm-coin-ring); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor;mask-composite:exclude; } .acc__item[open] .acc__num{color:#050505;background:linear-gradient(180deg,#FFD95A 0%,#F6B024 100%)} .acc__item[open] .acc__num::before{padding:0} .acc__title{font-size:16px;font-weight:500;line-height:1.2} .acc__sign{position:absolute;top:50%;right:0;transform:translateY(-50%); display:flex;align-items:center;justify-content:center;width:16px;height:auto; aspect-ratio:1/1;border:1px solid #fff;border-radius:50%} .acc__sign::before,.acc__sign::after{content:"";position:absolute;top:50%;left:50%; width:8px;height:1px;background:#fff;border-radius:2px; transform:translate(-50%,-50%);transition:transform 200ms ease-in-out} .acc__sign::after{transform:translate(-50%,-50%) rotate(90deg)} .acc__item[open] .acc__sign::after{transform:translate(-50%,-50%) rotate(0)} .acc__body{color:#fff;font-size:14px;line-height:144%;padding-top:12px;padding-right:30px} /* ============================================================ 14. JOURNEY TIMELINE (horizontal scroll-snap rail) ============================================================ */ .rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none} /* spaceBetween:0 in the source. The cards must sit flush, because .step__node::before overhangs each card's 30px padding by 30px on both sides to join into one line */ #journey{gap:0;align-items:self-end} /* The disc FILL carries the category, the way the source uses a filled coloured disc rather than a ring — six arbitrary accents said nothing about what kind of moment a step was. Only the legend's three categories exist, so a glance is enough. Each ink is measured against its own fill, not assumed: PLAYER MOMENT #0179F8 fill, #050505 glyph 4.94:1 PLAYER CONTEXT --grad-pill fill, #050505 7.01:1 minimum across the ramp MONETIZATION RESPONSE #0B1F4D fill, #fff glyph 15.94:1 --grad-pill, NOT the legend dot's 5-stop sweep: that sweep opens on #0B1F4D, and no single ink survives it end to end — dark ink bottoms out at 1.28:1 and white at 1.88:1. Dropping the navy lead-in is what buys the 7.01:1. Same trap as .chcard__badge. */ .step:nth-child(1),.step:nth-child(2){--step-fill:#0179F8;--step-ink:#050505;--step-glow:#0179F8} .step:nth-child(3),.step:nth-child(6){--step-fill:var(--grad-pill);--step-ink:#050505;--step-glow:#00C2A8} .step:nth-child(4),.step:nth-child(5){--step-fill:#0B1F4D;--step-ink:#fff;--step-glow:#F6B024; --step-ring:#F6B024} /* The rail scrolls, so it clips; the card's hover is scale(1.02) — 3.8px past its box on every side — and the source's swiper computes overflow:visible, so there it bleeds and here it was cut. Padding with an equal negative margin moves the clip edge, not the boxes; scroll-padding keeps the snap where it was. Below 767 the same rule already bled the rail to the viewport edge with 15px; this is that rule, at every width. */ #cases{gap:30px;align-items:flex-start;margin:-8px -15px;padding:8px 15px;scroll-padding-inline:15px} .rail::-webkit-scrollbar{display:none} /* .smart-item — bottom-aligned so the connector line meets across cards of unequal height */ .step{flex:0 0 400px;scroll-snap-align:center;display:flex;flex-direction:column; justify-content:flex-end;color:#fff;text-align:center;padding:0 30px} .step__imgwrap{margin-bottom:32px} .step__shot{display:inline;max-width:100%;height:auto} /* the day label sits BELOW the node now (requested 2026-09-11); it keeps its own type, and only its colour follows the node it now hangs from */ .step__day{color:rgba(255,255,255,.4);font-size:16px;font-weight:500;line-height:140%; text-transform:uppercase;margin-bottom:24px} .step__day strong{color:var(--step-glow);font-weight:500} .step__node{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px} /* top:28px is the centre of the 56px node, where 16px was the centre of the 33px icon */ .step__node::before{content:"";position:absolute;top:28px;left:-30px;width:calc(100% + 60px); height:1px;background:rgba(255,255,255,.5)} .step__node svg{position:relative;z-index:5;box-sizing:border-box;display:block;flex:none; width:56px;height:56px;padding:13px;border-radius:50%;color:var(--step-ink); background:var(--step-fill); /* --step-ring is set only by the response category: #0B1F4D is barely a disc against a black section, so it takes the orb's own gold as a 2px ring to stay legible as a disc. The other two fills are bright enough to read on their own and set no ring. */ box-shadow:0 0 0 2px var(--step-ring,transparent),0 0 22px -4px var(--step-glow)} /* the orb badge marks a step that is ALSO a monetization response. It is a transparent PNG, so it needs its own opaque disc or the connector line shows through it. */ .step__node img{position:relative;z-index:5;flex:none;display:block; width:56px;height:56px;border-radius:50%;object-fit:contain;background:var(--black)} .step__title{font-size:24px;font-weight:500;line-height:140%;margin-bottom:8px} .step__desc{height:100px;opacity:.7;color:#EAFDFF;font-size:14px;line-height:140%;text-wrap:balance} @media(max-width:767px){.step{flex-basis:100%}} /* upstream swiper: slidesPerView 2 between the tablet and desktop breakpoints */ @media(min-width:768px) and (max-width:1023px){.step{flex-basis:50%}} .legend{display:flex;justify-content:center;align-items:center;gap:40px;flex-wrap:wrap;margin-block:50px 40px; font-size:14px;line-height:20px;color:#fff} .legend span{display:inline-flex;align-items:center;gap:var(--s2)} /* section footer — the rule/label/rule strip that closes the timeline */ .section--journey footer.shead{display:flex;align-items:center;justify-content:center; gap:28px;margin-block:40px 0} .section--journey footer.shead::before, .section--journey footer.shead::after{content:"";flex:1 1 0;max-width:200px;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.3))} .section--journey footer.shead::after{background:linear-gradient(90deg,rgba(255,255,255,.3),transparent)} .section--journey footer.shead .lead{margin:0;font-size:13px;line-height:20px; letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.72)} .railnav{display:flex;gap:8px;justify-content:center} .railnav--swiper{gap:24px;width:100%;margin-top:40px;justify-content:flex-start} @media(max-width:1800px){.railnav--swiper{gap:16px;margin-top:20px}} /* ============================================================ 15. GENERIC GRIDS + FEATURE CARDS ============================================================ */ .grid{display:grid;gap:var(--s5)} .grid--2{grid-template-columns:repeat(2,1fr)} @media(max-width:640px){.grid--2{grid-template-columns:1fr}} /* three-step flow with arrows between */ /* afebad7: a flex row of three .bx cards, 120px apart */ /* 3db7d05: the heading widget carries margin-bottom:10px, as in every section */ .plat__copy > .h1{margin-bottom:10px} .flow{display:flex;gap:120px} .stepcard__mediawrap{position:relative;display:block} /* the connector is a pseudo-element on the media wrapper, not a text glyph between cards */ .stepcard:nth-child(1) .stepcard__mediawrap::after, .stepcard:nth-child(2) .stepcard__mediawrap::after{ content:"";position:absolute;display:block;top:50%;left:calc(100% + 44px); transform:translateY(-50%);width:33px;height:26px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33 26'%3E%3Cpath d='M1 13h30M20 2l11 11-11 11' fill='none' stroke='%23002840' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain} @media(max-width:1024px){.flow{gap:40px} .stepcard:nth-child(1) .stepcard__mediawrap::after, .stepcard:nth-child(2) .stepcard__mediawrap::after{left:calc(100% + 10px);width:22px}} /* Stacked, the connector hangs off the whole card (28px below it, centred, 33px), not off the image — upstream re-hosts it at this breakpoint. */ @media(max-width:767px){.flow{flex-direction:column;gap:80px} .stepcard:nth-child(1) .stepcard__mediawrap::after, .stepcard:nth-child(2) .stepcard__mediawrap::after{content:none} .stepcard{position:relative} .stepcard:nth-child(1)::after, .stepcard:nth-child(2)::after{ content:"";position:absolute;display:block;top:calc(100% + 28px);left:50%; transform:translateX(-50%) rotate(90deg);width:33px;height:26px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33 26'%3E%3Cpath d='M1 13h30M20 2l11 11-11 11' fill='none' stroke='%23002840' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}} .stepcard{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:16px} .stepcard .lead{color:#000} .stepcard__media{display:block;width:100%;aspect-ratio:656/480;object-fit:fill;border-radius:20px} .stepcard__kicker{display:flex;align-items:center;gap:8px} .stepcard__kicker .caps{padding-top:2px} .stepcard__n{position:relative;padding:7px 12px 5px;border-radius:50px; font-size:13px;font-weight:500;line-height:13px;color:#000} .stepcard__n::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px; background:var(--grad-loomi); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor;mask-composite:exclude} /* 06c2e79 */ /* The operating strip. Capsules, not cards: one --surface pill per beat, a numbered .acc__num coin outside its left end, the flow's own arrow between them, and the payoff line in an --aqua capsule of its own. Everything here already existed: .acc__num + --gm-coin-ring the accordion's numbered ring the three glyphs the journey rail's ADAPT / IMPROVE / NEXT MOMENT nodes the arrow .stepcard__mediawrap::after, verbatim --surface --aqua --r-pill --line --text existing tokens */ .feedback{display:flex;flex-wrap:wrap;gap:26px 52px;align-items:stretch;justify-content:center; border-top:1px solid var(--line);margin-top:50px;padding-top:32px} .feedback > div{position:relative;flex:1 1 0;min-width:0;max-width:380px; display:flex;align-items:center;gap:16px; margin-left:28px;padding:16px 22px 16px 52px; background:var(--surface);border-radius:var(--r-pill)} /* the coin hangs off the capsule's left end, half in and half out */ .feedback .acc__num{position:absolute;left:-28px;top:50%;transform:translateY(-50%); display:grid;place-items:center;width:56px;height:56px;padding:0; font-size:17px;font-weight:600;color:var(--text);background:var(--white)} .feedback .acc__num::before{padding:2px} /* the glyph, with the divider that separates it from the wording */ .feedback > div > svg{flex:none;box-sizing:content-box;width:28px;height:28px; padding-right:16px;border-right:1px solid #D8DDE1;color:var(--text)} .feedback > div > div{min-width:0} .feedback .caps{font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--text)} .feedback p{margin:0;font-size:13px;line-height:19px;font-weight:400;color:#425563} .feedback .caps + p{margin-top:3px} /* the arrow sits in the gap, clear of the next capsule's coin */ .feedback > div + div::before{content:"";position:absolute;top:50%;left:-66px; transform:translateY(-50%);width:24px;height:19px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33 26'%3E%3Cpath d='M1 13h30M20 2l11 11-11 11' fill='none' stroke='%23002840' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain} /* The payoff line: its own capsule, and the section's one dark note. --aqua was the wrong ground and the icon proved it. The glyph is a blue-to-gold ramp, and measured pixel by pixel against each candidate, the share of it falling under 3:1 is --aqua #EDF8FB 50.5% --surface #F5F5F5 50.8% --text #002840 37.3% #0B1F4D 35.5% #050505 26.3% Half the glyph was disappearing into a near-white ground. #0B1F4D is the deep navy the MONETIZATION RESPONSE discs already use in the rail above — which is what this sentence is about — and white on it measures 15.94:1. The residual 35.5% is the glyph's own doing, not the ground's: it is a dark-blue to gold ramp, so its dark half loses contrast on any dark ground and its light half loses it on any light one. No single flat ground can carry both ends. */ /* max-width:fit-content made the used width SMALLER than the remaining space on row 1, so the capsule stopped forcing a wrap and squeezed the three beats into slivers. A real max-width still clamps the capsule but stays wider than any leftover gap. */ /* a row, not a text block: an dropped in front of the line is inline, so at any size over the line-height it pushes the text onto its own line and sits left. */ .feedback > p{flex:none;width:100%;max-width:820px;margin:14px auto 0; display:flex;align-items:center;justify-content:center;gap:14px; padding:18px 44px;border-radius:var(--r-pill);background:#0B1F4D; font-size:19px;line-height:26px;font-weight:600;color:#fff;text-align:center} .feedback > p img{flex:none;width:36px;height:36px;object-fit:contain} /* one capsule per row below 1024: three of them need 1140px and the wrap is 994 */ @media(max-width:1023px){.feedback{flex-direction:column;align-items:center} .feedback > div{width:100%;max-width:420px;flex:none} .feedback > div + div::before{content:none} .feedback > p{font-size:17px;line-height:24px;padding:16px 28px}} /* narrow phones: the coin comes inside the capsule instead of hanging off it */ @media(max-width:520px){.feedback > div{margin-left:0;padding:14px 18px;gap:12px} /* position stays RELATIVE. .acc__num::before is inset:0 against its nearest positioned ancestor, so setting the coin to static handed the ring to the capsule — the whole pill got a rainbow outline and the coin went plain grey. */ .feedback .acc__num{position:relative;left:auto;top:auto;transform:none; width:44px;height:44px;font-size:15px} .feedback > div > svg{width:24px;height:24px;padding-right:12px}} /* channel card */ /* .appbox / .appbox-icon — channel card (grid b9c44a3, badge b0d4b47) */ .appgrid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:24px} .appgrid:not(:has(> :nth-child(4))){grid-template-rows:auto} /* one row of three: no phantom second row */ @media(max-width:1024px){.appgrid{gap:10px}} @media(max-width:767px){.appgrid{grid-template-columns:1fr;grid-template-rows:auto}} .chcard{position:relative;display:flex;flex-direction:column;gap:10px;padding:30px; border:1px solid #ddd;border-radius:20px;color:#000;text-decoration:none} .chcard:hover{background:rgba(0,0,0,.03)} @media(max-width:1024px){.chcard{padding:20px}} /* The six glyphs carry their ink as attributes — 23 `fill="black"` and 3 `fill="#002840"`. The markup is fixed, so the ink is set here instead: an SVG presentation ATTRIBUTE loses to a CSS rule, verified in the browser, so `fill`/`stroke` on the paths overrides what the markup says without touching it. This is the pattern for all 286 legacy brand colours still sitting in SVG across the build — none of them is an inline style, so all of them are reachable from here. */ .chcard__icon{display:flex;align-items:center;justify-content:center;width:56px;height:auto; aspect-ratio:1/1;background:#01CE7F;color:#fff;border-radius:50%;margin-bottom:10px} .chcard__icon svg [fill]:not([fill="none"]){fill:currentColor} .chcard__icon svg [stroke]:not([stroke="none"]){stroke:currentColor} .chcard__icon svg{display:block} /* index.html's six cards carry raster art instead of a glyph — a 112px (2x) transparent cut from tools/card_icon.py. The green disc is for a white monoline glyph and the art is not one: measured across all six, the share of the artwork falling under 3:1 is 38.4% on #01CE7F against 24.0% on the card's own white, and every light tint in the theme lands between (mint 25.8, aqua 25.9, lilac and surface 26.1). Dropping the disc also drops the inscribed circle, which is the bigger win — art fitted to the 112px square is 108px wide where the same art inscribed in the circle was 74px. :has(img) so preview-index's SVG glyph cards keep the green disc they need — white glyphs on white would be invisible. */ .chcard__icon img{display:block;width:100%;height:100%;object-fit:contain} .chcard__icon:has(img){background:none;border-radius:0} .chcard__badge{position:absolute;top:30px;right:30px;width:auto;background:var(--grad-pill); border-radius:100px;padding:10px 14px 8px;color:#050505;font-size:13px;font-weight:500;line-height:13px} .chcard__title{font-size:20px;font-weight:500;line-height:29px;color:#000} /* 2669e6b */ .chcard__body{font-size:16px;line-height:26px;color:#000} /* 995d5de / 4872b00 — section heading and its three sub-headings */ .apps__sub{font-size:36px;font-weight:400;line-height:43px;color:#000;max-width:810px;margin-bottom:10px} .ways > .h1{margin-bottom:10px} /* each later sub-heading opens a new block, so it gets 60px above the 30px gap */ .appgrid + .apps__sub,.grid--2 + .apps__sub{margin-top:60px} @media(max-width:767px){.appgrid + .apps__sub,.grid--2 + .apps__sub{margin-top:40px}} .ways .grid--2{gap:30px} .apps__sub strong{font-weight:500} /* case-study card */ .caseitem{flex:0 0 380px;scroll-snap-align:start} /* one full card per view on a phone, like every other rail on the site — a fixed 380px card is wider than a 320px screen and leaves the rail permanently mid-card */ @media(max-width:767px){.caseitem{flex-basis:100%}} /* block flow, not grid: the real card spaces itself with per-element margins whose collapse (label 10 / title 20 -> 20) a single grid gap cannot reproduce */ .caseitem__a{display:block;cursor:pointer;color:inherit;text-decoration:none; transition:transform 200ms ease-in-out} .caseitem__a:hover{transform:scale(1.02)} .caseitem__img{display:block;width:100%;aspect-ratio:3/2;height:auto;object-fit:cover; border-radius:20px;margin-bottom:16px} .caselabel{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;margin-bottom:10px} .caselabel span{display:inline-block;font-size:12px;font-weight:500;line-height:1; padding:5px 10px 3px;color:#fff;background:#0461C8;border-radius:100px} .caseitem__title{font-size:24px;font-weight:500;line-height:1.2;margin-top:20px;color:#000} .caseitem__desc{color:#000;font-size:16px;line-height:1.8;margin-top:16px} .caseitem__cta{display:inline-block;margin-top:16px;color:#019ACE; font-size:16px;font-weight:500;text-decoration:underline} /* ============================================================ 16. BIG CTA + WORDMARK + FOOTER ============================================================ */ /* CTA block, from the production containers: 9a570cb padding 60px (40/20 on mobile), 12cef54 inner column 900px, c35a048 60/500/72, 0f85fa1 20/400/29, f98a7a9 12/400/14 capped at 200px, and the note stacked under the second button. */ /* Himalayan blue, sampled off the logo. That family is hue 212 at 96% saturation, and it is bimodal in the artwork: 29% of its pixels sit at lightness 45-50 (mean #0179F8) and another 26% at 10-20 (mean #022857). These two stops are that family at lightness 40 and 28, so the card runs bright-to-deep the way the logo does. White reads 5.92:1 at the top and 9.50:1 at the bottom, which is why the ink below is white and the note, which sits in the lower half, can stay quieter without dropping under AA. */ /* Himalayan Blue as a LIGHT FILL WITH DARK INK, the same register as the gold panel on gamemantra-ai: the guide sends dark-ink fills to #0EA5FF (white ink would need #007BC4). Indigo on Himalayan Blue measures 5.81:1, black 7.84:1. Flat, not --gm-mat-himalayan: the material bottoms out at #0047FD, where dark ink stops clearing. */ .cta{background:var(--gm-himalayan-blue);color:var(--gm-shiva-indigo);border-radius:40px;width:100%;display:flex;flex-direction:row;justify-content:center;gap:0;padding:100px} @media(max-width:1024px){.cta{padding:60px}} @media(max-width:767px){.cta{padding:40px 20px}} .cta__inner{display:flex;flex-direction:column;align-items:center;gap:30px;width:900px;max-width:100%} .cta__title{font-size:60px;font-weight:500;line-height:72px;letter-spacing:0;text-align:center;color:var(--gm-shiva-indigo)} @media(max-width:1024px){.cta__title{font-size:36px;line-height:45px}} .cta__sub{font-size:20px;font-weight:400;line-height:29px;text-align:center;color:var(--gm-shiva-indigo)} @media(max-width:1024px){.cta__sub{font-size:18px}} /* e423b89: align-items flex-start on desktop (center only under the mobile query), justify-content center, gap 10px. Using center here vertically centred the taller button+note column against the lone button, lifting the second button off the line. */ .cta__row{display:flex;flex-direction:row;align-items:flex-start;justify-content:center;gap:10px} .cta__row > div{width:auto} /* 0cfc160: column, justify-content flex-start, align-items center, gap 10px */ .cta__col{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px} .cta__note{font-size:12px;font-weight:400;line-height:14px;text-align:center;max-width:200px;color:var(--gm-shiva-indigo)} /* full strength, not .8: at 12px the faded ink measured 4.03:1 on Himalayan Blue, under the 4.5 floor. At full token it is 5.81:1. */ @media(max-width:767px){ .cta{padding:40px 20px} .cta__row{flex-direction:column;align-items:center} } /* Set in the body face, so the wordmark stays selectable, scales without a second asset, and costs no markup. Both numbers are properties of THE STRING, not just the font — when the text changed from "bloomreach" to "gamemantra" they both went stale and the line overflowed by 76.2px at 1440, clipped silently by overflow:hidden. Measured in Plus Jakarta Sans 500: "gamemantra" advance 6.1490x ink 6.0280x ink height 0.8825x "bloomreach" advance 5.8400x ink 5.7080x ink height 0.7690x Divide by the ADVANCE ratio, never the ink ratio: text is laid out from the left content edge, so the left side bearing pushes the ink right and the ink ratio overruns. The line-height is the ink height, and it grew because "gamemantra" has a descender where "bloomreach" had none. Tracking is 0: the artwork has none and adding any breaks the ratio. RE-MEASURE BOTH IF THE WORD CHANGES AGAIN. */ @media(max-width:520px){.grid-2{grid-template-columns:1fr!important}} /* on the identity sheet: the footer is the site's dark register, Shiva Indigo like every other dark ground */ .footer{background:var(--gm-shiva-indigo);color:#fff;padding:var(--s8) 0 80px} /* the wordmark asset is black artwork, so on the dark footer it is set as text */ .footer__logo{display:inline-flex;align-items:center;gap:8px;color:#fff;margin-bottom:var(--s7);overflow:visible; /* the footer lockup shares the .logo class, so the header's 60px icon reached it and put a 60px mark beside 24px type. It keeps the original 40. */ --logo-icon:40px} .footer__logo span{font-size:24px;font-weight:500;line-height:1;letter-spacing:-.01em} .footer__cols{display:flex;flex-wrap:wrap;justify-content:space-between;gap:60px;max-width:1110px;margin-inline:auto} .footer__cols > div{display:flex;flex-direction:column;gap:16px;align-items:stretch} @media(max-width:1024px){.footer__cols{gap:30px} .footer__cols > div{flex:0 1 calc(50% - 15px);min-width:0}} /* production: 16px/500/26px, uppercase, 1.6px tracking */ .footer h4{font-size:16px;font-weight:500;line-height:26px;letter-spacing:1.6px; text-transform:uppercase} /* upstream's first column stacks two groups (Products, Channels & Agents): the second heading sits 16px column gap + 20px margin below the first list */ .footer h4:not(:first-child){margin-top:20px} /* measured on the real footer: links are 14px/400/20px in #fff */ .footer ul{list-style:none;margin:0;padding:0;display:grid;gap:16px; font-size:14px;font-weight:400;line-height:20px;letter-spacing:0;color:#fff} .footer li a{display:inline-flex;align-items:center;gap:var(--s2)} /* upstream sets the footer badge 8px off the label, which is the link gap; the header badge's own 5px would make it 13 */ .footer li a .brheader__badge{margin-left:0;top:0} .footer li a:hover{color:var(--gm-kartikeya-gold)} .footer__meta{display:flex;align-items:center;gap:var(--s7);flex-wrap:wrap;margin-top:60px; max-width:1110px;margin-inline:auto} .footer__lang .nav__mob{color:#fff;display:flex;align-items:center;gap:6px} .footer__lang .nav__mob__dd{top:auto;bottom:100%;padding:0 0 5px} .footer__lang .nav__mob__dd__box{color:var(--gm-shiva-indigo)} /* `.footer ul` (0,1,1) outranks a bare class, so these need the extra qualifier or they inherit the single-column grid used by the link lists. */ .footer ul.footer__social{display:flex;align-items:center;gap:var(--s5);list-style:none;margin:0;padding:0;font-size:22px;line-height:0} .footer__social a{color:#fff;display:block;transition:opacity 200ms ease-in-out} .footer__social svg{display:block;width:22px;height:22px} @media(max-width:767px){.footer ul.footer__social{gap:12px} .footer__social svg{width:18px;height:18px}} .footer ul.footer__social a:hover{color:var(--gm-himalayan-blue)} .footer__bottom{display:flex;justify-content:space-between;gap:var(--s6);flex-wrap:wrap; margin:60px auto 0;max-width:1110px;font-size:12px;color:#fff} .footer__bottom > span:first-child{line-height:14px} /* .footer-links-all: 12px, 8px/16px gaps, underline on hover */ .footer__legal{display:flex;gap:8px 16px;flex-wrap:wrap;font-size:12px} .footer__legal a:hover{color:var(--gm-kartikeya-gold);text-decoration:none} @media(max-width:820px){.footer__meta{gap:var(--s5)}} @media(max-width:820px){.footer__cols{grid-template-columns:repeat(2,1fr)}} /* upstream drops every heading a step at the tablet breakpoint; measured per group. */ @media(max-width:1024px){ .h1{font-size:36px;line-height:45px} .apps__sub{font-size:24px;line-height:30px} .chcard__title{font-size:18px;line-height:29px} .connect__title{font-size:18px;line-height:29px} } /* Upstream steps the section rhythm down per section, not uniformly: intel/platform/ways drop at 1024; cases and integrations hold until 767; the CTA never changes. Measured on the reference page at 1440/1024/768/390. */ @media(max-width:1024px){ .section{padding-top:60px} .section--journey{padding-bottom:60px} .section--cases{padding-top:120px} .section--int{padding-top:var(--s10)} .section--cta{padding-top:100px} /* the journey rail tightens its three gaps: 80/50/40 -> 40/20/20 */ .shead--journey{margin-bottom:40px} .legend{margin-top:20px;margin-bottom:20px} .section--journey footer.shead{gap:20px;margin-block:24px 20px} .section--journey footer.shead .lead{font-size:12px;letter-spacing:.22em} } @media(max-width:767px){ .section--cases{padding-top:60px} .section--int{padding-top:60px;padding-bottom:60px} /* the label wraps below 767, and side rules on a wrapped block read as stray dashes */ .section--journey footer.shead{gap:0} .section--journey footer.shead::before, .section--journey footer.shead::after{content:none} .section--journey footer.shead .lead{font-size:12px;letter-spacing:.16em} } /* Mobile footer tail: upstream stacks language / social / badges, and the legal links sit ABOVE the copyright, which ends the page. */ @media(max-width:767px){ .footer__meta{flex-direction:column;align-items:flex-start;gap:30px} .footer__bottom{flex-direction:column-reverse;align-items:flex-start;gap:26px;margin-top:30px} } /* ============================================================ BLOG LANDING — every value measured on the production blog page ============================================================ */ :root{ --meta:#99A9B3; } /* post meta grey, measured rgb(153,169,179) */ /* Category filter bar. Measured on the production page: sticky at top:60px (z-index 6), 66px tall on a #F2F4F5 band, content centred, 40px chevrons, 1020px scrolling list, 32px gaps, and a 2px cyan underline pinned to the bottom of the active link. */ .blogbar{position:sticky;top:60px;z-index:6;background:#F2F4F5;transition:.4s} /* the header shrinks to 48px below 575px, so a hardcoded 60 left a 12px strip of page scrolling through between the header and this bar */ @media(max-width:575px){.blogbar{top:48px}} .blogbar__in{display:flex;justify-content:center;align-items:stretch;padding:0 15px} .blogbar__arrow{flex:none;width:40px;height:66px;display:flex;align-items:center;justify-content:center; background:none;border:0;color:var(--text);cursor:pointer} .blogbar__arrow:disabled{opacity:.35;cursor:default} .blogbar__wrap{display:flex;width:calc(100% - 280px);max-width:1020px;min-width:0} .blogbar__list{max-width:1020px;width:100%;display:flex;align-items:stretch;gap:32px;list-style:none;margin:0;padding:0;height:66px; overflow-x:auto;scrollbar-width:none;font-size:16px;line-height:26px} .blogbar__list::-webkit-scrollbar{display:none} .blogbar__list a{position:relative;display:flex;align-items:center;height:100%;white-space:nowrap;color:var(--text)} .blogbar__list a:hover{color:var(--cyan)} .blogbar__list .is-active a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--cyan)} .blogbar__btns{flex:none;display:flex;align-items:center;max-width:200px;border-left:1px solid #CCD4D9} .blogbar__filter{display:inline-flex;align-items:center;gap:8px;padding:20px 16px; background:none;border:0;color:var(--text);font:inherit;font-size:16px;cursor:pointer} .blogbar__filter svg{flex:none;width:11.56px;height:16px} .blogbar__filter[aria-expanded="true"]{color:var(--cyan)} .blogbar__count{background:var(--cyan);color:#fff;border-radius:99px;padding:1px 8px;font-size:12px;line-height:18px} @media(max-width:767px){ .blogbar{background:#fff} .blogbar__in{flex-wrap:wrap;padding:0;border-bottom:1px solid #F2F4F5} .blogbar__wrap{width:calc(100% - 80px);height:66px} .blogbar__btns{max-width:none;width:100%;border-left:none;border-top:1px solid #F2F4F5} .blogbar__filter{width:100%;justify-content:center;background:#F2F4F5}} /* filter flyout */ .pff{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid #CCD4D9; box-shadow:0 24px 40px rgba(0,0,0,.10);display:none} .pff[data-open]{display:block} .pff__cols{display:flex;gap:60px;max-width:1110px;margin-inline:auto;padding:32px 15px 8px} .pff__col{flex:1 1 0;min-width:0} .pff__title{font-size:20px;line-height:29px;font-weight:500;color:var(--text);margin:0 0 16px} .pff__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px} .pff__list ul{list-style:none;margin:12px 0 0 28px;padding:0;display:flex;flex-direction:column;gap:12px} .pff__label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:16px;line-height:26px;color:var(--text)} .pff__label input{flex:none;width:18px;height:18px;accent-color:var(--cyan)} .pff__badge{margin-left:auto;background:var(--surface);border-radius:99px;padding:2px 10px; font-size:12px;line-height:18px;color:var(--text)} .pff__actions{display:flex;justify-content:flex-end;align-items:center;gap:12px;max-width:1110px; margin-inline:auto;padding:16px 15px 24px} .pff__reset{background:none;border:0;font:inherit;font-size:16px;font-weight:500;color:var(--text); text-decoration:underline;text-underline-offset:4px;cursor:pointer} .pff__apply{border:0;border-radius:99px;background:var(--cyan);color:#fff;padding:11px 32px; font:inherit;font-size:16px;font-weight:500;cursor:pointer} .pff__note{margin:0 auto 0 0;font-size:14px;line-height:20px;color:var(--meta)} .blognores{display:none;max-width:1110px;margin:0 auto;padding:60px 15px;text-align:center; font-size:20px;line-height:29px;color:var(--text)} .blognores[data-on]{display:block} @media(max-width:767px){.pff__cols{flex-direction:column;gap:24px}} /* featured post */ .bloghero{display:flex;align-items:center;gap:30px;max-width:1110px;margin-inline:auto} .bloghero__media{position:relative;flex:0 0 auto;width:486px;overflow:hidden;border-radius:20px} .bloghero__media img{display:block;width:100%;height:389px;object-fit:cover;transition:.4s} .bloghero__body{flex:1 1 auto;display:flex;flex-direction:column;align-items:flex-start;gap:40px;min-width:0} .bloghero__head{display:flex;flex-direction:column;gap:24px;align-self:stretch} .bloghero__metarow{display:flex;flex-direction:column;gap:16px} .bloghero__title{font-size:36px;line-height:43px;font-weight:500;color:var(--text);margin:0} .bloghero__meta{display:flex;align-items:center;gap:0;font-size:16px;line-height:26px;color:var(--meta);margin:0} .bloghero__meta span{display:flex;align-items:center} .bloghero__meta span:not(:last-child)::after{content:"";display:block;width:4px;height:4px; border-radius:50%;background:#CCD4D9;margin:0 16px} /* 768-1024 the source keeps the row but shrinks the artwork to 229 and the title to 24/30, inside the same centred 768 box the other bands use. Below 767 it stacks title-over-art via column-reverse, since the markup puts the artwork first. */ @media(max-width:1024px){ .bloghero{width:calc(100% - 2px);max-width:768px;margin-inline:auto} .bloghero__media{width:229px} .bloghero__media img{height:auto;aspect-ratio:5/4} .bloghero__title{font-size:24px;line-height:30px} .bloghero__body{gap:32px} .bloghero__head{gap:20px}} @media(max-width:767px){ .bloghero{flex-direction:column-reverse;align-items:stretch;gap:32px} .bloghero__media{width:100%} .bloghero__body{gap:24px}} /* the white "Blog" pill sitting 16px into the artwork */ .ptype{position:absolute;top:16px;left:16px;display:inline-flex;align-items:center;gap:6px; background:#fff;color:var(--text);border-radius:99px;padding:6px 16px 6px 8px; font-size:12px;font-weight:500;line-height:14px} .ptype svg{display:block;width:14px;height:14px} /* post card */ .pcard{display:flex;flex-direction:column;gap:16px} .pcard__media{position:relative;overflow:hidden;border-radius:20px} .pcard__media img{display:block;width:100%;aspect-ratio:350/232;object-fit:cover;transition:.4s} /* Hovering anywhere on the card zooms its artwork. Measured upstream: scale(1.075) translate(3.2%,-3.2%) over 0.4s, and the wrapper does not clip. */ .pcard:hover .pcard__media img, .bloghero:hover .bloghero__media img{transform:scale(1.075) translate(3.2%,-3.2%)} .pcard__body{display:flex;flex-direction:column;gap:12px} .pcard__date{font-size:14px;line-height:14px;color:#000} /* Upstream's terms list, measured on blog_home, blog_detail and analyst-reports alike: `display:flex; gap:8px 2px; font-size:12px/14px; color:transparent`, with a comma text node between the pills that the container paints out. `.p-ar .pcard__tags` carried these four values as a page override while the shared rule kept a plain 8px gap -- the override was evidence about the shared rule, not a page-specific fact. */ .pcard__tags{display:flex;flex-wrap:wrap;gap:8px 2px;color:transparent;font-size:12px;line-height:14px;font-weight:500} .pcard__tag{background:var(--text);color:#fff;border-radius:99px;padding:3px 8px; font-size:12px;line-height:14px;font-weight:500} .pcard__title{font-size:22px;line-height:28px;font-weight:500;color:var(--text);margin:0} @media(max-width:1024px){.pcard__title{font-size:18px;line-height:24px}} .pcard__title a:hover{color:var(--cyan)} /* grids and section rhythm */ /* Row sizing measured off the source grid: grid-auto-rows:1fr makes every row the height of the tallest card (source resolves to 418px 418px 418px at 1440), with the gap living between rows rather than inside the cards. Source goes 3 columns straight to 1 at the 767 mobile breakpoint -- there is no 2-up stage. */ .pgrid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:30px;row-gap:0;grid-auto-rows:1fr} @media(max-width:1024px){.pgrid{row-gap:16px;column-gap:16px}} @media(max-width:767px){.pgrid{grid-template-columns:1fr}} .blogsec{max-width:1110px;margin-inline:auto;padding-bottom:36px} @media(max-width:1024px){ .blogsec{width:calc(100% - 2px);max-width:768px;margin-inline:auto;padding:26px 0}} .blogsec__h{font-size:50px;line-height:60px;font-weight:500;color:var(--text);margin:0 0 40px} @media(max-width:1024px){.blogsec__h{font-size:36px;line-height:45px;margin-bottom:30px}} .blogsec__more{display:flex;justify-content:center;margin-top:40px} /* outlined "View All" and the solid "Read More" */ .btn-line{display:inline-block;text-align:center;border:1px solid #34AED8; border-radius:99px;padding:11px 32px;font-size:16px;font-weight:500;line-height:26px;color:var(--text);background:none} .btn-line:hover{background:#34AED8;color:#fff} .btn-solid{display:inline-block;text-align:center;background:var(--cyan);color:#fff; border:1px solid transparent;border-radius:99px;padding:11px 32px;font-size:16px;font-weight:500;line-height:26px} .btn-solid:hover{background:var(--cyan-hover,#0086b6)} /* resource library carousel */ .reslib{max-width:1110px;margin-inline:auto;padding-top:5px} /* blog.html band rhythm. Measured off the source bands at 1440 and 1024: hero 80/80 -> 32/26, post bands 0-or-36 top + .blogsec's 36 -> a flat 26/26, resource library 0/64 -> 0, newsletter 36/72 -> 26/52. These are classes rather than inline styles so the 1024 values can override them. */ .bband--hero{padding:80px 0} .bband--flush{padding-top:0} .bband--36{padding-top:36px} .bband--res{padding:0 0 64px} .bband--news{padding:36px 0 72px} @media(max-width:1024px){ .bband--hero{padding:32px 0 26px} .bband--flush,.bband--36{padding-top:0} .bband--res{padding:0} .bband--news{padding:26px 0 52px}} .reslib__kicker{font-size:16px;line-height:26px;color:var(--meta);margin:0 0 4px} .reslib > .blogsec__h{margin-bottom:45px} /* Carousel measured from the source widget: 3 per view (2 tablet / 1 mobile), 16px spacing, 500ms slide, 5s autoplay, infinite, pause on hover. */ .reslib__view{overflow:hidden} .reslib__rail{display:flex;gap:16px;transition:transform .5s ease;will-change:transform} .reslib__rail.is-instant{transition:none} .rescard{flex:0 0 calc((100% - 32px) / 3);min-width:0;display:flex;align-items:flex-start;gap:16px; background:var(--surface);border-radius:20px;padding:16px} @media(max-width:1024px){.rescard{flex-basis:calc((100% - 16px) / 2)}} @media(max-width:767px){.rescard{flex-basis:100%}} .rescard__thumb{flex:0 0 auto;width:100px;height:100px;border-radius:20px;display:block} /* upstream sets no object-fit here, so these 100x100 thumbs stretch their non-square sources. Add object-fit:cover if you'd rather they crop. */ .rescard__body{display:flex;flex-direction:column;gap:16px;min-width:0} .rescard__head{display:flex;align-items:center;gap:8px} .rescard__ico{flex:none;width:33px;height:32px;display:grid;place-items:center; background:#0461C8;color:#fff;border-radius:8px} .rescard__title{font-size:20px;line-height:29px;font-weight:500;color:var(--text);margin:0} .rescard__desc{font-size:16px;line-height:26px;color:var(--text);margin:0} .rescard__cta{display:flex;align-items:center;align-self:flex-start; font-size:16px;line-height:26px;font-weight:500;color:var(--cyan);text-decoration:underline} .rescard__cta svg{flex:none;display:block} .reslib__nav{display:flex;align-items:center;gap:12px;margin-top:56px} .reslib__dots{display:flex;align-items:center;gap:8px;margin-inline:auto} .reslib__dot{width:8px;height:8px;border-radius:50%;background:#CCD4D9;border:0;padding:0;cursor:pointer} .reslib__dot.is-on{background:var(--text)} .reslib__btn{width:41px;height:41px;border-radius:50%;background:#0461C8;border:0;cursor:pointer; display:grid;place-items:center;color:#fff} .reslib__btn:disabled{opacity:.5;cursor:default} /* ================= ANALYST REPORTS (analyst-reports.html) ========================= Source: `analyst-reports.html` at the ground-truth root, Elementor ARCHIVE 12051. Its own markup is only three sections -- the featured report, the "Recent Analyst Insights" grid (with the sticky topic bar and the resource carousel sitting between its two loop grids), and the subscribe band. Everything else is the shared chrome. Most of the page is components blog.html already carries and this project has already matched: `.blogbar` + `.pff` IS upstream's `.posts-filter`, `.pcard` + `.ptype` IS the loop card, `.reslib`/`.rescard` IS the resource carousel and `` IS the subscribe band. So this block is the deltas only, and the `.p-ar` rules below are places where THIS page's source measures differently from blog's -- not overrides of a rule that was wrong. Breakpoints are Elementor's: 1024 (tablet) and 767 (mobile). */ /* --- 1 the featured report ------------------------------------------------------ */ .ar__hero{display:flex;flex-direction:column;padding:0 15px} /* width:100% is not redundant next to max-width here: an auto inline margin on a flex item cancels the stretch, and the box then shrink-wraps to its own text (measured: the heading band came out 549 wide inside a 1110 column) */ .ar__hero__in{display:flex;flex-direction:column;gap:80px; width:100%;max-width:1110px;margin-inline:auto;padding:80px 0;box-sizing:border-box} .ar__feat{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:30px} /* 45/55 with the default shrink: the two bases plus the 30px gap overflow the row, so both give back 30px in proportion -- 486/594 at 1110, which is what upstream renders */ .ar__feat__media{position:relative;display:flex;flex-direction:column;gap:30px;width:45%;min-width:0} .ar__feat__media img{display:block;width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;border-radius:20px} .ar__feat__copy{display:flex;flex-direction:column;gap:40px;width:55%;min-width:0} .ar__feat__top{display:flex;flex-direction:column;gap:24px} .ar__feat__meta{display:flex;flex-direction:column;align-items:flex-start;gap:16px} .ar__feat__h{font-size:36px;line-height:43px;font-weight:500;color:var(--text);margin:0} .ar__feat__lead{font-size:16px;line-height:26px;color:#335366;margin:0} .ar__btn{align-self:flex-start;display:inline-block;padding:11px 32px;border:1px solid var(--cyan); border-radius:99px;background:var(--cyan);color:#fff;font-size:16px;line-height:26px; font-weight:500;text-align:center} /* date + read time, with upstream's 4px dot between them */ .ar__info{display:flex;flex-direction:row;font-size:16px;line-height:26px;margin:0} .ar__info__i{display:flex;align-items:center;color:var(--text)} .ar__info__t{display:block;color:#99A9B3} .ar__info__i:first-child::after{content:"";display:block;width:4px;height:4px; border-radius:50%;background:#CCD4D9;margin:0 16px} /* --- 2 section heading ---------------------------------------------------------- */ .ar__head{display:flex;flex-direction:column;padding:0 15px} .ar__head__in{width:100%;max-width:1110px;margin-inline:auto;padding:5px 0; display:flex;flex-direction:column;gap:4px;box-sizing:border-box} /* this page's kicker is #667E8C, a step darker than the site's --meta */ .ar__kicker{font-size:16px;line-height:26px;color:#667E8C;margin:0} .p-ar .reslib__kicker{color:#667E8C} .ar__h2{font-size:50px;line-height:60px;font-weight:500;color:var(--text);margin:0} /* --- 3 the two loop grids, with the resource band between them ------------------- */ .ar__body{display:flex;flex-direction:column;padding:0 15px} .ar__body__in{display:flex;flex-direction:column;gap:0;width:100%;max-width:1110px;margin-inline:auto} .ar__gridwrap{padding-bottom:64px} /* only the FIRST grid carries the 64px foot; upstream leaves the last one flush */ .ar__gridwrap:last-child{padding-bottom:0} .ar__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:64px 30px} .arcard__cta{align-self:flex-start;margin:0;font-size:16px;line-height:26px;color:var(--cyan)} .arcard__cta a{text-decoration:underline;color:inherit} /* this page's chip carries an 8px gap and an mark, where blog's carries 6px and an inline svg -- both measured against their own source */ .p-ar .ptype{gap:8px} .ptype img{display:block;width:14px;height:14px} /* upstream's pill row: 2px column gap with the transparent ", " sitting in it */ /* the resource band: same component, but upstream frames the rail and its controls with a 1px outline -- inset below the rail top on desktop, above the controls below */ .ar__resband{display:flex;flex-direction:column;gap:40px;padding-bottom:40px} /* upstream hangs the 16px under the rail and 40px under that, where the shared component rolls both into the nav's 56px margin. Same total, matched boxes. */ .p-ar .reslib__view{padding-bottom:16px} .p-ar .reslib__nav{margin-top:0} .p-ar .rescard{background:#F2F4F5} .p-ar .reslib__car{position:relative;display:flex;flex-direction:row;flex-wrap:wrap;gap:40px 0} .p-ar .reslib__view,.p-ar .reslib__nav{flex:1 1 100%;min-width:0} /* the band is a flex column, so the component's auto inline margin would cancel its stretch and leave it at its own 1110 max-width inside a 360 phone (measured) */ .p-ar .reslib{width:100%} .p-ar .reslib__car::before{content:"";position:absolute;inset:56px 0 0; border:1px solid #E5E9EC;border-radius:32px;pointer-events:none} .rescard__ico--file{flex:none;width:32px;height:32px;background:none;border-radius:0} /* upstream's swiper on THIS page steps 3 / 2 / 1 at 1024 / 641 / below, where blog's steps at 1025 / 768. Measured on both sources, not assumed. The 3-up and 2-up steps follow this source; the last step is pulled up from 641 to 767 by divergence 4 -- every carousel on every page shows exactly one full card at <=767. */ @media(max-width:1024px){.p-ar .rescard{flex-basis:calc((100% - 32px) / 3)}} @media(max-width:1023px){.p-ar .rescard{flex-basis:calc((100% - 16px) / 2)}} @media(max-width:767px){.p-ar .rescard{flex-basis:100%}} /* --- 4 tablet ------------------------------------------------------------------- */ .p-ar .bband--news{display:flex;flex-direction:column;gap:30px} @media(max-width:1024px){ .ar__hero{padding:0 16px} .ar__hero__in,.ar__head__in,.ar__body__in{max-width:768px} .ar__hero__in{gap:36px;padding:32px 0 26px} .ar__feat__copy{gap:32px;width:100%} .ar__feat__top{gap:20px} .ar__feat__h{font-size:24px;line-height:30px} /* both band headings centre from tablet down, kicker included */ .ar__head__in{text-align:center} .ar__h2{font-size:30px;line-height:38px} .p-ar .reslib__kicker,.p-ar .reslib > .blogsec__h{text-align:center} .ar__gridwrap{padding-bottom:32px} .ar__grid{gap:32px 16px} .p-ar .pcard__media{border-radius:12px} .p-ar .reslib__car::before{inset:0 0 56px;border-radius:12px} .ar__resband{padding-bottom:0} .p-ar .reslib__car{gap:24px 0} /* the dot between the date and the read time tightens from 16px to 12px */ .ar__info__i:first-child::after{margin:0 12px} .p-ar .rescard{border-radius:12px} .p-ar .rescard__title{font-size:18px} /* the tile's inner column tightens from 16px to 10px from tablet down */ .p-ar .rescard__body{gap:10px} .p-ar .reslib > .blogsec__h{font-size:30px;line-height:38px} .p-ar .bband--news{padding-top:0} /* The stack, the 768 cap, the padding, the radius, the left column's gap and the heading size all come from the shared rule now -- it stacks at 1024 too, which is what both sources do. Only this page's form spacing is left here. */ /* upstream's form is one wrapping flex column here: 12px between every line, and the consent block carries its own 8px lead-in */ .p-ar .subs__right,.p-ar .subs__row{gap:12px} .p-ar .subs__note{padding-top:8px} .p-ar .subs__row{flex-direction:column} .p-ar .subs__row button{width:100%} } /* --- 5 mobile ------------------------------------------------------------------- */ @media(max-width:767px){ .ar__feat{flex-direction:column-reverse;gap:32px} .ar__feat__media,.ar__feat__copy{width:100%} .ar__feat__copy{gap:24px} .ar__btn{align-self:stretch} .ar__grid{grid-template-columns:1fr} /* the subscribe band pads 16px here, not the site's 15 -- two pixels, but the heading sits exactly on its wrap point at 767 and they decide the line count */ .p-ar .bband--news .wrap{padding-inline:16px} } /* newsletter */ .subs{max-width:1110px;margin-inline:auto;background:#E5F5FA;border-radius:32px;padding:32px; display:flex;align-items:flex-end;gap:30px} .subs__left{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:30px} /* align-self + gap:0 -- upstream's avatar row is 126px of content, not the column's full 508. A flex child stretches by default, so this box was four times too wide on blog, blog-detail and analyst-reports as well. The avatars themselves sit at the same 0/36/72 either way, which is why nothing looked wrong. */ .subs__faces{display:flex;align-self:flex-start;gap:0} .subs__faces img{width:42px;height:42px;border-radius:20px;border:2px solid #CCD4D9;object-fit:cover} /* The overlap is PAINTED, not laid out: upstream gives each avatar a full 42px slot (3 x 42 = the 126px box) and pulls the image left inside it. A negative margin instead put the avatars in the right places -- 0/36/72 either way -- but shrank the row to 114. position:relative/left keeps the box and moves the paint. */ .subs__faces img{position:relative} .subs__faces img:nth-child(2){left:-6px} .subs__faces img:nth-child(3){left:-12px} .subs__h{font-size:36px;line-height:43px;font-weight:500;color:var(--text);margin:0} .subs__right{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:16px} .subs__row{display:flex;gap:8px} .subs__row input{flex:1 1 auto;min-width:0;height:48px;border-radius:99px;background:#fff; border:1px solid #CCD4D9;padding:10px 32px;font:inherit;font-size:16px;color:var(--text)} .subs__row button{flex:none;height:48px;border:0;border-radius:99px;background:#0461C8; color:#fff;padding:11px 32px;font:inherit;font-size:16px;font-weight:500;cursor:pointer} .subs__note{font-size:16px;line-height:26px;color:var(--text);margin:0} /* upstream's reCAPTCHA line is HubSpot's own 10/12, one line at 442 wide -- measured on BOTH saved sources (blog_home and analyst-reports); at 12/18 it wrapped and made the right column 24px too tall on every page that carries this band */ .subs__fine{font-size:10px;line-height:12px;color:var(--text);margin:0} /* Four values here were wrong on every page carrying this band -- blog, blog-detail and analyst-reports as well as news. Both sources agree exactly (news.html and blog_home.html, measured at 767 and 320): radius 20 not 24, align-items flex-end not stretch, the left column's gap 24 not 30, and the heading 24/30 not 28/34. The `.p-ar` block above already carried the right numbers because that page stacks at 1024 and needed its own copy -- so the correct values were sitting ten lines away from the wrong ones the whole time. Its copies are NOT redundant (they cover 901-1024) and stay. */ /* 1024, not 900: BOTH sources stack this band at 1024 (news.html and blog_home.html, measured). analyst-reports had it right in its own block, which is how the wrong shared breakpoint survived -- the page that needed a copy wrote the correct one. */ @media(max-width:1024px){ .subs{flex-direction:column;align-items:flex-end;max-width:768px;padding:24px;border-radius:20px} .subs__left,.subs__right{width:100%} .subs__left{gap:24px} .subs__h{font-size:24px;line-height:30px} /* stacked, the field and the button sit 12px apart, not 8 */ .subs__row{flex-direction:column;gap:12px} .subs__row button{width:100%}} /* ============ BLOG DETAIL ============ Measured from blog_detail.html at 1440: content 1110 @165, article column 731, sidebar 355, 24px between them. */ /* visually hidden: reachable by screen readers, no layout box */ .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .bd__top{padding-top:72px} /* Type, icons and separator come from the SHARED rank-math block (search "rank-math breadcrumb -- the SHARED skin"): the nav also carries .crumbs. This rule is only the container both bd pages wrap their trail in. */ .bd__crumb{max-width:1110px;margin:0 auto 30px} .bd__hero{max-width:1110px;margin-inline:auto;display:flex;align-items:center;gap:30px} .bd__hero__l{flex:0 1 540px;min-width:0;display:flex;flex-direction:column;gap:24px} .bd__hero__img{flex:0 1 540px;width:540px;height:auto;aspect-ratio:540/432;min-width:0; /* a replaced item's automatic minimum is its specified width, so without min-width:0 the image refuses to shrink and the text column absorbs it all */ border-radius:20px;object-fit:cover} /* Upstream's terms list is `display:flex; gap:8px 2px` with a comma text node BETWEEN the pills, painted transparent by the wrapper's own colour. The 7px gap this used to carry was reverse-engineered from one row of two terms: 28+7+102 happens to equal 28+2+comma+2+102, and it would be wrong for any other pair. */ .bd__ptags{display:flex;font-size:12px;line-height:14px;font-weight:500} .bd__ptags__list{display:flex;flex-wrap:wrap;gap:8px 2px;color:transparent} .bd__ptag{background:var(--text);color:#fff;font-size:12px;font-weight:500;line-height:14px; border-radius:99px;padding:3px 8px} .bd__h1{font-size:50px;line-height:60px;font-weight:500;color:var(--text);margin:0} .bd__meta{display:flex;align-items:center;gap:16px;font-size:16px;line-height:26px} .bd__meta__author{display:flex;align-items:center;gap:12px} .bd__meta img{flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover} .bd__meta__name{color:var(--cyan)} .bd__meta__stats{display:flex;align-items:center} .bd__meta__sub{display:flex;align-items:center;color:var(--meta)} /* 4px dot between the date and the read time -- the source draws it, it is not a glyph. */ .bd__meta__sub:not(:last-child)::after{content:"";display:block;width:4px;height:4px; border-radius:50%;background:#CCD4D9;margin:0 16px} .bd__body{padding-top:72px} .bd__layout{max-width:1110px;margin-inline:auto;display:flex;align-items:flex-start;gap:24px} .bd__article{flex:1 1 731px;min-width:0;display:flex;flex-direction:column;gap:32px} .bd__side{flex:0 0 355px;position:sticky;top:80px; display:flex;flex-direction:column;align-items:center;gap:24px} /* prose */ .bd__article h2{font-size:36px;line-height:43px;font-weight:500;color:var(--text);margin:0 0 32px;scroll-margin-top:100px} .bd__article h3{font-size:30px;line-height:36px;font-weight:500;color:var(--text);margin:0 0 32px} .bd__article p{font-size:16px;line-height:26px;color:var(--text);margin:0 0 32px} .bd__article h4{font-size:24px;line-height:30px;font-weight:500;color:var(--text);margin:0 0 32px} .bd__article ul{list-style:none;margin:0 0 32px;padding:0} .bd__article li{position:relative;font-size:16px;line-height:26px;color:var(--text); margin:0;padding:0 0 0 32px} .bd__article li::before{content:"";position:absolute;top:10px;left:16px;display:flex; width:4px;height:4px;border-radius:50%;background:#002840} .bd__article img{width:100%;height:auto;border-radius:20px;margin:0 0 32px} .bd__article a{color:var(--cyan);text-decoration:underline} /* The post body's FAQ accordion — a Gutenberg block (faq-section-v1), so it can appear in ANY post on this template, not just this one. Numbers are that block's own stylesheet, read out of the page's inline