/* ========================================================================== Răzvan Detailing v3 — DESIGN TOKENS Cloned 1:1 from site-v2/index.html (:root + component CSS) and DESIGN.md. This is the single source of truth for color, type, spacing, radius, shadow and motion. styles/app.css and js/app.js consume these vars. THEME-OVERRIDABLE: js/app.js sets a subset of these from config.theme at runtime (colorBlack, colorGraphite, colorPaper, colorGold, radius, fontStack -> --rd-black, --rd-graphite, --rd-paper, --rd-gold, --r-card, --rd-font). Keep them as plain custom properties on :root so an inline style="--rd-gold:#xxx" on / wins by the cascade. Naming: brand tokens are prefixed --rd-*. Scale tokens use short, stable names (--fs-*, --fw-*, --sp-*, --r-*, --dur-*, --ease*, --z-*, --ph-*) so app.css reads cleanly. ========================================================================== */ /* ========================================================================== SELF-HOSTED TYPE — Fraunces (display, variable opsz+wght) + Inter (body, variable wght). OFL, self-hosted under /assets/fonts (CSP font-src 'self'). latin + latin-ext (RO: ă â î ș ț) split by unicode-range; font-display:swap with metric-matched fallbacks so the swap reflow stays minimal. ========================================================================== */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/inter-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: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/fraunces-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/fraunces-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; } /* metric-matched fallbacks → minimal swap reflow (refine with capsize if needed) */ @font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107%; ascent-override: 90.5%; descent-override: 22.6%; line-gap-override: 0%; } @font-face { font-family: "Fraunces Fallback"; src: local("Georgia"); size-adjust: 102%; ascent-override: 92%; descent-override: 23%; line-gap-override: 0%; } :root { /* ---------------------------------------------------------------------- 1. COLOR — black / graphite / white / gold system (DESIGN.md rule: gold is an ACCENT only, for proof / price cues / premium tiers). Hexes are the exact values from site-v2. ---------------------------------------------------------------------- */ /* Core brand (theme-overridable from config.theme) */ --rd-black: #030304; /* page/nav base, theme-color, true black surface */ --rd-graphite: #151517; /* primary card/panel surface on dark sections */ --rd-paper: #fbfbfd; /* light page background */ --rd-ink: #161617; /* primary text on paper */ --rd-gold: #d4a64a; /* brand accent (matched to the logo) — proof, prices */ --rd-gold-2: #b8893a; /* deeper gold — hover on gold btn, light-bg gold */ /* Aliases / convenience (kept so app.css can use either spelling) */ --rd-gold-soft: rgba(212, 166, 74, .18); /* gold tint fill (badges/tags) */ --rd-gold-soft-dim: rgba(212, 166, 74, .12); /* gold tint fill on true-dark (#050505) sections */ --rd-gold-line: rgba(212, 166, 74, .28); /* gold tint border */ --rd-gold-text: #f3d88f; /* gold text on dark (badges) */ /* Neutrals */ --rd-soft: #f4f4f6; /* light "soft" section background (.section.soft) */ --rd-soft-2:#f5f5f7; /* alt light panel bg (process/extras/trust panels) */ --rd-muted: #6e6e73; /* secondary text on paper */ /* Dark surface ramp (used by full-bleed dark sections / cards) */ --rd-surface-000: #050505; /* darkest section bg (packages, b2b, gallery) */ --rd-surface-050: #080809; /* config / calculator section bg */ --rd-surface-100: #101011; /* matrix / dark home-package surface */ --rd-surface-150: #111114; /* package / service / b2b card surface */ --rd-surface-200: #141416; /* decision-card surface */ --rd-surface-250: #18181b; /* media well behind images */ --rd-graphite-2: #1d1d1f; /* default (non-gold) pill button bg */ --rd-graphite-3: #2b2b30; /* hover state on default pill button */ /* Lines / hairlines */ --rd-line: rgba(0, 0, 0, .12); /* hairline on light */ --rd-line-soft: rgba(0, 0, 0, .08); /* card border on light */ --rd-line-dark: rgba(255, 255, 255, .12);/* hairline / card border on dark*/ --rd-line-dark-2: rgba(255, 255, 255, .10);/* nav / divider on dark */ --rd-line-dark-strong: rgba(255, 255, 255, .24); /* card hover border */ /* Overlays / fills on dark (glass chips, ghost buttons, tags) */ --rd-fill-dark: rgba(255, 255, 255, .08); /* glass pill / chip fill */ --rd-fill-dark-weak: rgba(255, 255, 255, .045);/* chip / price-row fill */ --rd-fill-dark-line: rgba(255, 255, 255, .16); /* glass border */ /* Text on dark */ --rd-on-dark: #ffffff; --rd-on-dark-80: rgba(255, 255, 255, .80); --rd-on-dark-72: rgba(255, 255, 255, .72); --rd-on-dark-68: rgba(255, 255, 255, .68); --rd-on-dark-62: rgba(255, 255, 255, .62); --rd-on-dark-56: rgba(255, 255, 255, .56); --rd-on-dark-52: rgba(255, 255, 255, .52); /* Utility */ --rd-green: #25d366; /* WhatsApp green — used sparingly for WA affordance */ /* Focus-visible rings — on-brand, WCAG 2.4.11 / 1.4.11 (>=3:1 vs adjacent surface). Two contexts: --rd-focus is the WHITE-ish ring for dark sections (white on --rd-black = 20.6:1, on --rd-graphite = 18.2:1); --rd-focus-ink is the INK ring for light/paper sections (ink on --rd-paper = 17.5:1). The old rgba(0,113,227,.42) Apple-blue ring was ~1.59:1 and off-palette. */ --rd-focus: #ffffff; /* ring on dark surfaces (nav, hero, dark btns) */ --rd-focus-ink: var(--rd-ink); /* ring on light/paper surfaces */ /* Darker gold for SMALL text on light surfaces (WCAG AA >=4.5:1): --rd-gold on --rd-paper is 1.84:1 and --rd-gold-2 is 2.87:1 (both fail for <=14px text). --rd-gold-ink is 4.88:1 on --rd-paper / 4.63:1 on --rd-soft-2 — use it for process step labels, recommendation checks and any small (<=14px) gold text on light. Keep --rd-gold/--rd-gold-2 for large accents, dots, borders and tints (non-text or large-text uses). */ --rd-gold-ink: #8a6a1f; /* ---------------------------------------------------------------------- 2. TYPOGRAPHY — SF Pro system stack, tight display, disciplined body. --rd-font is theme-overridable (config.theme.fontStack). ---------------------------------------------------------------------- */ --rd-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif; /* alias used by site-v2 body via var(--font, ...) — keep both names live */ --font: var(--rd-font); /* editorial display serif — headlines only (body stays on --rd-font/Inter). NOT in applyTheme's override map, so the inline --rd-font never clobbers it. */ --rd-font-display: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif; /* Type scale (fluid where v2 used clamp; static where v2 was fixed). --fs-hero = .display (hero brand + h1) --fs-h1 = .headline (major section statements) --fs-h2 = section / story headings --fs-h3 = card titles --fs-body = paragraph / list copy --fs-small = fine print, tags, captions */ --fs-hero: clamp(48px, 6.7vw, 96px); /* .display */ --fs-h1: clamp(42px, 6vw, 88px); /* .headline */ --fs-h2: clamp(44px, 5.5vw, 86px); /* story / large section heading */ --fs-h3: 28px; /* card / matrix heading default */ --fs-card-h: 25px; /* package-card / service h3 */ --fs-lead: clamp(18px, 2vw, 25px); /* .lead */ --fs-body: 15px; /* default body */ --fs-body-sm: 14px; /* card body / nav / button */ --fs-small: 13px; /* tags, fine, captions */ --fs-micro: 12px; /* eyebrow-on-card, legal */ --fs-eyebrow: 13px; /* .eyebrow */ --fs-price: 34px; /* package card price */ --fs-total: clamp(46px, 5vw, 64px); /* calculator sticky total */ /* Weights — v2 leans heavy; 850 is the workhorse "bold" */ --fw-regular: 400; --fw-medium: 600; --fw-semibold: 760; /* nav category filters, tags */ --fw-bold: 800; --fw-heavy: 850; /* eyebrows, buttons, headings, prices */ --fw-black: 900; /* hero brand line, b2b numbers */ /* Line-heights */ --lh-display: .94; /* hero */ --lh-heading: .96; /* headline */ --lh-tight: 1.06; /* card headings */ --lh-snug: 1.28; /* lead */ --lh-body: 1.42; /* paragraph copy */ --lh-relaxed: 1.5; /* fine print / FAQ answers */ /* Letter-spacing */ --ls-tight: 0; --ls-eyebrow: .08em; /* uppercase eyebrows / labels */ --ls-brand: .04em; /* hero brand line */ /* ---------------------------------------------------------------------- 3. SPACING — 8px-based rhythm. Section padding & container widths mirror v2 exactly (112px desktop down to 74px mobile). ---------------------------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px; --sp-11: 88px; --sp-12: 112px; /* Common component paddings seen in v2 */ --pad-card: 18px; /* package / service card inner padding */ --pad-panel: 22px; /* decision / b2b / extra-col panels */ --pad-panel-lg:24px; /* config-panel / total-panel / contact-card / matrix*/ --pad-panel-xl:28px; /* trust-panel / contact-card */ /* Section vertical rhythm (responsive — see breakpoint comments below) */ --section-pad: 112px; /* default .section padding-block */ --section-pad-md: 86px; /* <=900px */ --section-pad-sm: 52px; /* <=640px — tightened to cut mobile over-scroll */ --section-head-gap: 42px;/* margin under .section-head */ /* Containers */ --container: min(1180px, calc(100% - 44px)); /* .wrap */ --container-narrow: min(940px, calc(100% - 44px)); /* .narrow */ --container-hero: min(980px, calc(100% - 44px)); /* .hero-copy */ --gutter: 44px; /* desktop side gutter (22px each side) */ --gutter-sm: 30px; /* <=640px gutter */ /* Grid gaps */ --grid-gap: 16px; /* package / service / b2b grids */ --grid-gap-sm: 14px; /* decision / home-package grids */ /* ---------------------------------------------------------------------- 4. RADIUS — DESIGN.md: cards 8px or less; buttons/chips are pills. ---------------------------------------------------------------------- */ --r-card: 8px; /* theme-overridable (config.theme.radius) — cards, panels, badges-as-rect, social tiles */ --r-sm: 6px; /* nav-toggle, mobile menu links */ --r-md: 8px; /* default card radius (== --r-card) */ --r-lg: 10px; /* matrix-wrap */ --r-xl: 16px; /* gallery .shot */ --r-2xl: 18px; /* gallery-track shell */ --r-pill: 999px; /* buttons, chips, badges, lang switch, proof pills */ /* ---------------------------------------------------------------------- 5. SHADOWS — restrained, mostly on dark cards & sticky panels. ---------------------------------------------------------------------- */ --sh-card: 0 24px 70px rgba(0, 0, 0, .24); /* dark card rest */ --sh-card-hover: 0 34px 90px rgba(0, 0, 0, .38); /* dark card hover */ --sh-card-light: 0 12px 38px rgba(0, 0, 0, .045);/* light card */ --sh-panel-light: 0 12px 30px rgba(0, 0, 0, .08); /* .btn.light */ --sh-sticky: 0 30px 90px rgba(0, 0, 0, .32); /* sticky total panel */ --sh-gallery: 0 34px 110px rgba(0, 0, 0, .44);/* gallery track shell */ --sh-menu: 0 20px 60px rgba(0, 0, 0, .32); /* mobile nav menu */ --sh-gold: 0 30px 90px rgba(212, 166, 74, .12); /* featured card */ --sh-segment: 0 8px 24px rgba(0, 0, 0, .16); /* active segment btn */ --sh-social: 0 16px 34px rgba(0, 0, 0, .24); /* social link hover */ /* ---------------------------------------------------------------------- 6. MOTION — DESIGN.md: orient the visitor; never decorative; always list explicit properties (NO `transition: all`). Durations (--dur-*) + easing (--ease, --ease-out) cloned from v2. ---------------------------------------------------------------------- */ --ease: cubic-bezier(.28, .11, .32, 1); /* default interaction ease */ --ease-out: cubic-bezier(.22, 1, .36, 1); /* reveal / image scale ease */ --dur-fast: .18s; /* nav link / footer link color */ --dur-base: .22s; /* button / chip / card hover */ --dur-slow: .28s; /* nav-shell light/dark swap, service card */ --dur-reveal: .58s; /* .reveal in */ --dur-stagger: .7s; /* staggered children in */ --dur-image: .7s; /* image scale on hover */ --dur-shot: .9s; /* gallery shot image */ /* ---------------------------------------------------------------------- 7. LAYOUT CONSTANTS ---------------------------------------------------------------------- */ --nav-h: 54px; /* fixed header height (50px @ <=640px, see media) */ --sticky-top: 76px; /* sticky offset for total/contact/category rail */ --sticky-top-sm:58px; /* sticky offset @ <=640px */ /* ---------------------------------------------------------------------- 8. Z-INDEX LAYERS (extracted from v2) skip-link 1000 > nav 70 > package-spill 4 > gallery-arrow 5 > media badges 2 > hero overlay/copy local stack. ---------------------------------------------------------------------- */ --z-skip: 1000; /* .skip skip-to-content link */ --z-nav: 70; /* fixed .nav-shell */ --z-overlay: 10; /* generic above-content overlay */ --z-arrow: 5; /* gallery arrows */ --z-spill: 4; /* package price-spill glow */ --z-sticky: 3; /* sticky total panel on mobile */ --z-badge: 2; /* media badges over imagery */ /* ---------------------------------------------------------------------- 9. PLACEHOLDER SYSTEM (v3-only — spec §"Placeholder conventions"). renderMedia() paints a graphite-gradient tile with a gold label when media.placeholder === true; placeholderMode shows a fixed "TEMPLATE · conținut de completat" ribbon + data-placeholder outline. ---------------------------------------------------------------------- */ /* Styled placeholder image tile (graphite gradient, gold label) */ --ph-tile-bg: linear-gradient(135deg, #141416 0%, #1d1d1f 52%, #0c0c0e 100%); --ph-tile-bg-light: linear-gradient(135deg, #ececef 0%, #f5f5f7 52%, #e4e4e8 100%); --ph-tile-border: 1px solid rgba(212, 166, 74, .22); --ph-tile-grid: rgba(255, 255, 255, .04); /* faint hatch over tile */ --ph-label: var(--rd-gold); /* "IMAGINE · hero 780×1100" */ --ph-label-bg: rgba(212, 166, 74, .12); /* label chip fill */ --ph-label-line: rgba(212, 166, 74, .30); /* label chip border */ --ph-icon: rgba(212, 166, 74, .55); /* placeholder glyph */ /* "TEMPLATE" ribbon (fixed, subtle, top-of-viewport) */ --ph-ribbon-bg: rgba(212, 166, 74, .14); --ph-ribbon-line: rgba(212, 166, 74, .34); --ph-ribbon-text: var(--rd-gold-text); --ph-ribbon-blur: saturate(180%) blur(18px); /* data-placeholder outline (makes unfilled bracket fields obvious) */ --ph-outline: 1px dashed rgba(212, 166, 74, .42); --ph-outline-bg: rgba(212, 166, 74, .06); /* ---- Globals normally on :root in v2 (kept here so app.css inherits) -- */ font-family: var(--rd-font); } /* ========================================================================== BREAKPOINT REFERENCE (clone of v2 — app.css implements behaviour here) ---------------------------------------------------------------------- <=1100px : package/service/b2b grids -> 2 cols; decision/home-package ->1; library-layout single col; category-rail becomes horizontal. <=900px : --section-pad-md (86px); desktop nav-links hidden, hamburger; config/section-head/story/contact/trust collapse to 1 col; total-panel moves above config (order:-1). <=640px : --nav-h 50px; --section-pad-sm (74px); gutter -> 30px; reveal/stagger motion DISABLED (instant); hero 64svh; all multi-col grids -> 1 col; price-row stacks; sticky-top 58px. <=360px : language switch hidden; social-grid 1 col; hero buttons full. Design/QA targets (DESIGN.md): 1440×1000, 390×844, 320×740. Mobile-first: one hero CTA, compact proof, no horizontal scroll @320px. ========================================================================== */ /* Responsive overrides of the layout-constant tokens. (Pure design tokens; component rules live in app.css.) */ @media (max-width: 640px) { :root { --nav-h: 50px; --section-pad: var(--section-pad-sm); --gutter: var(--gutter-sm); --sticky-top: var(--sticky-top-sm); } } /* ========================================================================== REDUCED MOTION — DESIGN.md "restrained motion". Mirrors v2's global reduced-motion guard so any consumer of these tokens is covered even before app.css loads. app.css should still scope its own animations. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: .001ms; --dur-base: .001ms; --dur-slow: .001ms; --dur-reveal: .001ms; --dur-stagger: .001ms; --dur-image: .001ms; --dur-shot: .001ms; } } /* ========================================================================== COLOR-SCHEME NOTE v2 is an intentionally fixed light+dark composition (light "paper" sections interleaved with full-bleed black sections) — it is NOT a user-toggled light/dark theme. We therefore do NOT remap tokens under prefers-color-scheme; doing so would break the designed contrast. We only advertise that both schemes are supported for form controls. ========================================================================== */ :root { color-scheme: light dark; }