/* ───────────────────────────────────────────────────────────── Rideekanda Forest Monastery — Book Your Stay Matches the donate-page system: cream ground, terracotta serif accents, Plus Jakarta UI sans, generous whitespace. ───────────────────────────────────────────────────────────── */ :root { /* Palette — cream ground, warm dark text, terracotta accent */ --bg: #F1E9D7; --bg-soft: #F7F0DE; --card: #FAF4E4; --ink: #1C1812; --ink-2: #2B241A; --muted: #6C6051; --muted-2: #8A7F6E; --line: rgba(28, 24, 18, 0.10); --line-soft: rgba(28, 24, 18, 0.06); --accent: #B8553A; /* terracotta default */ --accent-deep:#9A4127; /* Type */ --serif: "Cormorant Garamond", "EB Garamond", Georgia, serif; --sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif; /* Rhythm */ --gutter: clamp(20px, 4.5vw, 64px); --maxw: 1240px; } /* Accent presets selectable via Tweaks (body[data-accent="…"]) */ body[data-accent="terracotta"] { --accent: #B8553A; --accent-deep: #9A4127; } body[data-accent="saffron"] { --accent: #C8782A; --accent-deep: #A65C16; } body[data-accent="forest"] { --accent: #4F6B3A; --accent-deep: #38502A; } body[data-accent="indigo"] { --accent: #3F4D7A; --accent-deep: #2A3858; } /* ── Dark theme ───────────────────────────────────────────── eco-theme.css supplies night values for the standard vars (--bg/--card/--ink/--muted/--line) when . Here we override the booking page's extra vars so every surface adapts. (--accent stays terracotta — the data-accent preset wins on specificity, keeping the page's identity in both modes.) */ :root[data-theme="dark"] { --bg-soft: #221d17; --ink-2: #e8ddc8; --muted-2: #9d8d72; --line-soft: rgba(255, 235, 200, 0.06); } /* Pre-script / no-JS fallback for visitors whose OS is in dark mode. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #1f1a14; --bg-soft: #221d17; --card: #2a241c; --ink: #f3ecdb; --ink-2: #e8ddc8; --muted: #9d8d72; --muted-2: #9d8d72; --line: rgba(255,235,200,0.12); --line-soft: rgba(255,235,200,0.06); } } /* The dashed banner border uses dark ink in light mode; lighten for dark. */ :root[data-theme="dark"] .banner { border-color: rgba(255, 235, 200, 0.22); } /* Lotus mark at the top of the hero (like the contact page); white in dark. */ .hero .lotus-mark { display: block; height: 64px; width: auto; margin: 0 auto 1.4rem; opacity: 0.95; } :root[data-theme="dark"] .hero .lotus-mark { filter: brightness(0) invert(1); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } /* ───────── HOME BUTTON ───────── */ .home-btn { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); text-decoration: none; } /* ───────── HEADER ───────── */ .topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; padding: 24px var(--gutter) 20px; max-width: var(--maxw); margin: 0 auto; } .brand { display: flex; align-items: center; gap: 16px; } .brand__mark { width: 44px; height: auto; flex-shrink: 0; } .brand__name { font-family: var(--sans); font-weight: 600; font-size: 16px; letter-spacing: -0.005em; color: var(--ink); } .brand__sub { font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 4px; } .brand__sub .dot { margin: 0 6px; opacity: 0.7; } .contact { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 24px; font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 500; } .contact__item { white-space: nowrap; transition: color 0.18s ease; } .contact__item:hover { color: var(--accent); } .rule { border: 0; border-top: 1px solid var(--line); margin: 0 var(--gutter); max-width: calc(var(--maxw) - 0px); margin-left: auto; margin-right: auto; width: calc(100% - var(--gutter) * 2); } /* ───────── HERO ───────── */ .hero { position: relative; max-width: var(--maxw); margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--gutter) clamp(28px, 3.5vw, 52px); overflow: hidden; } .hero__inner { position: relative; z-index: 2; max-width: 980px; margin-inline: auto; text-align: center; } .hero__lotus { position: absolute; right: calc(var(--gutter) * -0.4); top: 50%; transform: translateY(-46%); width: clamp(420px, 48vw, 640px); height: auto; opacity: 0.08; pointer-events: none; z-index: 1; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 28px; } .eyebrow--center { justify-content: center; display: flex; } .eyebrow__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; } .display { font-family: var(--serif); font-weight: 500; font-size: clamp(46px, 7.4vw, 104px); line-height: 0.96; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 36px; text-wrap: pretty; } .display em { font-style: italic; color: var(--accent); font-weight: 500; } /* Hero variants — only the active one is shown */ .hero-v { display: none; } body[data-hero="phrase"] .hero-v--phrase { display: inline; } body[data-hero="stacked"] .hero-v--stacked { display: inline; } body[data-hero="lead"] .hero-v--lead { display: inline; } .hero__lede { font-family: var(--serif); font-size: clamp(18px, 1.55vw, 22px); line-height: 1.5; color: var(--ink-2); max-width: 60ch; margin: 0 auto; font-weight: 400; } /* ───────── SECTIONS ───────── */ .section { max-width: var(--maxw); margin: 0 auto; padding: clamp(20px, 2.6vw, 36px) var(--gutter) clamp(36px, 5vw, 64px); } .section + .section { padding-top: clamp(16px, 2vw, 28px); } .step-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; padding-bottom: 0; } .step-head__label { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } .step-head__meta { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); } /* ───────── WETRAVEL CARD ───────── */ .wetravel-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: clamp(20px, 2.4vw, 32px); min-height: 320px; position: relative; } .wetravel-card::before { content: ""; position: absolute; inset: 6px; border-radius: 10px; border: 1px dashed var(--line-soft); pointer-events: none; } /* nudge whatever the wetravel widget renders to behave inside the card */ .wetravel-card iframe, .wetravel-card > div { max-width: 100%; } .wetravel-fallback { text-align: center; padding: 40px 16px; font-family: var(--serif); color: var(--muted); font-size: 17px; } .wetravel-fallback a { color: var(--accent); border-bottom: 1px solid currentColor; } /* ───────── CARDS — 3 reservation methods ───────── */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); } @media (max-width: 900px) { .cards { grid-template-columns: 1fr; } } .card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 28px 28px 0; display: flex; flex-direction: column; min-height: 280px; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .card:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -28px rgba(28, 24, 18, 0.25); border-color: rgba(184, 85, 58, 0.35); } .card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 18px; } .card__title { font-family: var(--serif); font-weight: 600; font-size: clamp(24px, 2vw, 30px); color: var(--accent); margin: 0; letter-spacing: -0.005em; } .card__num { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; color: var(--muted-2); } .card__body { font-family: var(--serif); font-size: 17.5px; line-height: 1.45; color: var(--ink-2); margin: 0 0 28px; text-wrap: pretty; flex: 1; } .card__cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -28px; padding: 18px 28px; border-top: 1px solid var(--line); font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); transition: background 0.2s ease, color 0.2s ease; } .card__cta:hover { background: rgba(184, 85, 58, 0.06); color: var(--accent); } .card__arrow { transition: transform 0.25s ease; } .card__cta:hover .card__arrow { transform: translateX(4px); } /* ───────── BEFORE YOU BOOK — dashed banner ───────── */ .banner { margin-top: clamp(20px, 2.4vw, 28px); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 26px; background: transparent; border: 1.5px dashed rgba(28, 24, 18, 0.22); border-radius: 14px; } .banner__left { display: flex; align-items: center; gap: 18px; } .banner__icon { width: 40px; height: 40px; display: grid; place-items: center; flex-shrink: 0; opacity: 0.85; } .banner__icon img { width: 100%; height: auto; } .banner__kicker { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } .banner__text { font-family: var(--serif); font-size: 16px; line-height: 1.45; color: var(--ink-2); max-width: 68ch; } .banner__right { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } @media (max-width: 780px) { .banner { flex-direction: column; align-items: flex-start; } .banner__right { align-self: stretch; padding-top: 6px; border-top: 1px solid var(--line-soft); } } /* ───────── FOOTER BLESSING ───────── */ .closer { max-width: var(--maxw); margin: 0 auto; padding: clamp(64px, 8vw, 120px) var(--gutter) clamp(56px, 6vw, 80px); text-align: center; border-top: 1px solid var(--line); margin-top: 32px; } .closer .eyebrow { margin-bottom: 24px; } .closer__blessing { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.35; color: var(--ink); margin: 0 0 32px; } .closer__meta { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-2); } .closer__meta a { color: inherit; transition: color 0.2s; } .closer__meta a:hover { color: var(--accent); } .closer__meta .dot { margin: 0 10px; } /* ───────── RESPONSIVE TWEAKS ───────── */ @media (max-width: 820px) { .topbar { flex-direction: column; align-items: flex-start; gap: 14px; padding-bottom: 16px; } .contact { gap: 8px 18px; font-size: 10.5px; } .brand__mark { width: 38px; } .step-head { flex-direction: column; gap: 4px; align-items: flex-start; } } @media (max-width: 640px) { .hero__lotus { display: none; } .display { font-size: clamp(38px, 11vw, 64px); line-height: 0.98; } .hero { padding-top: clamp(36px, 8vw, 56px); } .card { padding: 22px 22px 0; min-height: 0; } .card__cta { margin: 0 -22px; padding: 16px 22px; } .banner { padding: 18px 20px; } .banner__left { gap: 14px; } .banner__icon { width: 32px; height: 32px; } .closer__blessing br { display: none; } } @media (max-width: 420px) { .brand__name { font-size: 15px; } .brand__sub { font-size: 9.5px; letter-spacing: 0.14em; } .contact { font-size: 10px; letter-spacing: 0.1em; gap: 6px 14px; } .eyebrow { font-size: 10px; letter-spacing: 0.18em; margin-bottom: 20px; } .display { font-size: clamp(34px, 12vw, 48px); } .hero__lede { font-size: 16px; } .card__title { font-size: 22px; } .card__body { font-size: 16px; } }