/* ============================================================ 丹內·丹內野奢莊園 — glamping re-skin Loaded site-wide, AFTER css/styles.css, on any page that carries . Every rule is scoped under `body.theme-glamping`, so it only takes effect where that class is present. The shared theme is CSS-variable driven, so we mostly just redefine the tokens and the whole palette cascades through the existing components. ============================================================ */ /* ---------- Palette: LIGHT (default) ---------- */ body.theme-glamping { --c-cyan: 74, 103, 65; /* sage / forest green — replaces neon cyan */ --c-magenta: 176, 106, 73; /* terracotta — replaces neon magenta */ --c-red: 176, 78, 58; --c-line: 61, 46, 35; /* warm brown ink: borders / dividers / hovers */ --c-base: 247, 242, 233; /* warm cream: nav glass base */ --bg-void: #ece4d6; --bg-base: #f7f2e9; --bg-elevated: #fffdf8; --surface: #fffdf8; --bg-surface: rgba(var(--c-line), 0.04); --text-primary: #2c2417; /* espresso */ --text-secondary: #6b5d4d; /* warm taupe */ --text-inverse: #fffdf8; --accent-cyan: rgb(var(--c-cyan)); --accent-cyan-glow: rgba(var(--c-cyan), 0.18); --accent-magenta: rgb(var(--c-magenta)); --accent-red: #b04e3a; --border-subtle: rgba(var(--c-line), 0.12); --border-active: rgba(var(--c-cyan), 0.35); --shadow-ambient: 0 1px 2px rgba(61, 46, 35, 0.05), 0 14px 34px rgba(61, 46, 35, 0.10); --shadow-glow: 0 10px 30px rgba(74, 103, 65, 0.16); --rr-cta-end: rgb(var(--c-magenta)); --accent-gold: #c49a4a; /* NEW — warm gold mid-stop for the headline gradient */ } /* ---------- Palette: DARK ---------- data-theme lives on , so target it with a DESCENDANT combinator. */ [data-theme="dark"] body.theme-glamping { --c-cyan: 141, 174, 122; /* moss */ --c-magenta: 212, 140, 96; /* warm amber-clay */ --c-red: 224, 122, 95; --c-line: 237, 230, 218; /* warm off-white */ --c-base: 24, 21, 17; /* warm near-black */ --bg-void: #100d0a; --bg-base: #15110c; --bg-elevated: #1d1813; --surface: rgba(var(--c-line), 0.04); --bg-surface: rgba(var(--c-line), 0.05); --text-primary: #efe7d8; /* warm parchment */ --text-secondary: #a89a85; --text-inverse: #15110c; --accent-cyan: rgb(var(--c-cyan)); --accent-cyan-glow: rgba(var(--c-cyan), 0.20); --accent-magenta: rgb(var(--c-magenta)); --border-subtle: rgba(var(--c-line), 0.08); --border-active: rgba(var(--c-cyan), 0.30); --shadow-ambient: 0 0 40px rgba(0, 0, 0, 0.40); --shadow-glow: 0 0 22px rgba(141, 174, 122, 0.22); --rr-cta-end: #b9d4a5; --accent-gold: #d8b25e; } /* ---------- Headline gradient: weave in warm gold ---------- */ body.theme-glamping .text-gradient { background-image: linear-gradient(135deg, var(--accent-cyan), var(--accent-gold) 55%, var(--accent-magenta)); } /* On the LIGHT hero the shared gradient passed through a pale gold (#c49a4a) that washed out to ~2:1 over the cream sky / sage hills — the highlighted headline word was barely legible. Deepen it to forest -> bronze -> terracotta so every stop clears large-text contrast on the hero. Dark hero keeps the original warm gradient (it reads fine over the dark backdrop). */ body.theme-glamping .hero .text-gradient { background-image: linear-gradient(135deg, #3f5a37 0%, #8f6017 50%, #9c4a2f 100%); } [data-theme="dark"] body.theme-glamping .hero .text-gradient { background-image: linear-gradient(135deg, var(--accent-cyan), var(--accent-gold) 55%, var(--accent-magenta)); } /* ---------- Typography: elegant serif headings + warm labels ---------- Noto Serif TC carries the Traditional-Chinese glyphs (matches lang="zh-TW"); Cormorant Garamond is listed first for the Latin glyphs. Body copy stays on Inter / Noto Sans TC for screen legibility. */ body.theme-glamping .hero h1, body.theme-glamping .section-head h2, body.theme-glamping .features-head h2, body.theme-glamping .cta-card h2 { font-family: "Cormorant Garamond", "Noto Serif TC", "Noto Sans TC", serif; font-weight: 600; letter-spacing: 0.01em; } /* Eyebrows: drop the cold uppercase monospace for a warm italic serif */ body.theme-glamping .eyebrow { font-family: "Cormorant Garamond", "Noto Serif TC", "Noto Sans TC", serif; font-style: italic; font-weight: 600; font-size: 1.05rem; letter-spacing: 0.1em; text-transform: none; } /* Metric numerals: elegant serif, not terminal monospace */ body.theme-glamping .metric-value { font-family: "Cormorant Garamond", "Noto Serif TC", serif; font-weight: 600; letter-spacing: 0; } /* The hero label + dining/facility time stamps use .font-mono-data inline */ body.theme-glamping .font-mono-data { font-family: "Cormorant Garamond", "Noto Serif TC", "Noto Sans TC", serif; letter-spacing: 0.06em; text-transform: none; } /* Comfortable reading rhythm */ body.theme-glamping { line-height: 1.65; } body.theme-glamping .section-head p, body.theme-glamping .hero-sub, body.theme-glamping .morph-block p, body.theme-glamping .principle-card p, body.theme-glamping .tl-body p { line-height: 1.85; } /* ---------- Hero: reveal the canvas, paint a calm dawn gradient behind it ---------- */ body.theme-glamping #hero-canvas { display: block; } /* styles.css treats .hero as an always-dark "stage" and re-declares the dark/neon tokens (light text, neon channels, white --c-line) directly on .hero — built for the old vortex backdrop. Our hero is a light gradient in light mode, so those make the headline, subtitle, eyebrow and outline-button border wash out. Restore the glamping tokens on the hero element itself (more specific + closer than .hero). */ body.theme-glamping .hero { color-scheme: light; --c-cyan: 74, 103, 65; --c-magenta: 176, 106, 73; --c-line: 61, 46, 35; --bg-void: #ece4d6; --text-primary: #2c2417; --text-secondary: #6b5d4d; } [data-theme="dark"] body.theme-glamping .hero { color-scheme: dark; --c-cyan: 141, 174, 122; --c-magenta: 212, 140, 96; --c-line: 237, 230, 218; --bg-void: #100d0a; --text-primary: #efe7d8; --text-secondary: #a89a85; } body.theme-glamping .hero { background-color: var(--bg-void); background-image: radial-gradient(60% 50% at 22% 18%, rgba(201, 154, 74, 0.18), transparent 60%), /* gold dawn */ radial-gradient(70% 60% at 80% 30%, rgba(74, 103, 65, 0.16), transparent 60%), /* sage haze */ linear-gradient(180deg, #f3ead9 0%, #e7e0cf 45%, #d9ddc6 100%); /* sky -> meadow */ } [data-theme="dark"] body.theme-glamping .hero { background-image: radial-gradient(60% 50% at 22% 18%, rgba(216, 178, 94, 0.14), transparent 60%), radial-gradient(70% 60% at 80% 30%, rgba(141, 174, 122, 0.16), transparent 60%), linear-gradient(180deg, #1d1813 0%, #15110c 60%, #100d0a 100%); } /* Legibility haze: the canvas landscape is cream sky up top but dark sage hills across the lower half, where the headline tail + subtitle sit. Pool a soft "morning mist" of cream behind the text band so the dark text keeps a light backing, while the scene stays vivid at the edges (sky, sides, the foreground plants/cabins below the band). */ body.theme-glamping .hero-overlay { background: radial-gradient(34% 24% at 50% 50%, rgba(248, 243, 234, 0.55), rgba(248, 243, 234, 0) 80%), linear-gradient(180deg, rgba(248, 243, 234, 0) 6%, rgba(248, 243, 234, 0.46) 32%, rgba(248, 243, 234, 0.54) 52%, rgba(248, 243, 234, 0.44) 70%, rgba(248, 243, 234, 0) 88%); } [data-theme="dark"] body.theme-glamping .hero-overlay { background: radial-gradient(circle at center, rgba(16, 13, 10, 0.45), transparent 72%); } /* Subtitle sits over the sage hills, so the soft taupe washed out even with the haze. Deepen it and give it a faint cream halo so it stays crisp at the haze edges. Dark hero keeps its light parchment secondary. */ body.theme-glamping .hero-sub { color: #4f4332; text-shadow: 0 1px 12px rgba(248, 243, 234, 0.85); } [data-theme="dark"] body.theme-glamping .hero-sub { color: var(--text-secondary); text-shadow: none; } /* Gentler headline size on large screens (was 4.5rem) */ @media (min-width: 1024px) { body.theme-glamping .hero h1 { font-size: 3.75rem; } } /* ---------- Soften glassmorphism & neon glows into warm shadows ---------- */ body.theme-glamping .glass-card { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); border: 1px solid rgba(var(--c-line), 0.10); border-radius: 16px; box-shadow: var(--shadow-ambient); } body.theme-glamping .glass-card.hoverable:hover { transform: translateY(-3px); border-color: rgba(var(--c-cyan), 0.30); box-shadow: 0 18px 40px rgba(61, 46, 35, 0.14); } [data-theme="dark"] body.theme-glamping .glass-card.hoverable:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); } /* Warm ember CTA — on dark it runs a touch brighter and glows more */ [data-theme="dark"] body.theme-glamping .gradient-btn { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 48%), linear-gradient(115deg, #c6512f 0%, #db7a34 55%, #f3b94d 100%); box-shadow: 0 6px 20px rgba(219, 122, 52, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.28); } body.theme-glamping .gradient-btn:hover { transform: translateY(-3px) scale(1.015); box-shadow: 0 14px 32px rgba(199, 90, 44, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.35); } [data-theme="dark"] body.theme-glamping .gradient-btn:hover { box-shadow: 0 14px 34px rgba(219, 122, 52, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.30); } /* Calm the logo glow (shared rule uses a cyan halo) */ body.theme-glamping .logo-mark { filter: drop-shadow(0 1px 3px rgba(61, 46, 35, 0.18)); } body.theme-glamping .nav-logo:hover .logo-mark { filter: drop-shadow(0 2px 6px rgba(74, 103, 65, 0.28)); } /* ---------- Friendly, readable touches ---------- */ body.theme-glamping .chip { background: rgba(var(--c-cyan), 0.10); color: var(--accent-cyan); border-radius: 9999px; /* pills feel warmer than sharp rects */ padding: 0.3rem 0.7rem; } body.theme-glamping .callout-warn { background: rgba(var(--c-magenta), 0.06); } body.theme-glamping .marquee-item { opacity: 0.65; } /* .rank-badge, .tl-dot, .tl-line, .marquee-dot, .card-cta, nav active/hover, footer link hovers, focus rings and ::selection all re-color automatically from the variable block above — no per-component rules needed. */ /* ---------- Brand logo refresh: forest canopy, lake line, star cabin ---------- The cabin SVG is injected into the nav + footer by js/logo-glamping.js and reads these CSS variables, so the mark adapts to light / dark like the rest of the theme. */ body.theme-glamping { --dannei-logo-cream: #f7f2e9; --dannei-logo-forest: #405b39; --dannei-logo-moss: #8ca46c; --dannei-logo-lake: #5f9c93; --dannei-logo-clay: #b06a49; --dannei-logo-ink: #2f3c2d; } [data-theme="dark"] body.theme-glamping { --dannei-logo-cream: #182018; --dannei-logo-forest: #a7c98b; --dannei-logo-moss: #6f8f58; --dannei-logo-lake: #86c8bd; --dannei-logo-clay: #d38b66; --dannei-logo-ink: #eef5e9; } body.theme-glamping .dannei-brand-mark { width: 2.35rem; height: 2.35rem; filter: drop-shadow(0 0.25rem 0.55rem rgba(64, 91, 57, 0.18)); } body.theme-glamping .nav-logo:hover .dannei-brand-mark, body.theme-glamping .footer-brand-logo:hover .dannei-brand-mark { filter: drop-shadow(0 0.35rem 0.75rem rgba(74, 103, 65, 0.26)); } body.theme-glamping .logo-title { font-family: "Noto Serif TC", "Noto Sans TC", serif; letter-spacing: 0.04em; } body.theme-glamping .logo-sub { color: var(--dannei-logo-clay); font-weight: 700; letter-spacing: 0.16em; } [data-theme="dark"] body.theme-glamping .logo-sub { color: var(--dannei-logo-lake); } /* ---------- Photo "stage" heroes (baccarat / sports pages) ---------- styles.css keeps these heroes dark in both themes (dark scrim over a photo), re-declaring the neon channels on the element. We only swap those channels for the warm glamping ones, so the eyebrow, active nav state, glow blobs and CTA match the rest of the theme while the dark photo stage is preserved. */ body.theme-glamping .bac-page-hero, body.theme-glamping .sp-page-hero { --c-cyan: 141, 174, 122; /* moss */ --c-magenta: 212, 140, 96; /* warm amber-clay */ --border-active: rgba(var(--c-cyan), 0.3); --rr-cta-end: #b9d4a5; }