/* ────────────────────────────────────────────────────────────── Rideekanda Forest Monastery — Home page Family design: Cormorant Garamond (display) + Spectral (body), paper / night palette, reveal-on-scroll, hero + veil, footer. ────────────────────────────────────────────────────────────── */ :root { --bg:#f4efe6; --bg-2:#ece3d4; --card:#fbf7ef; --ink:#2b2620; --ink-soft:#5d5446; --muted:#8d8170; --line:rgba(43,38,32,0.14); --accent:#a3763c; --accent-soft:#c79a5c; --dark-bg:#221d17; --dark-ink:#ece3d4; --dark-muted:#b6a890; --font-display:"Cormorant Garamond", Georgia, serif; --font-body:"Spectral", Georgia, serif; --maxw:1200px; --reveal-y:26px; --reveal-dur:1100ms; } /* Auto dark/light (follows the OS) UNLESS the visitor sets a manual choice via data-theme on (the in-page toggle). The :not([data-theme]) guards let a manual choice win over the OS preference. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#1f1a14; --bg-2:#16120d; --card:#2a241c; --ink:#f3ecdb; --ink-soft:#d8ccb4; --muted:#9d8d72; --line:rgba(255,235,200,0.12); --accent:#c79a5c; --accent-soft:#e0b76a; } } :root[data-theme="dark"] { --bg:#1f1a14; --bg-2:#16120d; --card:#2a241c; --ink:#f3ecdb; --ink-soft:#d8ccb4; --muted:#9d8d72; --line:rgba(255,235,200,0.12); --accent:#c79a5c; --accent-soft:#e0b76a; } * { box-sizing:border-box; } html { scroll-behavior:smooth; background:var(--bg); color-scheme:light dark; transition:background .4s ease; } body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; } a { color:inherit; } img { max-width:100%; display:block; } .container { max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(24px,6vw,88px); } .eyebrow { font-family:var(--font-body); font-size:0.74rem; font-weight:500; letter-spacing:0.32em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:0.85em; margin:0 0 1.4rem; } .eyebrow::before { content:""; width:34px; height:1px; background:var(--accent); opacity:0.7; } .reveal { opacity:0; transform:translateY(var(--reveal-y)); transition:opacity var(--reveal-dur) cubic-bezier(.2,.65,.25,1), transform var(--reveal-dur) cubic-bezier(.2,.65,.25,1); transition-delay:var(--reveal-delay,0ms); } .reveal.in { opacity:1; transform:none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; transition:none; } html { scroll-behavior:auto; } } /* ── Hero ── */ .hero { position:relative; min-height:100svh; display:grid; place-items:center; text-align:center; overflow:hidden; padding:150px 24px 120px; } .hero-bg { position:absolute; inset:0; z-index:0; } .hero-bg img { width:100%; height:100%; object-fit:cover; } /* Light (paper) veil — tints the hero image toward the page background so the colored lotus + dark text read clearly, matching Monastery/Retreat. */ .hero-veil { position:absolute; inset:0; z-index:1; background:radial-gradient(120% 90% at 50% 18%, transparent 0%, color-mix(in srgb, var(--bg) 55%, transparent) 55%, var(--bg) 100%), linear-gradient(to bottom, color-mix(in srgb, var(--bg) 22%, transparent) 0%, color-mix(in srgb, var(--bg) 45%, transparent) 45%, color-mix(in srgb, var(--bg) 85%, transparent) 100%); } .hero-inner { position:relative; z-index:2; max-width:920px; } .hero .lotus-mark { height:64px; width:auto; margin:0 auto 2rem; opacity:0.96; } /* Dark theme → white lotus (matches the same dark/auto rules used for vars) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero .lotus-mark { filter:brightness(0) invert(1); } } :root[data-theme="dark"] .hero .lotus-mark { filter:brightness(0) invert(1); } .hero h1 { font-family:var(--font-display); font-size:clamp(2.8rem,7vw,5.6rem); font-weight:400; letter-spacing:0.02em; line-height:1.04; margin:0; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; } /* inline-block + flex centring → each line's measured width is its TEXT width, which the fit script uses to scale line 2 to match line 1. */ .hero h1 .ln1 { color:var(--ink); white-space:nowrap; } /* Rideekanda — dark/black */ .hero h1 .ln2 { color:var(--accent); white-space:nowrap; } /* Forest Monastery — brown */ .hero h1 em { font-style:italic; color:var(--accent); } .hero .si { font-family:var(--font-display); font-size:clamp(1.4rem,3.4vw,2.4rem); color:var(--ink-soft); margin-top:0.6rem; font-weight:400; } .hero .tagline { font-size:clamp(0.78rem,1.4vw,0.95rem); letter-spacing:0.42em; text-transform:uppercase; color:var(--ink-soft); margin-top:1.8rem; } .hero .lead { margin-top:1.5rem; font-size:1.15rem; color:var(--ink-soft); font-style:italic; max-width:60ch; margin-inline:auto; } .hero-cta { margin-top:2.4rem; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } .scroll-cue { position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2; color:var(--ink-soft); font-family:var(--font-body); font-size:0.7rem; letter-spacing:0.28em; text-transform:uppercase; opacity:0.85; text-align:center; animation:cueBob 2.2s ease-in-out infinite; } .scroll-cue::after { content:""; display:block; width:1px; height:34px; margin:10px auto 0; background:linear-gradient(var(--accent), transparent); } @keyframes cueBob { 0%,100% { transform:translateX(-50%) translateY(0); } 50% { transform:translateX(-50%) translateY(7px); } } @media (prefers-reduced-motion: reduce) { .scroll-cue { animation:none; } } /* ── Buttons ── */ .btn { display:inline-flex; align-items:center; gap:9px; padding:14px 28px; background:var(--accent); color:#f7f1e6; border-radius:999px; text-decoration:none; font-family:var(--font-body); font-size:0.78rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; transition:filter .2s ease, transform .2s ease; border:0; cursor:pointer; } .btn:hover { filter:brightness(1.08); transform:translateY(-1px); } .btn-ghost { background:transparent; color:var(--ink); border:1px solid color-mix(in srgb, var(--ink) 35%, transparent); } .btn-ghost:hover { background:color-mix(in srgb, var(--ink) 6%, transparent); } /* ── Sections ── */ .section { padding:clamp(64px,9vw,128px) 0; position:relative; } .section-head { max-width:760px; margin-bottom:clamp(36px,5vw,60px); } .section-title { font-family:var(--font-display); font-size:clamp(2.1rem,4.4vw,3.4rem); letter-spacing:-0.01em; line-height:1.05; margin:0; font-weight:400; } .section-title em { font-style:italic; color:var(--accent); } .lead-p { font-size:1.12rem; color:var(--ink-soft); max-width:64ch; margin:1.2rem 0 0; } /* ── About (two column) ── */ .about-grid { display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(32px,5vw,72px); align-items:center; } @media (max-width:820px) { .about-grid { grid-template-columns:1fr; } } .about-figure { position:relative; border-radius:20px; overflow:hidden; aspect-ratio:16/9; background:var(--bg-2); } .about-figure img { width:100%; height:100%; object-fit:cover; } .about-copy p { color:var(--ink-soft); margin:0 0 1.1rem; } /* ── Feature tiles ── */ .tiles { display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(14px,1.8vw,22px); } .tile { position:relative; grid-column:span 2; aspect-ratio:4/3; border-radius:18px; overflow:hidden; display:block; text-decoration:none; color:#f6efe2; background:var(--bg-2); box-shadow:0 14px 36px -24px rgba(43,38,32,0.5); transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease; } .tile.lg { grid-column:span 3; aspect-ratio:16/10; } @media (max-width:900px) { .tile { grid-column:span 3; } .tile.lg { grid-column:span 6; } } @media (max-width:560px) { .tile, .tile.lg { grid-column:span 6; aspect-ratio:16/10; } } .tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1); } /* Darker tint across the whole tile so the white text reads on any image */ .tile::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(18,14,9,0.92) 0%, rgba(18,14,9,0.62) 42%, rgba(18,14,9,0.34) 100%); transition:opacity .4s ease; } .tile:hover { transform:translateY(-5px); box-shadow:0 28px 60px -28px rgba(43,38,32,0.6); } .tile:hover img { transform:scale(1.07); } .tile:hover::after { background:linear-gradient(to top, rgba(18,14,9,0.94) 0%, rgba(18,14,9,0.7) 45%, rgba(18,14,9,0.42) 100%); } .tile .cap { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(16px,2vw,26px); text-shadow:0 1px 10px rgba(0,0,0,0.45); } .tile .cap .si { display:block; font-family:var(--font-body); font-size:0.7rem; letter-spacing:0.16em; color:var(--accent-soft); margin-bottom:0.4rem; } .tile h3 { font-family:var(--font-display); font-weight:500; font-size:clamp(1.4rem,2.2vw,2rem); line-height:1.1; margin:0; } .tile p { margin:0.4rem 0 0; font-size:0.92rem; color:rgba(246,239,226,0.82); max-width:42ch; opacity:0; max-height:0; transform:translateY(6px); transition:opacity .35s ease, transform .35s ease, max-height .35s ease; } .tile .go { display:inline-flex; align-items:center; gap:7px; margin-top:0.7rem; font-family:var(--font-body); font-size:0.72rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent-soft); } .tile:hover p { opacity:1; max-height:6em; transform:none; } @media (hover:none) { .tile p { opacity:1; max-height:6em; transform:none; } } /* ── Quote band ── */ .quote { background:var(--dark-bg); color:var(--dark-ink); text-align:center; } .quote .container { padding-block:clamp(64px,9vw,120px); } .quote blockquote { font-family:var(--font-display); font-style:italic; font-size:clamp(1.6rem,3.6vw,2.8rem); line-height:1.3; margin:0 auto; max-width:24ch; font-weight:300; } .quote cite { display:block; margin-top:1.6rem; font-family:var(--font-body); font-style:normal; font-size:0.74rem; letter-spacing:0.28em; text-transform:uppercase; color:var(--accent-soft); } /* ── Visit CTA ── */ .visit { text-align:center; } .visit .lead { font-size:1.15rem; color:var(--ink-soft); max-width:54ch; margin:1.2rem auto 0; } .visit-cta { margin-top:2.2rem; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } .visit-meta { margin-top:2.6rem; display:flex; gap:clamp(20px,4vw,56px); justify-content:center; flex-wrap:wrap; color:var(--ink-soft); font-size:0.95rem; } .visit-meta b { display:block; font-family:var(--font-body); font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent); margin-bottom:0.3rem; font-weight:600; } /* ── Footer ── */ .footer { background:var(--dark-bg); color:var(--dark-ink); padding:clamp(56px,7vw,96px) 0 40px; } .footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(32px,5vw,72px); } @media (max-width:760px) { .footer-grid { grid-template-columns:1fr; gap:36px; } } .footer .fbrand { display:flex; align-items:center; gap:12px; margin-bottom:1.2rem; } .footer .fbrand img { height:34px; width:auto; filter:brightness(0) invert(1); opacity:0.92; } .footer .fbrand .name { font-family:var(--font-display); font-size:1.4rem; } .footer .fbrand .sub { display:block; font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--dark-muted); } .footer .fblurb { color:var(--dark-muted); max-width:38ch; font-size:0.98rem; } .footer h4 { font-family:var(--font-body); font-size:0.72rem; letter-spacing:0.24em; text-transform:uppercase; color:var(--accent-soft); margin:0 0 1.1rem; } .footer ul { list-style:none; margin:0; padding:0; display:grid; gap:0.7rem; } .footer ul a, .footer ul li { color:var(--dark-muted); font-size:0.95rem; text-decoration:none; transition:color .25s ease; } .footer ul a:hover { color:var(--dark-ink); } .footer-base { margin-top:clamp(40px,6vw,72px); padding-top:24px; border-top:1px solid rgba(255,235,200,0.12); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:0.82rem; color:var(--dark-muted); } /* Manual light/dark theme toggle (overrides OS; persists) */ .theme-toggle { position:fixed; right:18px; bottom:18px; z-index:9500; width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:color-mix(in srgb, var(--card) 82%, transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:var(--ink); cursor:pointer; display:grid; place-items:center; box-shadow:0 10px 28px -16px rgba(0,0,0,0.45); transition:transform .2s ease, background .3s ease, color .3s ease; } .theme-toggle:hover { transform:translateY(-2px); color:var(--accent); } .theme-toggle svg { width:20px; height:20px; display:block; } @media (max-width:560px){ .theme-toggle { width:42px; height:42px; right:14px; bottom:14px; } }