/* ============================================================ RAMYA · 2026 DESIGN LANGUAGE (shared, additive layer) ------------------------------------------------------------ Carries the homepage redesign's *visual* language to the marketing pages: the traveling aurora, sand + forest panels with hairline gold borders, oversized ghost words, botanical sprig dividers, the small-caps gold section label, the Cormorant heading rhythm with italic gold accents, the italic ticker, and light fade-and-rise reveals. No choreography: no pinned scenes, no scrub, no horizontal tracks, no spine timeline, no film grain. Transform + opacity only. LOAD ORDER: link this AFTER css/styles.css so it wins on any shared selector. It reuses the same frozen tokens (:root in styles.css) — no new colours are introduced here. OPT-IN: every rule below is scoped under `.rd` (added to ). A page renders 100% unchanged until its gets class="rd" AND the matching markup — so linking this file is a no-op, and removing the class is a clean kill-switch. New component classes (.panel, .ghost-word, .sprig-div, .ticker, .final, .faq-chev, .modus-list) are homepage-identical names but inert here until the markup adopts them. Frozen and untouched: the frosted nav (.nav*), the footer (.footer*), the WhatsApp button (.wa), and every token. ============================================================ */ /* ------------------------------------------------------------ 1. THE TRAVELING AURORA Reuses the existing fixed .wash + .orbs (already present on every page and already drifting on time-based CSS keyframes — traveling, never scroll-driven). Here we enrich the wash with the homepage's warmer gold / forest / sand waypoints. Every stop fades to a zero-alpha version of its OWN colour (never the keyword `transparent`) so the gradient interpolates cleanly with no muddy grey banding. ------------------------------------------------------------ */ .rd .wash{ background: radial-gradient(ellipse 70% 55% at 16% 12%,rgba(194,163,104,0.24),rgba(194,163,104,0) 60%), radial-gradient(ellipse 60% 50% at 84% 20%,rgba(219,200,179,0.34),rgba(219,200,179,0) 60%), radial-gradient(ellipse 62% 52% at 22% 74%,rgba(219,200,179,0.30),rgba(219,200,179,0) 62%), radial-gradient(ellipse 58% 50% at 82% 82%,rgba(31,58,50,0.20),rgba(31,58,50,0) 62%), radial-gradient(ellipse 160% 130% at 50% 52%,rgba(219,200,179,0.10),rgba(219,200,179,0) 78%); } /* THE STATIC PHONE CUT — mobile is fully static, exactly like the homepage: a single fixed aurora state baked into the wash, with the drift and the orbs frozen. Nothing here is scroll-driven. */ @media(max-width:768px){ .rd .wash{ background: radial-gradient(ellipse 92% 58% at 14% 5%,rgba(194,163,104,0.42),rgba(194,163,104,0) 62%), radial-gradient(ellipse 84% 56% at 92% 90%,rgba(31,58,50,0.26),rgba(31,58,50,0) 62%), radial-gradient(ellipse 72% 48% at 92% 32%,rgba(219,200,179,0.46),rgba(219,200,179,0) 58%), radial-gradient(ellipse 62% 52% at 24% 60%,rgba(219,200,179,0.34),rgba(219,200,179,0) 62%); animation:none; } .rd .orbs .orb{animation:none;} } /* ------------------------------------------------------------ 2. SECTION LABEL — align the eyebrow to the homepage's brighter gold (--gold, not --gold-text). Both are frozen tokens. ------------------------------------------------------------ */ .rd .eyebrow{color:var(--gold);} /* ------------------------------------------------------------ 3. PANEL SURFACES .panel = the sand surface with a hairline gold border. A modifier: add it to a .wrap, a .plan-wrap, or a bare container. On a .wrap it also widens slightly, matching the homepage's panel proportion. .panel-dark = the forest "Method" surface. Opaque #344B43 with backdrop-filter:none — the deliberate iOS-seam fix, so the dark fill never tiles into a vertical seam on iOS. ------------------------------------------------------------ */ .rd .panel{ position:relative; background:linear-gradient(180deg,rgba(219,200,179,0.38),rgba(219,200,179,0.14)); border:1px solid rgba(168,133,76,0.22);border-top-color:rgba(255,255,255,0.70); border-radius:var(--r-xl); padding:56px 52px; box-shadow:var(--sh),inset 0 1.5px 0 rgba(255,255,255,0.55); } .rd .wrap.panel{max-width:min(1240px,calc(100% - 40px));} @media(max-width:768px){ .rd .panel{padding:34px 22px;border-radius:28px;} .rd .wrap.panel{max-width:min(1240px,calc(100% - 20px));} } .rd .panel-dark{ position:relative;overflow:hidden; background:#344B43; border:1px solid rgba(255,255,255,0.15);border-top-color:rgba(255,255,255,0.25); border-radius:var(--r-xl); padding:56px 52px; box-shadow:var(--sh-xl),inset 0 1.5px 0 rgba(255,255,255,0.20); } .rd .panel-dark::before{content:'';position:absolute;top:-40%;right:-12%;width:55%;height:180%;background:radial-gradient(circle,rgba(194,163,104,0.15),transparent 60%);pointer-events:none;} .rd .panel-dark::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.24),transparent);} /* text tones inside a dark panel */ .rd .panel-dark .eyebrow{color:var(--gold-2);} .rd .panel-dark .eyebrow::before{background:rgba(194,163,104,.32);} .rd .panel-dark .s-head,.rd .panel-dark h2,.rd .panel-dark h3{color:#fff;} .rd .panel-dark .s-head em,.rd .panel-dark h2 em{color:var(--gold-2);} .rd .panel-dark .s-sub,.rd .panel-dark p{color:rgba(255,255,255,.82);} @media(max-width:768px){.rd .panel-dark{padding:40px 24px;border-radius:28px;}} /* ------------------------------------------------------------ 4. THE FINAL / DARK CTA .final gives a new CTA the homepage's exact treatment. We also upgrade the existing .gcard-dark (used by about / how-it-works / why-homeopathy) to the same opaque, seam-safe forest with the gold glow + top hairline, so current dark CTAs match with no markup change. ------------------------------------------------------------ */ .rd .final, .rd .gcard-dark{ position:relative;overflow:hidden; background:#384F47; backdrop-filter:none;-webkit-backdrop-filter:none; border:1px solid rgba(255,255,255,0.14);border-top-color:rgba(255,255,255,0.24); box-shadow:var(--sh-xl),inset 0 1.5px 0 rgba(255,255,255,0.18); } .rd .final{border-radius:var(--r-xl);padding:80px 52px;text-align:center;} .rd .final::before, .rd .gcard-dark::before{content:'';position:absolute;top:-50%;right:-15%;width:55%;height:175%;background:radial-gradient(circle,rgba(194,163,104,0.16),transparent 60%);pointer-events:none;} .rd .final::after, .rd .gcard-dark::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.24),transparent);} .rd .final h2{font-family:var(--serif);font-size:clamp(34px,5vw,56px);font-weight:400;color:#fff;margin-bottom:14px;position:relative;letter-spacing:-.01em;} .rd .final h2 em{font-style:italic;color:var(--gold-2);} .rd .final p{font-size:16px;color:rgba(255,255,255,.64);margin-bottom:26px;position:relative;} /* keep dark-CTA inner content above the ::before glow */ .rd .gcard-dark>*{position:relative;} /* iOS TILE-SEAM FIX (phones only). On iPhone Safari/Chrome these dark panels composite into WebKit tiles; the ::before gold glow (a right-side radial gradient, width:55%) rasterizes across a tile boundary and reads as a vertical seam splitting the panel, right half lighter. The opaque fill does NOT fix it — the glow paints on its own overlay. Dropping the glow at <=768px leaves a flat, even, solid forest that cannot tile-seam. Mirrors the homepage fix on .method/.final/.footer. Only verifiable on a real iPhone, not a resized window. */ @media(max-width:768px){ .rd .panel-dark::before,.rd .final::before,.rd .gcard-dark::before{display:none;} } @media(max-width:480px){.rd .final{padding:44px 22px;}.rd .final h2{font-size:clamp(26px,7.5vw,34px);}} /* ------------------------------------------------------------ 5. GHOST WORDS — one oversized, low-opacity Cormorant word set behind a section (place on OPEN sections, not on panels; add position:relative to the host section in the markup). Hidden on phones, matching the static phone cut. ------------------------------------------------------------ */ .rd .ghost-word{ position:absolute;left:0;top:0;width:100%; text-align:center;font-family:var(--serif);font-weight:400;line-height:1; color:var(--forest);opacity:.05; font-size:clamp(130px,19vw,300px); pointer-events:none;z-index:0;white-space:nowrap; -webkit-user-select:none;user-select:none; } .rd .ghost-gold{color:var(--gold-2);opacity:.06;} @media(max-width:768px){.rd .ghost-word{display:none;}} /* ------------------------------------------------------------ 6. SPRIG DIVIDER — the botanical gold thread ornament. A drop-in element: . Pure CSS, static, renders on desktop and mobile alike. ------------------------------------------------------------ */ .rd .sprig-div{ display:block;width:52px;height:16px;margin:0 auto; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 16'%3E%3Cpath d='M2,11 Q14,6 26,8 Q38,10 50,5' fill='none' stroke='%23A8854C' stroke-opacity='.55' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M18,8 C15,3 18,0 22,1 C23,5 21,8 18,8' fill='%23C2A368' fill-opacity='.2' stroke='%23A8854C' stroke-opacity='.5' stroke-width='1.2'/%3E%3Cpath d='M36,8 C39,4 43,3 45,5 C44,9 40,10 36,8' fill='%23C2A368' fill-opacity='.2' stroke='%23A8854C' stroke-opacity='.5' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center/contain; } /* ------------------------------------------------------------ 7. THE TICKER — italic Cormorant marquee on a sand strip. Its drift is time-based (the one sanctioned mobile motion, matching the homepage). Own keyframe name to avoid any collision. ------------------------------------------------------------ */ .rd .ticker{position:relative;z-index:1;overflow:hidden;width:100%;background:rgba(219,200,179,0.32);border-top:1px solid var(--forest-line);border-bottom:1px solid var(--forest-line);padding:15px 0;} .rd .ticker-track{display:flex;align-items:center;gap:16px;width:max-content;white-space:nowrap;animation:rd-ticker 46s linear infinite;} .rd .ticker-item{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--forest);letter-spacing:.01em;} .rd .ticker-dot{color:var(--gold);font-size:13px;} @keyframes rd-ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}} @media(max-width:480px){.rd .ticker{padding:12px 0;}.rd .ticker-item{font-size:13.5px;}} /* ------------------------------------------------------------ 8. HAIRLINE FAQ — the homepage's accordion look: serif question, gold hairline rows, a round chevron that rotates on open. No card. Higher specificity than a bare .faq-* so it cleanly wins over a page's inline FAQ styles once .rd is on the body. ------------------------------------------------------------ */ .rd .faq-list{max-width:760px;margin:44px auto 0;} .rd .faq-item{border-bottom:1px solid var(--forest-line);} .rd .faq-q{display:flex;justify-content:space-between;align-items:center;padding:22px 0;cursor:pointer;gap:16px;} .rd .faq-q-text{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--forest);line-height:1.25;} .rd .faq-chev{flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1px solid var(--gold-line);display:flex;align-items:center;justify-content:center;color:var(--gold);transition:transform .35s;} .rd .faq-q[aria-expanded="true"] .faq-chev{transform:rotate(180deg);} .rd .faq-a{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.2,.8,.2,1),opacity .35s ease;opacity:0;} .rd .faq-a.open{max-height:520px;opacity:1;padding-bottom:22px;} .rd .faq-a p{font-size:15px;color:var(--t2);line-height:1.75;max-width:660px;} .rd .faq-a a{color:var(--gold);} @media(max-width:480px){.rd .faq-q-text{font-size:19px;}.rd .faq-q{padding:18px 0;}} /* ------------------------------------------------------------ 9. MODUS — numbered editorial rows on hairline gold separators, no boxes (for principle / "how we work" lists). ------------------------------------------------------------ */ .rd .modus-list{list-style:none;max-width:780px;margin-top:6px;} .rd .modus-list li{display:flex;gap:22px;align-items:baseline;padding:18px 0;} .rd .modus-list li+li{border-top:1px solid rgba(168,133,76,0.22);} .rd .modus-num{font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--gold);flex-shrink:0;} .rd .modus-list p{font-family:var(--serif);font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--t2);} @media(max-width:768px){.rd .modus-list li{gap:14px;padding:14px 0;}.rd .modus-list p{font-size:16.5px;}} /* ------------------------------------------------------------ 10. REVEAL — the .reveal utility (fade + rise) already ships in css/styles.css and every page already runs an IntersectionObserver that adds .in. New elements simply carry class="reveal". Reduced motion is already neutralised globally in styles.css. Nothing to add here; noted for completeness. ------------------------------------------------------------ */