/* style.css — Design tokens and component styles for Lombok Blueprint */
/* =====================================================
DESIGN TOKENS
===================================================== */
:root, [data-theme="light"] {
/* --- Type Scale (fluid) --- */
--text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
--text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
--text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
--text-lg: clamp(1.125rem, 0.95rem + 0.85vw, 1.5rem);
--text-xl: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
--text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
--text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
--text-hero: clamp(3rem, 0.5rem + 7vw, 8rem);
/* --- Spacing (4px base) --- */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
/* --- Header height (single tall row, luxury feel) --- */
--nav-height: 80px;
--space-32: 8rem;
/* --- Surfaces (warm sandy beige) --- */
--color-bg: #f7f5f0;
--color-surface: #faf8f4;
--color-surface-2: #fcfbf8;
--color-surface-offset: #f0ede6;
--color-surface-offset-2: #e8e5de;
--color-surface-dynamic: #e3dfd8;
--color-divider: #dbd8d1;
--color-border: #d3cfc8;
/* --- Text (deep warm charcoal) --- */
--color-text: #1a1814;
--color-text-muted: #6b675e;
--color-text-faint: #a9a59c;
--color-text-inverse: #faf8f4;
/* --- Primary: deep navy / charcoal (UI V2) --- */
--color-primary: #1f3a52;
--color-primary-hover: #163049;
--color-primary-active: #0e2438;
--color-primary-highlight: #dbe4ed;
/* --- Secondary: warm sandy beige (UI V2) --- */
--color-secondary: #d8c6a8;
--color-secondary-hover: #c8b48f;
--color-secondary-active: #b8a079;
--color-secondary-highlight: #f3ebdb;
/* --- Accent / Action: vibrant teal (UI V2) --- */
--color-accent: #0c7c84;
--color-accent-hover: #0a6870;
--color-accent-active: #085560;
--color-accent-highlight: #d0e8ea;
/* --- Secondary highlight: soft terracotta / coral --- */
--color-coral: #d4604a;
--color-coral-hover: #bc4c38;
--color-coral-active: #a03a29;
--color-coral-highlight: #f5ddd9;
/* --- Semantic colors --- */
--color-success: #437a22;
--color-success-hover: #2e5c10;
--color-success-highlight: #d4dfcc;
--color-warning: #d19900;
--color-warning-hover: #b07a00;
--color-warning-highlight: #f0e5be;
--color-error: #c0392b;
--color-error-hover: #a52f22;
--color-error-highlight: #f5d5d2;
/* --- Gold for Google stars --- */
--color-star: #f59e0b;
/* --- WhatsApp green --- */
--color-whatsapp: #25d366;
--color-whatsapp-hover: #1eaf53;
/* --- Radius --- */
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-full: 9999px;
/* --- Transitions --- */
--transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
/* --- Shadows (tone-matched to warm surfaces) --- */
--shadow-sm: 0 1px 2px oklch(0.2 0.01 80 / 0.06);
--shadow-md: 0 4px 12px oklch(0.2 0.01 80 / 0.08);
--shadow-lg: 0 12px 32px oklch(0.2 0.01 80 / 0.12);
/* --- Content widths --- */
--content-narrow: 640px;
--content-default: 960px;
--content-wide: 1200px;
/* --- Font families --- */
--font-display: 'Cormorant Garamond', 'Georgia', serif;
--font-body: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
}
/* =====================================================
DARK MODE
===================================================== */
[data-theme="dark"] {
--color-bg: #141210;
--color-surface: #1a1815;
--color-surface-2: #1f1c18;
--color-surface-offset: #17150f;
--color-surface-offset-2: #1c1a13;
--color-surface-dynamic: #2a2720;
--color-divider: #252219;
--color-border: #34302a;
--color-text: #d4d1ca;
--color-text-muted: #8a8780;
--color-text-faint: #5e5b55;
--color-text-inverse: #1a1814;
--color-primary: #6b8db0;
--color-primary-hover: #8aa7c4;
--color-primary-active: #a1bcd6;
--color-primary-highlight: #1c2a3a;
--color-secondary: #b8a079;
--color-secondary-hover: #c8b48f;
--color-secondary-active: #d8c6a8;
--color-secondary-highlight: #2a2418;
--color-accent: #3da8b0;
--color-accent-hover: #5ab8bf;
--color-accent-active: #6cc5cb;
--color-accent-highlight: #1a3235;
--color-coral: #e8856d;
--color-coral-hover: #f09c87;
--color-coral-active: #f5ae9c;
--color-coral-highlight: #3a1f1a;
--color-success: #6daa45;
--color-success-hover: #4d8f25;
--color-success-highlight: #1e2d16;
--color-warning: #e8af34;
--color-warning-hover: #fdc551;
--color-warning-highlight: #312a10;
--color-error: #e05a4d;
--color-error-hover: #c84035;
--color-error-highlight: #3a1a18;
--color-star: #f59e0b;
--color-whatsapp: #25d366;
--color-whatsapp-hover: #1eaf53;
--shadow-sm: 0 1px 2px oklch(0 0 0 / 0.25);
--shadow-md: 0 4px 12px oklch(0 0 0 / 0.35);
--shadow-lg: 0 12px 32px oklch(0 0 0 / 0.45);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--color-bg: #141210;
--color-surface: #1a1815;
--color-surface-2: #1f1c18;
--color-surface-offset: #17150f;
--color-surface-offset-2: #1c1a13;
--color-surface-dynamic: #2a2720;
--color-divider: #252219;
--color-border: #34302a;
--color-text: #d4d1ca;
--color-text-muted: #8a8780;
--color-text-faint: #5e5b55;
--color-text-inverse: #1a1814;
--color-primary: #6b8db0;
--color-primary-hover: #8aa7c4;
--color-primary-active: #a1bcd6;
--color-primary-highlight: #1c2a3a;
--color-secondary: #b8a079;
--color-secondary-hover: #c8b48f;
--color-secondary-active: #d8c6a8;
--color-secondary-highlight: #2a2418;
--color-accent: #3da8b0;
--color-accent-hover: #5ab8bf;
--color-accent-active: #6cc5cb;
--color-accent-highlight: #1a3235;
--color-coral: #e8856d;
--color-coral-hover: #f09c87;
--color-coral-active: #f5ae9c;
--color-coral-highlight: #3a1f1a;
--color-success: #6daa45;
--color-success-hover: #4d8f25;
--color-success-highlight: #1e2d16;
--color-warning: #e8af34;
--color-warning-hover: #fdc551;
--color-warning-highlight: #312a10;
--color-error: #e05a4d;
--color-error-hover: #c84035;
--color-error-highlight: #3a1a18;
--color-star: #f59e0b;
--color-whatsapp: #25d366;
--color-whatsapp-hover: #1eaf53;
--shadow-sm: 0 1px 2px oklch(0 0 0 / 0.25);
--shadow-md: 0 4px 12px oklch(0 0 0 / 0.35);
--shadow-lg: 0 12px 32px oklch(0 0 0 / 0.45);
}
}
/* =====================================================
LAYOUT
===================================================== */
.container {
width: 100%;
max-width: var(--content-wide);
margin-inline: auto;
padding-inline: var(--space-4);
}
@media (min-width: 640px) {
.container { padding-inline: var(--space-6); }
}
@media (min-width: 1024px) {
.container { padding-inline: var(--space-8); }
}
.container--narrow {
max-width: var(--content-default);
}
/* =====================================================
HEADER / NAV
===================================================== */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: transparent;
border-bottom: 1px solid transparent;
transition: background 400ms ease, border-color 400ms ease, backdrop-filter 400ms ease;
}
.site-header.scrolled {
background: color-mix(in oklab, var(--color-bg) 95%, transparent);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--color-border);
}
/* When not over hero (non-home pages), always solid */
.site-header.solid {
background: color-mix(in oklab, var(--color-bg) 97%, transparent);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--color-border);
}
.nav-inner {
display: grid;
grid-template-columns: auto 1fr auto; /* logo | centred nav | actions */
align-items: center;
column-gap: var(--space-6);
height: var(--nav-height);
}
.nav-logo {
display: flex;
align-items: center;
gap: var(--space-2);
text-decoration: none;
flex-shrink: 0;
}
/* Over hero: white text */
.site-header:not(.scrolled):not(.solid) .nav-brand {
color: rgba(250, 248, 244, 0.95);
}
.site-header:not(.scrolled):not(.solid) .nav-links a,
.site-header:not(.scrolled):not(.solid) .nav-links .nav-dropdown-toggle {
color: rgba(250, 248, 244, 0.75);
}
.site-header:not(.scrolled):not(.solid) .nav-links a:hover {
color: #fff;
}
.site-header:not(.scrolled):not(.solid) .nav-links a.active {
color: #fff;
border-bottom-color: rgba(255,255,255,0.85);
}
.site-header:not(.scrolled):not(.solid) .btn-icon {
color: rgba(250, 248, 244, 0.75);
}
/* Only the top-level login controls (sign-in pill / avatar) go white over a
hero — NOT the buttons inside the dropdown panel, which sits on a light
surface on every page. Scoping to the direct children fixes the
"invisible menu items" bug on hero (transparent-header) pages. */
.site-header:not(.scrolled):not(.solid) .nav-login-wrap > a,
.site-header:not(.scrolled):not(.solid) .nav-login-wrap > button,
.site-header:not(.scrolled):not(.solid) .nav-login-wrap .user-avatar-btn {
color: rgba(250, 248, 244, 0.9);
border-color: rgba(250, 248, 244, 0.5);
}
.site-header:not(.scrolled):not(.solid) .nav-login-wrap > a:hover,
.site-header:not(.scrolled):not(.solid) .nav-login-wrap > button:hover,
.site-header:not(.scrolled):not(.solid) .nav-login-wrap .user-avatar-btn:hover {
background: rgba(255,255,255,0.15);
color: #fff;
border-color: rgba(255,255,255,0.6);
}
.nav-brand {
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 600;
color: var(--color-text);
letter-spacing: 0.22em;
text-transform: uppercase;
line-height: 1;
}
.nav-links {
display: none;
align-items: center;
gap: var(--space-6); /* generous spacing — luxury feel */
list-style: none;
justify-content: center;
justify-self: center;
padding: 0;
margin: 0;
}
@media (min-width: 1024px) {
.nav-links { display: flex; }
}
.nav-links a,
.nav-links .nav-dropdown-toggle {
text-decoration: none;
color: var(--color-text-muted);
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 0.06em;
padding: var(--space-2) 0;
background: transparent;
border: 0;
border-bottom: 1.5px solid transparent; /* thin underline active state */
border-radius: 0;
transition: color var(--transition-interactive), border-color var(--transition-interactive);
white-space: nowrap;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.nav-links a:hover,
.nav-links .nav-dropdown-toggle:hover {
color: var(--color-text);
}
.nav-links a.active,
.nav-links .nav-dropdown.active > .nav-dropdown-toggle {
color: var(--color-text);
border-color: var(--color-text);
}
/* ---- Nav Dropdown ---- */
.nav-dropdown {
position: relative;
}
/* .nav-dropdown-toggle inherits styling from .nav-links .nav-dropdown-toggle
above (luxury underline-on-active). Only dropdown-specific hero overrides
live here. */
.nav-dropdown-toggle {
font-family: var(--font-body);
line-height: 1;
}
/* Hero overlay variants for dropdown toggle (matches .nav-links a) */
.site-header:not(.scrolled):not(.solid) .nav-dropdown-toggle {
color: rgba(250, 248, 244, 0.75);
}
.site-header:not(.scrolled):not(.solid) .nav-dropdown-toggle:hover,
.site-header:not(.scrolled):not(.solid) .nav-dropdown.active > .nav-dropdown-toggle {
color: #fff;
border-bottom-color: rgba(255,255,255,0.85);
}
.nav-dd-chevron {
transition: transform 200ms ease;
flex-shrink: 0;
opacity: 0.7;
}
.nav-dropdown:hover .nav-dd-chevron,
.nav-dropdown.open .nav-dd-chevron {
transform: rotate(180deg);
opacity: 1;
}
.nav-dropdown-menu {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(-6px);
min-width: 210px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
z-index: 300;
list-style: none;
margin: 0;
padding: var(--space-2) 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 160ms ease, visibility 160ms ease, transform 160ms ease;
}
/* Bridge gap between toggle and menu so hover doesn't break */
.nav-dropdown-menu::before {
content: '';
position: absolute;
top: -10px;
left: 0;
right: 0;
height: 10px;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu li { list-style: none; }
.nav-dropdown-menu a {
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--space-3) var(--space-4);
text-decoration: none;
color: var(--color-text);
border: none !important;
border-radius: 0 !important;
transition: background var(--transition-interactive);
white-space: normal;
}
.nav-dropdown-menu a:hover {
background: var(--color-surface-offset, color-mix(in srgb, var(--color-surface) 60%, var(--color-bg)));
color: var(--color-primary);
}
.nav-dropdown-menu li:first-child a { border-radius: calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0 !important; }
.nav-dropdown-menu li:last-child a { border-radius: 0 0 calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) !important; }
.nav-dropdown-menu li + li { border-top: 1px solid var(--color-border); }
/* Pin dropdown menu text to dark regardless of hero/transparent header state */
.site-header:not(.scrolled):not(.solid) .nav-dropdown-menu a { color: var(--color-text); }
.site-header:not(.scrolled):not(.solid) .nav-dropdown-menu a:hover { color: var(--color-primary); }
.nav-dd-label {
font-size: var(--text-sm);
font-weight: 500;
color: inherit;
white-space: nowrap;
}
/* ---- Mobile search pill (opens the command palette) ---- */
.mobile-search-wrap {
display: flex;
align-items: center;
gap: var(--space-2);
width: 100%;
min-height: 48px;
padding: 0 var(--space-4);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 999px;
margin-bottom: var(--space-4);
cursor: pointer;
font-family: var(--font-body);
text-align: left;
transition: border-color var(--transition-interactive), background var(--transition-interactive);
}
.mobile-search-wrap:hover,
.mobile-search-wrap:focus-visible { border-color: var(--color-accent); }
.mobile-search-icon { color: var(--color-text-faint); flex-shrink: 0; }
.mobile-search-trigger-label { color: var(--color-text-faint); font-size: 0.95rem; }
/* ---- Mobile nav groups (accordion) ---- */
.mobile-nav-group {}
/* Group toggles speak in the same editorial voice as the primary rows —
tokens only (the hardcoded #1A1A1A + alpha hairlines broke the brand rule
and needed dark-mode patch rules; deleted 2026-08-05). */
.mobile-nav-group-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
background: none;
border: none;
font-family: var(--font-body);
font-size: 1.4rem;
font-weight: 400;
letter-spacing: -0.02em;
color: var(--color-text);
padding: var(--space-4) 0;
cursor: pointer;
text-align: left;
border-bottom: 1px solid var(--color-divider);
transition: color var(--transition-interactive);
}
.mobile-nav-group-toggle:hover { color: var(--color-primary); }
.mobile-nav-group-toggle:active { opacity: 0.7; }
.mobile-nav-group-chevron {
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
flex-shrink: 0;
width: 16px;
height: 16px;
color: var(--color-text-faint);
}
.mobile-nav-group.open .mobile-nav-group-chevron {
transform: rotate(180deg);
}
/* Reveal: max-height tween on the signature curve. Deliberately NO inner
wrapper — updateAdminNav() appends admin links straight into
.mobile-nav-group-items, so the DOM must stay flat. */
.mobile-nav-group-items {
display: flex;
flex-direction: column;
max-height: 0;
overflow: hidden;
padding: 0 0 0 var(--space-5);
border-left: 2px solid var(--color-primary);
margin: 0;
transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1),
margin 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.mobile-nav-group.open .mobile-nav-group-items {
max-height: 640px;
margin: var(--space-1) 0 var(--space-2);
}
.mobile-nav-group-items a {
display: flex;
align-items: center;
min-height: 44px;
font-size: 0.95rem;
color: var(--color-text-muted);
padding: 4px 0;
border-bottom: none;
letter-spacing: normal;
font-weight: 500;
transition: color var(--transition-interactive);
}
.mobile-nav-group-items a:hover {
color: var(--color-primary);
}
.nav-actions {
display: flex;
align-items: center;
gap: var(--space-3);
justify-self: end;
}
/* Top-level login controls only (direct children + the avatar). The generic
".nav-login-wrap button" selector used to leak pill borders/colours onto
the .user-dropdown-item buttons nested inside the dropdown panel. */
.nav-login-wrap > a,
.nav-login-wrap > button,
.nav-login-wrap .user-avatar-btn {
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.06em;
padding: var(--space-2) var(--space-4);
border: 1px solid var(--color-text);
border-radius: var(--radius-full);
text-decoration: none;
color: var(--color-text);
transition: all var(--transition-interactive);
background: transparent;
cursor: pointer;
}
.nav-login-wrap > a:hover,
.nav-login-wrap > button:hover,
.nav-login-wrap .user-avatar-btn:hover {
background: var(--color-text);
color: var(--color-bg);
}
.btn-icon {
width: 40px;
height: 40px;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text);
border: 1.5px solid var(--color-divider);
transition: color var(--transition-interactive), background var(--transition-interactive), border-color var(--transition-interactive);
}
.btn-icon:hover {
color: var(--color-text);
background: var(--color-surface-offset);
border-color: var(--color-text-muted);
}
.btn-icon:active {
background: var(--color-surface-dynamic);
}
.site-header:not(.scrolled):not(.solid) .btn-icon {
color: rgba(250,248,244,0.85);
border-color: rgba(250,248,244,0.35);
}
.site-header:not(.scrolled):not(.solid) .btn-icon:hover {
color: #fff;
border-color: rgba(250,248,244,0.6);
background: rgba(255,255,255,0.1);
}
/* Login button — icon-only circle, matched to .lang-toggle height */
.login-btn.login-btn {
width: 32px;
height: 32px;
padding: 0;
gap: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1.5px solid var(--color-primary);
border-radius: 50%;
color: var(--color-primary);
background: transparent;
cursor: pointer;
flex-shrink: 0;
}
.login-btn.login-btn:hover {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
}
.site-header:not(.scrolled):not(.solid) .login-btn.login-btn {
border-color: rgba(250,248,244,0.7);
color: #fff;
}
.site-header:not(.scrolled):not(.solid) .login-btn.login-btn:hover {
background: rgba(255,255,255,0.18);
border-color: #fff;
color: #fff;
}
.hamburger {
display: flex;
position: relative;
}
@media (min-width: 1024px) {
.hamburger { display: none; }
}
/* Hamburger → X morph */
.hamburger-icon {
transition: opacity 220ms ease, transform 220ms ease;
}
.hamburger-icon--close {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg) scale(0.8);
opacity: 0;
}
.hamburger[aria-expanded="true"] .hamburger-icon--bars {
opacity: 0;
transform: rotate(45deg) scale(0.8);
}
.hamburger[aria-expanded="true"] .hamburger-icon--close {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) scale(1);
}
/* Mobile menu — "Editorial Index" (2026-08-05): full-screen typographic
index on the warm brand ground. Tokens only; both themes come free. */
.mobile-menu {
position: fixed;
inset: 0;
background: var(--color-bg);
z-index: 99;
padding: calc(var(--nav-height) + var(--space-4)) var(--space-6)
calc(var(--space-6) + env(safe-area-inset-bottom));
display: flex;
flex-direction: column;
gap: 0;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
opacity: 0;
pointer-events: none;
transform: translateY(10px);
will-change: transform, opacity;
/* Asymmetric: close fast (0.25s), open on the 0.4s signature curve below */
transition: opacity 0.25s cubic-bezier(0.25, 1, 0.5, 1),
transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}
.mobile-menu.open {
opacity: 1;
pointer-events: all;
transform: translateY(0);
transition-duration: 0.4s;
}
/* ── Index numbers: small tabular digits beside big serif destinations ── */
.nav-num {
font-size: 0.7rem;
font-variant-numeric: tabular-nums;
color: var(--color-text-faint);
margin-right: var(--space-3);
font-weight: 500;
letter-spacing: 0.12em;
font-family: var(--font-body);
flex-shrink: 0;
line-height: 1;
}
/* Left-side label group inside toggle buttons */
.mobile-nav-label {
display: flex;
align-items: center;
}
/* Main nav links — direct children only, so CTA/WA (inside divs) and
sub-items (inside .mobile-nav-group-items) are unaffected. Destinations
are headings, so they speak in the display serif (brand doc §5). */
.mobile-menu > a {
display: flex;
align-items: center;
text-decoration: none;
color: var(--color-text);
font-size: 1.4rem;
font-family: var(--font-body);
font-weight: 400;
letter-spacing: -0.02em;
padding: var(--space-4) 0;
border-bottom: 1px solid var(--color-divider);
transition: color var(--transition-interactive);
}
.mobile-menu > a:hover { color: var(--color-primary); }
.mobile-menu > a:active { opacity: 0.7; }
/* ── Active route: the menu's ONLY teal — color + underline, never color
alone (brand hard rule §6.3) ── */
.mobile-menu a.active { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
.mobile-menu a.active .nav-num { color: var(--color-accent); }
/* ── PRO badge rides the row's right edge (gold pill styled at .nav-pro) ── */
.mobile-menu .nav-pro { margin-left: auto; }
.mobile-nav-group-items .nav-pro { margin-left: auto; }
/* ── Runtime-injected account links (re-created on every updateUI) ── */
.mobile-auth-link { display: flex; flex-direction: column; }
.mobile-auth-link a {
display: flex;
align-items: center;
min-height: 44px;
font-size: 0.95rem;
font-weight: 500;
color: var(--color-text-muted);
transition: color var(--transition-interactive);
}
.mobile-auth-link a:hover { color: var(--color-primary); }
/* ── Utility band: quiet zone under one hairline (CTA/auth/WA live here) ── */
#mobile-menu-foot {
border-top: 1px solid var(--color-divider);
margin-top: auto;
}
/* ── Mobile nav: staggered cascade fade-in (sub-600ms total) ── */
@keyframes mobileNavIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.mobile-menu.open > * {
animation: mobileNavIn 0.4s cubic-bezier(0.25, 1, 0.5, 1) both;
}
.mobile-menu.open > *:nth-child(1) { animation-delay: 30ms; }
.mobile-menu.open > *:nth-child(2) { animation-delay: 65ms; }
.mobile-menu.open > *:nth-child(3) { animation-delay: 100ms; }
.mobile-menu.open > *:nth-child(4) { animation-delay: 135ms; }
.mobile-menu.open > *:nth-child(5) { animation-delay: 170ms; }
.mobile-menu.open > *:nth-child(6) { animation-delay: 205ms; }
.mobile-menu.open > *:nth-child(7) { animation-delay: 240ms; }
.mobile-menu.open > *:nth-child(8) { animation-delay: 275ms; }
.mobile-menu.open > *:nth-child(9) { animation-delay: 310ms; }
.mobile-menu.open > *:nth-child(10) { animation-delay: 345ms; }
.mobile-menu.open > *:nth-child(11) { animation-delay: 380ms; }
.mobile-menu.open > *:nth-child(12) { animation-delay: 415ms; }
/* Late/injected children (auth, CTA, WA) join the tail, never pop at t=0 */
.mobile-menu.open > *:nth-child(n+13) { animation-delay: 450ms; }
@media (prefers-reduced-motion: reduce) {
.mobile-menu { transition: opacity 150ms ease; transform: none; }
.mobile-menu.open > * { animation: none; }
.mobile-nav-group-items,
.mobile-nav-group-chevron { transition: none; }
}
/* =====================================================
HERO SECTION — Full bleed, cinematic
===================================================== */
.hero {
position: relative;
min-height: 100svh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
background: #1a1814;
}
/* Base layer — the finished, photorealistic villa. */
.hero-bg {
position: absolute;
inset: 0;
background-image: url('./images/hero-main.webp');
background-size: cover;
background-position: center 40%;
background-repeat: no-repeat;
transform: scale(1.04);
transition: transform 8s ease-out;
}
.hero-bg.loaded {
transform: scale(1);
}
/* When the X-Ray reveal is active, both layers must stay pixel-locked — any
Ken Burns zoom on the base would de-register the wireframe during the wipe.
So we pin both layers at identity scale. */
.hero.hero-xray .hero-bg,
.hero.hero-xray .hero-bg.loaded {
transform: none;
transition: none;
}
/* Hero video loop (2026-08-11) — the blueprint-materialization cycle as a
self-playing loop. Injected by HeroVideo (app.js) between the photo and the
wireframe layers; invisible until it can play through, then crossfades in
over the photo. Same crop/position as the photo so the fade is seamless. */
.hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 40%;
opacity: 0;
transition: opacity 0.9s ease;
pointer-events: none;
}
.hero-video.is-playing { opacity: 1; }
/* The moment a hero video is ARMED (element attached, fetch under way) the
photo eases from wherever its Ken Burns zoom is to identity scale, so by
crossfade time the photo and the (unscaled) video of the same frame are
pixel-registered — without this, a video that outraces GSAP (which pins via
.hero-xray) blends against a photo mid-zoom. Placed after the .hero-xray
pin: equal-specificity .loaded rows resolve here, but under .hero-xray the
transform is already none so the shorter transition is a no-op. */
.hero--video-arming .hero-bg,
.hero--video-arming .hero-bg.loaded,
.hero--video .hero-bg,
.hero--video .hero-bg.loaded {
transform: none;
transition: transform 0.9s ease;
}
/* While the loop plays it IS the X-Ray effect — the scroll wipe's layers bow
out with the same crossfade (never a pop; !important beats the scanline's
GSAP-inline opacity). */
.hero--video .hero-wire,
.hero--video .hero-scanline {
opacity: 0 !important;
transition: opacity 0.9s ease;
}
/* Reveal layer — pixel-registered wireframe of the same frame.
Default state is fully clipped away (invisible) so that without JS/GSAP the
finished photo shows through. JS opens the clip on init, then scrolls it shut. */
.hero-wire {
position: absolute;
inset: 0;
z-index: 1;
background-image: url('./images/hero-wire.webp');
background-size: cover;
background-position: center 40%;
background-repeat: no-repeat;
clip-path: inset(100% 0 0 0);
-webkit-clip-path: inset(100% 0 0 0);
/* NOTE: no translateZ(0)/backface-visibility here. Promoting this layer to a
compositor texture caches the cover-scaled background at a softer raster,
so it rendered visibly blurrier than the base layer below the clip seam.
clip-path animates smoothly without forced promotion. */
will-change: clip-path;
pointer-events: none;
}
/* Razor-thin scanning line riding the clip edge — the "materialization front". */
.hero-scanline {
position: absolute;
left: 0;
right: 0;
top: 0;
z-index: 3;
height: 2px;
opacity: 0;
pointer-events: none;
background: linear-gradient(
to right,
transparent 0%,
rgba(212, 175, 110, 0.0) 4%,
rgba(244, 226, 178, 0.95) 50%,
rgba(212, 175, 110, 0.0) 96%,
transparent 100%
);
box-shadow:
0 0 8px rgba(244, 226, 178, 0.7),
0 0 22px rgba(212, 175, 110, 0.55);
transform: translateZ(0);
will-change: top, opacity;
}
.hero-overlay {
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(
to bottom,
rgba(10, 8, 6, 0.38) 0%,
rgba(10, 8, 6, 0.52) 50%,
rgba(10, 8, 6, 0.72) 100%
);
}
.hero-inner {
position: relative;
z-index: 4;
width: 100%;
padding-top: calc(var(--nav-height) + var(--space-6));
padding-bottom: clamp(var(--space-16), 8vw, var(--space-32));
}
.hero-title {
font-family: var(--font-body);
font-size: clamp(2.5rem, 1rem + 5vw, 5rem);
color: #faf8f4;
letter-spacing: 0.35em;
line-height: 1.1;
margin-bottom: var(--space-4);
font-weight: 300;
text-transform: uppercase;
text-shadow: 0 2px 32px rgba(0,0,0,0.3);
}
.hero-subtitle {
font-family: var(--font-display);
font-size: clamp(1.05rem, 0.85rem + 0.75vw, 1.4rem);
color: #fff;
max-width: 52ch;
margin-inline: auto;
margin-bottom: var(--space-10);
line-height: 1.6;
font-weight: 400;
font-style: italic;
letter-spacing: 0.02em;
text-shadow: 0 2px 12px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.3);
}
/* Hero search bar — see .hero-search--trigger below (ADR-0001 command palette).
The original .hero-search-input / .hero-search-btn / .hero-search-icon rules
were removed when the hero became a palette trigger. */
.hero-scroll-hint {
position: absolute;
bottom: var(--space-8);
left: 50%;
transform: translateX(-50%);
z-index: 4;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
/* Opacity is owned by the hero-reveal wipe (GSAP fades this container out as
the wireframe wipes). Do NOT animate opacity here — a CSS animation would
override the wipe-off and the arrow would never disappear. */
}
/* Metallic-gold scroll cue — larger and high-contrast so it reads on the
varied hero (drop-shadow keeps it visible over bright spots). The bounce
lives on the SVG so the container's opacity stays free for the wipe. */
.hero-scroll-arrow {
width: 27px;
height: 27px;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
animation: scroll-bounce 2.4s ease-in-out infinite;
}
@keyframes scroll-bounce {
0%, 100% { transform: translateY(0); opacity: 0.5; }
50% { transform: translateY(7px); opacity: 0.62; }
}
/* Mobile scroll cue strip — the hero stops ~72px short of the viewport bottom
so a light band (the start of the page proper) shows through, with the gold
arrow sitting in it. Hidden on desktop, where the in-hero hint remains.
GSAP fades .hero-scroll-strip together with .hero-scroll-hint on scroll. */
.hero-scroll-strip {
display: none;
justify-content: center;
align-items: center;
padding: var(--space-3) 0 0;
background: var(--color-surface);
}
.hero-scroll-arrow--strip {
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}
@media (max-width: 768px) {
.hero { min-height: calc(100svh - 72px); }
.hero-scroll-hint { display: none; }
.hero-scroll-strip { display: flex; }
}
/* =====================================================
HOME SHOWCASE — editorial image-card sections
(Property & Development · Vendor Directory · Marketplace)
===================================================== */
.home-showcase-section {
padding-block: clamp(56px, 7vw, 96px);
background: var(--color-surface);
}
.home-showcase-section--offset {
background: var(--color-surface-offset);
}
.showcase-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(var(--space-6), 3vw, var(--space-10));
}
.showcase-card {
display: flex;
flex-direction: column;
text-decoration: none;
color: var(--color-text);
}
.showcase-card-media {
overflow: hidden;
border-radius: var(--radius-lg);
aspect-ratio: 16 / 10;
background: var(--color-border);
margin-bottom: var(--space-4);
}
.showcase-card-img {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.showcase-card:hover .showcase-card-img {
transform: scale(1.04);
}
/* Single label under each card — deliberately styled like the old "Explore →"
CTA (small caps, tracked, primary colour, animated arrow). */
.showcase-card-label {
margin: 0;
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-primary);
}
.showcase-card-label svg {
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
flex-shrink: 0;
}
.showcase-card:hover .showcase-card-label svg {
transform: translateX(5px);
}
@media (max-width: 900px) {
.showcase-grid {
grid-template-columns: 1fr;
gap: var(--space-8);
}
}
/* =====================================================
HOME PROMO — shared split card: text + CTAs on the left
panel, photo on the right. Used by both the Job Board and
the Marketplace (photo set per-card via --promo-img). On
mobile the panel stacks above the photo and the CTAs move
to a photo overlay.
===================================================== */
.home-promo-section {
padding-block: clamp(56px, 7vw, 96px);
background: var(--color-surface);
}
/* Back-to-back promo cards (Job Board → Marketplace): collapse the second
card's top padding so the gap between them equals one section's padding,
not two stacked ones. */
.home-promo-section + .home-promo-section {
padding-block-start: 0;
}
.home-promo-banner {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
border-radius: var(--radius-xl);
overflow: hidden;
background: var(--color-surface-offset);
border: 1px solid var(--color-border);
min-height: clamp(340px, 34vw, 420px);
}
.home-promo-text {
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--space-4);
padding: clamp(var(--space-8), 4vw, var(--space-12));
}
.home-promo-lead {
font-family: var(--font-display);
font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
font-style: italic;
color: var(--color-text);
line-height: 1.35;
margin: 0;
}
.home-promo-media {
position: relative;
min-height: 280px;
}
.home-promo-img {
position: absolute;
inset: 0;
background: var(--promo-img, none) center / cover no-repeat;
}
/* Soft bottom scrim so the overlay CTAs stay legible over the photo (mobile) */
.home-promo-scrim {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(10, 8, 6, 0.6) 0%,
rgba(10, 8, 6, 0.22) 40%,
rgba(10, 8, 6, 0) 65%
);
opacity: 0; /* only shown behind the mobile overlay CTAs */
}
.home-promo-actions {
display: flex;
align-items: center;
gap: var(--space-5);
flex-wrap: wrap;
}
/* Desktop: CTAs sit under the text on the left panel */
.home-promo-actions--panel {
margin-top: var(--space-2);
}
/* Mobile-only overlay set is hidden on desktop */
.home-promo-actions--overlay {
display: none;
}
.home-promo-link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: #faf8f4;
font-size: var(--text-sm);
font-weight: 500;
text-decoration: none;
border-bottom: 1px solid rgba(250, 248, 244, 0.4);
padding-bottom: 2px;
transition: border-color 0.25s ease;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
.home-promo-link:hover {
border-color: #faf8f4;
}
/* Dark variant for the light left panel (desktop) */
.home-promo-link--dark {
color: var(--color-text);
border-bottom-color: var(--color-border);
text-shadow: none;
}
.home-promo-link--dark:hover {
border-bottom-color: var(--color-text);
}
@media (max-width: 768px) {
/* Title + lead above; photo below with the CTAs overlaid on it */
.home-promo-banner {
grid-template-columns: 1fr;
min-height: 0;
}
.home-promo-text {
padding: var(--space-6) var(--space-5);
}
.home-promo-media {
min-height: 300px;
}
/* Swap which CTA set shows */
.home-promo-actions--panel {
display: none;
}
.home-promo-scrim {
opacity: 1;
}
.home-promo-actions--overlay {
display: flex;
position: absolute;
left: var(--space-5);
right: var(--space-5);
bottom: var(--space-5);
}
}
/* =====================================================
EDITORIAL — Featured Developers & Projects
===================================================== */
.editorial-guides-section {
padding-block: clamp(60px, 9vw, 120px);
background: var(--color-surface-offset);
}
/* Shared: muted uppercase eyebrow label */
.editorial-eyebrow {
display: block;
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-text-faint);
margin-bottom: var(--space-2);
}
/* Shared: large serif section heading */
.editorial-section-title {
font-family: var(--font-display);
font-size: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
font-weight: 400;
color: var(--color-text);
letter-spacing: -0.02em;
line-height: 1.1;
margin: 0;
}
@media (max-width: 768px) {
.editorial-section-title {
font-size: 1.7rem;
font-weight: 450;
}
}
/* Shared: minimal text link with animated arrow */
.editorial-view-all-link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-text-muted);
text-decoration: none;
letter-spacing: 0.03em;
transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.editorial-view-all-link:hover {
color: var(--color-text);
}
.editorial-arrow-icon {
flex-shrink: 0;
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.editorial-view-all-link:hover .editorial-arrow-icon {
transform: translateX(5px);
}
/* Section 1: header row — heading left, CTA right */
.editorial-projects-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-6);
margin-bottom: clamp(var(--space-8), 4vw, var(--space-12));
}
/* =====================================================
EDITORIAL — Guides & Resources list
===================================================== */
/* Section 2: header */
.editorial-guides-header {
margin-bottom: clamp(var(--space-6), 3vw, var(--space-10));
}
/* Section 2: editorial list — no bullets */
.editorial-guides-list {
list-style: none;
padding: 0;
margin: 0;
}
.editorial-guide-item:first-child .editorial-guide-row {
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .editorial-guide-item:first-child .editorial-guide-row {
border-top-color: rgba(255, 255, 255, 0.07);
}
/* Section 2: row — full-width flex hit target */
.editorial-guide-row {
position: relative;
display: flex;
align-items: center;
gap: var(--space-6);
padding: var(--space-5) var(--space-2);
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
text-decoration: none;
color: var(--color-text);
}
[data-theme="dark"] .editorial-guide-row {
border-bottom-color: rgba(255, 255, 255, 0.07);
}
/* Hover: soft background tint via pseudo element */
.editorial-guide-row::before {
content: '';
position: absolute;
inset: 0;
background: color-mix(in oklab, var(--color-primary) 4%, transparent);
opacity: 0;
transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
pointer-events: none;
border-radius: 2px;
}
.editorial-guide-row:hover::before {
opacity: 1;
}
/* Row: muted index number */
.editorial-guide-index {
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 500;
color: var(--color-text-faint);
letter-spacing: 0.08em;
min-width: 24px;
flex-shrink: 0;
position: relative;
z-index: 1;
}
/* Row: guide title — shifts right on hover */
.editorial-guide-title {
flex: 1;
font-family: var(--font-display);
font-size: clamp(1rem, 0.85rem + 0.35vw, 1.2rem);
font-weight: 400;
color: var(--color-text);
line-height: 1.4;
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
position: relative;
z-index: 1;
}
.editorial-guide-row:hover .editorial-guide-title {
transform: translateX(6px);
}
/* Row: reading time / category tag */
.editorial-guide-meta {
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-faint);
white-space: nowrap;
flex-shrink: 0;
position: relative;
z-index: 1;
}
/* Row: arrow — revealed on hover */
.editorial-guide-arrow {
opacity: 0;
flex-shrink: 0;
color: var(--color-text-muted);
transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
position: relative;
z-index: 1;
}
.editorial-guide-row:hover .editorial-guide-arrow {
opacity: 1;
transform: translateX(3px);
}
/* Section 2: footer with "All guides" link */
.editorial-guides-footer {
margin-top: clamp(var(--space-6), 3vw, var(--space-8));
display: flex;
justify-content: flex-end;
}
/* =====================================================
EDITORIAL — Responsive / Mobile
===================================================== */
@media (max-width: 767px) {
/* Guides: hide index numbers to keep title clean */
.editorial-guide-index {
display: none;
}
.editorial-guide-row {
gap: var(--space-3);
padding: var(--space-4) var(--space-1);
}
/* Guides: slightly more line-height for readability */
.editorial-guide-title {
line-height: 1.55;
}
/* Guides: center the footer CTA */
.editorial-guides-footer {
justify-content: center;
}
}
/* =====================================================
SECTION LAYOUTS — Generous, editorial breathing room
===================================================== */
.section {
padding-block: clamp(80px, 9vw, 120px);
}
.section-header {
margin-bottom: clamp(var(--space-10), 4vw, var(--space-16));
text-align: center;
}
.section-title {
font-family: var(--font-display);
font-size: clamp(2rem, 1rem + 2.5vw, 3.5rem);
color: var(--color-text);
letter-spacing: -0.02em;
line-height: 1.08;
margin-bottom: var(--space-4);
font-weight: 400;
}
/* =====================================================
CARD GRID
===================================================== */
.card-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
@media (min-width: 600px) {
.card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
.card-grid { grid-template-columns: repeat(3, 1fr); }
}
.card-grid--2col {
grid-template-columns: 1fr;
}
@media (min-width: 600px) {
.card-grid--2col { grid-template-columns: repeat(2, 1fr); }
}
/* =====================================================
CARD — Premium flat design with hover lift
===================================================== */
.card {
background: #fff;
border: 1px solid var(--color-divider);
border-radius: var(--radius-xl);
padding: var(--space-6) var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-3);
transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms cubic-bezier(0.16,1,0.3,1);
position: relative;
overflow: hidden;
box-shadow: 0 1px 3px rgba(26,24,20,0.04);
}
.card:hover {
border-color: color-mix(in oklab, var(--color-primary) 25%, var(--color-divider));
box-shadow: 0 8px 32px rgba(26, 24, 20, 0.09);
transform: translateY(-3px);
}
/* Visual header — avatar + category + badges + rating */
.card-visual-header {
display: flex;
align-items: center;
gap: var(--space-3);
}
.card-avatar {
width: 48px;
height: 48px;
border-radius: 10px;
object-fit: cover;
flex-shrink: 0;
background: var(--color-surface-offset);
}
.card-avatar--logo {
padding: 4px;
background: #fff;
border: 1px solid var(--color-divider);
}
.card-avatar--placeholder {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--color-primary), color-mix(in oklab, var(--color-primary) 70%, #000));
color: #fff;
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 600;
}
.card-header-info {
flex: 1;
min-width: 0;
}
.card-header-badges {
display: flex;
gap: var(--space-1);
margin-top: 2px;
}
[data-theme="dark"] .card {
background: var(--color-surface);
}
[data-theme="dark"] .card-avatar--logo {
background: var(--color-surface-2);
border-color: var(--color-divider);
}
/* Legacy card-top (for projects etc.) */
.card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.card-top-left {
display: flex;
align-items: center;
gap: var(--space-2);
}
/* Social links */
.social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--radius-sm, 6px);
transition: transform .2s, opacity .2s;
}
.social-link:hover {
transform: scale(1.1);
opacity: 0.8;
}
.social-link--instagram { color: #E1306C; }
.social-link--facebook { color: #1877F2; }
.social-link--linkedin { color: #0A66C2; }
/* Category label — subtle, no background */
.card-category-label {
font-size: var(--text-xs);
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* Badge — light, quiet pill */
.card-badge {
font-size: 0.6875rem;
font-weight: 600;
color: color-mix(in oklab, var(--color-star) 85%, var(--color-text));
background: color-mix(in oklab, var(--color-star) 10%, transparent);
padding: 1px var(--space-2);
border-radius: var(--radius-full);
line-height: 1.5;
white-space: nowrap;
}
.card-badge--trusted {
color: #0c7c84;
background: rgba(12, 124, 132, 0.1);
}
/* Inline rating — small, text-level */
.card-rating-inline {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: var(--text-xs);
font-weight: 600;
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
flex-shrink: 0;
}
.card-rating-inline--sm {
font-size: 0.6875rem;
}
.card-rating-star {
color: var(--color-star);
font-size: 0.8125rem;
line-height: 1;
}
.card-rating-count {
color: var(--color-text-faint);
font-weight: 400;
}
/* Card name — clickable */
.card-name {
font-family: var(--font-display);
font-size: var(--text-lg);
color: var(--color-text);
letter-spacing: -0.01em;
line-height: 1.25;
}
.card-name a {
color: inherit;
text-decoration: none;
transition: color var(--transition-interactive);
}
.card-name a:hover {
color: var(--color-primary);
}
/* Description */
.card-desc {
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
max-width: none;
}
/* Meta line — plain text with icons, no backgrounds */
.card-meta-line {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
.card-meta-item {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-xs);
color: var(--color-text-faint);
}
.card-meta-item svg {
flex-shrink: 0;
opacity: 0.6;
}
.card-meta-sep {
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--color-text-faint);
flex-shrink: 0;
}
/* Tags line — inline text, dot-separated */
.card-tags-line {
display: flex;
align-items: center;
gap: var(--space-1);
flex-wrap: wrap;
}
.card-tag {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
.card-tag-dot {
color: var(--color-text-faint);
font-size: var(--text-xs);
}
/* Footer: view button + whatsapp icon */
.card-footer {
display: flex;
align-items: center;
gap: var(--space-2);
margin-top: auto;
padding-top: var(--space-3);
border-top: 1px solid var(--color-divider);
}
.card-view-btn {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-primary);
background: none;
border: none;
cursor: pointer;
padding: var(--space-1) 0;
transition: color var(--transition-interactive);
}
.card-view-btn:hover {
color: var(--color-primary-hover);
}
.card-view-btn:active {
color: var(--color-primary-active);
}
.card-view-btn svg {
flex-shrink: 0;
transition: transform var(--transition-interactive);
}
.card-view-btn:hover svg {
transform: translateX(2px);
}
.card-wa-btn {
display: inline-flex;
align-items: center;
gap: 5px;
height: 34px;
padding: 0 10px;
border-radius: var(--radius-full);
color: #25d366;
background: color-mix(in oklab, #25d366 8%, transparent);
border: 1px solid color-mix(in oklab, #25d366 20%, transparent);
cursor: pointer;
text-decoration: none;
margin-left: auto;
transition: background var(--transition-interactive), border-color var(--transition-interactive);
flex-shrink: 0;
white-space: nowrap;
}
.card-wa-btn:hover {
background: color-mix(in oklab, #25d366 15%, transparent);
border-color: color-mix(in oklab, #25d366 35%, transparent);
text-decoration: none;
}
.card-wa-btn:active {
background: color-mix(in oklab, #25d366 22%, transparent);
}
.card-wa-btn svg {
flex-shrink: 0;
}
.card-wa-num {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1;
}
.card-check-btn {
display: inline-flex;
align-items: center;
gap: 4px;
height: 34px;
padding: 0 10px;
border-radius: var(--radius-full);
color: var(--color-text-muted);
background: rgba(100, 116, 139, 0.07);
border: 1px solid rgba(100, 116, 139, 0.18);
cursor: pointer;
font-size: 0.7rem;
font-weight: 600;
white-space: nowrap;
transition: background var(--transition-interactive), border-color var(--transition-interactive), color var(--transition-interactive);
}
.card-check-btn:hover {
background: rgba(100, 116, 139, 0.14);
border-color: rgba(100, 116, 139, 0.32);
color: var(--color-text-secondary);
}
.card-check-btn:active {
background: rgba(100, 116, 139, 0.22);
}
/* Toast notification for quote actions */
.quote-toast {
position: fixed;
bottom: 28px;
left: 50%;
transform: translateX(-50%) translateY(10px);
background: var(--color-surface-raised, #1e293b);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 24px;
padding: 10px 22px;
font-size: 0.8125rem;
font-weight: 500;
z-index: 9999;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
white-space: nowrap;
}
.quote-toast--show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* Project-specific: status indicator */
.card-status {
font-size: 0.6875rem;
font-weight: 600;
padding: 1px var(--space-2);
border-radius: var(--radius-full);
white-space: nowrap;
line-height: 1.5;
}
.card-status--planning {
color: var(--color-primary);
background: var(--color-primary-highlight);
}
.card-status--under_construction {
color: color-mix(in oklab, var(--color-warning) 80%, var(--color-text));
background: var(--color-warning-highlight);
}
.card-status--completed {
color: var(--color-success);
background: var(--color-success-highlight);
}
/* Project-specific: facts row */
.card-facts-row {
display: flex;
gap: var(--space-6);
}
.card-fact {
display: flex;
flex-direction: column;
gap: 1px;
}
.card-fact-label {
font-size: 0.6875rem;
color: var(--color-text-faint);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.card-fact-value {
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-text);
font-variant-numeric: tabular-nums;
}
/* Project-specific: developer attribution line */
.card-developer-line {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-xs);
color: var(--color-text-faint);
padding-top: var(--space-2);
border-top: 1px solid var(--color-divider);
}
.card-developer-link {
font-size: var(--text-xs);
color: var(--color-primary);
font-weight: 600;
background: none;
border: none;
cursor: pointer;
padding: 0;
text-decoration: none;
transition: color var(--transition-interactive);
}
.card-developer-link:hover {
color: var(--color-primary-hover);
text-decoration: underline;
}
/* Keep old badge classes for detail pages & filters that still use them */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-xs);
font-weight: 600;
padding: 2px var(--space-2);
border-radius: var(--radius-full);
line-height: 1.4;
white-space: nowrap;
}
.badge--featured {
background: color-mix(in oklab, var(--color-star) 15%, transparent);
color: color-mix(in oklab, var(--color-star) 80%, var(--color-text));
border: 1px solid color-mix(in oklab, var(--color-star) 30%, transparent);
}
.badge--verified {
background: var(--color-primary-highlight);
color: var(--color-primary);
border: 1px solid color-mix(in oklab, var(--color-primary) 20%, transparent);
}
.badge--status-completed {
background: var(--color-success-highlight);
color: var(--color-success);
}
.badge--status-construction {
background: var(--color-warning-highlight);
color: color-mix(in oklab, var(--color-warning) 80%, var(--color-text));
}
.badge--status-planning {
background: var(--color-primary-highlight);
color: var(--color-primary);
}
.badge--project-type {
background: var(--color-surface-offset);
color: var(--color-text-muted);
border: 1px solid var(--color-border);
}
.badge--new {
background: var(--color-coral-highlight);
color: var(--color-coral);
border: 1px solid color-mix(in oklab, var(--color-coral) 20%, transparent);
}
/* Google rating component — used on detail pages */
.google-rating {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
background: var(--color-surface-offset);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
}
.google-rating-logo {
display: flex;
align-items: center;
gap: var(--space-1);
color: var(--color-text-faint);
font-size: var(--text-xs);
font-weight: 500;
flex-shrink: 0;
}
.stars {
display: flex;
align-items: center;
gap: 1px;
}
.star-svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.rating-number {
font-size: var(--text-sm);
font-weight: 700;
color: var(--color-text);
font-variant-numeric: tabular-nums;
}
.rating-count {
font-size: var(--text-xs);
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
}
.rating-na {
font-size: var(--text-xs);
color: var(--color-text-faint);
}
/* Old meta/tag classes — kept for anything still using them */
.card-meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
align-items: center;
}
.meta-chip {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-xs);
color: var(--color-text-muted);
background: var(--color-surface-offset);
padding: 2px var(--space-2);
border-radius: var(--radius-full);
border: 1px solid var(--color-border);
}
.meta-chip svg { flex-shrink: 0; opacity: 0.7; }
.tag {
font-size: var(--text-xs);
color: var(--color-text-muted);
background: var(--color-surface-offset);
padding: 1px var(--space-2);
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
}
.card-actions {
display: flex;
gap: var(--space-2);
margin-top: auto;
}
.card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
}
/* =====================================================
BUTTONS — Letter-spaced, premium feel
===================================================== */
/* [hidden] must beat the display rule below — the UA's [hidden]{display:none}
is UA-origin and LOSES to any author display declaration, so without this a
`hidden` button still renders (bit the DD page's Choose CTAs; previously
patched per-element three separate times). */
.btn[hidden] { display: none !important; }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-6);
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: 500;
letter-spacing: 0.04em;
text-decoration: none;
cursor: pointer;
border: 1px solid transparent;
transition: background var(--transition-interactive), color var(--transition-interactive), border-color var(--transition-interactive), box-shadow var(--transition-interactive), transform var(--transition-interactive);
white-space: nowrap;
min-height: 44px;
line-height: 1.2;
font-family: var(--font-body);
}
.btn--primary {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
}
.btn--primary:hover {
background: var(--color-primary-hover);
border-color: var(--color-primary-hover);
transform: translateY(-1px);
box-shadow: 0 4px 16px color-mix(in oklab, var(--color-primary) 35%, transparent);
}
.btn--primary:active {
background: var(--color-primary-active);
transform: translateY(0);
}
.btn--secondary {
background: var(--color-surface-offset);
color: var(--color-text);
border-color: var(--color-border);
}
.btn--secondary:hover {
background: var(--color-surface-dynamic);
border-color: color-mix(in oklab, var(--color-primary) 30%, var(--color-border));
transform: translateY(-1px);
}
.btn--secondary:active {
background: var(--color-surface-offset-2);
transform: translateY(0);
}
.btn--ghost {
background: transparent;
color: var(--color-primary);
border-color: currentColor;
border-width: 1px;
}
.btn--ghost:hover {
background: var(--color-primary-highlight);
transform: translateY(-1px);
}
.btn--ghost:active {
background: color-mix(in oklab, var(--color-primary-highlight) 80%, transparent);
transform: translateY(0);
}
.btn--whatsapp {
background: var(--color-whatsapp);
color: #fff;
border-color: var(--color-whatsapp);
}
.btn--whatsapp:hover {
background: var(--color-whatsapp-hover);
border-color: var(--color-whatsapp-hover);
}
.btn--whatsapp:active {
background: color-mix(in oklab, var(--color-whatsapp-hover) 80%, #000);
}
.btn--sm {
min-height: 36px;
padding: var(--space-1) var(--space-3);
font-size: var(--text-xs);
}
.btn--full {
width: 100%;
}
.btn svg {
flex-shrink: 0;
}
/* =====================================================
FILTER PANEL
===================================================== */
.filters-bar {
background: var(--color-surface);
border-radius: var(--radius-xl);
padding: var(--space-4) var(--space-5);
margin-bottom: var(--space-6);
box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.05);
}
.filters-toggle-btn {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-text);
width: 100%;
padding: var(--space-2) 0;
}
@media (min-width: 768px) {
.filters-toggle-btn { display: none; }
}
.filters-body {
display: none;
}
.filters-body.open {
display: block;
}
@media (min-width: 768px) {
.filters-body { display: block !important; }
}
.filters-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
padding-top: var(--space-4);
}
.filters-grid--4 { }
@media (min-width: 640px) {
.filters-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
.filters-grid--4 { grid-template-columns: repeat(4, 1fr); gap: var(--space-3); padding-top: 0; }
.filters-grid--3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); padding-top: 0; }
}
/* More Filters row */
.filters-more-row {
display: flex;
align-items: center;
gap: var(--space-3);
padding-top: var(--space-3);
border-top: 1px solid rgba(0,0,0,0.06);
margin-top: var(--space-3);
}
.filters-more-btn {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--text-xs);
font-weight: 500;
color: var(--color-text-muted);
border: 1px solid var(--color-border);
border-radius: 2px;
padding: 5px 12px;
letter-spacing: 0.04em;
background: transparent;
transition: color 0.15s, border-color 0.15s;
}
.filters-more-btn:hover {
color: var(--color-text);
border-color: var(--color-text-muted);
}
.filters-more-btn.active {
color: var(--color-accent);
border-color: var(--color-accent);
}
/* More Filters panel (hidden by default) */
.filters-more-panel {
display: none;
padding-top: var(--space-4);
animation: filterSlideDown 0.2s ease;
}
.filters-more-panel.open {
display: block;
}
@keyframes filterSlideDown {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Feature tags */
.filter-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.filter-tag {
display: inline-block;
padding: 6px 14px;
border-radius: 20px;
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text-muted);
font-size: var(--text-xs);
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
font-family: inherit;
}
.filter-tag:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.filter-tag.active {
background: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
}
.filter-group {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.filter-label {
font-size: 10px;
font-weight: 700;
color: var(--color-text-faint);
text-transform: uppercase;
letter-spacing: 0.12em;
}
.filter-select {
padding: var(--space-2) var(--space-3);
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-size: var(--text-sm);
color: var(--color-text);
outline: none;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8780' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-3) center;
padding-right: var(--space-8);
transition: border-color var(--transition-interactive);
min-height: 44px;
}
.filter-select:focus {
border-color: var(--color-primary);
}
.filters-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--color-divider);
gap: var(--space-3);
flex-wrap: wrap;
}
.filters-active-count {
font-size: var(--text-xs);
color: var(--color-text-muted);
}
.filters-active-count strong {
color: var(--color-primary);
}
/* =====================================================
PAGE HEADER — Spacious directory header
===================================================== */
.page-header {
padding-block: clamp(80px, 9vw, 120px);
padding-top: calc(clamp(80px, 9vw, 120px) + var(--nav-height)); /* account for fixed nav */
border-bottom: 1px solid var(--color-divider);
margin-bottom: var(--space-10);
background: var(--color-surface-offset);
}
.page-title {
font-family: var(--font-display);
font-size: var(--text-2xl);
color: var(--color-text);
letter-spacing: -0.02em;
line-height: 1.1;
margin-bottom: var(--space-3);
}
.page-desc {
font-size: var(--text-base);
color: var(--color-text-muted);
max-width: 56ch;
}
/* =====================================================
DIR-HERO — Inspiring directory/listing page headers
===================================================== */
.dir-hero {
position: relative;
padding-block: clamp(48px, 6vw, 80px);
padding-top: calc(clamp(48px, 6vw, 80px) + var(--nav-height));
background: linear-gradient(135deg, #1a1814 0%, #2a2620 50%, #1a1814 100%);
color: #faf8f4;
overflow: hidden;
margin-bottom: 0;
}
.dir-hero + .section {
padding-top: clamp(32px, 4vw, 48px);
background: var(--color-surface-offset);
}
.dir-hero::before {
content: '';
position: absolute;
inset: 0;
background-image: url('./images/hero-construction.webp');
background-size: cover;
background-position: center;
opacity: 0.25;
}
/* Get Quotes hero: extra diffused scrim so the stepper text reads cleanly
over the concrete/scaffolding image (scoped — leaves other dir heroes as-is). */
.dir-hero:has(.gq-stepper)::after {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: linear-gradient(180deg,
rgba(20, 18, 16, 0.35) 0%,
rgba(20, 18, 16, 0.58) 100%);
}
.dir-hero .container {
position: relative;
z-index: 1;
}
.dir-hero .page-header-breadcrumb {
color: rgba(250, 248, 244, 0.5);
}
.dir-hero .page-header-breadcrumb a {
color: rgba(250, 248, 244, 0.65);
}
.dir-hero .page-header-breadcrumb a:hover {
color: rgba(250, 248, 244, 0.9);
}
.dir-hero-title {
font-family: var(--font-display);
font-size: clamp(2rem, 1.2rem + 2vw, 3.5rem);
color: #faf8f4;
letter-spacing: -0.02em;
line-height: 1.1;
margin-bottom: var(--space-3);
font-weight: 400;
text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.dir-hero-desc {
font-size: clamp(1rem, 0.85rem + 0.4vw, 1.2rem);
color: rgba(250, 248, 244, 0.92);
max-width: 52ch;
font-style: italic;
font-family: var(--font-display);
text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
/* =====================================================
DIR-FILTERS — Two prominent pills + more filters
===================================================== */
.dir-filters {
margin-bottom: var(--space-8);
}
.dir-primary-filters {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
margin-bottom: var(--space-4);
}
@media (max-width: 640px) {
.dir-primary-filters {
grid-template-columns: 1fr;
}
}
.dir-filter-pill {
background: var(--color-surface);
border: 2px solid var(--color-border);
border-radius: var(--radius-xl);
padding: var(--space-4) var(--space-5);
transition: border-color 200ms ease, box-shadow 200ms ease;
}
.dir-filter-pill:focus-within {
border-color: #0c7c84;
box-shadow: 0 0 0 3px rgba(12, 124, 132, 0.1);
}
.dir-filter-pill-label {
display: block;
font-family: var(--font-display);
font-size: var(--text-base);
font-weight: 500;
color: var(--color-text);
margin-bottom: var(--space-2);
letter-spacing: -0.01em;
}
.dir-filter-pill-select {
width: 100%;
padding: var(--space-2) 0;
background: transparent;
border: none;
font-size: var(--text-sm);
color: var(--color-text-muted);
outline: none;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230c7c84' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0 center;
padding-right: var(--space-6);
font-weight: 500;
}
.dir-secondary-filters {
display: flex;
flex-direction: column;
}
.dir-more-btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-muted);
padding: var(--space-2) 0;
cursor: pointer;
transition: color 150ms ease;
align-self: flex-start;
background: none;
border: none;
}
.dir-more-btn:hover {
color: var(--color-text);
}
.dir-more-btn.open {
color: #0c7c84;
}
.dir-more-body {
display: none;
padding-top: var(--space-4);
}
.dir-more-body.open {
display: block;
}
.dir-more-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-3);
}
@media (max-width: 768px) {
.dir-more-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* =====================================================
DETAIL-HERO — Dark header for detail pages
===================================================== */
.detail-hero {
position: relative;
padding-block: clamp(48px, 6vw, 80px);
padding-top: calc(clamp(48px, 6vw, 80px) + var(--nav-height));
background: linear-gradient(135deg, #1a1814 0%, #2a2620 50%, #1a1814 100%);
color: #faf8f4;
overflow: hidden;
margin-bottom: 0;
}
.detail-hero + .section {
padding-top: clamp(32px, 4vw, 48px);
}
.detail-hero::before {
content: '';
position: absolute;
inset: 0;
background-image: url('./images/hero-lifestyle.webp');
background-size: cover;
background-position: center;
opacity: 0.22;
}
/* Custom hero image — overrides default ::before */
.detail-hero-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0.28;
z-index: 0;
}
.detail-hero-bg + .container { position: relative; z-index: 1; }
.detail-hero:has(.detail-hero-bg)::before { display: none; }
.detail-hero .container {
position: relative;
z-index: 1;
}
.detail-hero-inner {
display: flex;
align-items: flex-start;
gap: var(--space-6);
flex-wrap: wrap;
margin-top: var(--space-4);
}
.detail-hero-logo {
height: 80px;
width: auto;
max-width: 200px;
border-radius: var(--radius-md);
object-fit: contain;
background: rgba(255,255,255,0.95);
padding: var(--space-2);
flex-shrink: 0;
}
.detail-hero-photo {
width: 100px;
height: 100px;
border-radius: var(--radius-md);
object-fit: cover;
border: 2px solid rgba(255,255,255,0.2);
flex-shrink: 0;
}
.detail-hero-info {
flex: 1;
min-width: 0;
}
.detail-hero-badges {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-3);
}
.badge--light {
background: rgba(255,255,255,0.12);
color: rgba(250,248,244,0.85);
border: 1px solid rgba(255,255,255,0.2);
}
.badge--trusted-light {
background: rgba(12, 124, 132, 0.3);
color: rgba(180, 230, 234, 0.95);
border: 1px solid rgba(12, 124, 132, 0.4);
}
.detail-hero-name {
font-family: var(--font-display);
font-size: clamp(1.8rem, 1.2rem + 1.5vw, 3rem);
color: #faf8f4;
letter-spacing: -0.02em;
line-height: 1.1;
margin-bottom: var(--space-2);
font-weight: 400;
}
/* Subheading — moved from hero to body */
.detail-subheading {
margin-bottom: var(--space-6);
padding-bottom: var(--space-5);
border-bottom: 1px solid var(--color-divider);
}
.detail-subheading-specialty {
font-family: var(--font-display);
font-size: clamp(1.25rem, 1rem + 0.6vw, 1.6rem);
color: var(--color-text);
font-weight: 500;
font-style: italic;
margin: 0 0 var(--space-3) 0;
}
.detail-subheading-meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.detail-subheading-meta span {
display: inline-flex;
align-items: center;
gap: var(--space-1);
}
.detail-card--actions {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: var(--space-5);
}
.btn--lg {
padding: var(--space-4) var(--space-6);
font-size: var(--text-base);
}
/* =====================================================
DETAIL PAGE
===================================================== */
.detail-layout {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-8);
}
@media (min-width: 960px) {
.detail-layout {
grid-template-columns: 2fr 1fr;
align-items: start;
}
}
.detail-main {}
.detail-sidebar {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.detail-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: var(--space-6);
}
.detail-card-title {
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: var(--space-4);
}
.detail-rating-row {
margin-bottom: var(--space-5);
}
.detail-google-rating {
display: inline-flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: var(--color-surface-offset);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
}
.detail-rating-number {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 400;
color: var(--color-text);
letter-spacing: -0.02em;
}
.detail-description {
font-size: var(--text-base);
color: var(--color-text-muted);
line-height: 1.7;
margin-bottom: var(--space-6);
max-width: none;
}
.detail-section-title {
font-size: var(--text-base);
font-weight: 600;
color: var(--color-text);
margin-bottom: var(--space-3);
}
.detail-tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-6);
}
.info-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.info-row {
display: flex;
align-items: flex-start;
gap: var(--space-3);
font-size: var(--text-sm);
}
.info-icon {
color: var(--color-text-faint);
flex-shrink: 0;
margin-top: 2px;
}
.info-label {
font-weight: 600;
color: var(--color-text-muted);
min-width: 100px;
flex-shrink: 0;
}
.info-value {
color: var(--color-text);
flex: 1;
}
.info-value a {
color: var(--color-primary);
text-decoration: none;
}
.info-value a:hover { text-decoration: underline; }
/* Key facts grid */
.key-facts {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-3);
margin-bottom: var(--space-8);
}
@media (min-width: 640px) {
.key-facts { grid-template-columns: repeat(3, 1fr); }
}
.key-fact {
background: var(--color-surface-offset);
border-radius: var(--radius-lg);
padding: var(--space-4);
border: 1px solid var(--color-border);
}
.key-fact-label {
font-size: var(--text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-faint);
margin-bottom: var(--space-1);
}
.key-fact-value {
font-family: var(--font-display);
font-size: var(--text-lg);
color: var(--color-text);
letter-spacing: -0.01em;
line-height: 1.2;
}
/* =====================================================
DEVELOPER DETAIL — Premium editorial layout
===================================================== */
/* --- Cinematic hero banner --- */
.dev-hero {
position: relative;
width: 100%;
min-height: clamp(420px, 55vw, 680px);
display: flex;
align-items: flex-end;
overflow: hidden;
background: #1a1814;
/* Content is bottom-aligned; when it grows taller than min-height it climbs
toward the top — reserve the fixed-header band so it can never sit under it. */
padding-top: var(--nav-height);
}
.dev-hero-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center 30%;
transform: scale(1.04);
transition: transform 8s cubic-bezier(0.25, 1, 0.5, 1);
}
/* The default lifestyle image loads ONLY via the --default modifier (no hero
photo, or the hero ![]()
errored out) so it never competes with the LCP. */
.dev-hero-bg--default {
background-image: url('./images/hero-lifestyle.webp');
}
.dev-hero:hover .dev-hero-bg {
transform: scale(1);
}
.dev-hero-gradient {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(26,24,20,0.08) 0%,
rgba(26,24,20,0.18) 40%,
rgba(26,24,20,0.72) 72%,
rgba(26,24,20,0.92) 100%
);
pointer-events: none;
}
.dev-hero-container {
position: relative;
z-index: 2;
padding-bottom: clamp(var(--space-10), 5vw, var(--space-16));
padding-top: var(--space-16);
}
.dev-hero-content {
max-width: 780px;
}
.dev-hero-badges {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.dev-hero-badge {
display: inline-block;
font-family: var(--font-body);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(247,245,240,0.9);
border: 1px solid rgba(247,245,240,0.35);
padding: 4px 10px;
border-radius: 2px;
}
.dev-hero-name {
font-family: var(--font-display);
font-size: clamp(2.5rem, 5vw, 4.5rem);
font-weight: 300;
line-height: 1.05;
letter-spacing: -0.02em;
color: #faf8f4;
margin: 0 0 var(--space-3);
}
.dev-hero-specialty {
font-family: var(--font-display);
font-size: clamp(1.1rem, 2vw, 1.5rem);
font-style: italic;
font-weight: 300;
color: rgba(247,245,240,0.72);
margin: 0 0 var(--space-5);
letter-spacing: 0.01em;
}
.dev-hero-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-1);
font-family: var(--font-body);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(247,245,240,0.55);
}
.dev-hero-meta-dot {
color: rgba(247,245,240,0.3);
}
/* --- Body layout --- */
.dev-body {
background: var(--color-bg);
padding-block: clamp(var(--space-12), 6vw, var(--space-20));
}
.dev-layout {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"main"
"sidebar"
"portfolio";
gap: var(--space-10);
}
@media (min-width: 1024px) {
.dev-layout {
grid-template-columns: 65fr 35fr;
grid-template-areas:
"main sidebar"
"portfolio sidebar";
gap: clamp(var(--space-10), 4vw, var(--space-16));
align-items: start;
}
}
.dev-main { grid-area: main; }
.dev-sidebar { grid-area: sidebar; }
.dev-portfolio-section { grid-area: portfolio; }
@media (min-width: 1024px) {
.dev-sidebar {
position: sticky;
top: calc(var(--nav-height, 72px) + var(--space-6));
align-self: start;
}
}
/* --- Section titles --- */
.dev-section-title {
font-family: var(--font-display);
font-size: clamp(1.3rem, 2.2vw, 1.75rem);
font-weight: 300;
letter-spacing: -0.01em;
color: var(--color-text);
margin: 0 0 var(--space-5);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--color-border);
}
/* --- Hero photo (sized ![]()
rendition; .dev-hero-bg default stays beneath
as the no-photo/error fallback layer) --- */
.dev-hero-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
transform: scale(1.04);
transition: transform 8s cubic-bezier(0.25, 1, 0.5, 1);
}
.dev-hero:hover .dev-hero-img { transform: scale(1); }
.dev-hero-rating {
color: rgba(247,245,240,0.72);
white-space: nowrap;
}
.dev-hero-rating::before {
content: '·';
color: rgba(247,245,240,0.3);
margin-right: var(--space-2);
}
/* --- About section (adaptive: lede + optional article) --- */
.dev-about {
margin-bottom: var(--space-10);
}
.dev-lede {
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
line-height: 1.6;
color: var(--color-text-muted);
max-width: 58ch;
margin: 0 0 var(--space-6);
}
.dev-description {
font-size: var(--text-base);
line-height: 1.85;
color: var(--color-text-muted);
}
.dev-description p {
margin: 0 0 var(--space-4);
}
/* --- Photo essay gallery (their own DB photos, sized renditions) --- */
.dev-gallery-section {
margin-bottom: var(--space-10);
}
.dev-gallery-label {
display: block;
font-family: var(--font-body);
font-size: 0.63rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-text-faint);
margin-bottom: var(--space-3);
}
.dev-gallery {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: var(--space-3);
}
.dev-gallery[data-count="2"] { grid-template-columns: 3fr 2fr; }
.dev-gallery[data-count="1"] { grid-template-columns: 1fr; }
/* 4–6 photos (extra image_url_5/6 slots, 2026-07-24): wrap into tidy rows —
4 = 2×2, 5 = two large over three, 6 = 3×2. */
.dev-gallery[data-count="4"] { grid-template-columns: repeat(2, 1fr); }
.dev-gallery[data-count="5"] { grid-template-columns: repeat(6, 1fr); }
.dev-gallery[data-count="5"] .dev-gallery-item:nth-child(1),
.dev-gallery[data-count="5"] .dev-gallery-item:nth-child(2) { grid-column: span 3; }
.dev-gallery[data-count="5"] .dev-gallery-item:nth-child(n+3) { grid-column: span 2; }
.dev-gallery[data-count="6"] { grid-template-columns: repeat(3, 1fr); }
.dev-gallery-item {
margin: 0;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--radius-lg);
background: var(--color-surface-offset);
/* Now a