/* Sunehra — shared theme tokens, type, primitives. Themes swap via data-theme on . Font pairs swap via data-fontpair. */ :root { /* Bridal Opulent (default) */ --maroon: #6B0F1A; --maroon-deep: #4A0810; --emerald: #0F4D3A; --emerald-deep: #07331F; --gold: #C9A227; --gold-soft: #E0BE5C; --gold-deep: #8C6B14; --ivory: #F8F1E5; --ivory-warm: #F2E8D4; --bone: #EFE5D0; --ink: #1F1410; --ink-soft: #3A2A22; --rose: #B85968; --line: rgba(31, 20, 16, .12); --line-soft: rgba(31, 20, 16, .07); --bg: var(--ivory); --bg-alt: var(--ivory-warm); --fg: var(--ink); --fg-soft: var(--ink-soft); --brand: var(--maroon); --brand-deep: var(--maroon-deep); --accent: var(--emerald); --accent-deep: var(--emerald-deep); --metal: var(--gold); --metal-soft: var(--gold-soft); --font-display: "Cormorant Garamond", "Cormorant", serif; --font-body: "Manrope", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace; --font-script: "Cormorant Garamond", serif; --rad-sm: 2px; --rad-md: 4px; --rad-lg: 10px; --rad-pill: 999px; --max: 1440px; --gutter: clamp(16px, 4vw, 56px); } /* ---------- Themes ---------- */ [data-theme="heritage"] { --maroon: #7A1B1B; --maroon-deep: #4E0F10; --emerald: #5C3A0E; --emerald-deep: #3A2308; --gold: #B8852A; --gold-soft: #D4A85A; --ivory: #F1E6D0; --ivory-warm: #E8D9BB; --ink: #2A1408; --ink-soft: #4A2A18; --rose: #A0432D; --bg: var(--ivory); --bg-alt: var(--ivory-warm); --brand: var(--maroon); --accent: var(--emerald); } [data-theme="modern"] { --maroon: #6B5A47; --maroon-deep: #3F3324; --emerald: #2E3A2C; --emerald-deep: #1B221A; --gold: #A8854A; --gold-soft: #CBA770; --ivory: #F7F2EA; --ivory-warm: #ECE3D3; --ink: #1A1612; --ink-soft: #44382C; --rose: #95604A; --bg: #FAF6EE; --bg-alt: #F1E9DA; --brand: #2A2017; --accent: var(--gold); } /* ---------- Font pairs ---------- */ [data-fontpair="cormorant-manrope"] { --font-display: "Cormorant Garamond", serif; --font-body: "Manrope", ui-sans-serif, sans-serif; } [data-fontpair="playfair-outfit"] { --font-display: "Playfair Display", serif; --font-body: "Outfit", ui-sans-serif, sans-serif; } [data-fontpair="italiana-jost"] { --font-display: "Italiana", serif; --font-body: "Jost", ui-sans-serif, sans-serif; } /* ---------- Reset / base ---------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Prevent any element from forcing horizontal scroll on small screens. Use `clip` so we don't create a new scroll container (which would break position: sticky on the header / toolbar). Fall back to hidden. */ overflow-x: hidden; overflow-x: clip; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } img { max-width: 100%; display: block; } ::selection { background: var(--maroon); color: var(--ivory); } /* ---------- Type primitives ---------- */ .display { font-family: var(--font-display); font-weight: 400; letter-spacing: -.005em; line-height: 1.08; font-feature-settings: "lnum", "dlig"; } .display.tight { line-height: 1.0; letter-spacing: -.01em; } .eyebrow { font-family: var(--font-body); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; font-weight: 500; color: var(--fg-soft); } .mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; text-transform: uppercase; color: rgba(31, 20, 16, .55); } .script { font-family: var(--font-display); font-style: italic; font-weight: 400; } /* ---------- Buttons ---------- */ .btn { appearance: none; border: 1px solid currentColor; background: transparent; color: var(--fg); font-family: var(--font-body); font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; padding: 14px 26px; cursor: pointer; transition: all .25s ease; border-radius: var(--rad-sm); display: inline-flex; align-items: center; gap: 10px; font-weight: 500; white-space: nowrap; } .btn:hover { background: var(--fg); color: var(--bg); } .btn--filled { background: var(--brand); color: var(--ivory); border-color: var(--brand); } .btn--filled:hover { background: var(--brand-deep); color: var(--ivory); border-color: var(--brand-deep); } .btn--ghost { border-color: rgba(248, 241, 229, .4); color: var(--ivory); } .btn--ghost:hover { background: var(--ivory); color: var(--ink); border-color: var(--ivory); } .btn--sm { padding: 9px 16px; font-size: 10px; } /* ---------- Layout ---------- */ .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); } .hr-gold { height: 1px; background: linear-gradient(90deg, transparent, var(--gold-soft), transparent); border: none; } .divider-ornament { display: flex; align-items: center; gap: 14px; color: var(--metal); font-size: 11px; justify-content: center; } .divider-ornament::before, .divider-ornament::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--metal-soft), transparent); max-width: 200px; } /* ---------- Responsive grids ---------- */ .grid-hero { display: grid; grid-template-columns: 1fr 1.15fr; min-height: 82vh; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .grid-heritage { display: grid; grid-template-columns: 1.05fr 1fr; gap: 80px; align-items: center; } .grid-appt { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center; } .grid-cats { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; } .grid-mat { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } .grid-featured { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto; gap: 14px; } .grid-related { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .grid-collections { display: grid; grid-template-columns: 240px 1fr; gap: 56px; } .grid-cat-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: end; margin-top: 28px; } .grid-products { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 24px; row-gap: 48px; } .grid-footer { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr; gap: 48px; margin-bottom: 60px; } .grid-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; } .grid-gallery { display: grid; grid-template-columns: 84px 1fr; gap: 18px; } .grid-product-main { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; } .grid-spec { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; } .grid-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .grid-2-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 700px) { .grid-2-form { grid-template-columns: 1fr; gap: 0; } } .header-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 20px 0; gap: 24px; } .subnav { display: flex; justify-content: center; gap: 38px; padding: 13px 0; font-size: 11.5px; letter-spacing: .24em; text-transform: uppercase; font-weight: 500; } /* ---------- Breakpoints ---------- */ /* Tablet */ @media (max-width: 1024px) { .grid-cats { grid-template-columns: repeat(4, 1fr); } .grid-mat { grid-template-columns: repeat(3, 1fr); } .grid-footer { grid-template-columns: 1fr 1fr; } .grid-related { grid-template-columns: repeat(3, 1fr); } .grid-products { grid-template-columns: repeat(2, 1fr) !important; } .grid-collections { grid-template-columns: 1fr; gap: 40px; } .grid-2, .grid-heritage, .grid-appt { gap: 56px; } .editorial-cell { grid-column: 1 / -1 !important; } } /* Mobile */ @media (max-width: 700px) { :root { --gutter: 18px; } .grid-hero { grid-template-columns: 1fr; min-height: auto; } .grid-2, .grid-heritage, .grid-appt, .grid-cat-hero, .grid-product-main { grid-template-columns: 1fr; gap: 36px; } .grid-cats { grid-template-columns: repeat(2, 1fr); gap: 12px; } .grid-mat { grid-template-columns: repeat(2, 1fr); gap: 12px; } .grid-featured { grid-template-columns: 1fr; gap: 12px; } .grid-related { grid-template-columns: repeat(2, 1fr); gap: 14px; } .grid-products { grid-template-columns: 1fr !important; gap: 18px; row-gap: 32px; } .grid-footer { grid-template-columns: 1fr; gap: 28px; } .grid-trust { grid-template-columns: repeat(2, 1fr); gap: 28px 14px; } .grid-gallery { grid-template-columns: 1fr; gap: 12px; } .grid-spec { grid-template-columns: 1fr; } .grid-stats { grid-template-columns: repeat(2, 1fr); gap: 20px; } .header-bar { grid-template-columns: auto 1fr auto; gap: 8px; padding: 12px 0; } .subnav { gap: 22px; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; padding: 10px var(--gutter); scrollbar-width: none; -ms-overflow-style: none; } .subnav::-webkit-scrollbar { display: none; } .subnav > a { flex-shrink: 0; } .hide-mobile { display: none !important; } .show-mobile { display: revert; } /* tighten section padding */ section { padding-left: 0; padding-right: 0; } /* type scales */ .display-hero { font-size: clamp(46px, 12vw, 96px) !important; } /* common spans for stacked grid items */ .span-mobile-full { grid-column: 1 / -1 !important; grid-row: auto !important; } /* lookbook on mobile becomes simple stack */ .lookbook-grid > * { grid-column: 1 / -1 !important; margin-top: 0 !important; } } .show-mobile, .show-mobile-flex, .show-mobile-inline, .show-mobile-block { display: none !important; } /* Featured grid: bigger card spans on mobile */ @media (max-width: 700px) { .show-mobile { display: revert !important; } .show-mobile-flex { display: flex !important; } .show-mobile-inline { display: inline !important; } .show-mobile-block { display: block !important; } .featured-hero { grid-column: 1 / -1 !important; grid-row: auto !important; } .featured-tile { grid-column: 1 / -1 !important; grid-row: auto !important; } .sun-mark { font-size: 22px !important; letter-spacing: .11em !important; } .sun-logo .mono { display: none; } .hero-left { padding: 36px var(--gutter) 24px !important; } .grid-hero > div:nth-child(2) { aspect-ratio: 4/5; min-height: 0 !important; max-height: 75vh; } .grid-hero > div:nth-child(2) .ph { height: 100% !important; } /* Heritage section overlapping image — on desktop it juts past the container by -50px; on mobile that causes horizontal overflow. Reset to inline. */ .grid-heritage > div:first-child > .ph + .ph { position: static !important; width: 70% !important; margin: -40px 0 0 30% !important; border-width: 0 !important; } /* The floating product tag in the hero (right: 36, top: 80, width: 268) becomes a banner across the bottom of the hero image on mobile. */ .grid-hero .ph > div[style*="rotate(1deg)"] { right: 12px !important; top: auto !important; bottom: 70px !important; width: calc(100% - 24px) !important; transform: none !important; } /* Sticky toolbar offset is too big on mobile (no full subnav) */ .grid-collections + section, main > section[style*="sticky"] { top: 64px !important; } /* Section padding tightening */ .wrap { padding: 0 var(--gutter); } /* Press strip horizontal overflow — let it wrap */ .press-strip { gap: 14px !important; } /* Trust strip dividers off on mobile (they get noisy when stacked 2x2) */ .grid-trust > div { border-right: none !important; padding: 0 !important; } .gallery-thumbs { flex-direction: row !important; overflow-x: auto; order: 2; padding-bottom: 4px; scrollbar-width: thin; } .gallery-thumbs > * { flex: 0 0 64px; } .gallery-thumbs > *:last-child { flex: 0 0 64px; } .trust-marks > div { flex: 1 1 auto; } .filters-closed { display: none !important; } .filters-open { position: fixed !important; inset: 0 !important; z-index: 80; background: var(--bg); padding: 24px var(--gutter) 80px; overflow-y: auto; grid-column: 1 / -1 !important; } .filters-open > div { position: static !important; } } /* ---------- Placeholder imagery system ---------- Editorial moody placeholders that look intentional. Each surface gets a moody gradient + radial glow + monospace caption. */ .ph { position: relative; overflow: hidden; background: var(--ink); color: rgba(255, 245, 220, .85); isolation: isolate; } .ph::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 60%, rgba(255, 220, 150, .25) 0%, transparent 55%), radial-gradient(ellipse at 20% 20%, rgba(184, 50, 70, .4) 0%, transparent 60%), linear-gradient(145deg, var(--maroon-deep) 0%, var(--ink) 60%, var(--emerald-deep) 100%); z-index: -1; } .ph::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg, rgba(255, 220, 150, .015) 0, rgba(255, 220, 150, .015) 1px, transparent 1px, transparent 6px); pointer-events: none; z-index: 0; } .ph--emerald::before { background: radial-gradient(ellipse at 50% 50%, rgba(212, 168, 90, .3) 0%, transparent 55%), linear-gradient(145deg, var(--emerald-deep) 0%, var(--ink) 60%, var(--maroon-deep) 100%); } .ph--gold::before { background: radial-gradient(ellipse at 50% 55%, rgba(255, 220, 150, .45) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(212, 168, 90, .35) 0%, transparent 60%), linear-gradient(145deg, #2A1F0E 0%, #1A1208 50%, var(--maroon-deep) 100%); } .ph--ivory::before { background: radial-gradient(ellipse at 50% 55%, rgba(212, 168, 90, .4) 0%, transparent 50%), linear-gradient(145deg, #E8D9BB 0%, #D4BC8A 100%); } .ph--ink::before { background: radial-gradient(ellipse at 50% 60%, rgba(212, 168, 90, .25) 0%, transparent 50%), linear-gradient(145deg, #1A0F0A 0%, #0A0604 100%); } .ph__cap { position: absolute; left: 14px; bottom: 12px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 245, 220, .85); z-index: 2; display: flex; align-items: center; gap: 8px; text-shadow: 0 1px 4px rgba(0, 0, 0, .55); } .ph__cap::before { content: ""; width: 14px; height: 1px; background: rgba(255, 245, 220, .4); } .ph__tag { position: absolute; right: 14px; top: 12px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 245, 220, .8); z-index: 2; text-shadow: 0 1px 4px rgba(0, 0, 0, .55); } .ph--ivory .ph__cap, .ph--ivory .ph__tag { color: rgba(31, 20, 16, .55); } .ph--ivory .ph__cap::before { background: rgba(31, 20, 16, .35); } /* Subtle glint animation on placeholders */ .ph__glint { position: absolute; inset: 0; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 240, 200, .15) 0%, transparent 30%); pointer-events: none; z-index: 1; } /* ---------- Reveal animation ---------- */ .reveal { opacity: 1; transform: none; transition: opacity .9s cubic-bezier(.2, .8, .2, 1), transform .9s cubic-bezier(.2, .8, .2, 1); } .js-reveal-ready .reveal:not(.in) { opacity: 0; transform: translateY(20px); } /* ---------- Scrollbar styling ---------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-alt); } ::-webkit-scrollbar-thumb { background: var(--maroon); border-radius: 4px; border: 2px solid var(--bg-alt); } /* ---------- Forms ---------- */ input.input-field, select.input-field { appearance: none; border: 1px solid var(--line); background: transparent; padding: 14px 16px; font-family: var(--font-body); font-size: 13px; color: var(--fg); border-radius: var(--rad-sm); width: 100%; letter-spacing: .04em; } input.input-field:focus, select.input-field:focus { outline: none; border-color: var(--brand); }