/* ============================================================
Pilarica — Night theme
Light theme is the default. These rules apply only when
is set (manual toggle, persisted).
Selectors are scoped with [data-theme="dark"] so they win over
the single-class Tailwind utilities by specificity (no !important).
============================================================ */
:root {
color-scheme: light; /* keep native UI light by default, even if the OS is dark */
--d-bg: #1c1915; /* page background — deep warm near-black */
--d-surface: #272219; /* cards / chalk surfaces */
--d-surface-2: #2f2920; /* elevated / hover */
--d-text: #ece6da; /* warm off-white */
--d-border: rgba(236,230,218,0.14);
/* Copper-orange accent for dark mode — used for outlines / faint fills so
sections gain structure without a loud flat orange background. */
--d-accent: #ff8e37;
--d-accent-border: rgba(255,142,55,0.42);
--d-accent-bg: rgba(255,142,55,0.16);
/* Premium theme-crossfade timing (used on toggle + the photo night-layers) */
--theme-dur: .55s;
--theme-ease: cubic-bezier(.4, 0, .2, 1);
--photo-dur: 1s; /* photo day↔night crossfade — slower, more luxurious */
}
/* Smooth flip for the main surfaces (avoids a harsh jump on toggle) */
body,
.bg-cream, .bg-chalk, .text-ink,
.feat-card, .bento, .field, .btn-ghost,
#site-header, .mobile-menu, .pmap {
transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
/* Premium coordinated theme crossfade. JS adds .theme-anim to only while
toggling (and removes it once the fade finishes), so EVERY themed colour / fill /
stroke eases in sync — text at every opacity, the location map, the floor-plan
schematic, accent outlines — without touching hover/scroll transitions in normal
use. Scoped + time-boxed so there is no perpetual transition cost. */
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
transition: background-color var(--theme-dur) var(--theme-ease),
color var(--theme-dur) var(--theme-ease),
border-color var(--theme-dur) var(--theme-ease),
fill var(--theme-dur) var(--theme-ease),
stroke var(--theme-dur) var(--theme-ease) !important;
}
@media (prefers-reduced-motion: reduce) {
html.theme-anim, html.theme-anim *,
html.theme-anim *::before, html.theme-anim *::after { transition: none !important; }
}
/* ---- Surfaces ---- */
/* Set the dark bg on too (not just body) so Safari's overscroll /
rubber-band area is dark, and flag color-scheme so native UI follows. */
html[data-theme="dark"] { color-scheme: dark; background-color: var(--d-bg); }
html[data-theme="dark"] body { background: var(--d-bg); color: var(--d-text); }
[data-theme="dark"] .bg-cream { background-color: var(--d-bg); }
[data-theme="dark"] .bg-cream\/85 { background-color: rgba(28,25,21,0.85); }
[data-theme="dark"] .bg-cream\/90 { background-color: rgba(28,25,21,0.90); }
[data-theme="dark"] .bg-cream\/95 { background-color: rgba(28,25,21,0.92); }
[data-theme="dark"] .bg-chalk,
[data-theme="dark"] .bg-chalk\/60 { background-color: var(--d-surface); }
/* ---- Text ---- */
[data-theme="dark"] .text-ink { color: var(--d-text); }
[data-theme="dark"] .text-ink\/90 { color: rgba(236,230,218,0.90); }
[data-theme="dark"] .text-ink\/85 { color: rgba(236,230,218,0.85); }
[data-theme="dark"] .text-ink\/80 { color: rgba(236,230,218,0.80); }
[data-theme="dark"] .text-ink\/75 { color: rgba(236,230,218,0.72); }
[data-theme="dark"] .text-ink\/70 { color: rgba(236,230,218,0.68); }
[data-theme="dark"] .text-ink\/65 { color: rgba(236,230,218,0.62); }
[data-theme="dark"] .text-ink\/60 { color: rgba(236,230,218,0.58); }
[data-theme="dark"] .text-ink\/55 { color: rgba(236,230,218,0.55); }
[data-theme="dark"] .text-ink\/50 { color: rgba(236,230,218,0.50); }
[data-theme="dark"] .text-ink\/40 { color: rgba(236,230,218,0.40); }
/* ---- Borders ---- */
[data-theme="dark"] .border-ink\/5,
[data-theme="dark"] .border-ink\/8,
[data-theme="dark"] .border-ink\/10,
[data-theme="dark"] .border-ink\/15,
[data-theme="dark"] .border-ink\/18 { border-color: var(--d-border); }
/* ---- Hover tints (ink-based) → light so they read on dark ---- */
[data-theme="dark"] .hover\:bg-ink\/5:hover,
[data-theme="dark"] .hover\:bg-ink\/10:hover { background-color: rgba(236,230,218,0.08); }
/* ---- Components that use CSS vars / custom rules ---- */
[data-theme="dark"] .field { color: var(--d-text); border-bottom-color: rgba(236,230,218,0.25); }
[data-theme="dark"] .field::placeholder { color: rgba(236,230,218,0.40); }
[data-theme="dark"] .label-mini { color: rgba(236,230,218,0.60); }
[data-theme="dark"] .btn-ghost { color: var(--d-text); border-color: rgba(236,230,218,0.25); }
[data-theme="dark"] .btn-ghost:hover { background: rgba(236,230,218,0.08); border-color: rgba(236,230,218,0.40); }
/* Floor-plan schematic */
[data-theme="dark"] .fp-wall { stroke: rgba(236,230,218,0.85); }
[data-theme="dark"] .fp-label { fill: var(--d-text); }
[data-theme="dark"] .fp-dim { fill: rgba(236,230,218,0.50); }
[data-theme="dark"] .fp-room { stroke: rgba(236,230,218,0.40); }
/* Custom location map → dark schematic (green palette, orange routes kept) */
[data-theme="dark"] .pmap { background: #16241a; }
[data-theme="dark"] .pm-land { fill: #16241a; }
[data-theme="dark"] .pm-sea { fill: #0d1f1f; }
[data-theme="dark"] .pm-sea2 { fill: #0a1a19; }
[data-theme="dark"] .pm-name { fill: var(--d-text); }
[data-theme="dark"] .pm-dist { fill: rgba(236,230,218,0.55); }
[data-theme="dark"] .pm-label-sea{ fill: rgba(236,230,218,0.35); }
[data-theme="dark"] .pm-poi circle.dot { fill: #2f2920; stroke: rgba(236,230,218,0.70); }
[data-theme="dark"] .pm-poi .ic { stroke: var(--d-text); }
[data-theme="dark"] .pm-chip-svg { fill: #2f2920; stroke: rgba(236,230,218,0.18); }
[data-theme="dark"] .pm-tf-dash { stroke: #16241a; } /* centre dashes over the orange TF-1 road */
[data-theme="dark"] .pm-bld-shadow { fill: rgba(0,0,0,0.35); }
/* Bento cards (About) */
[data-theme="dark"] .bento { background-color: var(--d-surface); }
/* Gallery quick-nav category pills (dark): dark tablets with light text;
the active pill reads via a faint accent fill + thin accent outline. */
[data-theme="dark"] .quick-nav {
background: rgba(28,25,21,0.90);
border-top-color: var(--d-border);
border-bottom-color: var(--d-border);
}
[data-theme="dark"] .quick-pill { background: rgba(236,230,218,0.06); color: var(--d-text); }
[data-theme="dark"] .quick-pill:hover { background: rgba(236,230,218,0.12); }
[data-theme="dark"] .quick-pill.active {
background: var(--d-accent-bg);
color: var(--d-text);
box-shadow: inset 0 0 0 1px var(--d-accent-border);
}
/* Legal pages prose (aviso-legal / privacidad / cookies) */
[data-theme="dark"] .legal p,
[data-theme="dark"] .legal li,
[data-theme="dark"] .legal td { color: rgba(236,230,218,0.82); }
[data-theme="dark"] .legal strong,
[data-theme="dark"] .legal h3,
[data-theme="dark"] .legal th { color: var(--d-text); }
[data-theme="dark"] .legal th,
[data-theme="dark"] .legal td { border-bottom-color: var(--d-border); }
/* Scrollbars */
[data-theme="dark"] .plans-table-scroll { scrollbar-color: rgba(236,230,218,0.25) transparent; }
[data-theme="dark"] #plansThumbs::-webkit-scrollbar-thumb,
[data-theme="dark"] .plans-table-scroll::-webkit-scrollbar-thumb { background: rgba(236,230,218,0.2); }
/* ---- Investment / RIC section (dark) ----
Drop the loud orange fill → near-black like the rest of the site. The cards
regain structure from a thin copper-orange outline instead of the fill. */
[data-theme="dark"] #inversion { background-color: var(--d-bg); }
[data-theme="dark"] #inversion .bg-chalk {
background-color: var(--d-surface);
border: 1px solid var(--d-accent-border);
}
/* ---- Apartment list / pricing table (dark) ----
Rows + dividers were ink-on-near-black → invisible. Lift text to the warm
off-white and fade the dividers to the standard dark border. */
[data-theme="dark"] .tbl-cell-row { color: var(--d-text); border-top-color: var(--d-border); }
[data-theme="dark"] .border-ink\/40 { border-color: var(--d-border); }
/* Plan-type tabs (dark): accent-tinted active state instead of flat dark ink.
:hover variant too, so a sticky touch-hover can't override the active fill. */
[data-theme="dark"] .tab[data-active="true"],
[data-theme="dark"] .tab[data-active="true"]:hover {
background: var(--d-accent-bg);
color: var(--d-text);
border-color: var(--d-accent-border);
}
/* ---- Brand wordmark: dark logo in light theme, white logo in dark theme ---- */
.logo-dark { display: none; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark { display: inline-block; }
/* ---- Theme toggle icon: moon in light, sun in dark ---- */
.theme-sun { display: none; }
[data-theme="dark"] .theme-moon { display: none; }
[data-theme="dark"] .theme-sun { display: inline-block; }
/* ---- Theme toggle button: brand-accent + breathing glow (GSAP owns the glow /
border / scale; CSS only transitions the hover background so it doesn't fight
the per-frame tween). Orange in light, blue in dark. ---- */
#themeBtn { transition: background-color .25s ease; border-color: rgba(255,142,55,0.55); }
#themeBtn .theme-moon { color: var(--orange); }
[data-theme="dark"] #themeBtn { border-color: rgba(59,105,255,0.60); }
[data-theme="dark"] #themeBtn .theme-sun { color: #3769ff; }
/* ---- Day ↔ night photo crossfade ----
A `.night-layer` ![]()
is injected over each photo that has a night render
(see assets/js/main.js). It fades in under the dark theme and out in light. */
.night-layer {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity var(--photo-dur) var(--theme-ease);
pointer-events: none;
}
[data-theme="dark"] .night-layer { opacity: 1; }
/* The .theme-anim universal override (background/color/fill/stroke, no opacity)
would otherwise clobber the line above and make the overlay SNAP instead of
fade. Re-assert the photo crossfade with higher specificity + !important. */
html.theme-anim .night-layer {
transition: opacity var(--photo-dur) var(--theme-ease) !important;
}
/* ---- Hero CTA inverted in dark: blue at rest, orange on hover ----
The light button is orange with a blue bottom-up fill on hover; in dark we
flip the gradient so it rests blue and reveals orange on hover. */
[data-theme="dark"] #hero .btn-primary {
background-color: #3769ff;
background-image: linear-gradient(180deg, #3769ff 50%, #ff8e37 50%);
}
/* ============================================================
Mobile heading safety (both themes) — long Spanish words were
running past the right edge on narrow phones. break-word keeps
any over-long token inside the column without touching font size.
============================================================ */
.display, .display-narrow, .display-bold { overflow-wrap: break-word; }
/* On phones, balance section headings so we don't strand a single word on its
own line (orphan). Hero is left alone — it uses hand-placed
s. */
@media (max-width: 480px) {
h2.display, h2.display-narrow, h3.display-narrow { text-wrap: balance; }
}
/* ============================================================
Mobile: tighten body letter-spacing 3% site-wide — reads tighter/cleaner
on small screens and helps copy fit (fewer orphaned words). Display
headings & buttons set their own letter-spacing, so they're unaffected.
============================================================ */
@media (max-width: 767px) {
body { letter-spacing: -0.01em; }
}