/* * Revia Homes - design tokens. * * THE single source of every colour, type step and spacing value in this * theme (FEJLESZTESI-TERV.md 9: "Token soha nem masolt"). Every other * stylesheet reads from here with var(); a literal colour anywhere else is a * bug, and there is a check for it in docs/designrendszer.md. * * The names come from the handoff (design_handoff_revia_homes/README.md 4) and * are kept verbatim, prefixed with --rh-, so a value can be traced back to the * table it came from without a translation step. * * Colours that the handoff writes as rgba() - the header's translucent white, * the hero shadow, the before/after badges - are tokens too. They would * otherwise be literal colours living in a layout rule, which is exactly what * the rule above forbids. * * @package Revia_Homes */ /* -------------------------------------------------------------------------- * Fonts. Self-hosted (terv 10: GDPR - the Google CDN would send the visitor's * IP out of the EU), variable, and split into the two subsets that matter: * latin plus latin-ext. latin-ext is not optional here - o-double-acute (U+0151) * and u-double-acute (U+0171), the two letters Hungarian needs and almost * nothing else has, live in it. * ----------------------------------------------------------------------- */ @font-face { font-family: "Jost"; font-style: normal; font-weight: 200 500; font-display: swap; src: url("../fonts/jost-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Jost"; font-style: normal; font-weight: 200 500; font-display: swap; src: url("../fonts/jost-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Karla"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("../fonts/karla-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Karla"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("../fonts/karla-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ---- 4.1 Colours -------------------------------------------------- */ /* Ink - dark surfaces and primary text. */ --rh-ink: #23272B; --rh-ink-deep: #1B1E21; --rh-ink-soft: #2A2E33; --rh-ink-line: #34383D; --rh-ink-line-2: #2E3236; /* * Text. * * --rh-muted is the palest grey that reads on WHITE, and only on white. * This comment used to say "on light", and sand is a light surface, so the * wording licensed the one case that fails: measured, #6B7075 is 5.00:1 on * --rh-paper and 4.40:1 on --rh-sand - below AA. What a surface should use * for its quiet step is --rh-muted-text, below. */ --rh-body: #4A4F55; --rh-muted: #6B7075; --rh-muted-dark: #8A9096; --rh-body-dark: #B9BDC1; /* * The quiet text step, as a SURFACE token - the same shape as * --rh-gold-text further down, on the grey scale instead of the gold one. * * Why it has to be the surface's decision and not each component's. * Measured, the same #6B7075 on the four surfaces this theme has: * * on --rh-paper 5.00 AA * on --rh-sand 4.40 BELOW AA * on --rh-ink 3.01 BELOW AA * on --rh-ink-deep 3.35 BELOW AA * * Five rules read it as text (.rh-facts__label, .rh-progress__head, * .rh-price__label, .rh-price__value--sold, .rh-price__note), and every one * of them is a component that does NOT paint its own background - so the * surface underneath is whatever the page put there. Answering per class * would mean five selectors per surface, and a sixth component in phase 4 * would need someone to remember. The surface knows; the component does * not. * * WHAT SAND STEPS DOWN TO, and why it is not a new colour. There is no * grey between --rh-body and --rh-muted in the handoff, and the nearest * invented one that clears 4.5 on sand is #696E73 at 4.527 - a rounding * error's worth of headroom, which is the same reason decision D did not * put the nav breakpoint on its bare threshold. So sand takes the step it * already has: --rh-body, 7.27:1. The cost is stated rather than hidden - * ON SAND THE QUIET STEP AND THE BODY STEP ARE THE SAME COLOUR, and the * label stays quieter only through its size, weight and tracking. The * alternative was a 26th hex with no row in the handoff to trace it back * to, which is what the head of this file promises not to do. * * Dark surfaces take --rh-muted-dark, which is the handoff's own pair for * a label on a dark fill (4.1, "Cimke sotet hatteren"): 4.66 on --rh-ink * and 5.19 on --rh-ink-deep. * * THE OTHER TWO STEPS ARE HERE FOR THE SAME REASON, and the theme now says * the whole grey scale the way it already said the gold one. Swept from the * CSSOM BEFORE this change: 129 rules, 63 `color` declarations in the * theme's own three stylesheets, 36 of them a colour that clears 4.5:1 on * --rh-paper and fails it on --rh-ink. (After: 125 rules - four became * redundant and went - and 60 declarations, 37 of them.) Measured in situ * on every surface the theme has, FOURTEEN of the 36 are unreadable on a * dark one: * * --rh-strong-text .rh-title .rh-tile__title .rh-facts__value * .rh-price__value .rh-grid__title * --rh-body-text .rh-lead .rh-chip .rh-tile__text .rh-grid__desc * --rh-muted-text the five above * * .rh-title and .rh-lead were on the list as COUNTER-examples - they have * a dark pair, .rh-section--ink / .rh-on-dark. Measured, that pair covers * two of the theme's four dark surfaces: inside a .rh-grid--ink cell the * title came out 1.00:1 and the lead 1.82, and inside .rh-footer 1.11 and * 2.03. A pair is keyed to the surfaces someone listed; a token is keyed * to the surface. .rh-grid__title and .rh-grid__desc had the same shape in * the other direction - their pair is keyed to the GRID's own modifier, so * a pale grid standing in a dark section measured 1.00 and 1.82. * * WHAT MUST NOT READ THESE. A component that paints its own LIGHT surface * keeps the concrete token (--rh-ink, --rh-body, --rh-muted): its * foreground and its background travel together, and reading the surface * token would make .rh-btn--paper --rh-paper-warm on white - 1.09:1, the * J1 fault, brought back by the fix meant to remove it. Measured after the * move, all six T6 cases unchanged: 1.09 / 15.04 / 4.47 / 4.87 / 15.04 / * 15.04. */ --rh-strong-text: var(--rh-ink); --rh-body-text: var(--rh-body); --rh-muted-text: var(--rh-muted); /* Paper and sand - light surfaces. */ --rh-paper: #FFFFFF; --rh-paper-warm: #F7F5F2; --rh-paper-2: #F7F6F3; --rh-sand: #F2F0ED; --rh-sand-2: #E4E1DC; --rh-sand-3: #E8E5E0; /* Hairlines. */ --rh-line: #E7E4DF; --rh-line-2: #DFDBD5; --rh-line-3: #E2DFDA; --rh-line-4: #EFECE7; --rh-line-5: #EDEAE5; /* * Gold. The contrast rule from the handoff, restated because it is the one * token pair that is easy to get wrong: white text may sit on --rh-gold-ink * (4.84:1) or darker, NEVER on --rh-gold, which is a line and bar-fill * colour only. */ --rh-gold: #B8894A; --rh-gold-ink: #96682E; --rh-gold-light: #CE9E5F; --rh-gold-hover: #7D5624; --rh-gold-rule: #D5A65D; /* * Gold used as TEXT, which is a different question from gold used as a * fill. A fill carries its own foreground with it, so the gold stays the * same wherever it is painted; gold LETTERING has to clear 4.5:1 against * whatever surface it happens to land on, and it does not, on two of the * three surfaces this theme has: * * --rh-gold-ink on --rh-paper 4.87 AA * --rh-gold-ink on --rh-sand 4.28 BELOW AA * --rh-gold-ink on --rh-ink 3.09 BELOW AA * * So the surface picks the step, and this is the token it picks. Sections * that paint a surface redeclare it (assets/css/base.css), and everything * that draws gold lettering reads it instead of --rh-gold-ink. * * Why a token and not one rule per component. That was the first answer - * .rh-section--sand .rh-eyebrow - and it held for exactly as long as the * eyebrow was the only gold text. Measured on a sand section: the tile * eyebrow and the progress figure both came out at 4.28, and a plain * on hover at 4.28 as well. The last one is why the class-name answer * cannot be finished: a:hover is not a class, so there is no name to add * to the list. Inheritance reaches all of them at once, and reaches * whatever phase 4 adds without anyone remembering to. * * NOT for the focus ring (--rh-focus): a non-text control indicator is * held to 3:1 (WCAG 1.4.11), which 4.28 already clears. Different * threshold, different token. */ --rh-gold-text: var(--rh-gold-ink); /* Composite colours the handoff spells as rgba(). */ --rh-header-bg: rgba(255, 255, 255, .94); --rh-header-bg-sub: rgba(255, 255, 255, .95); --rh-hero-shadow: rgba(12, 14, 16, .55); --rh-badge-before: rgba(35, 39, 43, .86); /* * The gallery caption's plate (README 7.3/3 and 8.3/3, phase 5) - the ink * at 88%. One of the two colours in the whole of README 7 and 8 that was * not already a token; the other is #CFCBC5, and its answer is in * assets/css/sub.css at .rh-timeline__dot--next. * * It is a token for the reason the block above it gives: an rgba colour * left as a literal is a colour value living in a layout rule, which is * what the plan forbids. The alpha stays - unlike the "Utána" badge, this * plate is meant to let the picture through, and the measurement says it * can afford to: white on the composite over the worst pixel of the * photographs in the gallery is in the phase report, measured FROM PIXELS * because the surface underneath is a photograph (designrendszer 11, * trap 7). */ --rh-caption-bg: rgba(35, 39, 43, .88); /* * DELIBERATE DEVIATION, and the handoff is what asks for it - the same * shape of conflict as the gold button's hover. 7.3 spells this badge * rgba(150,104,46,.95), but 4.1 states in bold that white text may only sit * on #96682E or darker. At 95% over a light picture the composite is * LIGHTER than #96682E: measured 4.42:1 against white, below AA for its * 11px type, where the flat colour is 4.87:1. * * So the alpha goes and the handoff's own gold stays. Five percent of * translucency is not a visible effect; being readable over a pale * photograph is. The "Elotte" badge keeps its .86, because at 9.62:1 it has * the room to spare. */ --rh-badge-after: var(--rh-gold-ink); --rh-outline-on-dark: rgba(255, 255, 255, .75); --rh-handle-shadow: rgba(0, 0, 0, .24); --rh-focus: var(--rh-gold-ink); /* * THE HERO'S TWO VEILS (handoff README 6.1, phase 4). * * Both are needed and the handoff says why: "Mindket fatyol kell: a * hajszalvekony szokep csak igy er el olvashato kontrasztot a vilagos * ablak-reszek folott." The linear one darkens top and bottom; the radial * one sits behind the wordmark. * * The COLOURS are tokens, the gradients' GEOMETRY is not: the angle, the * stop positions and the ellipse belong to one component and nothing else * reads them (assets/css/home.css). Same rule as everywhere else in this * file - a value is a token when something outside the component reads it, * and these seven are read by the measurement in docs/designrendszer.md * section 11 as well as by the hero. * * WHY THESE ARE NOT HEX. The base colours rgb(16,19,22) and rgb(12,14,16) * exist only as translucent film over a photograph - they are never painted * flat - so they are stated the way the handoff states them, as rgba(). The * declared-hex count of this file is therefore unchanged at 25. * * 🔴 IF THE HERO PHOTOGRAPH CHANGES, THESE HAVE TO BE RE-MEASURED. The * threshold is a property of the picture, not of the veil: README 4.1 says * so in its own words, and docs/designrendszer.md section 11 has the method * and the arithmetic. Raising the top stop is the lever. */ --rh-hero-veil-top: rgba(16, 19, 22, .88); --rh-hero-veil-upper: rgba(16, 19, 22, .66); --rh-hero-veil-lower: rgba(16, 19, 22, .58); --rh-hero-veil-bottom: rgba(16, 19, 22, .92); --rh-hero-glow-core: rgba(12, 14, 16, .6); --rh-hero-glow-mid: rgba(12, 14, 16, .28); --rh-hero-glow-edge: rgba(12, 14, 16, 0); /* The before/after handle's line carries its own, heavier shadow (6.5). */ --rh-ba-line-shadow: rgba(0, 0, 0, .28); /* ---- 4.2 Type ------------------------------------------------------ */ --rh-font-display: "Jost", "Helvetica Neue", Helvetica, Arial, sans-serif; --rh-font-body: "Karla", "Helvetica Neue", Helvetica, Arial, sans-serif; --rh-w-thin: 200; --rh-w-light: 300; --rh-w-regular: 400; --rh-w-medium: 500; --rh-w-semibold: 600; /* Each step is the handoff's own clamp(), name and all. */ --rh-t-hero-motto: clamp(11px, 1.5vw, 17px); --rh-t-hero-claim: clamp(14px, 1.5vw, 20px); --rh-t-eyebrow: clamp(13px, 1.15vw, 16px); --rh-t-h2: clamp(34px, 4.8vw, 62px); --rh-t-tile-eyebrow: clamp(15px, 1.3vw, 18px); --rh-t-tile-h3: clamp(26px, 3vw, 40px); --rh-t-sub-h2: clamp(27px, 3.4vw, 44px); --rh-t-p-tile: clamp(14px, 1.05vw, 15.5px); --rh-t-p-intro: clamp(15px, 1.2vw, 17px); --rh-t-fact-label: 11px; --rh-t-fact-value: clamp(15px, 1.3vw, 18px); --rh-t-price-tile: clamp(24px, 2.6vw, 34px); --rh-t-price-head: clamp(28px, 3.4vw, 44px); --rh-t-strip-value: clamp(17px, 1.7vw, 22px); --rh-t-nav: 12px; --rh-t-button: 12px; --rh-t-badge: 11px; --rh-t-chip: 12px; --rh-t-crumb: 12px; /* * The steps the handoff states outside its 4.2 table - in 5.1, 5.2 and 6.4. * They are type steps like any other, and leaving them as literals in the * component that happened to need them is exactly the copying the plan * forbids: the drawer and the footer would then each own half a scale. */ --rh-t-base: 16px; --rh-t-drawer: 15px; --rh-t-drawer-cta: 14px; --rh-t-footer-nav: 13px; --rh-t-note: 13px; --rh-t-grid-num: 30px; --rh-t-grid-title: clamp(18px, 1.6vw, 22px); --rh-t-grid-desc: 14.5px; /* * The front page's own steps (README 6.2, 6.3, 6.5, 6.6, 6.9) - phase 4. * Same rule as the eight above: a step the handoff states outside its 4.2 * table is still a step, and leaving it as a literal would give the hero * and the contact card half a scale each. * * Several of these repeat a number that is already here under another name * (13px is --rh-t-note and --rh-t-footer-nav; 12px is --rh-t-chip). That is * on purpose and it is how this file already works: a token names a ROLE in * the design, not a value, so the CTA button and a footnote can move apart * without either dragging the other with it. */ --rh-t-strip: clamp(11px, 1.2vw, 15px); --rh-t-p-about: clamp(15px, 1.15vw, 17px); --rh-t-p-support: 15px; --rh-t-point-num: clamp(14px, 1.2vw, 17px); --rh-t-point-title: clamp(19px, 1.7vw, 24px); --rh-t-point-desc: clamp(14.5px, 1.1vw, 16px); --rh-t-quote: clamp(17px, 1.7vw, 23px); --rh-t-ba-tab: 12px; --rh-t-ba-title: clamp(18px, 1.7vw, 23px); --rh-t-ba-stat: 26px; --rh-t-cta-btn: 13px; --rh-t-contact-label: 12px; --rh-t-contact-value: 17px; --rh-t-form-label: 11px; --rh-t-form-input: 16px; --rh-t-form-submit: 13px; /* * ---- The sub-pages' own steps (README 7.2, 7.3, 8.2, 8.3) - phase 5 ---- * * The same test as the two blocks above: a size the handoff states as part * of a component's spec is a token. Several repeat a number that is * already here under another name, and that is the rule this file has * followed since phase 3 - a token names a ROLE, not a value. * * --rh-t-crumb, --rh-t-price-head and --rh-t-strip-value were declared in * phase 3 for exactly these pages and had no reader until now. */ --rh-t-record-h1: clamp(30px, 4.2vw, 52px); --rh-t-record-meta: clamp(14px, 1.15vw, 16px); --rh-t-handover: clamp(17px, 1.6vw, 21px); --rh-t-caption: 12px; --rh-t-row-title: 17px; --rh-t-row-desc: 14px; --rh-t-row-state: 12px; --rh-t-room: 15px; --rh-t-room-total: 17px; --rh-t-card-title: 19px; --rh-t-card-meta: 14px; --rh-t-card-figure: 13px; --rh-t-related-h2: clamp(22px, 2.6vw, 32px); --rh-t-costs-h2: clamp(27px, 3.4vw, 40px); --rh-t-note-inline: 14px; --rh-t-cta-h2: clamp(24px, 3.2vw, 40px); --rh-ls-motto: .34em; --rh-ls-claim: .24em; --rh-ls-eyebrow: .28em; --rh-ls-tile-eyebrow: .22em; --rh-ls-fact-label: .18em; --rh-ls-nav: .16em; --rh-ls-button: .2em; --rh-ls-badge: .2em; --rh-ls-crumb: .14em; --rh-ls-drawer: .1em; --rh-ls-footer-nav: .12em; /* Phase 4 - the front page's own tracking (6.2, 6.3, 6.5, 6.6, 6.9). */ --rh-ls-point-num: .16em; --rh-ls-point-title: .02em; --rh-ls-quote: .04em; --rh-ls-cta-btn: .18em; --rh-ls-contact-label: .2em; --rh-ls-form-label: .2em; /* * ONE H2's tracking, and it is deliberately not all of them. * * README 6.3 gives letter-spacing:-.01em on the introduction's title. The * obvious reading is that every large heading has it - and that reading is * wrong: measured in the prototype, 1 of the 6 front-page H2s carries it * (Revia Homes.dc.html, the #bemutatkozas one), and the other five declare * no tracking at all. The two sub-page prototypes declare none on any * heading. So this is that heading's property, applied through * .rh-title--tight, and .rh-title keeps its default. */ /* The sub-pages (7.3, 8.3) - phase 5. */ --rh-ls-strip-label: .2em; --rh-ls-record-ref: .18em; --rh-ls-caption: .1em; --rh-ls-row-state: .14em; --rh-ls-step-num: .16em; --rh-ls-h2-tight: -.01em; --rh-lh-h2: 1.04; --rh-lh-tile-h3: 1.1; --rh-lh-sub-h2: 1.12; --rh-lh-p-tile: 1.7; --rh-lh-p-intro: 1.8; --rh-lh-claim: 1.85; /* ---- 4.3 Space and grid ------------------------------------------- */ --rh-max: 1280px; /* * --rh-max-listing: 1340px WAS HERE, AND PHASE 5 TOOK IT OUT - measured, * decision D4, 2026-09-15. * * Phase 3 declared it for the sub-page record templates, where README 7.3 * and 8.3 give 1340px, and no rule ever read it. Phase 5 is the only phase * that could have, and it measured the choice instead of taking it: * * at 1440 / 1920 / 2560 px, the record page's outer edge against the * FOOTER's, which is --rh-max 1280: 0,00 px * 1340: -30,00 px * and the breadcrumb against the HEADER's wordmark 1280: +72,00 (the gutter) * 1340: +42,00 * * 1340 puts the record page 30px outside the footer under it and starts the * breadcrumb 30px left of where every other page's first line starts - the * same small self-contradiction the header's own 1440 was folded into * --rh-max to avoid (docs/designrendszer.md point 9, twice). * * A token no rule can read is a claim about the design that is not true, so * it goes rather than staying as a comment. The number and the measurement * are in docs/fazis-5-2026-09-15.md; git has the line. */ /* * 1240px. Phase 3 called this --rh-max-contact, for the contact section it * was defined for and which did not exist yet. Phase 4 built the front page * and the same number turned out to belong to FOUR sections - 6.3 * Bemutatkozas, 6.4 Folyamat, 6.9 Kapcsolat - so the name was a description * of the first reader rather than of the measurement. Renamed while it * still had none: measured, zero rules read the old name. */ --rh-max-narrow: 1240px; --rh-max-ba: 1160px; --rh-gutter: clamp(22px, 5vw, 72px); --rh-gutter-header: clamp(18px, 4vw, 56px); --rh-gutter-hero: clamp(24px, 5vw, 56px); --rh-section-y: clamp(64px, 9vw, 132px); --rh-tile-y: clamp(26px, 3vw, 44px); --rh-tile-col-x: clamp(20px, 2.6vw, 40px); --rh-tile-gap: clamp(14px, 1.5vw, 20px); --rh-cell-y: clamp(26px, 2.6vw, 38px); --rh-cell-x: clamp(22px, 2.2vw, 32px); --rh-facts-gap: clamp(12px, 1.3vw, 20px); --rh-badge-top: clamp(20px, 2.4vw, 32px); --rh-header-h: clamp(64px, 7vw, 88px); --rh-footer-y: clamp(44px, 5vw, 72px); --rh-footer-y-end: clamp(28px, 3vw, 40px); /* * The measurements the handoff states as part of a COMPONENT's spec (4.2, * 5.1, 6.4, 6.6, 6.7, 6.8). They are tokens for the same reason the colours * are: phases 4 and 5 build four more places that need the same button * padding and the same column basis, and a copied number is a number that * drifts. * * What is deliberately NOT here: a component's own internal geometry that * the handoff never names and nothing else shares - the hamburger's 18px * bar, the 5px between them, the 3px focus offset. Those are literals, and * docs/designrendszer.md says so rather than pretending otherwise. */ --rh-btn-pad: 14px 26px; --rh-btn-pad-lg: 17px 30px; --rh-btn-pad-box: 12px 22px; --rh-chip-pad: 7px 12px; --rh-chip-pad-paper: 8px 13px; --rh-badge-pad: 9px 16px; /* * TWO DERIVED LITERALS DEPEND ON THIS NUMBER, AND NEITHER CAN REFERENCE IT. * * The band's two columns are `flex: 1 1 var(--rh-col-basis)` * (components.css, .rh-tile__media and .rh-tile__body), so they stack below * 2 x 420 = 840px of CONTENT width. Measured, on the running site, in both * scrollbar columns - last stacked / first two columns: * * with a classic scrollbar 949 / 950 (media 420.00px at 950 = this token) * real overlay scrollbar 933 / 934 * * Both derivatives take the LARGER of those two breaks, for two separate * reasons that happen to agree (docs/designrendszer.md section 6, rules 3 * and 4), and both therefore spell 949: * * assets/css/components.css @media (max-width: 949px) * the stacked band's side padding. The query * must sit ABOVE the break so the bad case is * "switched slightly early", never "late". * template-parts/tile.php 'sizes' => '(max-width: 949px) 90vw, ...' * the hint must never UNDERSTATE the picture, * so it takes the widest viewport at which the * image can still be 90vw. * * A MEDIA QUERY CANNOT READ A CUSTOM PROPERTY. That is a CSS limit, not a * choice, so unlike --rh-nav-breakpoint - which assets/js/site.js reads * mechanically, making the token the single source - these two are written * out and can only be kept in step by hand. * * IF 420 MOVES: re-measure the stacking break in BOTH columns (an overlay * scrollbar is Chrome --enable-features=OverlayScrollbar, singular), take * the larger of the two, and write THAT number into both places above. * Changing this token alone leaves the theme saying two numbers for one * break - exactly the state T9 removed, when the hint said 949 and the * query still said 900. */ --rh-col-basis: 420px; --rh-text-max: 520px; --rh-lead-max: 660px; --rh-facts-max: 560px; --rh-metric-max: 400px; --rh-grid-min: 240px; --rh-cell-min-h: 260px; --rh-progress-h: 3px; --rh-nav-underline: 4px; --rh-scroll-offset: 100px; --rh-chip-gap: 8px; --rh-metric-gap: 8px; --rh-tile-head-gap: 10px; --rh-facts-min: 120px; --rh-facts-cell-gap: 5px; --rh-price-pad-top: 4px; --rh-price-gap: 4px; --rh-price-label-top: 12px; --rh-sectionhead-gap: 24px; --rh-sectionhead-inner-gap: 16px; --rh-sectionhead-max: 640px; --rh-sectionhead-max-narrow: 620px; --rh-drawer-item-pad: 16px 0; --rh-drawer-cta-top: 18px; --rh-footer-rule-top: 22px; /* * The prototype's own header gap (Revia Homes.dc.html:43, gap: 20px). It * used to be 24px, and that was an invented number sitting in a file whose * whole job is to be traceable: README 5.1 gives no header gap, and every * other "gap" in it belongs to a different section (checked). The header of * this file promises the names come from the handoff verbatim; the value * has to come from there too. */ /* * ---- The front page's own measurements (README 6.1-6.9) - phase 4 ------- * * Same test as everywhere above: a number the handoff states as part of a * component's spec is a token, a number that is one component's internal * geometry and nothing else's is a literal. What stayed a literal here: the * hero's Ken Burns keyframe percentages, the veils' gradient stops and * ellipse, the handle's 46px circle and its two 5px/6px CSS triangles, the * 4/5 and 4/3 aspect ratios, and the 1px hairlines. */ --rh-hero-min-h: min(100svh, 900px); --rh-hero-top-y: clamp(112px, 13vw, 168px); --rh-hero-top-y-end: clamp(24px, 3vw, 40px); --rh-hero-gap: clamp(16px, 2vw, 26px); --rh-hero-bottom-y: clamp(28px, 4vw, 52px); --rh-hero-claim-gap: clamp(20px, 2.4vw, 30px); --rh-hero-claim-max: min(100%, 720px); --rh-hero-actions-gap: 14px; --rh-hero-rule-w: min(300px, 52vw); --rh-ken-duration: 26s; --rh-strip-y: clamp(20px, 2.4vw, 30px); --rh-strip-gap: clamp(14px, 2.4vw, 34px); --rh-strip-rule-h: 15px; --rh-about-col-min: 340px; --rh-about-gap: clamp(36px, 5vw, 80px); --rh-about-copy-gap: clamp(18px, 2vw, 28px); --rh-points-gap: 2px; --rh-points-top: 6px; --rh-point-y: 18px; --rh-point-gap: 18px; --rh-point-num-min: 32px; --rh-quote-pad: 18px 24px 6px 0; --rh-quote-max: 78%; --rh-quote-author-top: 10px; --rh-process-gap: clamp(36px, 4.5vw, 66px); --rh-process-intro-max: 340px; --rh-ba-gap: clamp(24px, 3vw, 40px); --rh-ba-tabs-gap: 10px; --rh-ba-tab-pad: 13px 22px; --rh-ba-min-h: 260px; --rh-ba-badge-inset: clamp(12px, 1.6vw, 22px); --rh-ba-handle-w: 46px; --rh-ba-line-w: 2px; --rh-ba-foot-gap: clamp(20px, 3vw, 48px); --rh-ba-caption-max: 540px; --rh-ba-caption-gap: 8px; --rh-ba-stats-gap: clamp(24px, 3vw, 44px); --rh-ba-stat-label-top: 6px; /* The split, and the two rails it may not pass (6.5). */ --rh-ba-pos: 50%; --rh-ba-min: 3; --rh-ba-max: 97; --rh-tiles-head-y-end: clamp(30px, 4vw, 56px); --rh-sectionhead-gap-col: clamp(16px, 2vw, 26px); --rh-ctaband-y: clamp(40px, 5vw, 80px); --rh-ctaband-y-end: var(--rh-section-y); --rh-ctaband-pad: clamp(26px, 3vw, 40px); --rh-ctaband-gap: 16px; --rh-btn-pad-cta: 15px 28px; --rh-contact-gap: clamp(36px, 5vw, 84px); --rh-contact-col-min: 320px; --rh-contact-copy-gap: clamp(20px, 2.4vw, 32px); --rh-contact-intro-max: 460px; --rh-contact-row-y: 18px; --rh-contact-row-gap: 16px; --rh-contact-rows-top: 8px; --rh-form-pad: clamp(24px, 3vw, 44px); --rh-form-gap: 18px; --rh-form-label-gap: 8px; --rh-form-input-y: 12px; --rh-form-submit-pad: 18px 28px; --rh-form-submit-top: 8px; /* * ---- The sub-pages' own measurements (README 7.2, 7.3, 8.2, 8.3) ------- * * Phase 5. What stayed a literal, by the same test as everywhere above - * one component's internal geometry with no reader outside it: the phase * dot's 9x9 square and its 1px ring, the 7x7 gold mark (already a literal * in components.css), the gallery's 4/3 and the card's 4/3 and 3/2 aspect * ratios, and the 1px hairlines. */ --rh-crumb-y: clamp(20px, 2.6vw, 32px); --rh-crumb-y-end: clamp(16px, 2vw, 22px); --rh-pagehead-y: clamp(40px, 6vw, 86px); --rh-pagehead-y-end: clamp(30px, 4vw, 56px); --rh-tiles-list-y: clamp(34px, 4.5vw, 64px); --rh-crumb-gap: 10px; --rh-recordhead-y-end: clamp(28px, 3.4vw, 44px); --rh-recordhead-gap: clamp(20px, 3vw, 40px); --rh-recordhead-col-gap: 12px; --rh-recordhead-side-gap: 14px; --rh-recordhead-col-min: min(100%, 300px); --rh-recordhead-side-min: min(100%, 280px); --rh-recordhead-actions-gap: 12px; --rh-recordhead-progress-max: 340px; --rh-btn-pad-head: 16px 28px; --rh-gallery-y-end: clamp(40px, 5vw, 72px); --rh-gallery-gap: 12px; --rh-gallery-inset: clamp(12px, 1.6vw, 20px); --rh-gallery-caption-pad: 10px 16px; --rh-gallery-thumb-min: min(46%, 124px); /* * Stepping on the main picture (V3/B, assets/css/gallery.css and * assets/js/gallery.js). The arrows are 44px discs - a touch target - with * the slider knob's chevron. --rh-gallery-swipe is the shortest sideways * finger move that steps; the script reads it, shorter is a tap. */ --rh-gallery-arrow: 44px; --rh-gallery-chevron-h: 6px; --rh-gallery-chevron-w: 8px; --rh-gallery-swipe: 40px; --rh-datastrip-y: clamp(28px, 3.4vw, 44px); --rh-datastrip-min: min(50%, 168px); --rh-datastrip-cell-pad: clamp(18px, 2vw, 26px); --rh-datastrip-cell-gap: 8px; --rh-about2-gap: clamp(32px, 5vw, 72px); --rh-about2-col-min: 320px; --rh-about2-copy-gap: clamp(16px, 2vw, 24px); --rh-timeline-y: 18px; --rh-timeline-gap: 18px; --rh-timeline-head-gap: 10px; --rh-timeline-desc-top: 4px; --rh-timeline-dot-top: 7px; --rh-step-num-min: 28px; --rh-works-gap: clamp(24px, 3vw, 40px); --rh-works-head-gap: 20px; --rh-works-heading-gap: 14px; --rh-works-min: 260px; --rh-works-cell-y: clamp(20px, 2.2vw, 28px); --rh-works-cell-gap: 10px; --rh-plan-gap: clamp(32px, 5vw, 64px); --rh-plan-copy-gap: clamp(16px, 2vw, 22px); --rh-plan-pad: clamp(14px, 1.6vw, 22px); --rh-room-y: 13px; --rh-room-total-y: 15px; --rh-room-gap: 16px; --rh-costs-gap: clamp(32px, 5vw, 64px); --rh-costs-col-min: 300px; --rh-cost-y: 14px; --rh-subcta-gap: clamp(24px, 4vw, 48px); --rh-subcta-copy-gap: 14px; --rh-subcta-copy-max: 640px; --rh-subcta-actions-gap: 12px; --rh-related-gap: clamp(22px, 2.6vw, 34px); --rh-related-min: 280px; --rh-related-cell-gap: clamp(18px, 2.2vw, 28px); --rh-card-pad: 20px; --rh-card-gap: 6px; --rh-card-figure-top: 6px; --rh-header-gap: 20px; --rh-nav-gap: clamp(16px, 2.2vw, 34px); --rh-footer-nav-gap: clamp(16px, 2.2vw, 30px); --rh-footer-inner-gap: clamp(28px, 4vw, 64px); --rh-footer-bottom-top: clamp(28px, 4vw, 56px); /* * The social links (V3/B, assets/css/social.css). The mark is drawn at * --rh-social-icon inside a --rh-social-hit square, so the target is 40px * whatever the glyph's size - well above the 24px WCAG 2.5.8 asks for. In * a contact row the mark sits in the label, at the label's own scale. */ --rh-social-icon: 20px; --rh-social-hit: 40px; --rh-social-gap: 4px; --rh-social-top: 18px; --rh-contact-icon: 15px; --rh-contact-icon-gap: 10px; /* Radius is zero everywhere; the two exceptions name themselves. */ --rh-radius: 0; --rh-radius-handle: 50%; --rh-shadow-handle: 0 6px 22px var(--rh-handle-shadow); --rh-shadow-hero: drop-shadow(0 2px 18px var(--rh-hero-shadow)); /* ---- Motion -------------------------------------------------------- */ --rh-t-header: 400ms; --rh-ease: ease; --rh-enter-duration: 720ms; --rh-enter-ease: cubic-bezier(.22, .61, .36, 1); --rh-enter-shift: 20px; --rh-enter-step: 90ms; /* ---- Wordmark sizes (9.1) ------------------------------------------ */ --rh-wordmark-header: clamp(172px, 19vw, 284px); --rh-wordmark-hero: min(100%, 900px); --rh-wordmark-footer: clamp(190px, 22vw, 300px); /* * The desktop nav breakpoint. The handoff says 940px; decision F1 (2026-09-13) * moved it to 1100px, because the menu grew to six items - and 1100px turned * out not to be enough. Measured, the six Hungarian labels fall 15.8px short * there WITH a Windows scrollbar, and 0.8px short without one: the fit was * operating-system dependent. Decision D (2026-09-14) moved it to 1150px. * * Why 1150 and not the bare threshold. The measured threshold was 1126px, but * that left +0.29px - a rounding errors worth of headroom. At 1150px the * margin was +15.1px with a scrollbar and +30.1px without (+19.1 / +34.1 once * the header gap went to 20px), so it fit on both operating systems. * * 1180px since change round V2 (2026-09-28, decision log 21): the third item * became "Referenciák", two letters longer than "Projektek". Measured with * the new label, the six items STILL fit at 1150px - but by +1.6px with a * Windows scrollbar, the same rounding-error headroom decision D refused. * The headroom the menu had (+19.1 / +34.1) comes back from 1179px up, in * both columns; 1180px leaves +20.3px with a scrollbar and +35.3px without. * The bare threshold is 1148 / 1124. The price is the 1150-1179px band, * which now gets the drawer too. Numbers: docs/designrendszer.md, section 6; * how long a label may be: docs/nyitott-kerdesek.md, I1. * * It is a token because the drawer script has to read the same number - see * assets/js/site.js. * * NOT the only breakpoint near here, and the other one is NOT this: * template-parts/tile.php carries a `sizes` hint for the browsers image * picking, which follows the TILEs own break (949px), not the navs. */ --rh-nav-breakpoint: 1180px; }