/* ============================================================================= Безопасность в Польше — landing page. ONE palette, and it lives entirely in the :root block below. The page used to mix a warm beige (#f4f3ef) with a cool lavender (#eceaf0) and a cool navy accent, which read as two different sites stitched together. Everything is on one neutral grey ramp now. THREE surfaces, and only three, alternating so no two neighbours share one: dark #0f1114 — hero, beat white #ffffff — situations, plans, footer grey #f3f4f6 — why, form, FAQ (and the page default) There is no 1px rule between a white section and a grey one: the tone step IS the division. The only hairline left is between the two GREY sections that touch (form → FAQ), which would otherwise run together as one long block. TWO accents, because one colour cannot be read on both ends of that ramp: --accent-deep on light, --accent-on-dark on dark. The dark sections re-point the token rather than hardcoding a colour, so this block stays the only place to edit. ============================================================================= */ :root{ /* ---- surfaces ---- */ --bg:#f3f4f6; /* GREY sections, and the page default */ --bg-2:#ffffff; /* WHITE sections, and every card that sits on grey */ --bg-dark:#0f1114; /* DARK sections: hero and beat */ --bg-dark-rgb:15,17,20; /* A component fill for things that sit ON white — chips, badges, the good column. Deliberately NOT equal to --bg: a --bg chip on a --bg card is invisible, which is exactly what happened when both were flattened to one grey. */ --bg-3:#e9ebef; /* ---- ink ---- */ --ink-rgb:20,22,26; --ink:#14161a; /* near-black — headings, CTA buttons */ --ink-2:#3a3f47; /* body copy */ --muted:#5f6673; /* was #787f8b: 3.9:1 on white, under the 4.5 floor. This is 5.9 */ --ink-on-dark:#f1f2f4; --ink-on-dark-rgb:241,242,244; /* ---- lines ---- */ --line:#e5e7eb; /* hairlines between light surfaces */ --line-2:#dcdfe4; /* the heavier one: inputs, chips, the picker */ --line-on-dark:rgba(255,255,255,.14); /* Periwinkle, lifted from the design reference. It is a SURFACE TINT ONLY: at ~1.7:1 on white it fails every text contrast rule. Anything that has to be READ in the accent colour uses --accent-deep (on light) or --accent-on-dark. */ --accent:#b8c4dc; --accent-rgb:184,196,220; /* every rgba() tint reads this — see CLAUDE.md */ --accent-deep:#2f4a73; /* the accent that is READABLE on a light surface */ --accent-deep-rgb:47,74,115;/* ...and the same navy as a WASH on a dark one */ /* ...and its twin for the dark sections. #2f4a73 on #0f1114 is 1.6:1, i.e. invisible; this is 8.2:1. The hero pill and the beat's accents are this colour. */ --accent-on-dark:#9db8e6; --accent-on-dark-rgb:157,184,230; /* CTAs are near-black pills, as in the reference — not the accent. */ --cta:#14161a; --cta-ink:#ffffff; --ok:#1f7a4d; /* the ✓ in a plan's feature list */ --bad:#b3261e; /* errors, and the ✕ in the «without a subscription» column */ --placeholder:#9aa1ad; /* input placeholders */ /* Messenger brand colour - fixed, never themed, same value as thank-you.css. It is a MARK, not a fourth page hue: it appears only on the Telegram float and nowhere else. */ --tg:#229ED9; --ok-on-dark:#5ec98f; /* both are tuned for white and go muddy on near-black */ --bad-on-dark:#ff9a92; --radius:18px; --radius-sm:12px; --radius-pill:999px; --maxw:1180px; --head-h:64px; /* lets the FAQ panel animate to block-size:auto — see ::details-content below */ interpolate-size:allow-keywords; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--bg); color:var(--ink-2); font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;position:relative} /* Every anchor target clears the fixed header. Without this, jumping to #plans or #form — from the nav, from a tariff card, or from a shared link — parks the section heading underneath the 64px header strip. Same fix admin.css uses for its comment anchors. */ section[id], [id]:target{scroll-margin-top:calc(var(--head-h) + 20px)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* Skip link — visible only when focused */ /* Hidden by sliding it up out of the viewport, NOT by parking it at left:-9999px. An absolutely positioned element 9999px to the left still belongs to the document, and it showed up two ways on a real device: the bar appeared as a stray button at the top-left when DevTools switched viewport and moved focus onto it (it IS the first tab stop, and :focus brought it to left:0), and the page could be pinched out to reveal empty canvas beside it. position:fixed keeps it out of the document's overflow entirely; the transform hides it without moving it anywhere a layout can find. It still appears on focus, which is the whole point of a skip link. */ .skip{ position:fixed;left:0;top:0;z-index:100; transform:translateY(-120%); background:var(--cta);color:var(--cta-ink); padding:12px 18px;border-radius:0 0 var(--radius-sm) 0;font-weight:600;text-decoration:none; transition:transform .15s ease; } .skip:focus{transform:none} /* ...but only when the focus was actually keyboard-driven. Toggling DevTools' device mode moves focus into the page, and this is the first tab stop, so the bar slid down and sat over the logo on every phone/desktop switch - reported twice. Written as "reveal on :focus, then take it back when the focus is not :focus-visible" rather than as `.skip:focus-visible`, because a browser that does not know :focus-visible drops this whole rule as an invalid selector and keeps the plain :focus behaviour. The other way round it would lose the skip link entirely. */ .skip:focus:not(:focus-visible){transform:translateY(-120%)} /* ============================== HEADER ============================== */ /* THREE states, not two: (base) transparent, light type — at the top of the dark hero .scrolled.over-dark dark translucent, light — scrolled, still over a dark section .scrolled:not(.over-dark) light bar, dark type — over a white or grey section The light bar used to come on as soon as you scrolled 10px, which put a pale strip across the dark hero and across .beat. So the LIGHT state is the qualified one and the dark type is the base: every light-bar rule below is :not(.over-dark), and adding a dark section means adding it to the JS list in index.html, not writing new colour rules. The Dobry Piec original probed rects on every scroll frame; this probes two elements and only on the same scroll handler .scrolled already uses. */ .site-header{ position:fixed;top:0;left:0;right:0;z-index:50; height:var(--head-h); display:flex;align-items:center; background:transparent; border-bottom:1px solid transparent; /* ONE duration for everything that changes with the state, here and on the children below. It was .25/.2/.2 with several properties not transitioning at all, so the bar faded while the type, the picker's fill and the brand mark all snapped - which is what read as a cut. --head-fade is the single knob; anything added to the header flip must use it. */ --head-fade:.28s; transition:background var(--head-fade) ease, border-color var(--head-fade) ease, box-shadow var(--head-fade) ease; } .site-header .main-nav a{color:rgba(var(--ink-on-dark-rgb),.86)} .site-header .main-nav a:hover, .site-header .main-nav a.active{color:#fff} /* The picker's parts are coloured EXPLICITLY, not by inheritance from the summary. The globe and the chevron are stroke="currentColor" and the code is in a , and relying on the summary's colour to reach them left the whole control invisible on the light bar - white on white - even with !important on the parent. Two extra selectors, no guessing. */ .site-header .lang-btn, .site-header .lang-btn span{color:#fff} .site-header .lang-btn{ border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.08); } .site-header .lang-btn svg{stroke:#fff} /* The picker changes FOUR things between states - fill, border, label colour and icon stroke - and the base rule only transitioned two of them, so the pill's fill and its globe snapped while the bar behind them faded. The hover transitions stay short; this is the state flip. */ .site-header .lang-btn{ transition:background var(--head-fade) ease, border-color var(--head-fade) ease, color var(--head-fade) ease; } .site-header .lang-btn span{transition:color var(--head-fade) ease} .site-header .lang-btn svg{transition:stroke var(--head-fade) ease} .site-header .lang-btn:hover{border-color:rgba(255,255,255,.5)} .site-header.scrolled{ -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); } /* Over the hero or the beat: the bar darkens rather than lightening, and every base rule above (light nav, light picker, light brand mark) still applies because none of them was scoped. */ .site-header.scrolled.over-dark{ background:rgba(var(--bg-dark-rgb),.72); border-bottom-color:var(--line-on-dark); box-shadow:none; } .site-header.scrolled:not(.over-dark){ background:rgba(255,255,255,.86); } .site-header.scrolled:not(.over-dark) .main-nav a{color:var(--muted)} .site-header.scrolled:not(.over-dark) .main-nav a:hover, .site-header.scrolled:not(.over-dark) .main-nav a.active{color:var(--ink)} .site-header.scrolled:not(.over-dark) .lang-btn, .site-header.scrolled:not(.over-dark) .lang-btn span{color:var(--ink-2)} .site-header.scrolled:not(.over-dark) .lang-btn{ border-color:var(--line-2);background:var(--bg-2); } .site-header.scrolled:not(.over-dark) .lang-btn svg{stroke:var(--ink-2)} .site-header.scrolled:not(.over-dark) .lang-btn:hover, .site-header.scrolled:not(.over-dark) .lang-btn:hover span{color:var(--ink)} .site-header.scrolled:not(.over-dark) .lang-btn:hover{border-color:var(--accent-deep)} .site-header.scrolled:not(.over-dark){ border-bottom-color:var(--line); box-shadow:0 1px 20px rgba(var(--ink-rgb),.05); } /* Over the dark hero the near-black shield would all but vanish, so the header shows the LIGHT twin instead and swaps back on .scrolled. A white plate behind the dark mark was tried first and read as a sticker; filtering the mark is not an option, it carries its own colours. The two marks CROSS-FADE. This used to be display:none/block, and `display` is not an animatable property - the mark snapped from one file to the other in a single frame while everything around it faded, which was the most visible part of the cut. They are stacked instead: the dark one stays in flow and holds the layout, the light one sits on top of it. */ .brand-mark-light{display:none} .site-header .logo{position:relative} .site-header .logo .brand-mark, .site-header .logo .brand-mark-light{ display:block; transition:opacity var(--head-fade) ease; } .site-header .logo .brand-mark-light{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); } .site-header .logo .brand-mark{opacity:0} .site-header .logo .brand-mark-light{opacity:1} .site-header.scrolled:not(.over-dark) .logo .brand-mark{opacity:1} .site-header.scrolled:not(.over-dark) .logo .brand-mark-light{opacity:0} .site-header .wrap{display:flex;align-items:center;gap:20px;width:100%} .logo{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none} /* The brand mark carries its OWN colours, so it must never inherit a monochrome filter. Higher specificity (3 classes) beats `.site-header .logo img`. */ /* The mark is the whole logo now, so it is sized to carry the header on its own. */ .site-header .logo .brand-mark{height:38px;width:38px;flex:none;filter:none} /* The header sits over both light and dark sections and carries a backdrop-filter. Giving it its own compositing layer stops Chrome repainting the blurred strip against stale content while scrolling, which shows up as the bar flickering or briefly going blank. */ .site-header{will-change:transform} /* Nav links follow the Dobry Piec (kotly) site: the underline GROWS from zero rather than fading a border in, and the same rule serves the scroll-spy .active state. The bar is a pseudo-element so it can animate width without nudging the text. */ .main-nav{display:none;gap:22px} .main-nav a{ position:relative;white-space:nowrap; color:var(--muted);text-decoration:none; font-size:14.5px;font-weight:600; transition:color var(--head-fade, .28s) ease; } .main-nav a::after{ content:"";position:absolute;left:0;bottom:-6px; height:2px;width:0;border-radius:2px; background:var(--accent-deep); transition:width .25s cubic-bezier(.4,0,.2,1); } .main-nav a:hover{color:var(--ink)} .main-nav a.active{color:var(--ink)} .main-nav a:hover::after, .main-nav a.active::after{width:100%} .head-right{display:flex;align-items:center;gap:10px;margin-left:auto} /* --- language picker (native
, no JS) --- */ .lang-picker{position:relative;flex:none} .lang-btn{ list-style:none;cursor:pointer; display:flex;align-items:center;gap:6px; padding:7px 11px;border-radius:var(--radius-pill); border:1px solid var(--line-2);background:var(--bg-2); color:var(--ink-2);font-size:13px;font-weight:600; transition:border-color .15s, color .15s; } .lang-btn::-webkit-details-marker{display:none} .lang-btn:hover{border-color:var(--accent-deep);color:var(--ink)} .lang-btn svg{width:15px;height:15px;flex:none} .lang-chevron{transition:transform .2s ease} .lang-picker[open] .lang-chevron{transform:rotate(180deg)} .lang-menu{ position:absolute;right:0;top:calc(100% + 8px);min-width:170px; background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-sm); box-shadow:0 12px 34px rgba(var(--ink-rgb),.12); padding:6px;display:flex;flex-direction:column; } .lang-menu a{ padding:9px 12px;border-radius:8px;text-decoration:none; color:var(--ink-2);font-size:14px; } .lang-menu a:hover{background:var(--bg);color:var(--ink)} .lang-menu a[aria-current]{background:var(--bg-3);color:var(--ink);font-weight:600} /* ============================== SHARED SECTION FURNITURE ============================== */ section{padding:72px 0} .eyebrow{ display:block; /* 12px is the floor for uppercase at this tracking: below it the letterforms stop resolving and the label reads as texture. Was 11. */ font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);margin-bottom:14px; } h2{ margin:0 0 12px; font-size:clamp(28px,4.4vw,44px);line-height:1.1;letter-spacing:-.03em; font-weight:800;color:var(--ink); } h3{color:var(--ink);letter-spacing:-.01em} .sec-sub{margin:0 0 36px;max-width:60ch;color:var(--muted);font-size:17px} /* The pill-highlighted word, straight from the reference. */ .mark{ display:inline-block; background:var(--bg-3); border-radius:var(--radius-pill); padding:0 .34em; box-decoration-break:clone; -webkit-box-decoration-break:clone; } /* ============================== HERO ============================== */ /* DARK, to the client's mock, and the second dark block on the page after .beat. Everything inside re-points the accent the same way .beat does: --accent-deep is the readable accent on white and the pale --accent is the readable one on near-black, so one scoping line saves hand-picking a colour for every child. Never hand-edit the colours below it. */ .hero{ /* Briefed for this slot: a night road check, officer from behind in a lime POLICJA vest, blue strobes behind, a car framing the right edge, and the LEFT HALF deliberately empty because the copy column sits there. Swapping it is this one line. */ --hero-shot:url("/images/hero-bg-ca9bd9bffde7c16b0cdf6bd8fe8ae454.webp"); /* The whole section runs on the dark-surface accent. --accent (#b8c4dc) is a desaturated blue-grey: a surface tint on white, which is all it was ever asked to be, and as an accent on near-black it reads as grey however much of it you use. Re-pointing --accent, its -rgb and --accent-deep together means every tint inside the hero follows from the one token in :root, so no rule below has to know which surface it is on. */ --accent:var(--accent-on-dark); --accent-rgb:var(--accent-on-dark-rgb); --accent-deep:var(--accent-on-dark); /* The FILLED accent surfaces - the pill on the headline, the advocate's tick. Same colour as everything else accented in here; because it is a BACKGROUND, its type goes dark (#0f1114 on #9db8e6 is 8.2:1; white on it would be 1.9:1). */ --accent-fill:var(--accent-on-dark); --accent-fill-ink:var(--bg-dark); position:relative;isolation:isolate;overflow:hidden; background:var(--bg-dark);color:rgba(var(--ink-on-dark-rgb),.9); padding-top:calc(var(--head-h) + clamp(20px,5vh,56px));padding-bottom:0; /* Fill the screen. The section used to be only as tall as its content, so on a big monitor it sat in the top two thirds with the next section already showing - it read as a small block rather than an opening. svh, not vh, with vh first as the fallback: on mobile 100vh is the viewport with the browser chrome RETRACTED, so a vh-only hero is taller than the screen at rest and the stats strip hides under the address bar. min-height, never height, so a short laptop screen or a long translation grows the section instead of overflowing it. */ min-height:100vh; min-height:100svh; display:flex;flex-direction:column; } /* The copy row takes the slack, and it already centres its own content, so everything sits in the optical middle while the stats strip stays pinned to the foot. */ .hero > .wrap{width:100%} /* see the note above: flex items shrink to fit without this */ .hero > .hero-grid{flex:1} /* The photograph, plus the scrim that makes the copy readable over it. Two gradients: one from the left so the text column sits on near-solid ink, one from the bottom so the stats strip does. --hero-shot is the only thing to change to swap the picture. */ .hero-bg{ position:absolute;inset:0;z-index:-1; background-image: linear-gradient(90deg, var(--bg-dark) 0%, rgba(var(--bg-dark-rgb),.9) 34%, rgba(var(--bg-dark-rgb),.35) 66%, rgba(var(--bg-dark-rgb),.55) 100%), linear-gradient(180deg, rgba(var(--bg-dark-rgb),.42) 0%, transparent 34%, rgba(var(--bg-dark-rgb),.88) 100%), var(--hero-shot); background-size:cover, cover, cover; /* 34% vertical, not centre: on a wide-but-short window `cover` scales to the width and crops the height, and a centred crop takes the officer's head off. 64% horizontal keeps him in frame on a phone, where the crop is the other way round. */ background-position:center, center, 64% 34%; } /* A cool wash over the right half, which is what gives the mock its depth. Periwinkle, not the mock's green: the accent stays ours. */ .hero::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(62% 72% at 76% 30%, rgba(var(--accent-rgb),.42), transparent 72%); } /* Two rows: the copy row takes all the slack (the grid is the flex:1 child of .hero, so the 1fr row is what makes the copy sit in the optical middle), and the stats strip is an auto row pinned under it. The strip used to be a separate .wrap; it is in here so that on a phone it is a SIBLING of the advocate card and `order` can put it first. */ .hero-grid{ display:grid; grid-template-rows:1fr auto; column-gap:clamp(28px,4vw,64px); row-gap:clamp(20px,4vh,48px); align-items:center; } .hero-stats{grid-column:1/-1} /* There is no .hero-eyebrow any more. It was a three-part slogan above the headline and it cost two reserved lines at the very top of a phone screen for copy that said nothing the headline does not. `hero.eyebrow` is still in all three bundles, unused - the key sets have to match each other, and an unused key costs nothing. */ .hero h1{ margin:0 0 clamp(14px,2.4vh,22px); /* The 70px cap is set by the widest pill word at the widest the copy column ever gets: the .wrap stops at 1180px, so above ~1220px viewport the column is a fixed 585px and the Polish pill word has to fit it. At 74px it did not, which is what pushed the grid; 70px fitted with 4px to spare, which is not a margin, so this is 68px (21px spare). If the headline copy ever changes, re-measure `.hero h1 > span.mark` against `.hero-copy`. */ font-size:clamp(34px,min(4.6vw,8.2vh),68px);line-height:1.04;letter-spacing:-.035em; font-weight:800;color:#fff; /* Reserve three lines so the column below cannot shift when the language changes. */ min-height:3.12em; } /* One line per part, in every language: left to wrap naturally the headline broke differently per language and moved everything under it. .mark stays inline-block so the pill hugs the word instead of stretching the line. */ .hero h1 > span{display:block} .hero h1 > span.mark{display:inline-block;background:var(--accent-fill);color:var(--accent-fill-ink)} /* THE FLOORS. Nothing in the hero may change height between languages - the column is vertically centred, so a block that wraps one line further in Polish moves everything above it too. Each floor is the MAXIMUM any of ru/uk/pl needs anywhere in that band, measured (scratchpad/natural.py), not guessed: too low and the hero jumps on a language switch, too high and a phone screen fills with reserved blank. */ .hero .sub{margin:0 0 clamp(18px,3.2vh,30px);max-width:52ch; min-height:6.4em; /* four lines x 1.6 */font-size:clamp(16px,1.3vw,18.5px);color:rgba(var(--ink-on-dark-rgb),.86)} /* The advocate card. White on the dark section so it reads as a note laid on top, and it carries the one genuinely concrete line on the page. */ .advocate{ background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.24); border-radius:var(--radius);padding:20px 22px; -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); } .advocate-head{display:flex;align-items:center;gap:12px;margin-bottom:14px} .advocate-mark{ flex:none;width:34px;height:34px;border-radius:10px; background:var(--accent-fill);color:var(--accent-fill-ink); display:grid;place-items:center;font-style:normal;font-size:16px;font-weight:700; } /* The text block FILLS the row rather than shrink-wrapping its content. It was the last thing in this card whose size still followed the language - 184px in ru and pl, 163px in uk - and the same trap as the hero buttons before it: a flex item with no basis is as wide as its longest word happens to be in that translation. */ .advocate-head > span{flex:1;min-width:0} /* Both lines are short labels and are pinned to exactly one line: a wrap here would push the quote down, and since the hero column is vertically CENTRED it would move the whole hero, headline included. The floor keeps the height when the type is short, nowrap keeps it when a translation is long, and the ellipsis is the safety net for a translation longer than the card - the alternative is the card silently changing height again. */ .advocate-head b, .advocate-head small{ display:block;min-height:1.6em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .advocate-head b{font-size:15px;color:#fff} .advocate-head small{margin-top:1px;font-size:12.5px;color:rgba(var(--ink-on-dark-rgb),.72)} .advocate-quote{ margin:0;padding-left:14px;border-left:2px solid var(--accent); font-size:14px;line-height:1.55;color:rgba(var(--ink-on-dark-rgb),.92);font-style:italic; min-height:4.65em; /* three lines: the card must not change height per language */ } /* Stats strip along the foot, above a hairline, as in the mock. */ .hero-stats{ list-style:none;margin:0;padding:clamp(14px,2.4vh,22px) 0 clamp(18px,3vh,28px); border-top:1px solid rgba(255,255,255,.2); display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px; align-self:end; } .hero-stats li{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .hero-stats b{font-size:clamp(20px,1.7vw,26px);font-weight:800;letter-spacing:-.03em;color:#fff} .hero-stats span{font-size:13px;color:rgba(var(--ink-on-dark-rgb),.9)} /* --- CTAs. The primary is white on the dark section; the ghost is an outline. --- */ .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px} .cta-primary{ display:flex;align-items:center;gap:12px; min-width:320px; background:#fff;color:var(--ink); padding:12px 12px 12px 26px;border-radius:var(--radius-pill); font-weight:600;font-size:15px;text-decoration:none; transition:opacity .15s, transform .15s; } .cta-primary:hover{opacity:.9;transform:translateY(-1px)} .cta-price{margin-left:auto;font-weight:500;color:var(--muted);white-space:nowrap} .cta-arrow{ flex:none;width:34px;height:34px;border-radius:50%; display:grid;place-items:center; background:var(--ink);color:#fff;font-size:15px;line-height:1; transition:transform .15s ease; } .cta-primary:hover .cta-arrow{transform:translateX(2px)} .cta-ghost{ display:flex;align-items:center;justify-content:center; padding:14px 26px;border-radius:var(--radius-pill); border:1px solid rgba(255,255,255,.28);background:transparent; color:#fff;font-weight:600;font-size:15px;text-decoration:none; transition:border-color .15s, background .15s; } .cta-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)} .cta-ghost{gap:9px} .cta-ghost .cta-tg{width:17px;height:17px;flex:none;fill:currentColor;margin-left:-3px} /* ============================== SITUATIONS ============================== */ /* WHITE. No rule above or below it: the step from the dark hero and down to the grey #why section is the division, and a hairline on top of a tone change reads as a seam. */ .sit{background:var(--bg-2)} .sit-grid{display:grid;gap:16px;margin-bottom:28px} /* Tall dark cards, after the LegalOne reference: title at the top, one line of copy and a round arrow at the foot, a photograph filling the whole card behind a scrim. They are the only dark thing on a light section, which is the point — this is the "is this for me?" content and it was disappearing as three pale panels. NO PHOTOGRAPHS SHIP YET. --shot is unset, so each card falls back to the tinted near-black panel below and nothing 404s. Adding a photo is one line per card, at the bottom of this block. The reference has no icons on its cards; the badge is kept here because these three glyphs are drawn to the logo's rule and are the only place that family appears. The card is a LINK to the form. An arrow button that goes nowhere is worse than no arrow, and it turns the whole card into conversion surface. */ .sit-card{ position:relative;isolation:isolate;overflow:hidden; display:flex;flex-direction:column; min-height:clamp(300px,30vw,400px); padding:26px; border-radius:24px; background-color:var(--ink); /* the no-photo state: a periwinkle wash off the top edge so the panel is not a flat slab */ background-image:radial-gradient(120% 90% at 50% -10%, rgba(var(--accent-rgb),.20), transparent 62%); color:#fff;text-decoration:none; transition:transform .2s ease, box-shadow .2s ease; } /* the photograph */ .sit-card::before{ content:"";position:absolute;inset:0;z-index:-2; background-image:var(--shot,none); background-size:cover;background-position:center; transform:scale(1.02); transition:transform .55s ease; } /* Legibility scrim. Dark at BOTH ends because the title sits at the top and the copy at the foot; a single top-down gradient leaves the bottom line floating on whatever the photo does. */ .sit-card::after{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg, rgba(10,12,15,.60) 0%, rgba(10,12,15,.20) 38%, rgba(10,12,15,.88) 100%); } .sit-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(var(--ink-rgb),.18)} .sit-card:hover::before{transform:scale(1.06)} /* No icon badge: the reference puts nothing above the title, and on a photograph a second framed object next to the headline is one element too many. The three glyphs that used to sit here (handcuffs, document, collision) are gone from the page entirely. */ .sit-card h3{ margin:0;max-width:13ch; font-size:clamp(21px,1.9vw,27px);line-height:1.14;letter-spacing:-.025em; font-weight:800;color:#fff; } .sit-foot{ margin-top:auto;padding-top:26px; display:flex;align-items:flex-end;justify-content:space-between;gap:14px; } /* min-width:0 because .sit-foot is a flex row and a flex item's default min-width is auto - it refuses to shrink below its longest word and pushes the arrow button out of the card instead. break-word is the second half: a long Polish compound then breaks rather than sticking out on its own. */ .sit-card p{margin:0;min-width:0;overflow-wrap:break-word; font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.76)} .sit-go{ flex:none;width:44px;height:44px;border-radius:50%; display:grid;place-items:center; background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.30); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); color:#fff;font-size:17px;line-height:1; transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; } .sit-card:hover .sit-go{background:#fff;border-color:#fff;color:var(--ink);transform:translate(2px,-2px)} /* PHOTOGRAPHS. Square 1:1 crops of the same three Gemini frames the hero uses — the hero takes wide slices of them, these take square ones, so the two sections show different regions rather than the identical picture twice. Generated by scratchpad/make_sit_shots.py. 1:1 because the card is near square on desktop but crops to a landscape band on phones, and background-size:cover crops from the centre. The fingerprinting resource chain rewrites these url()s automatically — never reference them any other way. */ .sit-1{--shot:url("/images/sit-detention-c6b1ef5ce76f74c6e8669b3c67485ece.webp")} .sit-2{--shot:url("/images/sit-documents-34716c651338ff44ae64865ec8f7e872.webp")} .sit-3{--shot:url("/images/sit-accident-3997bf3e8ca2f35e8cd7e3645694e123.webp")} /* ============================== WHY IN ADVANCE ============================== */ .np-grid{display:grid;gap:16px;margin-bottom:22px} .np-col{border-radius:var(--radius);padding:26px;border:1px solid var(--line)} .np-col h3{ margin:0 0 16px;font-size:13px;font-weight:700; letter-spacing:.08em;text-transform:uppercase; } .np-col ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px} .np-col li{position:relative;padding-left:26px;font-size:15px} .np-col li::before{ position:absolute;left:0;top:0;font-weight:700;font-size:15px;line-height:1.6; } /* BOTH columns are white panels, and that is deliberate. `.np-bad` was transparent for a while, on the theory that the column you are being talked out of should not be the brightest surface in the section. On a grey section that made it a 5% step from its own background with a 5% border - it stopped reading as a panel at all, and the comparison lost one of its two halves. This is a COMPARISON: the two sides have to carry equal weight or there is nothing to compare. What separates them is the mark, the heading colour and the border, not the fill. */ .np-bad{background:var(--bg-2);border-color:var(--line-2)} .np-bad h3{color:var(--muted)} .np-bad li{color:var(--ink-2)} .np-bad li::before{content:"✕";color:var(--bad)} /* The answer side is the one that lifts: the accent border it already had, plus a shadow. */ .np-good{ background:var(--bg-2);border-color:var(--accent-deep); box-shadow:0 14px 34px -18px rgba(var(--ink-rgb),.28); } .np-good h3{color:var(--accent-deep)} .np-good li{color:var(--ink-2)} .np-good li::before{content:"✓";color:var(--ok)} .np-note{ margin:0;text-align:center;font-size:15px;color:var(--muted); } /* ============================== PLANS ============================== */ .plans{background:var(--bg-2)} /* WHITE, between the dark beat and the grey form */ .plan-grid{display:grid;gap:16px;margin-bottom:24px;align-items:stretch} /* The cards carry the WHOLE offer now. The comparison table that used to sit under them is gone: it repeated every feature name four times, was the one thing on the page that had to scroll sideways on a phone, and the same rows read better inside the card they belong to. The feature labels still come from the cmp.r* keys, so there is one source for them. */ .plan{ display:flex;flex-direction:column; /* White on the white section, held by a hairline - NOT a grey fill. A recessed grey card beside a solid black one is what made these two look switched off. */ background:var(--bg-2);border:1px solid var(--line-2); border-radius:var(--radius);padding:26px 24px; } /* The featured card is near-black, as in the mock. It is the only dark card on a light section, which is what "popular" has to look like without inventing a second accent. */ .plan-hl{ /* Lighter status tints for the dark card: --ok and --bad are tuned for white and go muddy on near-black. Scoped, so nothing else sees them. */ --ok:var(--ok-on-dark); --bad:var(--bad-on-dark); /* --accent only. NOT --accent-deep: the «popular» badge is a child of this card but it straddles the top edge and is painted on the WHITE section behind it, so it needs the light-surface accent. Re-pointing --accent-deep here turned it into pale blue on white. */ --accent:var(--accent-on-dark); position:relative; background:var(--ink);border-color:var(--ink);color:rgba(255,255,255,.82); box-shadow:0 24px 50px -28px rgba(var(--ink-rgb),.6); } .plan-badge{ position:absolute;top:-13px;left:50%;transform:translateX(-50%); background:var(--accent-deep);color:#fff;white-space:nowrap; border-radius:var(--radius-pill);padding:5px 14px; font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; } .plan-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px} .plan-name{margin:0;font-size:19px;font-weight:800;letter-spacing:-.02em} .plan-hl .plan-name{color:#fff} .plan-for{ flex:none;background:var(--bg-3);color:var(--ink-2); border-radius:var(--radius-pill);padding:4px 10px; /* 12px, the same floor the uppercase labels have. It was the last thing on the page under it, and on a phone 11.5px is where a badge stops being readable at arm's length. */ font-size:12px;font-weight:600;white-space:nowrap; } .plan-hl .plan-for{background:rgba(255,255,255,.14);color:#fff} .plan-desc{margin:0 0 18px;font-size:13.5px;line-height:1.5;color:var(--muted);min-height:2.9em} .plan-hl .plan-desc{color:rgba(255,255,255,.66)} .plan-price{margin:0 0 4px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .plan-price b{font-size:40px;font-weight:800;letter-spacing:-.04em;color:var(--ink);line-height:1} .plan-hl .plan-price b{color:#fff} /* The slash is punctuation, so it lives in CSS rather than in three translations that would each have to remember it. */ .plan-price span{font-size:14px;color:var(--muted)} .plan-price span::before{content:"/ "} .plan-hl .plan-price span{color:rgba(255,255,255,.6)} /* The per-month figure is the number that makes 2490 zl feel payable. */ .plan-permonth{margin:0 0 20px;font-size:12.5px;font-weight:600;color:var(--accent-deep)} .plan-hl .plan-permonth{color:var(--accent)} .plan-cta{ display:flex;align-items:center;justify-content:center;gap:8px; background:var(--cta);color:var(--cta-ink); padding:13px 18px;border-radius:var(--radius-pill); font-weight:600;font-size:14.5px;text-decoration:none;text-align:center; transition:opacity .15s, transform .15s; } .plan-cta::after{content:"→";font-size:15px;line-height:1} .plan-cta:hover{opacity:.88;transform:translateY(-1px)} .plan-hl .plan-cta{background:#fff;color:var(--ink)} /* PREMIUM. Its copy runs at full strength - the muted description and the grey card together read as "unavailable" rather than "the expensive one" - and its CTA is an OUTLINE of the same near-black instead of a third filled button, so the eye still lands on the featured card first. Colour only: the card keeps every metric the other two have. */ .plan-premium .plan-desc{color:var(--ink-2)} .plan-premium .plan-feats li{color:var(--ink)} .plan-premium .plan-price span{color:var(--ink-2)} .plan-premium .plan-cta{ background:transparent;color:var(--ink); border:1px solid var(--ink); padding:12px 18px; /* the border eats a pixel top and bottom */ } .plan-premium .plan-cta:hover{background:var(--ink);color:var(--cta-ink);opacity:1} .plan-feats-h{ margin:22px 0 12px;font-size:12px;font-weight:700; letter-spacing:.12em;text-transform:uppercase;color:var(--muted); } /* 15px, not the 11 it started at: nine rows at 11px packed into one block that read as a wall rather than a list. */ .plan-feats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:15px;flex:1} .plan-feats li{ display:flex;align-items:center;gap:10px; font-size:14.5px;line-height:1.4;color:var(--ink-2); } .plan-hl .plan-feats li{color:rgba(255,255,255,.88)} /* A tick for what a plan includes and a grey EM DASH for what it does not. It was a red ✕, which made a tariff card look like a list of failures: red is an error colour, and nothing is wrong with a cheaper plan not carrying a feature. The red ✕ survives in exactly one place - the «without a subscription» column in #why - where being alarming is the point. Green is still a STATUS, the only thing --ok is ever allowed to be. The dark featured card re-points the tints (see .plan-hl) the way .beat re-points --accent-deep: #1f7a4d on near-black is unreadable. */ .plan-feats i{ flex:none;width:16px;text-align:center; font-style:normal;font-size:15px;font-weight:700;line-height:1.35; color:var(--ok); } .plan-feats i.y::before{content:"✓"} /* The same red ✕ (U+2715) the «без подписки» column uses, at the client's request — it was a grey em dash for a while, on the argument that red is an error colour and nothing is wrong with a cheaper tariff not carrying a feature. Same glyph and same token as #why, so the two sections cannot drift apart. The ROW text stays muted: the cross marks the absence, the muted line keeps a cheaper card from reading as a list of failures. --bad is re-pointed on .plan-hl, so the dark card gets the lighter #ff9a92 tint automatically. */ .plan-feats i.n::before{content:"✕"} .plan-feats i.n{color:var(--bad);font-weight:700} .plan-feats li.off{color:var(--muted)} .plan-hl .plan-feats li.off{color:rgba(255,255,255,.42)} /* The per-plan value that used to live in a table cell: "1", "extended limit", "basic". */ .feat-tag{ margin-left:auto;flex:none;font-style:normal; background:var(--bg-3);color:var(--ink-2); border-radius:var(--radius-pill);padding:3px 9px; font-size:11px;font-weight:600;white-space:nowrap; } .plan-hl .feat-tag{background:rgba(255,255,255,.14);color:#fff} /* ============================== EDITORIAL BEAT ============================== The one dark section on a light page. That means the accent has to flip: --accent-deep (#2f4a73) is the READABLE accent on white and is nearly invisible on near-black, while --accent-on-dark is the reverse. One scoping rule re-points it for everything inside, so no rule below has to know which surface it is on. This is the dual-accent machinery CLAUDE.md warns about — a third dark section joins this selector rather than hand-editing colours. */ .beat{ --accent:var(--accent-on-dark); --accent-rgb:var(--accent-on-dark-rgb); --accent-deep:var(--accent-on-dark); background:var(--bg-dark); color:var(--ink-on-dark); overflow:hidden; padding:clamp(44px,5.5vw,72px) 0; } .beat .wrap{display:flex;flex-direction:column;gap:clamp(18px,2.6vw,30px)} .beat-kicker{ margin:0;display:flex;align-items:center;gap:10px; font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:rgba(var(--ink-on-dark-rgb),.62); } .beat-kicker .arr{color:var(--accent)} /* --- the stage: marquee word, column centred on top --- */ .beat-stage{position:relative;display:grid;place-items:center;min-height:clamp(220px,34vw,440px)} /* The word scrolls. Four identical copies sit on one track; translating the track by exactly -50% lands copy 3 where copy 1 started, so the loop has no seam. Sized so a WHOLE word is legible at any width — oversizing it was what made the first cut read as letter soup. */ .beat-word{ position:absolute;inset:0; display:flex;align-items:center; overflow:hidden;pointer-events:none;user-select:none; /* IN FRONT of the column, and translucent — so the word reads as frosted glass laid over the marble and you can still see the carving through it. Behind the column it just occluded, which is not what the reference does. The opacity is what does the work: over the black ground the grey still reads, over the lit marble it becomes a haze. */ z-index:2; /* The letters are near-WHITE on purpose. Mid-grey letters over lit marble can only ever read as a shadow falling on the stone — nothing is darker than the stone except shadow. Near white at partial opacity washes the marble brighter instead, so the letterforms come forward and stay readable across the column. Over the black ground the same fill simply reads as a bright grey. Two knobs: this opacity is how much marble shows through; the gradient on .beat-word-track span is how bright the letters start. */ opacity:.72; /* SCREEN is what makes the word read over the marble. Normal compositing paints a grey letter at 72% onto lit stone, and grey on bright stone can only ever look like a shadow falling across it — that is why this got harder to read once the column arrived. Screen can only ever lighten: over the black ground screen(black, letter) IS the letter, so the part of the marquee off the image is pixel-identical to before, while over the marble the same letter washes the stone brighter and the letterforms come forward. This blends against whatever is painted below it in the nearest isolation group — the column and the section's background. Give .beat-stage or .beat an `isolation`, a `filter`, a `transform` or an opacity below 1 and the group changes under it and the effect quietly dies. */ mix-blend-mode:screen; /* fades the ends into the background instead of chopping them */ -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); } .beat-word-track{ display:flex;width:max-content; animation:beatScroll 34s linear infinite; } .beat-word-track span{ /* the gap is padding on each copy, not a flex gap — the track is translated by exactly -50%, so every repeated unit has to be identical in width for the loop to be seamless */ padding-right:.26em; font-size:clamp(46px,10.5vw,150px);font-weight:800;letter-spacing:-.045em;line-height:.95; background:linear-gradient(180deg,#ffffff 0%,#aeb4be 100%); -webkit-background-clip:text;background-clip:text; color:transparent; } @keyframes beatScroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} } .beat-object{ position:relative;z-index:1; /* under .beat-word, which is z-index:2 */ /* The column is the subject, not an ornament — in the reference it is roughly a third of the frame. Sized in vw so it holds that proportion at any width. */ /* Width is the only thing that grew. The crop box height and the stage below are deliberately unchanged, so a wider column fills the same vertical band rather than making the whole section taller. The floor matters on phones, where a small column left the section looking like an accident. */ width:clamp(240px,42vw,570px); /* Cropped, like the reference: capital and upper shaft, with the column running off the bottom. The box is shorter than the image, overflow clips it, and the mask dissolves the cut into the background rather than leaving a hard horizontal edge. */ height:clamp(200px,32vw,420px); overflow:hidden; -webkit-mask-image:linear-gradient(180deg,#000 74%,transparent 99%); mask-image:linear-gradient(180deg,#000 74%,transparent 99%); } .pillar{ display:block;width:100%;height:auto; /* the engraving is pure white on transparent; a faint glow seats it on the black */ }/* --- the labels pinned around the frame --- */ .beat-meta{ display:grid;gap:26px; border-top:1px solid rgba(255,255,255,.14); padding-top:clamp(22px,3vw,32px); } .beat-stat b{display:block;font-size:30px;font-weight:800;letter-spacing:-.03em;color:#fff;line-height:1} .beat-stat span{display:block;margin-top:5px;font-size:13.5px;color:rgba(var(--ink-on-dark-rgb),.6);max-width:22ch} .beat-copy h2{ margin:0 0 10px;color:#fff; font-size:clamp(22px,2.6vw,32px);line-height:1.15;letter-spacing:-.025em; } .beat-copy p{margin:0;font-size:15.5px;color:rgba(var(--ink-on-dark-rgb),.66);max-width:48ch} .beat-aside{ margin:0 0 14px; font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:rgba(var(--ink-on-dark-rgb),.5);max-width:20ch; } .beat-cta{ /* 174-184px across the three languages; the floor holds it still. */ min-width:200px; display:inline-flex;align-items:center;justify-content:center;gap:10px; background:#fff;color:var(--bg-dark); padding:13px 24px;border-radius:var(--radius-pill); font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap; transition:transform .15s ease, box-shadow .15s ease; } .beat-cta:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(0,0,0,.45)} .beat-cta .arr{font-size:15px} /* ============================== FAQ ============================== */ /* The heading and the column are centred; the question and answer text inside each item stays left-aligned, because centred body copy is measurably harder to read. */ .faq .eyebrow, .faq h2{text-align:center} .faq-list{ display:flex;flex-direction:column;gap:10px; max-width:820px;margin:0 auto; } /* The FAQ is the only section with no .sec-sub under its heading, so it was left with just the h2's 12px where every other section gets 12 + 36. The adjacent-sibling selector puts that air back ONLY when the list follows the heading directly — add a sub-paragraph later and this rule stops applying instead of stacking on top of it. */ .faq h2 + .faq-list{margin-top:clamp(26px,3.6vw,40px)} .faq-item{ background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-sm); padding:0 20px; transition:border-color .2s ease, box-shadow .2s ease, background .2s ease; } .faq-item:hover{border-color:var(--line-2)} .faq-item[open]{ border-color:var(--accent); box-shadow:0 8px 26px rgba(var(--accent-rgb),.34); } .faq-item summary{ list-style:none;cursor:pointer; padding:18px 34px 18px 0;position:relative; font-size:16px;font-weight:600;color:var(--ink); transition:color .15s ease; } .faq-item summary::-webkit-details-marker{display:none} .faq-item summary:hover{color:var(--accent-deep)} /* One glyph, rotated — a "+" turned 135deg reads as a close "x", and unlike swapping content:"+" for a minus it can actually be transitioned. */ .faq-item summary::after{ content:"+"; position:absolute;right:4px;top:50%; transform:translateY(-50%) rotate(0deg); font-size:22px;font-weight:400;color:var(--muted);line-height:1; transition:transform .3s cubic-bezier(.4,0,.2,1), color .2s ease; } .faq-item[open] summary::after{ transform:translateY(-50%) rotate(135deg); color:var(--accent-deep); } .faq-item p{margin:0;padding:0 0 20px;font-size:15px;color:var(--muted);max-width:68ch} /* The answer fades up whenever the item opens. This works everywhere, including the browsers that cannot animate the disclosure height itself. */ .faq-item[open] > p{animation:faqIn .34s ease both} @keyframes faqIn{ from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} } /* Progressive enhancement: where ::details-content exists (Chromium 131+), the panel also animates its HEIGHT open and closed. Needs interpolate-size on :root for the auto keyword to be interpolable. Everywhere else this block is simply skipped and the fade above stands. */ @supports selector(::details-content){ .faq-item::details-content{ block-size:0; overflow:hidden; transition:block-size .34s cubic-bezier(.4,0,.2,1), content-visibility .34s allow-discrete; } .faq-item[open]::details-content{block-size:auto} } /* ============================== FORM ============================== */ /* DARK, and the THIRD dark section after the hero and the beat — to the client's mock, which puts this one on a deep blue wash rather than on the page tone. It earns it: this is the section the whole page points at, and a dark band under the white cards of #plans makes the form card the brightest object on the screen when you reach it. It also fixes the rhythm rather than breaking it — white · DARK · grey · white — so the hairline the FAQ used to need is gone with it. The glow is our accent, not the mock's navy-and-magenta: the whole point of the palette pass was that the page stopped mixing hues, and a magenta corner would put a fourth one back. Two soft radials on near-black, the big one behind the copy column where the mock has it. */ .form-section{ position:relative;isolation:isolate;overflow:hidden; background:var(--bg-dark); color:rgba(var(--ink-on-dark-rgb),.86); } .form-section::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; /* The wash is --accent-deep (#2f4a73), not --accent-on-dark. The pale on-dark accent is a TEXT colour: spread thin over near-black it turns blue-GREY, which is what the first two attempts looked like. The deep navy is already a page colour - the «popular» badge and the tariff per-month figures use it - so the section reads as blue without a new hue entering the palette. The pale one comes back on top, small, as the highlight core. */ background: radial-gradient(58% 62% at 26% 26%, rgba(var(--accent-on-dark-rgb),.18), transparent 70%), radial-gradient(96% 100% at 24% 28%, rgba(var(--accent-deep-rgb),.92), transparent 68%), radial-gradient(70% 70% at 0% 100%, rgba(var(--accent-deep-rgb),.55), transparent 64%), radial-gradient(82% 62% at 98% 0%, rgba(var(--accent-deep-rgb),.48), transparent 62%), linear-gradient(170deg, rgba(var(--accent-deep-rgb),.38), rgba(var(--accent-deep-rgb),.12) 66%, transparent); } /* THE PHOTOGRAPH, desktop only. An advocate's desk at night - folder and pen in the lower-left, the legal shelf dissolving behind - generated to brief, defocused throughout (which is why 1920px of it is 30KB). It loads from 980px up and nowhere else, on purpose. Below that the section stacks to 390x1383 - portrait - and the white card covers 350x936 of it, so a 2:1 landscape photo would crop to a meaningless vertical sliver behind a card nobody can see past. Phones keep the plain gradient and download nothing. `left center`, not `center`: at 1280 the image is taller than the box, so `cover` scales by HEIGHT and crops the sides - centred, that cuts the folder off at the left edge, which is the one thing in the frame worth showing. Anchored left it survives at every width. The gradient above becomes the scrim rather than an extra layer: the near-black radial keeps the rail's corner readable, and the navy linear pulls the leather's warmth back towards the page's hue. */ @media (min-width:980px){ .form-section{--form-shot:url("/images/form-bg-8996aaf4de440264af261fce4962a8ef.webp")} .form-section::before{ background: radial-gradient(86% 94% at 18% 20%, rgba(var(--bg-dark-rgb),.95), rgba(var(--bg-dark-rgb),.42) 56%, transparent 76%), linear-gradient(150deg, rgba(var(--accent-deep-rgb),.50), rgba(var(--accent-deep-rgb),.24) 58%, rgba(var(--bg-dark-rgb),.60)), var(--form-shot) left center / cover no-repeat; } } /* The rail flips to the dark surface; the card does NOT - it stays the white panel. Note this section deliberately does NOT re-point --accent-deep the way .hero and .beat do. The white card lives inside it, and --accent-deep is what paints the chosen tariff card's border and name on that white ground; re-pointing the token would wash it out. Same trap as the «popular» badge on .plan-hl: scope the colours to the elements that are actually on the dark surface. */ .form-section h2{color:#fff} /* --------------------------------------------------------------------------------------- SPLIT, to the client's mock: the pitch on the left, the card on the right. The card is the wider column - it is the thing being used, the rail is the thing being read - and the two are centred against each other rather than top-aligned, because the rail is shorter. Stacks below 980px: two columns of ~420px put the +48 pill under the number and wrapped every label in the card. --------------------------------------------------------------- */ .form-split{display:grid;gap:34px} @media (min-width:980px){ .form-split{ grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); gap:clamp(40px,5vw,72px); /* start, not center: the card is much taller than the rail, and centring left the rail floating in the middle of the section with 250px of empty grey above it. Top-aligned, the two read as one block with the heading and the card title on the same line. */ align-items:start; } .form-aside{padding-top:6px} } .form-aside h2{margin:0 0 14px} /* --muted (#5f6673) is a LIGHT-surface colour: on this section's blue it measured 1.8:1. The rail sits on the dark ground, so it takes the on-dark ink. */ .form-aside .sub{margin:0 0 22px;color:rgba(var(--ink-on-dark-rgb),.82);font-size:17px;max-width:38ch} /* The three chips are the #situations titles, so the two sections cannot drift apart. */ .form-chips{ list-style:none;margin:0 0 24px;padding:0; display:flex;flex-wrap:wrap;gap:8px; } .form-chips li{ display:flex;align-items:center;gap:8px; background:rgba(255,255,255,.08);border:1px solid var(--line-on-dark); border-radius:var(--radius-pill);padding:7px 14px; font-size:13.5px;font-weight:600;color:rgba(var(--ink-on-dark-rgb),.92); } .form-chips li::before{ content:"";width:6px;height:6px;border-radius:50%; background:var(--accent-on-dark);flex:none; } /* Renders only once LANDING_TG / LANDING_WA are set. */ .form-direct{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:24px} .form-direct > span{font-size:14px;color:rgba(var(--ink-on-dark-rgb),.6)} .form-direct .btn-m{ display:inline-flex;align-items:center;gap:8px; background:rgba(255,255,255,.08);border:1px solid var(--line-on-dark); border-radius:var(--radius-pill);padding:9px 16px; color:#fff;font-size:14px;font-weight:600;text-decoration:none; transition:border-color .15s, transform .15s; } .form-direct .btn-m:hover{border-color:rgba(255,255,255,.5);transform:translateY(-1px)} .form-where{display:flex;align-items:flex-start;gap:10px;margin:0} .form-where svg{width:19px;height:19px;flex:none;color:var(--accent-on-dark);margin-top:1px} .form-where b{display:block;font-size:14.5px;font-weight:600;color:#fff} /* .75, not .6: measured against the BRIGHTEST pixel of the gradient behind it - (52,76,110) - .6 came out at 3.97:1 and this is 5.1. The DOM contrast sweep cannot see this, because the paint comes from a ::before gradient and the walker finds the section's flat background instead; gradients have to be checked against pixels. */ .form-where small{display:block;margin-top:1px;font-size:13px;color:rgba(var(--ink-on-dark-rgb),.75)} /* ---- the card ---- */ .form-card{min-width:0} #leadForm{ background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius); padding:28px; /* Deeper than the old one: a 5%-ink shadow is invisible on a dark ground, and the card needs to sit ON the section rather than be pasted into it. */ box-shadow:0 28px 60px -20px rgba(0,0,0,.55); } .form-card-h{margin:0 0 6px;font-size:22px;font-weight:800;letter-spacing:-.02em} /* The card's own promise line, from the mock. The rail's .sub no longer says the same thing: two near-identical sentences 60px apart on desktop read as a bug, so the rail keeps the product line and the card keeps the "what happens next" one. */ .form-card-sub{margin:0 0 20px;font-size:14.5px;color:var(--muted);line-height:1.5} /* Name + phone share a row - the one idea worth taking from the mock. It collapses at 620px, not at the usual 760 breakpoint, because what runs out first is not the viewport but the HALF of the card: under ~300px a half cannot hold the country pill and the number side by side. Tariff and email used to pair here too; the tariff picker is full-width now, so email sits on its own row. */ .field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px} .field-row > .field{margin-bottom:0;min-width:0} @media (max-width:620px){ .field-row{grid-template-columns:1fr;gap:0;margin-bottom:0} .field-row > .field{margin-bottom:18px} } .field{margin-bottom:18px} label.l{display:block;margin-bottom:7px;font-size:14px;font-weight:600;color:var(--ink)} .req{color:var(--bad)} .opt{font-weight:400;font-size:12px;color:var(--muted)} .ctrl{ width:100%; /* White fields with one quiet border. They used to be a grey fill inside a white card, which read as pre-filled or read-only. */ background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--radius-sm); padding:12px 14px; color:var(--ink); /* 16px is a HARD floor, not a preference: iOS Safari zooms the whole page when a focused input is smaller than that, and never zooms back out. This was 15px. */ font-family:inherit;font-size:16px; transition:border-color .15s, background .15s, box-shadow .15s; } .ctrl::placeholder{color:var(--placeholder)} /* A DARK focus ring, not an accent one: the fields are white now, and the pale periwinkle halo on white was barely a state change. This is the same near-black as the submit button. */ .ctrl:focus{ outline:none; background:var(--bg-2); border-color:var(--ink); box-shadow:0 0 0 3px rgba(var(--ink-rgb),.14); } .ctrl.er{border-color:var(--bad)} /* --- radio chips: three EQUAL segments across the card, as in the mock --- Not pills sized to their own labels. With two-column rows above and below, a left-aligned pill row left the right third of the card empty and the card read as ragged. The selected one is a FILLED near-black pill - the same --cta the submit button uses, so "chosen" and "the action" speak with one colour. `contactMethod` has three options in every language, and three across fits down to 360px. */ .radios{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .chip{cursor:pointer;display:block} .chip input{position:absolute;opacity:0;width:0;height:0} .chip span{ display:flex;align-items:center;justify-content:center; min-height:42px;text-align:center; border:1px solid var(--line-2);border-radius:var(--radius-pill); background:var(--bg-2);color:var(--ink-2); padding:8px 10px;font-size:14px; transition:border-color .15s, background .15s, color .15s; } .chip:hover span{border-color:var(--accent-deep);color:var(--ink)} /* The chosen contact method is a FILLED near-black pill - the same --cta the submit button uses, so "selected" and "the action" speak with one colour. */ .chip input:checked + span{ background:var(--cta);border-color:var(--cta);color:var(--cta-ink);font-weight:600; } .chip input:focus-visible + span{box-shadow:0 0 0 3px rgba(var(--ink-rgb),.2)} /* --- the tariff picker: three cards, to the client's mock (this was a