/* ========================================================================== RODALICO homepage — visual canon v0.2 Contract: docs/P2_HOMEPAGE_VISUAL_CANON_v0.2.md -------------------------------------------------------------------------- Scope: loaded ONLY by index.html, after styles.css. Every rule is prefixed with .rod-home (the homepage class) so it wins on specificity without !important and cannot leak into the other 20+ pages, which stay on the existing global palette until a separate migration milestone. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TYPEFACES — the @font-face rules now live in styles.css so every page shares the same self-hosted Inter / Inter Tight binaries (contract §5). They are deliberately NOT redeclared here: home.css loads after styles.css, so the families are already available by this point. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 2. TOKENS — from 00_RODALICO_BRAND_SYSTEM.png §01/§02. -------------------------------------------------------------------------- */ .rod-home { --rod-bg: #0B1E2D; --rod-surface: #1A2733; --rod-surface-raised: #2E3A46; --rod-gold: #FFC844; --rod-gold-hover: #FFD978; --rod-on-gold: #11212E; --rod-text: #FFFFFF; --rod-text-muted: rgba(255, 255, 255, 0.72); --rod-text-faint: rgba(255, 255, 255, 0.54); --rod-border: rgba(255, 255, 255, 0.10); --rod-border-strong: rgba(255, 255, 255, 0.18); --rod-font: 'Inter Var', system-ui, -apple-system, 'Segoe UI', sans-serif; --rod-font-display: 'Inter Tight Var', 'Inter Var', system-ui, 'Segoe UI', sans-serif; --rod-r-sm: 8px; --rod-r-md: 12px; --rod-r-lg: 18px; --rod-r-pill: 999px; --rod-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40); --rod-shadow-2: 0 10px 30px rgba(0, 0, 0, 0.45); --rod-shadow-gold: 0 8px 28px rgba(255, 200, 68, 0.18); --rod-motion-fast: 120ms; --rod-motion-base: 160ms; --rod-motion-slow: 220ms; --rod-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --rod-max: 1328px; --rod-gutter: 24px; background: var(--rod-bg); color: var(--rod-text); font-family: var(--rod-font); -webkit-font-smoothing: antialiased; } .rod-home .rod-shell { max-width: var(--rod-max); margin: 0 auto; padding: 0 var(--rod-gutter); } .rod-home h1, .rod-home h2, .rod-home h3, .rod-home h4 { font-family: var(--rod-font-display); letter-spacing: -0.015em; margin: 0; } .rod-home .rod-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 3. BUTTONS -------------------------------------------------------------------------- */ .rod-home .rod-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: var(--rod-r-sm); font: inherit; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; transition: background var(--rod-motion-base) var(--rod-ease), border-color var(--rod-motion-base) var(--rod-ease), transform var(--rod-motion-fast) var(--rod-ease), box-shadow var(--rod-motion-base) var(--rod-ease); } .rod-home .rod-btn-gold { background: var(--rod-gold); color: var(--rod-on-gold); } .rod-home .rod-btn-gold:hover { background: var(--rod-gold-hover); box-shadow: var(--rod-shadow-gold); } .rod-home .rod-btn-gold:active { transform: translateY(1px); } .rod-home .rod-btn-ghost { background: transparent; color: var(--rod-text); border-color: var(--rod-border-strong); } .rod-home .rod-btn-ghost:hover { border-color: var(--rod-gold); color: var(--rod-gold); } /* -------------------------------------------------------------------------- 4. HEADER -------------------------------------------------------------------------- */ /* The homepage header sits ON the hero artwork rather than in a bar above it — that single change is most of what separates the current build from reference 02. It is absolute, not sticky: a transparent sticky bar would become unreadable the moment it passed the hero, and the reference header is not sticky either. The inner pages keep the solid sticky header from styles.css; this rule is .rod-home-scoped and reaches only the homepage. */ .rod-home .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 40; background: transparent; border-bottom: 0; } /* Once the menu is open it needs its own ground: there is no bar behind it. */ .rod-home .site-header:has(.mobile-menu:not([hidden])) { background: rgba(11, 30, 45, 0.97); backdrop-filter: blur(10px); } .rod-home .header-row { display: flex; align-items: center; gap: 20px; height: 76px; max-width: var(--rod-max); margin: 0 auto; padding: 0 var(--rod-gutter); } /* The brand lockup is deliberately NOT restated here. styles.css already stacks the descriptor under the wordmark for every page, and the homepage is not an exception to that — it carries the same localized descriptor as the rest of the shared shell. The rule this replaced set align-items: center, which outranked the shared flex-start and would have centred the descriptor under the logo instead of aligning it to the same left edge; everything else it declared (display: flex, flex-shrink: 0) the shared rule already says. */ .rod-home .brand-logo { height: 40px; width: auto; display: block; } .rod-home .nav-links { display: flex; align-items: center; gap: 26px; flex: 1; justify-content: center; } .rod-home .nav-links a { position: relative; color: var(--rod-text-muted); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; padding: 6px 0; transition: color var(--rod-motion-base) var(--rod-ease); } .rod-home .nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rod-gold); transform: scaleX(0); transform-origin: left; transition: transform var(--rod-motion-base) var(--rod-ease); } .rod-home .nav-links a:hover, .rod-home .nav-links a.active { color: var(--rod-text); } .rod-home .nav-links a:hover::after, .rod-home .nav-links a.active::after { transform: scaleX(1); } .rod-home .nav-links a.active { color: var(--rod-gold); } /* Garage keeps the pill accent the frozen north star gives it. */ .rod-home .nav-links a.rod-nav-pill { border: 1px solid var(--rod-border-strong); border-radius: var(--rod-r-pill); padding: 7px 16px; } .rod-home .nav-links a.rod-nav-pill::after { display: none; } .rod-home .nav-links a.rod-nav-pill:hover { border-color: var(--rod-gold); color: var(--rod-gold); } .rod-home .header-tools { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .rod-home .language-selector { display: inline-flex; border: 1px solid var(--rod-border); border-radius: var(--rod-r-sm); overflow: hidden; } .rod-home .language-selector button { background: transparent; border: 0; color: var(--rod-text-faint); font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.03em; padding: 7px 11px; cursor: pointer; transition: color var(--rod-motion-fast) var(--rod-ease), background var(--rod-motion-fast) var(--rod-ease); } .rod-home .language-selector button:hover { color: var(--rod-text); } .rod-home .language-selector button[aria-pressed='true'] { background: var(--rod-gold); color: var(--rod-on-gold); } .rod-home .nav-actions .btn, .rod-home .nav-actions .rod-btn { min-height: 42px; font-size: 14px; } .rod-home .menu-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 46px; height: 46px; background: transparent; border: 1px solid var(--rod-border-strong); border-radius: var(--rod-r-sm); cursor: pointer; } .rod-home .menu-toggle-bar { display: block; width: 18px; height: 2px; background: var(--rod-text); border-radius: 2px; } .rod-home .mobile-menu { border-top: 1px solid var(--rod-border); background: var(--rod-bg); padding: 16px var(--rod-gutter) 22px; } .rod-home .mobile-menu nav { display: flex; flex-direction: column; gap: 4px; } .rod-home .mobile-menu nav a { color: var(--rod-text-muted); text-decoration: none; font-weight: 600; font-size: 15px; padding: 13px 4px; border-bottom: 1px solid var(--rod-border); } .rod-home .mobile-menu nav a.active { color: var(--rod-gold); } .rod-home .mobile-menu-actions { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; } /* -------------------------------------------------------------------------- 5. HERO — left-aligned copy, artwork right (reference 02). -------------------------------------------------------------------------- */ .rod-home .rod-hero { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(620px, 84vh, 820px); display: flex; align-items: center; background: linear-gradient(180deg, #0B1E2D 0%, #0D2233 100%); border-bottom: 1px solid var(--rod-border); } /* The artwork occupies the right half and bleeds off both the top and right edges. Two scrims do the work that makes left-hand copy readable over a photograph: a horizontal one that carries the navy across the middle, and a vertical one that lets the header and the section boundary dissolve into it instead of cutting the image with a hard line. */ /* The layer starts well left of where the image becomes visible. At 42% its own left edge showed as a vertical seam against the flat navy — the gradient inside it had no room to reach solid colour before the element simply stopped. Starting at 16% gives the scrim that room, so the picture fades in rather than beginning at a line. */ .rod-home .rod-hero-media { position: absolute; inset: 0 0 0 16%; z-index: -1; } .rod-home .rod-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; } .rod-home .rod-hero-media::after { content: ''; position: absolute; inset: 0; background: /* The stops are placed against the copy column, not by eye. This layer starts at 16% of the hero, so its own 52% used to land near 60% of the viewport — which at 1279px is exactly where the 720px copy column ends, putting the last two trust points over a half-transparent scrim with the car's headlight showing through the words. Solid navy now holds to 22% and stays above 0.72 until 58%, so the copy always sits on a dense ground at every width while the vehicle still reads on the right. */ linear-gradient(90deg, #0B1E2D 0%, #0B1E2D 22%, rgba(11, 30, 45, 0.94) 40%, rgba(11, 30, 45, 0.72) 58%, rgba(11, 30, 45, 0.28) 76%, rgba(11, 30, 45, 0) 92%), linear-gradient(180deg, rgba(11, 30, 45, 0.55) 0%, rgba(11, 30, 45, 0) 26%, rgba(11, 30, 45, 0) 68%, rgba(11, 30, 45, 0.72) 100%); } /* A single left column now — the artwork is no longer a grid cell, so the copy is free to run at its own measure instead of being squeezed into 1.12fr. The top padding clears the absolute header at every header height. */ .rod-home .rod-hero-grid { position: relative; width: 100%; max-width: var(--rod-max); margin: 0 auto; padding: clamp(108px, 12vh, 148px) var(--rod-gutter) clamp(48px, 7vh, 84px); } /* Wide enough to hold "Надійні запчастини" on one line at the display size — at 660px it broke into four lines where the reference has three. */ .rod-home .rod-hero-copy { max-width: 720px; } .rod-home .rod-kicker { color: var(--rod-text-faint); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 18px; } .rod-home .rod-hero h1 { font-size: clamp(38px, 5.4vw, 78px); line-height: 1.03; font-weight: 700; letter-spacing: -0.025em; margin: 0 0 22px; text-wrap: balance; } .rod-home .rod-hero h1 .rod-gold-line { display: block; color: var(--rod-gold); } .rod-home .rod-hero-lead { color: var(--rod-text-muted); font-size: 17px; line-height: 1.55; max-width: 34em; margin: 0 0 30px; } /* Four across, as in reference 02, separated by hairlines rather than boxes. */ .rod-home .rod-trust-points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 0 34px; padding: 0; list-style: none; } .rod-home .rod-trust-points > li + li { padding-left: 18px; border-left: 1px solid var(--rod-border); } .rod-home .rod-trust-points > li:not(:last-child) { padding-right: 18px; } .rod-home .rod-trust-point { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; line-height: 1.4; color: var(--rod-text-muted); } .rod-home .rod-trust-point svg { flex-shrink: 0; width: 22px; height: 22px; color: var(--rod-gold); } /* The old .rod-hero-art card is gone: the artwork is now the full-bleed .rod-hero-media layer above. The