/*------------------------------------------------------------------*\ 1. CONFIG & HELPERS - Design Tokens \*------------------------------------------------------------------*/ :root { /* ── Brand Colors ── */ --color-primary: #2C3D31; /* --color-secondary: #303030; */ --color-accent: #2C3D31; /* --color-accent-alt: #2C3D31; */ /* ── Neutral Scale ── * Gray scale aligned with Elementor Custom Colors. * Use for backgrounds, borders and secondary text. */ --neutral-950: #000000; --neutral-900: #0E0E0E; --neutral-850: #141414; --neutral-800: #1c1c1c; --neutral-750: #262626; --neutral-700: #2E2E2D; --neutral-600: #404040; --neutral-550: #4F4F50; --neutral-500: #555555; --neutral-400: #888888; --neutral-350: #9E9898; --neutral-300: #A6A6A6; --neutral-200: #C4C4C4; --neutral-150: #CCCCCC; --neutral-100: #D0D0D0; --neutral-50: #FAFAFA; --neutral-0: #FFFFFF; /* ── Semantic Colors (mapped from neutral scale) ── */ --color-title: #303030; --color-text: #303030; --color-text-soft: #A2A2A2; --color-text-muted: rgba(255, 255, 255, 0.5); --color-bg-white: #ffffff; --color-bg-dark: #303030; --color-bg-surface: var(--neutral-800); /* #1c1c1c */ --color-bg-surface-alt: #292929; --color-black: var(--neutral-950); /* #000000 */ --color-border: var(--neutral-600); /* #404040 */ --color-border-light: rgba(255, 255, 255, 0.3); /* ── Input / Form Tokens ── * Dedicated form tokens. Style forms consistently * without repeating values. */ --input-bg: var(--neutral-850); /* #141414 */ --input-border: var(--neutral-750); /* #262626 */ --input-text: var(--neutral-0); /* #FFFFFF */ --input-label: var(--neutral-50); /* #FAFAFA */ --input-placeholder: var(--neutral-300); /* #A6A6A6 */ --input-focus-border: var(--color-primary); /* #FFB951 */ --input-error: #FF6B6B; --input-success: var(--color-accent); --input-filled: var(--color-primary); --input-radius: 4px; --input-padding: 12px 16px; --contact-field-bg: rgb(44, 61, 49, 0.05); /* light fields on the grey contact band */ /* ── Glass material ── * CSS approximation of the Figma "Glass" material. * Source values: Light -45°/80%, Refraction 80, Depth 20, * Dispersion 50, Frost 4, Splay 0. Refraction/dispersion are * faked via backdrop saturate (no true CSS equivalent). */ --glass-frost: blur(4px) saturate(180%); /* Frost 4 + Refraction/Dispersion */ --glass-border: rgba(255, 255, 255, 0.45); /* lit rim */ --glass-shadow: inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.55), /* Light -45°/80% — lit edge */ inset -1px -1px 2px rgba(44, 61, 49, 0.06), /* Depth 20 — far edge */ 0 6px 24px rgba(44, 61, 49, 0.08); /* cast */ /* ── Typography ── */ --font-primary: 'Inter', sans-serif; --font-secondary: "Inter", sans-serif; --font-extrabold: 800; --font-bold: 700; --font-semibold: 600; --font-medium: 500; --font-regular: 400; --font-light: 300; /* ── Line Height ── * Numeric scale: suffix = line-height x 100. * E.g. --line-height-120 = 1.2 (120%). * --line-height-50 kept for backwards compatibility. */ --line-height-50: 1.2; /* legacy alias (used in typography.css) */ --line-height-100: 1; /* 100% — display tight */ --line-height-110: 1.1; /* 110% — large headings */ --line-height-120: 1.2; /* 120% — default headings */ --line-height-125: 1.25; /* 125% — comfortable headings */ --line-height-130: 1.3; /* 130% — subtitles */ --line-height-140: 1.4; /* 140% — compact body */ --line-height-150: 1.5; /* 150% — default body */ --line-height-160: 1.6; /* 160% — relaxed body */ --line-height-175: 1.75; /* 175% — long-form reading */ --line-height-200: 2; /* 200% — very spaced captions / labels */ /* Semantic aliases (map onto the numeric scale) */ --line-height-none: var(--line-height-100); --line-height-tight: var(--line-height-120); --line-height-snug: var(--line-height-130); --line-height-normal: var(--line-height-150); --line-height-relaxed: var(--line-height-160); --line-height-loose: var(--line-height-200); /* ── Spacing ── */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 2rem; --space-xl: 4rem; /* ── Transitions ── */ --transition-base: all 0.3s ease; /* ── Z-index ── */ --z-content: 1; --z-overlay: 2; --z-pagination: 10; /* * ── Fluid Typography ── * * Range: 390px (min) → 3840px (max) * Valores do Figma: 390px (mobile) e 1920px (desktop) * Max (3840px) calculado: max = min + (figma_1920 - min) / 0.4435 * * Formula do clamp: * slope = (max - min) / 215.625 * intercept = min - slope × 24.375 * clamp(min, intercept + slope×100 vw, max) * * Formato canonico: clamp(minRem, interceptRem + slopeVw, maxRem) * Calculadora: https://clamp.font-size.app/ (Min 390, Max 3840) * * ── Heading scale convention (recommended ranges, px) ── * Guideline only. Use as a reference when defining new --fluid-hX * tokens or sanity-checking Figma values. * * mobile @390 desktop @1920 role * h1: 32 – 40 48 – 72 display / hero / page title * h2: 24 – 32 36 – 56 major section title * h3: 20 – 26 28 – 40 subsection title * h4: 18 – 22 22 – 32 group / card title * h5: 16 – 20 18 – 24 small heading * h6: 14 – 16 16 – 18 eyebrow / smallest * * .elementor-kit-6 is auto-generated by Elementor. * If the kit ID changes (e.g. reimport), update typography.css. */ /* ── Headings ── */ --fluid-h1: clamp(1.6309rem, 1.25rem + 1.5625vw, 5rem); /* 26.09px @390 → 50px @1920 → 60px @2560 → 80px @3840 */ --fluid-h2: clamp(1.5625rem, 1.0051rem + 2.287vw, 6.4948rem); /* 25px → 60px → 103.92px */ --fluid-h3: clamp(1.5625rem, 1.1006rem + 1.895vw, 5.6494rem); /* 25px → 54px → 90.39px */ --fluid-h4: clamp(1.375rem, 0.975rem + 2vw, 3.375rem); --fluid-h5: clamp(1rem, 0.8726rem + 0.5228vw, 2.1274rem); /* 16px → 24px → 34.04px */ --fluid-h6: clamp(1rem, 0.56rem + 0.3667vw, 1.44rem); /* 16px @390 → 16px @1920; override ≥2560 below */ /* ── Body Text ── */ --fluid-p: clamp(0.75rem, 0.7181rem + 0.1307vw, 1.0319rem); /* 12px @390 → 14px @1920 → 16.51px @3840 (linha proporcional; override ≥2048 abaixo) */ --fluid-p-clip: 0.75rem; /* 12px no mobile; = --fluid-p de ≥1024 (override abaixo). Usado em .rb-clip-images p */ --fluid-lg-p: clamp(0.75rem, 0.64rem + 0.46vw, 1.19rem); --fluid-subtitle: clamp(0.375rem, 0.2476rem + 0.5228vw, 1.5024rem); /* 6px → 14px → 24.04px */ --fluid-caption-text: clamp(0.38rem, 0.25rem + 0.52vw, 0.88rem); /* ── Buttons & Navigation ── */ --fluid-primary-button: clamp(0.5rem, 0.4681rem + 0.1308vw, 0.7819rem); /* 8px → 10px → 12.51px */ --fluid-secondary-button: clamp(1rem, 0.97rem + 0.13vw, 1.13rem); --fluid-overlay-menu-item: clamp(2.1875rem, 1.9804rem + 0.8497vw, 4.0196rem); /* 35px → 48px → 64.3px */ /* Mobile (≤768, off-canvas overlay) = 39px fixed; desktop fluid restored at min-width:769 below (clamp unchanged: 12px @390 → 16px @1920 → 21.02px @3840). */ --fluid-nav-menu: 39px; /* ── Overlay ── */ --fluid-overlay-info-title: clamp(0.9375rem, 0.8125rem + 0.625vw, 1.5625rem); --fluid-overlay-info-desc: clamp(1rem, 0.825rem + 0.875vw, 1.875rem); /* ── Counters ── */ --fluid-counter-title: clamp(1.25rem, -0.0244rem + 5.228vw, 12.524rem); /* 20px → 100px → 200.38px */ --fluid-counter-desc: clamp(0.875rem, 0.7476rem + 0.5228vw, 2.0024rem); /* 14px → 22px → 32.04px */ --fluid-counter-label: clamp(0.875rem, 0.7475rem + 0.5229vw, 2.0025rem); /* 14px → 22px → 32.04px */ --fluid-slide-heading: clamp(5.625rem, -5.625rem + 7.0313vw, 11.25rem); /* ── Components ── */ --fluid-testimonials-name: clamp(1rem, 0.9044rem + 0.3922vw, 1.8456rem); /* 16px → 22px → 29.53px */ --fluid-accordion: clamp(0.875rem, 0.7476rem + 0.5228vw, 2.0024rem); /* 14px → 22px → 32.04px */ --fluid-h2-card: clamp(1.5rem, -1.75rem + 2.03vw, 3.13rem); --fluid-icon-box-title: clamp(0.625rem, 0.5931rem + 0.1308vw, 0.9069rem); /* 10px → 12px → 14.51px */ --fluid-icon-box-title-lh: 1.333; /* 16px / 12px ratio */ --fluid-icon-box-title-ls: 0.1em; /* 1.2px on a 12px font */ --fluid-icon-box-desc: clamp(0.5rem, 0.4522rem + 0.1961vw, 0.7819rem); /* 8px @390 → 11px @1920; override ≥2560 below */ --fluid-icon-box-desc-lh: var(--line-height-160); /* 1.6 → 16px on a 10px font */ --fluid-icon-box-desc-ls: 0; /* 0px (Figma) */ /* ── Forms ── */ --fluid-label: clamp(0.75rem, 0.7181rem + 0.1307vw, 1.0319rem); /* 12px → 14px → 16.51px */ --fluid-select: clamp(0.375rem, 0.2794rem + 0.3922vw, 1.2206rem); /* 6px → 12px → 19.53px */ --fluid-placeholder: clamp(0.375rem, 0.2476rem + 0.5228vw, 1.5024rem); /* 6px → 14px → 24.04px */ --fluid-checkboxes-labels: 0.6875rem; /* 11px (estatico) */ /* ── Grid ── */ --fluid-grid-title: clamp(2.1875rem, 1.8429rem + 1.0458vw, 4.4413rem); /* 35px → 51px → 71.06px */ --fluid-grid-desc: clamp(0.75rem, 0.6385rem + 0.4575vw, 1.7365rem); /* 12px → 19px → 27.78px */ --fluid-services-grid-desc: clamp(0.875rem, 0.7953rem + 0.3268vw, 1.5797rem); /* 14px → 19px → 25.27px */ --fluid-cta-h2: clamp(1.5rem, 0.9375rem + 2.3188vw, 3.75rem); /* ── Portfolio ── */ --fluid-portfolio-title: clamp(0.75rem, 0.4633rem + 1.176vw, 3.287rem); /* 12px → 30px @1920 → ~52.6px @3840 */ --fluid-portfolio-subtitle: clamp(0.203125rem, 0rem + 0.8333vw, 2rem); --fluid-portfolio-header-box: clamp(0.875rem, 0.425rem + 1.96vw, 5.475rem); /* 14px → 50px @1920 → ~87.6px @3840 */ --fluid-portfolio-grid-h: clamp(12.5rem, 6.239rem + 25.69vw, 67.89rem); /* 200px → 593px @1920 → ~1086px @3840 */ --fluid-portfolio-headerbox-h: clamp(6.25rem, 4.052rem + 9.015vw, 25.69rem); /* 100px → 238px @1920 → ~411px @3840 */ --fluid-portfolio-overview: clamp(1rem, 0.6175rem + 1.569vw, 4.382rem); /* 16px → 40px @1920 → ~70px @3840 */ --fluid-portfolio-overview-desc: clamp(0.75rem, 0.69rem + 0.26vw, 1rem); /* ── Contact Info ── */ --fluid-contact-h1: clamp(1rem, 0.5rem + 0.5208vw, 1.75rem); /* 16px @390 → 18px @1920 → 28px @3840 */ --fluid-contact-call-us: clamp(1.5rem, 1.3726rem + 0.5229vw, 2.6275rem); /* 24px @390 → 32px @1920 → ~42px @3840 */ --fluid-contact-message: clamp(1.5rem, 1.3726rem + 0.5229vw, 2.6275rem); /* 24px @390 → 32px @1920 → ~42px @3840 */ /* ── Footer ── */ --fluid-footer-h3: clamp(1.375rem, 1.2rem + 0.7188vw, 2.925rem); /* 22px → 33px @1920 → 46.8px @3840 */ --fluid-footer-title: 1.375rem; /* 22px (estatico) */ --fluid-footer-menu: 1rem; /* 16px (estatico) */ --fluid-footer-subtitle: clamp(1rem, 0.9681rem + 0.1307vw, 1.2819rem); /* 16px → 18px → 20.51px */ --fluid-footer-slogan: clamp(0.875rem, 0.8113rem + 0.2614vw, 1.4387rem); /* 14px → 18px → 23.02px */ --fluid-footer-desc: clamp(1.375rem, 1.2476rem + 0.5228vw, 2.5024rem); /* 22px → 30px → 40.04px */ /* ── Services ── */ --fluid-heading-service: clamp(1.25rem, 0.77rem + 1.96vw, 3.13rem); --fluid-step-title: clamp(1rem, 0.8726rem + 0.5228vw, 2.1275rem); /* 16px @390 → 24px @1920 → 34.04px @3840 */ --fluid-step-desc: clamp(0.75rem, 0.6226rem + 0.5228vw, 1.8775rem); /* 12px @390 → 20px @1920 → 30.04px @3840 */ /* ── Localização — Comfort Grid ── Three tokens for the comfort-grid labels and description. PT: 10px @390 → 16px @1920 (own base; bumped further by media overrides below) EN: PT − 1px in every tier (9px @390 → 15px @1920 → 17/23/27 above) — secondary label DESC: 10px @390 → 12px @1920 → 14.51px @3840 (cap at base; bumped to 21 @ ≥2048) */ --fluid-comfort-grid-pt: clamp(0.625rem, 0.5294rem + 0.3922vw, 1rem); /* 10px @390 → 16px @1920 */ --fluid-comfort-grid-en: clamp(0.5625rem, 0.4669rem + 0.3922vw, 0.9375rem); /* 9px @390 → 15px @1920 */ --fluid-comfort-grid-desc: clamp(0.625rem, 0.5931rem + 0.1308vw, 0.9069rem); /* 10px @390 → 12px @1920 → 14.51px @3840 */ /* ── Hero Drag Hint ── */ --fluid-drag-hint: clamp(1rem, 0rem + 0.8333vw, 2rem); /* 10px min → 12px @1440 → 16px @1920 → 18px @2160 → 32px @3840 */ --fluid-drag-hint-gap: clamp(0.5rem, 0.625vw, 1.5rem); /* 8px min → 12px @1920 → 24px @3840 */ --fluid-drag-hint-line-w: clamp(1.25rem, 2.0833vw, 5rem); /* 20px min → 40px @1920 → 80px @3840 */ --fluid-drag-hint-line-h: clamp(0.0625rem, 0.1042vw, 0.25rem); /* 1px min → 2px @1920 → 4px @3840 */ --fluid-drag-hint-chevron: clamp(0.3125rem, 0.4688vw, 1.125rem); /* 5px min → 9px @1920 → 18px @3840 */ /* ── Hero Pagination Numbers ── */ --fluid-pagination-number: clamp(0.6667rem, 1.0417vw, 2.5rem); /* 10.67px @1024 → 20px @1920 → 40px @3840 */ --fluid-pagination-mt: clamp(-3.75rem, -1.5625vw, -1rem); /* -16px @1024 → -30px @1920 → -60px @3840 */ --fluid-pagination-mb: clamp(-2.5rem, -1.0417vw, -0.6667rem); /* -10.67px @1024 → -20px @1920 → -40px @3840 */ /* ── Hero Slide Button ── */ --fluid-slide-btn-circle: clamp(1.5rem, 2.3958vw, 5.75rem); /* 24px min → 46px @1920 → 92px @3840 */ --fluid-slide-btn-text: clamp(0.5rem, 0.7813vw, 1.875rem); /* 8px min → 15px @1920 → 30px @3840 */ --fluid-slide-btn-arrow: clamp(0.5rem, 0.7813vw, 1.875rem); /* 8px min → 15px @1920 → 30px @3840 */ /* ── Misc ── */ --fluid-header-box: clamp(0.698125rem, -0.0001rem + 2.8646vw, 6.875rem); } /* ── --fluid-nav-menu — mobile override ── Mobile (≤768, off-canvas overlay) keeps the 39px base set at :root; from 769 up (inline desktop nav) restore the original fluid clamp untouched, so every resolution ≥769 is identical to before: 16px @1920 → 21.02px @3840. */ @media (min-width: 769px) { :root { --fluid-nav-menu: clamp(0.75rem, 0.6864rem + 0.2614vw, 1.3138rem); } } /* ── --fluid-p-clip — de 1024px para cima segue o --fluid-p normal ── Mobile (base) = 12px; ≥1024px herda exactamente o --fluid-p (incl. o shift ≥2048 abaixo, porque referencia var(--fluid-p)). */ @media (min-width: 1024px) { :root { --fluid-p-clip: var(--fluid-p); } } /* ── --fluid-p — shift above 2048px ── Linha proporcional: 15.17px @2048 → 21px @3840 (+2/-1 = +1 sobre a linha base). */ @media (min-width: 2048px) { :root { --fluid-p: clamp(0.9481rem, 0.5318rem + 0.3253vw, 1.3125rem); /* 15.17px @2048 → 21px @3840 */ } } /* ── --fluid-comfort-grid-desc — shift above 2048px ── Base clamp tops out at ~14.5px @3840 which is too small on 4K. Override above 2048 with a steeper slope reaching 21px @3840 (matches --fluid-p). Resolution table (using project standard widths): @390 10.00 (base clamp) @1024 10.84 (base clamp) @1440 11.39 (base clamp) @1920 12.00 (Figma anchor, base clamp) @2560 16.51 (override active) @3440 19.36 (override active) @3840 21.00 (override cap) NOTE: --fluid-comfort-grid-pt and -en have their own tier-based overrides below. */ @media (min-width: 2048px) { :root { --fluid-comfort-grid-desc: clamp(0.823rem, 0.2638rem + 0.4369vw, 1.3125rem); /* 13.17px @2048 → 21px @3840 */ } } /* ── --fluid-comfort-grid-pt / -en — width ramp + height-based bump ── PT label needs more presence on big monitors. Own base clamp at :root ramps 10→16 between 390-1920. Above 1920 the width keeps pushing it to 18px @2560 (capped). The HEIGHT then bumps the size further on 16:9 QHD/4K panels (≥1440px tall) — ramping 21→24 between 2560-3440 and capping at 24 for anything wider. 21:9 ultrawides at the same CSS width but shorter physical panels (e.g. 2560×1080, 3440×1080) stay at the 18px width cap. EN mirrors PT exactly with -1px in every tier (kept side-by-side in the same media rules so the two curves never drift). Resolution table (W × H) — PT / EN: 390 × * 10.00 / 9.00 (base clamp) 1024 × * 12.49 / 11.49 (base clamp) 1440 × * 14.12 / 13.12 (base clamp) 1920 × 1080 16.00 / 15.00 (anchor — base clamp top) 2200 × 1080 16.88 / 15.88 (width ramp) 2560 × 1080 18.00 / 17.00 (width cap) 2560 × 1440 21.00 / 20.00 (height bump start) 3000 × 1440 22.50 / 21.50 (height bump ramp) 3440 × 1440 24.00 / 23.00 (height bump cap) 3840 × 2160 24.00 / 23.00 (height bump cap — flat) */ @media (min-width: 1920px) { :root { --fluid-comfort-grid-pt: clamp(1rem, 0.625rem + 0.3125vw, 1.125rem); /* 16px @1920 → 18px @2560 (capped) */ --fluid-comfort-grid-en: clamp(0.9375rem, 0.5625rem + 0.3125vw, 1.0625rem); /* 15px @1920 → 17px @2560 (capped) */ } } @media (min-width: 2560px) and (min-height: 1440px) { :root { --fluid-comfort-grid-pt: clamp(1.3125rem, 0.7671rem + 0.3409vw, 1.5rem); /* 21px @2560 → 24px @3440 (capped at 24 for wider) */ --fluid-comfort-grid-en: clamp(1.25rem, 0.7046rem + 0.3409vw, 1.4375rem); /* 20px @2560 → 23px @3440 (capped at 23 for wider) */ } } /* ── --fluid-h6 / --fluid-icon-box-desc — proportional bump ≥2560px ── On QHD/4K the base clamps read too small. From 2560px up the size scales in strict proportion to viewport width (value ∝ width): the vw-only term passes through the @2560 anchor and grows linearly; the clamp max caps it at the @3840 value. Resolution table (project standard widths) — h6 / icon-box-desc: @2560 24.00 / 15.00 (anchor — clamp floor) @3440 32.25 / 20.16 (proportional) @3840 36.00 / 22.50 (proportional — clamp cap) NOTE: deliberate step up at the 2560px breakpoint — the base clamp sits at ~18px / ~13px just below it. */ @media (min-width: 2560px) { :root { --fluid-h6: clamp(1.5rem, 0.9375vw, 2.25rem); /* 24px @2560 → 36px @3840 (value ∝ width) */ --fluid-icon-box-desc: clamp(0.9375rem, 0.5859vw, 1.40625rem); /* 15px @2560 → 22.5px @3840 (value ∝ width) */ } } /*------------------------------------------------------------------*\ DARK MODE — scope (IMPLEMENTATION-PLAN §10, Fase 1) Overrides only the *semantic* tokens (not the neutral scale, which stays the source of truth). Elementor widgets inherit these via the theme — see also the aligned Elementor Global Kit. Activation: - [data-theme="dark"] on → explicit (future toggle, Fase 2) - prefers-color-scheme: dark → automatic, unless the user has explicitly chosen light ([data-theme="light"]) Known exceptions (containers with fixed Elementor background_color) are tracked in §10.2 and handled in Fase 2 (e.g. Contactos bands, the light-isolated [apartments_listing] table). \*------------------------------------------------------------------*/ :root[data-theme="dark"] { --color-title: var(--neutral-100); /* #D0D0D0 — inverso de #303030 */ --color-text: var(--neutral-100); --color-text-soft: var(--neutral-300); /* #A6A6A6 */ --color-bg-white: var(--neutral-900); /* #0E0E0E — “white” surfaces → base */ --color-bg-dark: var(--neutral-900); --color-bg-surface: var(--neutral-850); /* #141414 */ --color-bg-surface-alt: var(--neutral-800); /* #1c1c1c */ --color-border: var(--neutral-700); /* #2E2E2D */ --color-border-light: rgba(255, 255, 255, 0.18); /* Native UI (form controls, scrollbars, etc.) follows the theme. */ color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --color-title: var(--neutral-100); /* inverso de #303030 */ --color-text: var(--neutral-100); --color-text-soft: var(--neutral-300); --color-bg-white: var(--neutral-900); --color-bg-dark: var(--neutral-900); --color-bg-surface: var(--neutral-850); --color-bg-surface-alt: var(--neutral-800); --color-border: var(--neutral-700); --color-border-light: rgba(255, 255, 255, 0.18); color-scheme: dark; } }