/* ========================================================================== Lander stylesheet — Bharatiya design system Mobile-first. Light and warm throughout: pigment colours, temple geometry, a display face with real Devanagari support. Palette variables are injected per-domain on by lib/theme.php, so one sheet skins every name. ========================================================================== */ :root { /* Fallbacks; lib/theme.php overrides these inline per domain. */ --ink: #3A2A1A; --muted: #7A6551; --bg: #FFFBF2; --surface: #FFFFFF; --band: #FDF2DC; --brand: #E0761B; --brand-dark: #B65711; --accent: #C1121F; --line: #EDDCC2; --motif: #E0761B; --radius: 14px; --radius-lg: 22px; --shadow: 0 1px 2px rgba(58, 42, 26, .05), 0 8px 24px -12px rgba(58, 42, 26, .18); --shadow-lift: 0 2px 4px rgba(58, 42, 26, .06), 0 18px 40px -18px rgba(58, 42, 26, .28); --maxw: 720px; --font-display: "Rozha One", "Noto Serif Devanagari", Georgia, serif; --font-body: "Mukta", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--ink); background-color: var(--bg); background-attachment: fixed; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; } a { color: var(--brand-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--accent); } p { margin: 0 0 1em; } .skip { position: absolute; left: -9999px; top: 0; z-index: 99; background: var(--brand); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; } .skip:focus { left: 0; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 28px 18px 60px; } /* ---------- Hero: torana arch over the name ------------------------------ */ .hero { text-align: center; padding: 8px 0 22px; } .torana-wrap { margin: 0 auto 6px; max-width: 260px; } .torana { display: block; width: 100%; height: auto; } .hero-logo { width: 92px; height: 92px; margin: 4px auto 14px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); box-shadow: var(--shadow); display: grid; place-items: center; overflow: hidden; padding: 10px; } .hero-logo img { max-width: 100%; max-height: 100%; object-fit: contain; } .eyebrow { margin: 0 0 6px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .eyebrow span { font-family: var(--font-display); text-transform: none; letter-spacing: normal; font-size: 15px; color: var(--brand); } .hero-name { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 10.5vw, 62px); line-height: 1.08; margin: 0 0 10px; color: var(--ink); overflow-wrap: anywhere; } .hero-tagline { margin: 0 auto 14px; max-width: 46ch; font-size: 17px; color: var(--muted); } .chip { display: inline-block; margin: 4px 0 0; padding: 7px 18px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--band); color: var(--brand-dark); border: 1px solid var(--line); } .chip-sale { background: var(--brand); color: #fff; border-color: var(--brand-dark); } /* ---------- Cards -------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 26px 22px; margin: 0 0 20px; } .card-h { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.25; margin: 0 0 14px; color: var(--ink); position: relative; padding-bottom: 10px; } .card-h::after { content: ""; position: absolute; left: 0; bottom: 0; width: 54px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--brand), var(--accent)); } .prose h2.card-h { margin-top: 26px; } .prose h2.card-h:first-of-type { margin-top: 0; } .muted-p { color: var(--muted); font-size: 15px; } /* ---------- Countdown ---------------------------------------------------- */ .countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 22px; } .cd-cell { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 4px 10px; text-align: center; box-shadow: var(--shadow); } .cd-cell b { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 7vw, 34px); line-height: 1; color: var(--brand-dark); font-variant-numeric: tabular-nums; } .cd-cell span { display: block; margin-top: 6px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .countdown.done { opacity: .5; } /* ---------- Feature list with lotus bullets ------------------------------ */ .feature-list, .plain-list { list-style: none; margin: 18px 0 0; padding: 0; } .feature-list li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 16px; } .feature-list li:first-child { border-top: 0; } .lotus { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 3px; } .plain-list li { position: relative; padding: 0 0 12px 20px; } .plain-list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); } /* ---------- Price card --------------------------------------------------- */ .price-card { background: linear-gradient(165deg, var(--band), var(--surface) 62%); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); padding: 26px 22px; margin: 0 0 20px; text-align: center; } .price-label { margin: 0 0 4px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .price-main { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 9vw, 46px); line-height: 1.1; margin: 0 0 6px; color: var(--brand-dark); } .price-main.offer { font-size: clamp(26px, 7vw, 34px); } .price-main .per { font-family: var(--font-body); font-size: 16px; color: var(--muted); font-weight: 500; } .price-alt { margin: 0 0 8px; font-size: 15px; color: var(--muted); } .price-emi { margin: 12px 0 0; padding: 12px 14px; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); font-size: 14px; line-height: 1.6; color: var(--ink); text-align: left; } .price-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 16px 0 16px; padding: 0; } .price-trust span { font-size: 12px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; } /* ---------- Category banner ---------------------------------------------- */ .banner { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; border-radius: var(--radius-lg); padding: 26px 22px; margin: 0 0 20px; text-align: center; box-shadow: var(--shadow-lift); } .banner-kicker { margin: 0 0 6px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; opacity: .9; } .banner-main { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 6vw, 32px); line-height: 1.25; margin: 0 0 18px; } .banner-main b { font-weight: 400; border-bottom: 3px solid rgba(255,255,255,.55); } .steps { display: grid; gap: 12px; margin-top: 20px; } .step { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--band); border-radius: var(--radius); border: 1px solid var(--line); } .step b { flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 400; font-size: 18px; } .step p { margin: 0; font-size: 15px; } /* ---------- Buttons ------------------------------------------------------ */ .btn { display: inline-block; background: var(--brand); color: #fff; border: 1px solid var(--brand-dark); border-radius: 999px; padding: 13px 28px; font-family: var(--font-body); font-size: 16px; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; box-shadow: 0 2px 0 var(--brand-dark); } .btn:hover { background: var(--brand-dark); color: #fff; transform: translateY(-1px); } .btn:active { transform: translateY(1px); box-shadow: none; } .btn.block { display: block; width: 100%; } .btn.sm { padding: 9px 18px; font-size: 14px; } .btn.light { background: #fff; color: var(--brand-dark); border-color: #fff; box-shadow: 0 2px 0 rgba(0,0,0,.15); } .btn.ghost { background: transparent; color: var(--brand-dark); box-shadow: none; border-color: var(--line); } .btn.ghost:hover { background: var(--band); color: var(--brand-dark); } /* ---------- Forms -------------------------------------------------------- */ .form-card { scroll-margin-top: 20px; } .field { margin: 0 0 14px; } .field label, .consent label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; } .req { color: var(--accent); } .opt { color: var(--muted); font-weight: 400; } input[type=text], input[type=email], input[type=tel], select, textarea { width: 100%; font-family: var(--font-body); font-size: 16px; /* 16px stops iOS zooming on focus */ color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: 11px; padding: 12px 14px; } textarea { resize: vertical; min-height: 108px; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); background: var(--surface); } .grid2 { display: grid; gap: 0 14px; } .offer-row { display: flex; gap: 8px; } .offer-row select { flex: 0 0 104px; } .consent { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 16px; padding: 12px 14px; background: var(--band); border: 1px solid var(--line); border-radius: var(--radius); } .consent input { margin-top: 4px; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--brand); } .consent label { font-weight: 400; font-size: 14px; line-height: 1.55; margin: 0; } .captcha { margin: 0 0 14px; } .disclaimer { margin: 14px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); } /* Honeypot — off-screen, never shown, never announced. */ .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .note { padding: 13px 16px; border-radius: var(--radius); margin: 0 0 16px; font-size: 15px; border: 1px solid; } .note.ok { background: #EAF6EC; border-color: #B9DFC2; color: #1E4D2B; } .note.bad { background: #FDECEA; border-color: #F3C3BD; color: #7A2318; } /* ---------- Ads ---------------------------------------------------------- */ .ads { margin: 0 0 20px; } .ads-label { margin: 0 0 8px; text-align: center; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } .ads-grid { display: grid; gap: 12px; } .ad-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: grid; place-items: center; min-height: 92px; overflow: hidden; } .ad-box img { display: block; } /* ---------- Sales ticker ------------------------------------------------- */ .ticker { margin: 26px 0 8px; padding: 14px 0; background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; } .ticker-label { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0 0 8px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .ticker-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .ticker-track { display: flex; gap: 26px; width: max-content; animation: ticker 42s linear infinite; } .ticker-item { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; font-size: 14px; } .ticker-item b { font-weight: 600; color: var(--ink); } .ticker-item em { font-style: normal; color: var(--brand-dark); font-weight: 700; } @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } } /* ---------- Kolam divider + footer --------------------------------------- */ .kolam-rule { max-width: 320px; margin: 26px auto 6px; opacity: .75; } .kolam { display: block; width: 100%; height: auto; } .site-foot { text-align: center; padding: 6px 0 0; font-size: 14px; color: var(--muted); } .viewers { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 6px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-size: 13px; } .viewers .dot { width: 8px; height: 8px; border-radius: 50%; background: #2E9E5B; box-shadow: 0 0 0 3px rgba(46,158,91,.18); animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 50% { opacity: .35; } } @media (prefers-reduced-motion: reduce) { .viewers .dot { animation: none; } } .foot-name { font-family: var(--font-display); font-size: 20px; color: var(--ink); margin: 0 0 2px; } .foot-brand { margin: 0 0 6px; font-size: 13px; } .foot-note { margin: 0 0 8px; font-size: 13px; } .foot-legal { margin: 6px 0; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; font-size: 13px; } .foot-copy { margin: 10px 0 0; font-size: 12px; color: var(--muted); } /* ---------- Cookie bar --------------------------------------------------- */ .cookie-bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--brand); border-radius: var(--radius); box-shadow: var(--shadow-lift); padding: 15px 17px; display: grid; gap: 12px; } .cookie-text { font-size: 13.5px; line-height: 1.6; color: var(--ink); } .cookie-actions { display: flex; gap: 9px; justify-content: flex-end; } /* ---------- Larger screens ---------------------------------------------- */ @media (min-width: 620px) { .wrap { padding: 40px 24px 72px; } .card, .price-card, .banner { padding: 32px 30px; } .grid2 { grid-template-columns: 1fr 1fr; } .ads-grid { grid-template-columns: 1fr 1fr; } .ads-grid.one { grid-template-columns: 1fr; } .steps { grid-template-columns: repeat(3, 1fr); } .step { flex-direction: column; text-align: center; gap: 8px; } .cookie-bar { left: auto; right: 18px; bottom: 18px; max-width: 460px; grid-template-columns: 1fr; } } @media (min-width: 900px) { :root { --maxw: 1040px; } .split { display: grid; grid-template-columns: 1.45fr 1fr; gap: 22px; align-items: start; } .split-side { position: sticky; top: 24px; } .hero-name { font-size: clamp(44px, 5.2vw, 66px); } } /* Single-column landers stay narrow even on wide screens, so the reading measure never stretches past comfort. */ @media (min-width: 900px) { body.disp-parked .wrap, body.disp-plain .wrap, body.disp-category .wrap { max-width: 760px; } } @media print { .cookie-bar, .ticker, .ads, .btn { display: none !important; } body { background: #fff; } } /* ========================================================================== Phase 3 — purchase venues, artwork, email lander, Do Good ========================================================================== */ /* ---------- Buy from ----------------------------------------------------- */ .venues { margin: 0 0 20px; } .venues-h { font-family: var(--font-display); font-weight: 400; font-size: 22px; margin: 0 0 4px; text-align: center; } .venues-sub { margin: 0 0 14px; text-align: center; font-size: 13.5px; color: var(--muted); } .venue-grid { display: grid; gap: 10px; } .venue { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; text-decoration: none; color: var(--ink); transition: border-color .12s ease, transform .12s ease; } .venue:hover { border-color: var(--brand); transform: translateY(-1px); color: var(--ink); } .venue-name { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; } .venue-name img { max-height: 22px; width: auto; display: block; } .venue-price { font-family: var(--font-display); font-weight: 400; font-size: 21px; color: var(--brand-dark); white-space: nowrap; } .venue-note { flex-basis: 100%; font-size: 12px; color: var(--muted); margin-top: -2px; } /* The direct route is the one we would rather people took. */ .venue.direct { background: var(--band); border-color: var(--brand); border-left-width: 5px; border-radius: 0 var(--radius) var(--radius) 0; } .venue.direct .venue-price { color: var(--brand-dark); } .venues-foot { margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--muted); } /* ---------- Artwork ------------------------------------------------------ */ .art-hero { padding-bottom: 10px; } .art-name { font-size: clamp(40px, 12vw, 74px); letter-spacing: .01em; } .art-figure { margin: 0 0 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px; box-shadow: var(--shadow-lift); } .art-figure img { display: block; width: 100%; height: auto; border-radius: 8px; } .art-figure figcaption { margin-top: 10px; text-align: center; font-size: 12px; color: var(--muted); } .art-figure.placeholder { display: grid; place-items: center; min-height: 220px; border-style: dashed; color: var(--muted); } .art-card { padding-top: 24px; } .art-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 6vw, 32px); line-height: 1.2; margin: 0 0 18px; text-align: center; color: var(--ink); } .art-block { margin: 0 0 18px; } .art-label { font-family: var(--font-body); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-dark); font-weight: 700; margin: 0 0 6px; } .art-block p { margin: 0 0 10px; font-size: 15px; line-height: 1.75; } .art-claim { margin: 22px 0 0; padding: 16px 18px; background: var(--band); border: 1px solid var(--line); border-radius: var(--radius); } .art-claim p { margin: 0 0 8px; font-size: 15px; line-height: 1.7; } .art-claim p:last-child { margin: 0; } .art-claim-strong { font-weight: 700; font-style: italic; color: var(--brand-dark); } .art-value { margin: 20px 0 0; text-align: center; } .art-value-line { font-family: var(--font-display); font-weight: 400; font-size: clamp(19px, 4.6vw, 26px); color: var(--brand-dark); margin: 0; } .art-value-line.on-request { font-size: clamp(18px, 4.2vw, 23px); letter-spacing: .04em; } .art-value-note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--muted); } /* ---------- Email lander ------------------------------------------------- */ .cols-2 { display: grid; gap: 0; } .scarcity-line { margin: 14px 0 0; padding: 10px 14px; background: var(--band); border-left: 4px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; font-weight: 600; font-size: 14.5px; } .email-samples { display: grid; gap: 9px; margin: 4px 0 14px; } .email-sample { font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, monospace); font-size: 15px; background: var(--bg); border: 1px dashed var(--line); border-radius: 9px; padding: 11px 14px; color: var(--brand-dark); overflow-wrap: anywhere; } /* ---------- Category extras note ----------------------------------------- */ .extras-note { margin: 16px 0 0; padding: 12px 14px; background: var(--band); border: 1px dashed var(--line); border-radius: var(--radius); font-size: 13.5px; line-height: 1.65; } /* ---------- Do Good ------------------------------------------------------ */ /* Bold white on a thick block of brand colour — the giving promise should read as a statement, not a footnote. */ .do-good { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 28px 0 4px; padding: 18px 22px; background: var(--brand); border: 0; border-radius: var(--radius); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 6px 18px -10px rgba(0,0,0,.35); text-align: left; } .do-good-mark { flex: 0 0 24px; display: block; line-height: 0; } .do-good .lotus { width: 24px; height: 24px; flex: 0 0 24px; } .do-good p { margin: 0; font-size: 14.5px; line-height: 1.5; font-weight: 700; color: #FFFFFF; letter-spacing: .005em; } .foot-firm { margin: 10px auto 0; max-width: 52ch; font-size: 12px; line-height: 1.6; color: var(--muted); } /* ---------- Dial-code select --------------------------------------------- */ .offer-row .dial { flex: 0 0 42%; min-width: 0; } @media (min-width: 620px) { .offer-row .dial { flex: 0 0 240px; } .venue-grid { grid-template-columns: 1fr 1fr; } .cols-2 { grid-template-columns: 1fr 1fr; gap: 0 20px; } .email-samples { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } } @media (min-width: 900px) { body.disp-art .wrap, body.disp-email .wrap { max-width: 820px; } } /* ========================================================================== Art Lander — white and gold. A gallery wall, not a sales page: ivory ground, hairline gold rules, and Open Sans for the labels with Cormorant for the work's title. ========================================================================== */ body.art-gold { --ink: #23201B; --muted: #6E675C; --bg: #FCFBF8; --surface: #FFFFFF; --band: #F7F3E9; --brand: #B08D4C; --brand-dark: #8A6D2F; --accent: #C9A227; --line: #E8E1D2; --gold: #B8912F; --gold-soft: #D8C48A; --gold-dark: #8A6D2F; background-image: none !important; background-color: #FCFBF8; font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; letter-spacing: .002em; } body.art-gold .wrap { max-width: 760px; padding-top: 34px; } body.art-gold .art-hero { padding: 6px 0 18px; } body.art-gold .art-name { font-family: "Open Sans", system-ui, sans-serif; font-weight: 300; font-size: clamp(34px, 9vw, 60px); letter-spacing: .13em; text-transform: uppercase; color: #23201B; margin: 0; line-height: 1.12; } /* Hairline rule with a diamond, the way a gallery label is ruled off. */ .gold-rule { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto 16px; max-width: 300px; } .gold-rule.under { margin: 16px auto 0; } .gold-rule span { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--gold-soft), transparent); } .gold-rule i { width: 7px; height: 7px; transform: rotate(45deg); background: var(--gold); flex: 0 0 7px; } body.art-gold .art-figure { background: #fff; border: 1px solid var(--line); border-radius: 2px; padding: 18px; box-shadow: 0 1px 2px rgba(35,32,27,.04), 0 24px 60px -30px rgba(35,32,27,.35); position: relative; } /* Inner gold line, like a mount inside a frame. */ body.art-gold .art-figure::after { content: ""; position: absolute; inset: 9px; border: 1px solid var(--gold-soft); opacity: .55; pointer-events: none; } body.art-gold .art-figure img { border-radius: 0; } body.art-gold .art-figure figcaption { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 14px; } body.art-gold .card { background: #fff; border: 1px solid var(--line); border-radius: 2px; box-shadow: none; } body.art-gold .art-title { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400; font-style: italic; font-size: clamp(26px, 6.4vw, 38px); letter-spacing: .01em; color: #23201B; margin: 0 0 6px; } body.art-gold .art-card { padding-top: 30px; } body.art-gold .art-card > .art-title + .art-block { margin-top: 22px; } body.art-gold .art-label { font-family: "Open Sans", sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-dark); margin: 0 0 7px; } body.art-gold .art-block { border-top: 1px solid var(--line); padding-top: 15px; margin: 0 0 15px; } body.art-gold .art-block:first-of-type { border-top: 0; padding-top: 0; } body.art-gold .art-block p { font-size: 15px; line-height: 1.85; color: #3A362E; font-weight: 400; } body.art-gold .art-claim { background: var(--band); border: 0; border-top: 1px solid var(--gold-soft); border-bottom: 1px solid var(--gold-soft); border-radius: 0; text-align: center; padding: 20px 18px; } body.art-gold .art-claim p { font-size: 14.5px; } body.art-gold .art-claim-strong { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: 17px; color: #8A6D2F; } body.art-gold .art-value-line { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400; letter-spacing: .02em; color: #23201B; } /* Chrome that would cheapen a gallery page is toned down or removed. */ body.art-gold .eyebrow, body.art-gold .chip { display: none; } body.art-gold .ticker, body.art-gold .viewers { display: none; } body.art-gold .kolam-rule { display: none; } /* Reddish gold, never black — a black button on ivory reads as a form, and this page is meant to read as a gallery label. */ body.art-gold .btn { background: linear-gradient(135deg, #C4933B, #A8662C); border: 0; box-shadow: 0 2px 0 #8A4E21; color: #FFF8EA; border-radius: 2px; font-family: "Open Sans", sans-serif; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 13px; } body.art-gold .btn:hover { background: linear-gradient(135deg, #A8662C, #8A4E21); color: #FFF8EA; box-shadow: 0 1px 0 #6E3D19; } /* The giving block in gold, white text, on both artwork landers. */ body.art-gold .do-good { background: linear-gradient(135deg, #C79A3E, #A87A28); border: 0; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); padding: 18px 22px; } body.art-gold .do-good p { color: #FFFFFF; font-weight: 700; font-size: 14px; } /* The name already heads the page; repeating it in the footer adds nothing. */ body.art-gold .foot-name, body.disp-art .foot-name, body.disp-art_traditional .foot-name { display: none; } body.art-gold .foot-brand { display: none; } body.art-gold .card-h { font-family: "Open Sans", sans-serif; font-weight: 300; letter-spacing: .1em; text-transform: uppercase; font-size: 15px; } body.art-gold .card-h::after { background: var(--gold); width: 34px; height: 1px; } body.art-gold input, body.art-gold select, body.art-gold textarea { border-radius: 2px; font-family: "Open Sans", sans-serif; } body.art-gold .consent { background: var(--band); border-radius: 2px; } body.art-gold .venues-h { font-family: "Open Sans", sans-serif; font-weight: 300; letter-spacing: .14em; text-transform: uppercase; font-size: 15px; } body.art-gold .venue { border-radius: 2px; } body.art-gold .venue-price { font-family: "Cormorant Garamond", Georgia, serif; } body.art-gold .foot-name { font-family: "Open Sans", sans-serif; font-weight: 300; letter-spacing: .16em; text-transform: uppercase; font-size: 13px; } /* ---------- Venue logos --------------------------------------------------- */ .venue-name img { max-height: 24px; max-width: 132px; width: auto; object-fit: contain; } body.art-gold .venue-name img { filter: grayscale(1); opacity: .78; } body.art-gold .venue:hover .venue-name img { filter: none; opacity: 1; } /* ========================================================================== Marketing Lander — the six-colour palette. Each benefit takes a full block of colour, the way a brand-personality chart reads. Deliberately louder than the rest of the portfolio. ========================================================================== */ :root { --mkt-sun: #F5CB2E; --mkt-coral: #FB8144; --mkt-ruby: #E8404A; --mkt-jade: #26B573; --mkt-violet: #9257B4; --mkt-indigo: #3D4DA6; } body.mkt { --ink: #1E1B2E; --muted: #615C77; --bg: #FFFFFF; --surface: #FFFFFF; --band: #F4F2FA; --brand: #9257B4; --brand-dark: #6F3F8C; --accent: #E8404A; --line: #E4E0EF; background-image: none !important; background-color: #fff; } body.mkt .wrap { max-width: 860px; } .mkt-hero { text-align: center; padding: 10px 0 24px; } .mkt-eyebrow { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } .mkt-name { font-family: var(--font-body); font-weight: 800; font-size: clamp(36px, 10vw, 68px); line-height: 1.04; letter-spacing: -.02em; margin: 0 0 12px; background: linear-gradient(100deg, var(--mkt-ruby), var(--mkt-coral) 22%, var(--mkt-sun) 42%, var(--mkt-jade) 62%, var(--mkt-violet) 82%, var(--mkt-indigo)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; overflow-wrap: anywhere; } .mkt-head { margin: 0 auto 12px; max-width: 34ch; font-size: clamp(16px, 4vw, 20px); font-weight: 600; color: var(--ink); } .mkt-claimed { display: inline-block; margin: 0 0 18px; padding: 7px 16px; background: var(--mkt-sun); color: #3A2E00; border-radius: 999px; font-size: 13px; font-weight: 700; } .btn.mkt-cta { background: var(--mkt-indigo); border-color: var(--mkt-indigo); box-shadow: 0 3px 0 #2C3880; padding: 14px 30px; } .btn.mkt-cta:hover { background: #2C3880; border-color: #2C3880; } .mkt-grid { display: grid; gap: 0; margin: 0 0 22px; border-radius: var(--radius-lg); overflow: hidden; } .mkt-tile { padding: 26px 22px 28px; color: #fff; } .mkt-tile h2 { margin: 0 0 2px; font-family: var(--font-body); font-weight: 800; font-size: 24px; letter-spacing: -.01em; text-transform: uppercase; } .mkt-tile-sub { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; } .mkt-tile-p { margin: 0; font-size: 14.5px; line-height: 1.65; opacity: .96; } .mkt-sun { background: var(--mkt-sun); color: #3A2E00; } .mkt-sun .mkt-tile-sub, .mkt-sun .mkt-tile-p { color: #3A2E00; } .mkt-coral { background: var(--mkt-coral); } .mkt-ruby { background: var(--mkt-ruby); } .mkt-jade { background: var(--mkt-jade); } .mkt-violet { background: var(--mkt-violet); } .mkt-indigo { background: var(--mkt-indigo); } body.mkt .card { border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(30,27,46,.05), 0 10px 30px -18px rgba(30,27,46,.25); } body.mkt .card-h { font-family: var(--font-body); font-weight: 800; letter-spacing: -.01em; } body.mkt .card-h::after { background: linear-gradient(90deg, var(--mkt-ruby), var(--mkt-sun), var(--mkt-jade)); width: 64px; } body.mkt .email-sample { border: 0; color: #fff; font-weight: 600; background: linear-gradient(120deg, var(--mkt-violet), var(--mkt-indigo)); } body.mkt .email-sample:nth-child(2) { background: linear-gradient(120deg, var(--mkt-coral), var(--mkt-ruby)); } body.mkt .email-sample:nth-child(3) { background: linear-gradient(120deg, var(--mkt-jade), #17976B); } /* Six colours, so the giving block gets the full sweep. */ body.mkt .do-good { background: linear-gradient(100deg, var(--mkt-ruby), var(--mkt-coral) 22%, var(--mkt-sun) 44%, var(--mkt-jade) 64%, var(--mkt-violet) 84%, var(--mkt-indigo)); } body.mkt .do-good p { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.28); } body.mkt .torana-wrap, body.mkt .kolam-rule { display: none; } body.mkt .chip { background: var(--band); color: var(--brand-dark); border-color: var(--line); } @media (min-width: 620px) { .mkt-grid { grid-template-columns: repeat(3, 1fr); } }