/* ============================================================ RAMESH TRADING CO. — Design system ------------------------------------------------------------ Premium here means restraint, not decoration: · light-led — warm paper carries the page, deep colour is rationed to two moments and the footer · hairlines instead of boxes — almost no shadows, small radii · one accent (bronze) used at small sizes only · photography does the selling; the interface gets out of the way · generous whitespace and a wide, quiet type scale Alternate palettes live at the bottom of the token section. Activate one on the tag: ============================================================ */ /* ---------- TOKENS — Ivory & Oxblood (default) ---------- */ :root{ /* Paper */ --ivory: #FCFAF7; --ivory-2: #F5F1E9; --white: #FFFFFF; /* Ink — type and primary buttons */ --ink: #17120F; --ink-soft: #2A2320; --ink-deep: #14100D; /* footer */ /* Brand — deep oxblood, rationed */ --brand: #6E2019; --brand-500: #8A2C22; --brand-600: #571711; --brand-700: #2A0D09; /* the one dark section */ --brand-100: #F3E7E4; --brand-050: #FBF4F2; --brand-rgb: 110,32,25; --brand-500-rgb: 138,44,34; --dark-rgb: 26,12,9; /* image scrims */ --shadow-rgb: 40,26,20; /* Bronze — the single accent, small sizes only */ --gold: #96793F; --gold-deep: #6E5629; /* bronze dark enough to read on paper */ --gold-soft: #D9C089; /* bronze on dark */ --gold-pale: #F0E7D3; --gold-rgb: 217,192,137; --on-gold: #2A0D09; --brick: #9C2B1E; /* form errors */ --wa: #107C6E; /* WhatsApp, in its darker brand green */ --wa-hover: #0C6155; /* Type colour */ --text: #17120F; --text-2: #675E55; --text-3: #6F6459; --on-dark: #F2EDE4; --on-dark-2: rgba(242,237,228,.78); --on-dark-3: rgba(242,237,228,.62); /* Hairlines */ --line: #E7E1D6; --line-2: #D8D0C1; --line-dark: rgba(242,237,228,.16); } /* ---------- ALTERNATE PALETTES ---------- */ :root[data-theme="oxblood"]{ /* colour-forward, festive */ --ivory:#FDF8F3; --ivory-2:#F7EEE3; --brand:#8A2C22; --brand-500:#A8382A; --brand-600:#6E2019; --brand-700:#3A110C; --brand-100:#F8E7E1; --brand-050:#FDF5F2; --brand-rgb:138,44,34; --brand-500-rgb:168,56,42; --ink:#211510; --ink-soft:#33231C; --ink-deep:#1B0F0A; --gold:#A6853F; --gold-deep:#7A5F27; --gold-soft:#E2CB93; --gold-pale:#F5EAD3; --gold-rgb:226,203,147; --text:#211510; --text-2:#6E5A4E; --text-3:#75604F; --line:#EDE2D3; --line-2:#DDCDB9; } :root[data-theme="emerald"]{ /* evergreen, no seasonal lean */ --ivory:#FBF9F4; --ivory-2:#F2F0E7; --brand:#14503C; --brand-500:#1B6A4F; --brand-600:#0E3C2C; --brand-700:#0A2419; --brand-100:#E2EFE8; --brand-050:#F2F8F4; --brand-rgb:20,80,60; --brand-500-rgb:27,106,79; --ink:#131A16; --ink-soft:#212B26; --ink-deep:#0C1310; --gold:#8E7A46; --gold-deep:#6A5A31; --gold-soft:#D8C79B; --gold-pale:#EFE9D8; --gold-rgb:216,199,155; --text:#131A16; --text-2:#5A635C; --text-3:#616A62; --line:#E4E2D6; --line-2:#D2CFC0; } :root[data-theme="navy"]{ /* the safest corporate read */ --ivory:#FBFAF7; --ivory-2:#F1F0EA; --brand:#1B2E4F; --brand-500:#284470; --brand-600:#13223A; --brand-700:#0B1421; --brand-100:#E4E8EF; --brand-050:#F3F5F8; --brand-rgb:27,46,79; --brand-500-rgb:40,68,112; --ink:#141920; --ink-soft:#232A33; --ink-deep:#0B1017; --gold:#8E7539; --gold-deep:#6B5828; --gold-soft:#DAC392; --gold-pale:#F0E8D5; --gold-rgb:218,195,146; --text:#141920; --text-2:#5B6470; --text-3:#626B76; --line:#E5E2D9; --line-2:#D2CEC2; } /* ---------- SHARED — type, space, shape ---------- */ :root{ --font: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Fraunces", "Georgia", "Times New Roman", serif; --gut: clamp(20px, 5vw, 72px); --sec: clamp(72px, 10vw, 148px); --maxw: 1280px; /* Small radii. Nothing here is a bubble. */ --r-sm: 4px; --r: 8px; --r-lg: 10px; --r-xl: 12px; /* Shadows are a last resort; hairlines do the work. */ --sh-1: 0 1px 2px rgba(var(--shadow-rgb),.04); --sh-2: 0 10px 34px rgba(var(--shadow-rgb),.08); --ease: cubic-bezier(.22,.61,.36,1); } /* ---------- RESET ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:92px; overflow-x:hidden; max-width:100%; } body{ margin:0; background:var(--ivory); color:var(--text); font-family:var(--font); font-size:16px; line-height:1.72; font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ max-width:100%; display:block; } svg{ max-width:100%; } a{ color:inherit; text-decoration:none; } button,input,select,textarea{ font:inherit; color:inherit; } h1,h2,h3,h4,h5{ margin:0; font-weight:600; line-height:1.2; } p{ margin:0; } ul{ margin:0; padding:0; list-style:none; } :focus-visible{ outline:2px solid var(--gold-deep); outline-offset:3px; border-radius:2px; } /* ---------- LAYOUT ---------- */ .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); } .section{ padding-block:var(--sec); position:relative; } .section--tight{ padding-block:clamp(56px,7vw,96px); } .section--soft{ background:var(--ivory-2); } .section--white{ background:var(--white); } /* The one deep moment on a page. Flat, full bleed, no ornament. */ .section--ink{ background:var(--brand-700); color:var(--on-dark); } .section--ink h1,.section--ink h2,.section--ink h3{ color:var(--on-dark); } /* ---------- TYPE ---------- */ .display,.h1,.h2,.footer-cta h2{ font-family:var(--font-display); font-weight:400; font-variation-settings:"SOFT" 0,"WONK" 0; letter-spacing:-.012em; } .display{ font-size:clamp(2.6rem, 5.6vw, 4.5rem); line-height:1.06; } .h1{ font-size:clamp(2.2rem, 4.6vw, 3.4rem); line-height:1.1; } .h2{ font-size:clamp(1.85rem, 3.4vw, 2.7rem); line-height:1.14; } .h3{ font-size:1.12rem; font-weight:600; letter-spacing:-.01em; } .h4{ font-size:1rem; font-weight:600; } .lede{ font-size:1.06rem; color:var(--text-2); line-height:1.7; } .section--ink .lede{ color:var(--on-dark-2); } .small{ font-size:.9rem; } .muted{ color:var(--text-2); } .section--ink .muted{ color:var(--on-dark-2); } .fine{ font-size:.8rem; line-height:1.65; color:var(--text-3); } .section--ink .fine{ color:var(--on-dark-3); } /* Eyebrow — a rule and a tracked label. No chip, no fill. */ .eyebrow{ display:flex; align-items:center; gap:12px; margin-bottom:22px; font-size:.69rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-deep); } .eyebrow::before{ content:""; width:26px; height:1px; background:var(--gold); flex:none; } .section--ink .eyebrow{ color:var(--gold-soft); } .section--ink .eyebrow::before{ background:var(--gold-soft); opacity:.7; } .sec-head{ max-width:62ch; margin-bottom:clamp(40px,5vw,68px); } .sec-head--center{ margin-inline:auto; text-align:center; } .sec-head--center .eyebrow{ justify-content:center; } .sec-head .lede{ margin-top:18px; max-width:56ch; } .sec-head--center .lede{ margin-inline:auto; } /* ---------- BUTTONS ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:52px; padding:14px 26px; border-radius:var(--r); border:1px solid transparent; font-weight:600; font-size:.94rem; letter-spacing:.005em; cursor:pointer; transition:background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), opacity .25s var(--ease); text-align:center; } .btn svg{ width:17px; height:17px; flex:none; } .btn--brand{ background:var(--ink); color:var(--ivory); } .btn--brand:hover{ background:var(--brand); } .btn--gold{ background:var(--ink); color:var(--ivory); } /* legacy alias */ .btn--ink{ background:transparent; color:var(--ink); border-color:var(--ink); } .btn--ink:hover{ background:var(--ink); color:var(--ivory); } .btn--wa{ background:var(--wa); color:#FFF; } .btn--wa:hover{ background:var(--wa-hover); } .btn--ghost{ background:transparent; border-color:var(--line-2); color:var(--text); } .btn--ghost:hover{ border-color:var(--ink); } /* On deep ground the primary flips to paper, the ghost to a light hairline. */ .section--ink .btn--brand, .cta-band .btn--brand, .enquiry-box .btn--brand, .site-footer .btn--brand, .ccard .btn--brand, .budget-card .btn--brand, .ocard .btn--brand{ background:var(--ivory); color:var(--ink); } .section--ink .btn--brand:hover, .cta-band .btn--brand:hover, .site-footer .btn--brand:hover, .ccard .btn--brand:hover, .budget-card .btn--brand:hover, .ocard .btn--brand:hover{ background:var(--gold-soft); color:var(--on-gold); } .section--ink .btn--ghost, .cta-band .btn--ghost, .enquiry-box .btn--ghost, .ccard .btn--ghost, .budget-card .btn--ghost, .ocard .btn--ghost, .site-footer .btn--ghost{ border-color:rgba(242,237,228,.34); color:var(--on-dark); } .section--ink .btn--ghost:hover, .cta-band .btn--ghost:hover, .site-footer .btn--ghost:hover{ border-color:var(--on-dark); } .btn--sm{ min-height:44px; padding:10px 18px; font-size:.85rem; } .btn--block{ width:100%; } .btn-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; } .btn-row--center{ justify-content:center; } .link-arrow{ display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:.88rem; color:var(--ink); padding-bottom:2px; border-bottom:1px solid var(--gold); transition:gap .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); } .link-arrow svg{ width:15px; height:15px; flex:none; } .link-arrow:hover{ gap:12px; color:var(--gold-deep); } .section--ink .link-arrow, .hero .link-arrow, .page-hero .link-arrow, .cta-band .link-arrow, .budget-card .link-arrow, .ccard .link-arrow, .ocard .link-arrow{ color:var(--on-dark); border-color:var(--gold-soft); } .hero .link-arrow, .page-hero .link-arrow{ color:var(--ink); border-color:var(--gold); } .budget-card .link-arrow, .ocard .link-arrow, .ccard .link-arrow{ color:#FFF; } /* ---------- HEADER ---------- */ .site-header{ position:sticky; top:0; z-index:120; background:rgba(252,250,247,.92); backdrop-filter:saturate(150%) blur(14px); -webkit-backdrop-filter:saturate(150%) blur(14px); border-bottom:1px solid var(--line); } .site-header .wrap{ max-width:1480px; padding-inline:clamp(18px,3vw,48px); } .header-bar{ display:flex; align-items:center; gap:18px; min-height:74px; } .brand{ display:flex; align-items:center; gap:12px; flex:none; } .brand__mark{ width:40px; height:40px; border-radius:var(--r-sm); flex:none; background:var(--brand-700); display:grid; place-items:center; color:var(--gold-soft); font-family:var(--font-display); font-weight:500; font-size:.95rem; letter-spacing:.02em; } .brand__text{ display:flex; flex-direction:column; line-height:1.2; } .brand__name{ font-family:var(--font-display); font-weight:500; font-size:1.08rem; letter-spacing:-.01em; white-space:nowrap; } .brand__sub{ font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-3); font-weight:600; } .nav{ display:flex; align-items:center; gap:2px; margin-left:auto; min-width:0; } .nav a{ padding:8px 12px; font-size:.88rem; font-weight:500; color:var(--text-2); position:relative; white-space:nowrap; transition:color .2s var(--ease); } .nav a:hover{ color:var(--ink); } .nav a.is-active{ color:var(--ink); } .nav a.is-active::after{ content:""; position:absolute; left:12px; right:12px; bottom:0; height:1px; background:var(--gold); } .header-cta{ display:flex; align-items:center; gap:10px; flex:none; } .burger{ display:none; width:44px; height:44px; border-radius:var(--r); border:1px solid var(--line-2); background:transparent; cursor:pointer; align-items:center; justify-content:center; flex:none; } .burger span{ display:block; width:18px; height:1.5px; background:var(--ink); position:relative; transition:.3s var(--ease); } .burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--ink); transition:.3s var(--ease); } .burger span::before{ top:-5px; } .burger span::after{ top:5px; } .burger[aria-expanded="true"] span{ background:transparent; } .burger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); } .burger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); } .mobile-nav{ position:fixed; inset:74px 0 0; z-index:115; background:var(--ivory); padding:14px var(--gut) 40px; overflow-y:auto; transform:translateY(-10px); opacity:0; visibility:hidden; transition:opacity .26s var(--ease), transform .26s var(--ease), visibility .26s; } .mobile-nav.is-open{ transform:none; opacity:1; visibility:visible; } .mobile-nav a.mlink{ display:flex; align-items:center; justify-content:space-between; padding:17px 2px; border-bottom:1px solid var(--line); font-family:var(--font-display); font-size:1.18rem; font-weight:400; } .mobile-nav a.mlink span{ color:var(--gold-deep); font-size:.85rem; } .mobile-nav .btn-row{ margin-top:26px; flex-direction:column; align-items:stretch; } .mobile-nav .mcontact{ margin-top:26px; font-size:.9rem; color:var(--text-2); } .mobile-nav .mcontact a{ display:block; padding:5px 0; font-weight:600; color:var(--ink); } body.nav-open{ overflow:hidden; } /* ---------- HERO — light, editorial ---------- */ .hero{ position:relative; background:var(--ivory); border-bottom:1px solid var(--line); } .hero__inner{ display:grid; grid-template-columns:1fr 1.02fr; gap:clamp(38px,6vw,84px); align-items:center; padding-block:clamp(52px,7vw,104px); } .hero__copy{ display:flex; flex-direction:column; align-items:flex-start; } .hero__ribbon{ order:1; } .hero__title{ order:2; } .hero__sub{ order:3; } .hero__pills{ order:4; } .hero__cta{ order:5; } .hero__cta-extra{ order:6; margin-top:20px; } .hero__trust{ order:7; } .hero__ribbon{ display:inline-flex; align-items:center; gap:9px; margin-bottom:26px; border:1px solid var(--gold); border-radius:100px; padding:6px 15px 6px 12px; font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); white-space:nowrap; background:transparent; } .hero__ribbon .dot{ width:6px; height:6px; border-radius:50%; background:var(--brand); position:relative; flex:none; } .hero__ribbon .dot::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--brand); animation:rt-pulse 2.4s var(--ease) infinite; } @keyframes rt-pulse{ 0%{transform:scale(.55);opacity:.7} 70%{transform:scale(1.4);opacity:0} 100%{opacity:0} } .hero__ribbon .rb-min{ display:none; } .hero__title{ margin-bottom:22px; } .hero__title em{ font-style:italic; font-weight:300; color:var(--brand); } .hero__sub{ font-size:1.08rem; color:var(--text-2); line-height:1.7; max-width:44ch; } /* The four claims read as one quiet line, not four chips. */ .hero__pills{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:26px 0 32px; font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); } .hero__pills li{ display:flex; align-items:center; gap:14px; } .hero__pills li:not(:last-child)::after{ content:""; width:3px; height:3px; border-radius:50%; background:var(--gold); } .hero__trust{ margin-top:30px; padding-top:22px; border-top:1px solid var(--line); font-size:.88rem; color:var(--text-3); display:flex; align-items:center; gap:9px; align-self:stretch; } .hero__trust svg{ width:17px; height:17px; color:var(--gold-deep); flex:none; } .hero__media{ position:relative; display:grid; grid-template-columns:1.4fr 1fr; grid-template-rows:1fr 1fr; gap:10px; height:min(600px,68vh); } .hero-tile{ margin:0; overflow:hidden; border-radius:var(--r-lg); position:relative; background:var(--ivory-2); } .hero-tile:first-child{ grid-row:span 2; } .hero-tile__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .9s var(--ease); } .hero-tile__img.is-on{ opacity:1; } .hero__badge{ position:absolute; left:12px; right:12px; bottom:12px; z-index:3; display:inline-flex; align-items:center; gap:10px; width:max-content; max-width:calc(100% - 24px); background:rgba(252,250,247,.94); backdrop-filter:blur(8px); border-radius:var(--r); padding:9px 14px; font-size:.8rem; font-weight:600; color:var(--ink); transition:background-color .25s var(--ease); } a.hero__badge:hover{ background:#FFF; } .hero__badge b{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; } .hero__badge .price{ color:var(--brand); font-weight:700; flex:none; } .hero-rotator__toggle{ position:absolute; top:12px; right:12px; z-index:5; width:34px; height:34px; border-radius:50%; cursor:pointer; padding:0; background:rgba(252,250,247,.9); backdrop-filter:blur(8px); border:1px solid var(--line-2); color:var(--ink); display:grid; place-items:center; transition:.25s var(--ease); } .hero-rotator__toggle:hover{ background:#FFF; border-color:var(--ink); } .hero-rotator__toggle svg{ width:13px; height:13px; } /* ---------- PAGE HERO ---------- */ .page-hero{ position:relative; background:var(--ivory-2); overflow:hidden; border-bottom:1px solid var(--line); } .page-hero img.page-hero__bg{ position:absolute; inset:0 0 0 auto; width:52%; height:100%; object-fit:cover; opacity:.9; -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 55%); mask-image:linear-gradient(90deg, transparent 0%, #000 55%); } .page-hero__inner{ position:relative; z-index:2; padding-block:clamp(54px,7vw,96px); } .page-hero__inner > *{ max-width:640px; } .page-hero .lede{ margin-top:18px; } .page-hero .btn-row{ margin-top:30px; } .crumb{ font-size:.78rem; color:var(--text-3); margin-bottom:20px; letter-spacing:.03em; } .crumb a:hover{ color:var(--ink); } /* ---------- GRIDS ---------- */ .grid{ display:grid; gap:clamp(20px,2.4vw,32px); } .grid > *{ min-width:0; } .grid-2{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(3,1fr); } .grid-4{ grid-template-columns:repeat(4,1fr); } .grid-auto{ grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); } /* ---------- VALUE ITEMS — hairline, no box ---------- */ .vcard{ padding:26px 0 0; border-top:1px solid var(--line); background:transparent; } .vcard__icon{ width:26px; height:26px; display:grid; place-items:center; color:var(--gold-deep); margin-bottom:20px; } .vcard__icon svg{ width:24px; height:24px; } .vcard h3{ font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; margin-bottom:12px; } .vcard p{ color:var(--text-2); font-size:.94rem; line-height:1.65; } .section--ink .vcard{ border-color:var(--line-dark); } .section--ink .vcard__icon{ color:var(--gold-soft); } .section--ink .vcard p{ color:var(--on-dark-2); } /* ---------- BUDGET CARDS ---------- */ .budget-card{ position:relative; overflow:hidden; border-radius:var(--r-lg); background:var(--brand-700); min-height:330px; display:flex; flex-direction:column; justify-content:flex-end; padding:26px; color:var(--on-dark); isolation:isolate; } .budget-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .9s var(--ease); } .budget-card::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgba(var(--dark-rgb),.88) 8%, rgba(var(--dark-rgb),.34) 60%, rgba(var(--dark-rgb),.1) 100%); } .budget-card:hover img{ transform:scale(1.05); } .budget-card__label{ font-size:.63rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft); font-weight:700; margin-bottom:10px; } .budget-card h3{ font-family:var(--font-display); font-weight:400; font-size:1.6rem; color:#FFF; margin-bottom:8px; } .budget-card p{ font-size:.88rem; color:rgba(255,255,255,.8); margin-bottom:20px; line-height:1.6; } /* ---------- PRODUCT CARD — image led, no frame ---------- */ .pcard{ background:transparent; display:flex; flex-direction:column; } .pcard__media{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--ivory-2); border-radius:var(--r-lg); display:block; } .pcard__media img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); } .pcard:hover .pcard__media img{ transform:scale(1.04); } .pcard__tag{ position:absolute; top:12px; left:12px; background:rgba(252,250,247,.94); backdrop-filter:blur(6px); border-radius:var(--r-sm); padding:5px 10px; font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); } .pcard__custom{ position:absolute; bottom:12px; right:12px; background:rgba(252,250,247,.94); backdrop-filter:blur(6px); color:var(--gold-deep); border-radius:var(--r-sm); padding:5px 10px; font-size:.6rem; font-weight:700; letter-spacing:.09em; display:inline-flex; align-items:center; gap:5px; } .pcard__custom svg{ width:11px; height:11px; } .pcard__body{ padding:20px 2px 0; display:flex; flex-direction:column; flex:1; } .pcard__body h3{ font-family:var(--font-display); font-weight:400; font-size:1.16rem; line-height:1.28; margin-bottom:9px; } .pcard__body h3 a:hover{ color:var(--brand); } .pcard__desc{ font-size:.87rem; color:var(--text-2); line-height:1.6; margin-bottom:16px; flex:1; } .pcard__price{ display:flex; align-items:baseline; gap:7px; margin-bottom:16px; } .pcard__price .from{ font-size:.63rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); font-weight:700; } .pcard__price .amt{ font-family:var(--font-display); font-size:1.24rem; font-weight:500; color:var(--brand); } .pcard__actions{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; } .pcard__actions .btn{ width:100%; } /* ---------- COLLECTION + OCCASION CARDS ---------- */ .ccard, .ocard{ position:relative; overflow:hidden; border-radius:var(--r-lg); background:var(--brand-700); display:flex; flex-direction:column; justify-content:flex-end; padding:26px; color:var(--on-dark); isolation:isolate; } .ccard{ min-height:420px; } .ocard{ aspect-ratio:3/4; } .ccard img, .ocard img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .9s var(--ease); } .ccard::after, .ocard::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgba(var(--dark-rgb),.9) 8%, rgba(var(--dark-rgb),.36) 58%, rgba(var(--dark-rgb),.06) 100%); } .ccard:hover img, .ocard:hover img{ transform:scale(1.05); } .ccard__from{ align-self:flex-start; margin-bottom:auto; background:rgba(252,250,247,.94); backdrop-filter:blur(6px); border-radius:var(--r-sm); padding:6px 12px; font-size:.7rem; font-weight:700; color:var(--ink); } .ccard h3, .ocard h3{ font-family:var(--font-display); font-weight:400; font-size:1.4rem; color:#FFF; margin-bottom:9px; } .ccard p, .ocard p{ font-size:.88rem; color:rgba(255,255,255,.8); margin-bottom:20px; line-height:1.6; } .ccard__actions{ display:flex; flex-wrap:wrap; gap:10px; } .ocard .link-arrow{ align-self:flex-start; } /* ---------- SPLIT ---------- */ .split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,84px); align-items:center; } .split--rev .split__media{ order:2; } .split__media{ border-radius:var(--r-lg); overflow:hidden; position:relative; } .split__media img{ width:100%; height:100%; min-height:320px; object-fit:cover; } .split__media--stack{ display:grid; grid-template-columns:1fr 1fr; gap:10px; border-radius:0; } .split__media--stack > figure{ margin:0; border-radius:var(--r-lg); overflow:hidden; } .split__media--stack > figure:first-child{ grid-row:span 2; } .split__media--stack img{ height:100%; min-height:0; } /* ---------- PACKAGES ---------- */ .pkg{ background:transparent; border-top:1px solid var(--line); padding:28px 0 0; display:flex; flex-direction:column; } .pkg--hi{ border-top-color:var(--gold); } .pkg--hi::before{ content:"Most requested"; display:block; margin-bottom:14px; font-size:.62rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep); } .pkg h3{ font-family:var(--font-display); font-weight:400; font-size:1.5rem; margin-bottom:20px; } .pkg ul{ display:flex; flex-direction:column; gap:10px; margin-bottom:26px; flex:1; } .pkg li{ display:flex; align-items:flex-start; gap:10px; font-size:.92rem; color:var(--text-2); } .pkg li svg{ width:15px; height:15px; color:var(--gold-deep); flex:none; margin-top:4px; } /* ---------- STEPS ---------- */ .steps{ display:grid; gap:clamp(20px,2.4vw,32px); grid-template-columns:repeat(5,1fr); } .step{ padding:24px 0 0; border-top:1px solid var(--line-dark); background:transparent; } .step__no{ font-family:var(--font-display); font-size:1.7rem; font-weight:300; color:var(--gold-soft); display:block; margin-bottom:14px; font-variant-numeric:tabular-nums; } .step h3{ font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin-bottom:10px; color:var(--on-dark); } .step p{ font-size:.86rem; color:var(--on-dark-2); line-height:1.6; } .steps--light .step{ border-top-color:var(--line); } .steps--light .step__no{ color:var(--gold); } .steps--light .step h3{ color:var(--ink); } .steps--light .step p{ color:var(--text-2); } /* ---------- BENEFITS ---------- */ .benefits{ display:grid; border-top:1px solid var(--line); } .benefit{ display:grid; grid-template-columns:auto 280px 1fr; gap:28px; align-items:baseline; padding:26px 0; border-bottom:1px solid var(--line); } .benefit__no{ font-family:var(--font-display); font-size:.9rem; font-weight:400; color:var(--gold-deep); font-variant-numeric:tabular-nums; } .benefit h3{ font-size:.74rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase; } .benefit p{ color:var(--text-2); font-size:.96rem; } .section--ink .benefits, .section--ink .benefit{ border-color:var(--line-dark); } .section--ink .benefit p{ color:var(--on-dark-2); } .section--ink .benefit__no{ color:var(--gold-soft); } /* ---------- FILTERS ---------- */ .filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; align-items:center; } .chip{ padding:9px 16px; border-radius:100px; border:1px solid var(--line-2); background:transparent; font-size:.84rem; font-weight:500; color:var(--text-2); cursor:pointer; transition:.22s var(--ease); white-space:nowrap; min-height:40px; } .chip:hover{ border-color:var(--ink); color:var(--ink); } .chip.is-on{ background:var(--ink); border-color:var(--ink); color:var(--ivory); } .filter-label{ font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-3); font-weight:700; margin-right:8px; } .filter-bar{ display:flex; flex-direction:column; gap:12px; margin-bottom:40px; } .result-count{ font-size:.85rem; color:var(--text-3); } /* ---------- FORM ---------- */ .form-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(26px,4vw,56px); } .form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; } .field{ display:flex; flex-direction:column; gap:7px; } .field--full{ grid-column:1/-1; } .field label{ font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); } .field label .req{ color:var(--brick); } .field input,.field select,.field textarea{ width:100%; padding:13px 14px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--ivory); font-size:.95rem; min-height:50px; transition:border-color .2s var(--ease), background-color .2s var(--ease); } .field textarea{ min-height:110px; resize:vertical; } .field select{ appearance:none; padding-right:40px; background-repeat:no-repeat; background-position:right 15px center; background-size:11px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23675E55' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); } .field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--ink); background:var(--white); } .field .err{ font-size:.76rem; color:var(--brick); font-weight:600; display:none; } .field.has-error input,.field.has-error select,.field.has-error textarea{ border-color:var(--brick); } .field.has-error .err{ display:block; } .form-actions{ margin-top:30px; display:flex; flex-wrap:wrap; gap:16px; align-items:center; } .form-success{ display:none; text-align:center; padding:16px 4px; } .form-success.is-on{ display:block; } .form-success__icon{ width:56px; height:56px; border-radius:50%; border:1px solid var(--gold); color:var(--gold-deep); display:grid; place-items:center; margin:0 auto 22px; } .form-success__icon svg{ width:26px; height:26px; } .form-hidden{ display:none !important; } /* ---------- HELP PATHS ---------- */ .paths{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; border-top:1px solid var(--line); } .path{ display:flex; flex-direction:column; gap:10px; text-align:left; padding:26px 22px 26px 0; border-bottom:1px solid var(--line); background:transparent; border-inline:0; border-top:0; cursor:pointer; font:inherit; transition:.25s var(--ease); } .path + .path{ border-left:1px solid var(--line); padding-left:22px; } .path:hover{ background:var(--white); } .path strong{ font-size:.95rem; font-weight:600; } .path span{ font-size:.82rem; color:var(--text-2); line-height:1.55; } .path svg{ width:19px; height:19px; color:var(--gold-deep); } /* ---------- CONTACT ---------- */ .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,80px); align-items:start; } .contact-list{ display:flex; flex-direction:column; margin:28px 0 32px; } .contact-row{ display:grid; grid-template-columns:28px 1fr; gap:16px; padding:18px 0; border-bottom:1px solid var(--line-dark); align-items:start; } .contact-row__ic{ width:28px; height:28px; color:var(--gold-soft); display:grid; place-items:start center; } .contact-row__ic svg{ width:19px; height:19px; } .contact-row dt{ font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--on-dark-3); font-weight:700; margin-bottom:5px; } .contact-row dd{ margin:0; font-size:.98rem; font-weight:500; line-height:1.6; } .contact-row dd a:hover{ color:var(--gold-soft); } .contact-light .contact-row{ border-color:var(--line); } .contact-light .contact-row__ic{ color:var(--gold-deep); } .contact-light .contact-row dt{ color:var(--text-3); } .contact-light .contact-row dd a:hover{ color:var(--brand); } /* ---------- PRODUCT DETAIL ---------- */ .pdp{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,76px); align-items:start; } .pdp__gallery{ position:sticky; top:100px; } .pdp__main{ border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/5; background:var(--ivory-2); } .pdp__main img{ width:100%; height:100%; object-fit:cover; } .pdp__thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px; } .pdp__thumbs button{ min-width:0; border:1px solid transparent; border-radius:var(--r); overflow:hidden; padding:0; background:var(--ivory-2); cursor:pointer; aspect-ratio:1/1; transition:.22s var(--ease); } .pdp__thumbs button.is-on{ border-color:var(--ink); } .pdp__thumbs img{ width:100%; height:100%; object-fit:cover; } .pdp__price{ display:flex; align-items:baseline; gap:12px; margin:20px 0 8px; } .pdp__price .amt{ font-family:var(--font-display); font-size:2.1rem; font-weight:400; color:var(--brand); } .pdp__price .from{ font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-3); font-weight:700; } .pdp__block{ margin-top:32px; padding-top:30px; border-top:1px solid var(--line); } .pdp__block h3{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; margin-bottom:18px; color:var(--text-3); } .ticklist{ display:flex; flex-direction:column; gap:11px; } .ticklist li{ display:flex; gap:11px; align-items:flex-start; font-size:.95rem; color:var(--text-2); } .ticklist li svg{ width:15px; height:15px; color:var(--gold-deep); flex:none; margin-top:5px; } .section--ink .ticklist li{ color:var(--on-dark-2); } .section--ink .ticklist li svg{ color:var(--gold-soft); } .taglist{ display:flex; flex-wrap:wrap; gap:8px; } .taglist li{ font-size:.82rem; padding:7px 14px; border-radius:100px; border:1px solid var(--line-2); color:var(--text-2); } .enquiry-box{ background:var(--brand-700); color:var(--on-dark); border-radius:var(--r-xl); padding:clamp(26px,3.4vw,38px); margin-top:36px; } .enquiry-box h3{ font-family:var(--font-display); font-weight:400; font-size:1.35rem; margin-bottom:6px; color:var(--on-dark); } .enquiry-box .fine{ color:var(--on-dark-3); } .enquiry-box .form-grid{ grid-template-columns:repeat(3,1fr); margin-top:22px; gap:14px; } .enquiry-box label{ color:var(--on-dark-3); } .enquiry-box input,.enquiry-box select{ background:rgba(255,255,255,.07); border-color:rgba(242,237,228,.22); color:var(--on-dark); } .enquiry-box input::placeholder{ color:rgba(242,237,228,.4); } .enquiry-box input:focus,.enquiry-box select:focus{ background:rgba(255,255,255,.12); border-color:var(--gold-soft); } .enquiry-box select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23D9C089' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); } .bulk-note{ margin-top:26px; padding:20px 0 0; border-top:1px solid var(--line); } .bulk-note strong{ display:block; font-size:.98rem; margin-bottom:5px; color:var(--ink); } .bulk-note p{ font-size:.88rem; color:var(--text-2); } /* ---------- CTA BAND ---------- */ .cta-band{ border-top:1px solid var(--line-dark); padding-top:clamp(34px,4vw,52px); display:grid; grid-template-columns:1.4fr auto; gap:34px; align-items:end; } .cta-band h2{ margin-bottom:14px; } /* ---------- NOTE STRIP ---------- */ .note-strip{ display:flex; gap:13px; align-items:flex-start; padding:18px 0 0; border-top:1px solid var(--line); font-size:.83rem; color:var(--text-3); line-height:1.65; } .note-strip svg{ width:17px; height:17px; color:var(--gold-deep); flex:none; margin-top:3px; } .section--ink .note-strip{ border-color:var(--line-dark); color:var(--on-dark-3); } .section--ink .note-strip svg{ color:var(--gold-soft); } /* ---------- YEAR-ROUND ---------- */ .yr-pills{ display:flex; flex-wrap:wrap; gap:10px; } .yr-pills li a, .yr-pills li span{ display:inline-block; padding:11px 20px; border-radius:100px; border:1px solid var(--line-2); font-size:.9rem; font-weight:500; transition:.25s var(--ease); } .yr-pills li a:hover{ border-color:var(--ink); } .section--ink .yr-pills li a, .section--ink .yr-pills li span{ border-color:rgba(242,237,228,.24); color:var(--on-dark); } .section--ink .yr-pills li a:hover{ border-color:var(--gold-soft); color:var(--gold-soft); } /* ---------- FOOTER ---------- */ .site-footer{ background:var(--ink-deep); color:var(--on-dark-2); padding-top:clamp(56px,7vw,92px); } .footer-cta{ display:flex; flex-wrap:wrap; gap:26px; align-items:end; justify-content:space-between; padding-bottom:48px; margin-bottom:48px; border-bottom:1px solid var(--line-dark); } .footer-cta h2{ color:var(--on-dark); } .footer-cta .muted{ color:var(--on-dark-3); } .footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:40px; padding-bottom:48px; } .footer-grid h4{ font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:20px; } .footer-grid ul{ display:flex; flex-direction:column; gap:12px; } .footer-grid a{ font-size:.9rem; transition:color .2s var(--ease); } .footer-grid a:hover{ color:var(--on-dark); } .footer-about .brand__mark{ background:rgba(242,237,228,.1); } .footer-about .brand__name{ color:var(--on-dark); } .footer-about .brand__sub{ color:var(--gold-soft); } .footer-about p{ font-size:.9rem; line-height:1.75; margin-top:18px; max-width:32ch; } .footer-bottom{ border-top:1px solid var(--line-dark); padding:24px 0 92px; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:.8rem; color:var(--on-dark-3); } .footer-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; } .footer-tags span{ font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; padding:5px 11px; border-radius:100px; border:1px solid rgba(242,237,228,.2); color:var(--on-dark-3); } /* ---------- STICKY MOBILE CTA ---------- */ .sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:110; display:none; gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(252,250,247,.96); backdrop-filter:blur(14px); border-top:1px solid var(--line); } .sticky-cta .btn{ flex:1; min-height:50px; padding:12px 10px; font-size:.85rem; white-space:nowrap; } .sticky-cta .btn svg{ width:16px; height:16px; } .wa-float{ position:fixed; right:24px; bottom:24px; z-index:105; width:54px; height:54px; border-radius:50%; background:var(--wa); color:#FFF; display:grid; place-items:center; box-shadow:0 10px 26px rgba(16,124,110,.32); transition:transform .3s var(--ease); } .wa-float:hover{ transform:translateY(-2px); } .wa-float svg{ width:26px; height:26px; } /* ---------- IMAGE FALLBACKS ---------- */ .img-fallback{ background:var(--ivory-2) !important; position:relative; overflow:hidden; } .split__media.img-fallback, figure.img-fallback{ min-height:200px; } .img-fallback::after{ content:attr(data-label); position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:18px; font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); line-height:1.7; pointer-events:none; } .budget-card.no-photo, .ccard.no-photo, .ocard.no-photo, .hero-tile.no-photo, .page-hero.no-photo{ background:var(--brand-700); } /* ---------- REVEAL ---------- */ .reveal{ opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease), transform .8s var(--ease); } .reveal.is-in{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; } html{ scroll-behavior:auto; } .reveal{ opacity:1; transform:none; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1440px){ .header-cta .btn--ghost{ display:none; } } @media (max-width:1280px){ .nav a{ padding:8px 9px; font-size:.84rem; } .brand__sub{ display:none; } } @media (max-width:1180px){ .nav{ display:none; } .burger{ display:flex; } .header-cta{ margin-left:auto; } } @media (max-width:1080px){ .steps{ grid-template-columns:repeat(3,1fr); } .paths{ grid-template-columns:repeat(3,1fr); } .footer-grid{ grid-template-columns:1.4fr 1fr 1.2fr; } .footer-grid > div:nth-child(3){ display:none; } } @media (max-width:980px){ .hero__inner{ grid-template-columns:1fr; } .hero__media{ height:min(440px,54vh); } .grid-4,.grid-3{ grid-template-columns:repeat(2,1fr); } .split{ grid-template-columns:1fr; } .split--rev .split__media{ order:0; } .pdp{ grid-template-columns:1fr; } .pdp__gallery{ position:static; } .contact-grid{ grid-template-columns:1fr; } .cta-band{ grid-template-columns:1fr; align-items:start; } .benefit{ grid-template-columns:auto 1fr; } .benefit p{ grid-column:2; } .enquiry-box .form-grid{ grid-template-columns:repeat(2,1fr); } .page-hero img.page-hero__bg{ width:100%; opacity:.14; -webkit-mask-image:none; mask-image:none; } } /* ============================================================ MOBILE — the phone gets a shorter, quieter version of the page. Hero order: ribbon → headline → products → the two CTAs. Nothing is deleted from the HTML, only hidden. ============================================================ */ @media (max-width:720px){ :root{ --sec: clamp(56px, 9vw, 104px); } body{ font-size:15.5px; } .sec-head{ margin-bottom:30px; } .hero{ border-bottom:0; } .hero__inner{ gap:20px; padding-block:22px 34px; } .hero__copy{ display:contents; } .hero__ribbon{ order:1; justify-self:start; align-self:start; margin-bottom:0; } .hero__ribbon .rb-full{ display:none; } .hero__ribbon .rb-min{ display:inline; } .hero__title{ order:2; margin-bottom:0; } .hero__media{ order:3; } .hero__cta{ order:4; gap:10px; } .hero__cta .btn{ width:100%; } .hero__sub{ order:5; font-size:1rem; max-width:none; } .hero__pills, .hero__trust, .hero__cta-extra{ display:none; } .header-cta .btn--brand{ display:none; } .sticky-cta{ display:flex; transform:translateY(115%); transition:transform .3s var(--ease); } .sticky-cta.is-ready{ transform:none; } .wa-float{ display:none; } .site-footer{ padding-bottom:0; } .footer-bottom{ padding-bottom:100px; } .steps{ grid-template-columns:repeat(2,1fr); } .paths{ grid-template-columns:repeat(2,1fr); } .path + .path{ border-left:0; padding-left:0; } .path:nth-child(even){ border-left:1px solid var(--line); padding-left:20px; } .form-grid{ grid-template-columns:1fr; } .footer-grid{ grid-template-columns:1fr 1fr; } .footer-grid > div:nth-child(3){ display:block; } .footer-cta{ flex-direction:column; align-items:flex-start; } .footer-cta .btn-row{ width:100%; } .footer-cta .btn{ flex:1; } .split__media img{ min-height:250px; } .mobile-nav{ inset:68px 0 0; } /* Trim the long stretches on the home page */ #featured-grid .pcard:nth-child(n+7){ display:none; } #diwali-grid .ccard:nth-child(n+5){ display:none; } #occasion-grid .ocard:nth-child(n+5){ display:none; } #branding-list li:nth-child(n+7){ display:none; } #year-round li:nth-child(n+7){ display:none; } #how{ display:none; } /* repeats the bulk-order process above it */ } @media (max-width:560px){ .grid-4,.grid-3,.grid-2,.grid-auto{ grid-template-columns:1fr; } .steps{ grid-template-columns:1fr; } .btn-row .btn{ width:100%; } .header-bar{ min-height:68px; } .hero__media{ grid-template-columns:1.1fr 1fr; grid-template-rows:1fr; height:256px; } .hero-tile:first-child{ grid-row:auto; } .hero-tile:nth-child(3){ display:none; } .enquiry-box .form-grid{ grid-template-columns:1fr; } .benefit{ grid-template-columns:1fr; gap:8px; padding:22px 0; } .benefit p{ grid-column:1; } .footer-grid{ grid-template-columns:1fr; gap:32px; } .paths{ grid-template-columns:1fr; } .path, .path:nth-child(even){ border-left:0; padding-left:0; } .pdp__thumbs{ grid-template-columns:repeat(3,1fr); } }