/* ========================================================================= Kalyan Jewellers — Al Nahda, Dubai "Certificate of Provenance" — single-page brochure & enquiry site ========================================================================= */ /* ----------------------------- Tokens ---------------------------------- */ :root{ --bg:#FBF7F0; --surface:#FFFFFF; --surface-2:#F4EDE0; --text:#241A14; --muted:#746457; --primary:#C9A227; /* gold */ --primary-deep:#A8851A; --secondary:#7A2533; /* maroon */ --secondary-deep:#5A1320; --accent:#1F4D3A; /* forest green */ --accent-deep:#163A2B; --border:#E5D7BE; --border-strong:#D8C49B; --focus:#1F4D3A; --ink-on-dark:#F6EEDD; --gold-line:rgba(201,162,39,.55); --maxw:1240px; --gutter:clamp(20px,5vw,72px); --radius:3px; --header-h:64px; --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif; --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --shadow-sm:0 1px 2px rgba(36,26,20,.06); --shadow-md:0 18px 44px -24px rgba(36,26,20,.45); --shadow-lg:0 40px 90px -40px rgba(36,26,20,.6); } /* Tweakable colour moods (set on ) */ html[data-mood="maroon"]{ --bg:#F7F1EC; --surface:#FFFFFF; --surface-2:#F1E6E2; } html[data-mood="green"]{ --primary:#C9A227; --accent:#1F4D3A; --secondary:#1F4D3A; --secondary-deep:#163A2B; } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } } body{ margin:0; font-family:var(--sans); font-size:16px; line-height:1.6; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } button{ font-family:inherit; } :focus-visible{ outline:2.5px solid var(--focus); outline-offset:3px; border-radius:2px; } .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); } /* ----------------------------- Type ------------------------------------ */ .display{ font-family:var(--serif); font-weight:600; line-height:1.02; letter-spacing:-.01em; } .eyebrow{ font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--primary-deep); display:inline-flex; align-items:center; gap:.6em; } .eyebrow.on-dark{ color:var(--primary); } .eyebrow::before{ content:""; width:22px; height:1px; background:currentColor; opacity:.7; } .num{ font-variant-numeric:tabular-nums; letter-spacing:.01em; } /* ------------------------- Certificate divider ------------------------- */ .cert-div{ display:flex; align-items:center; gap:14px; color:var(--gold-line); } .cert-div .rule{ flex:1; height:0; border-top:1px solid var(--gold-line); position:relative; } .cert-div .rule::after{ content:""; position:absolute; left:0; right:0; top:3px; border-top:1px solid rgba(201,162,39,.25); } .cert-div .gem{ flex:0 0 auto; color:var(--primary); transform:rotate(45deg); width:9px; height:9px; border:1.5px solid var(--primary); } .cert-div.center{ max-width:560px; margin-inline:auto; } /* ----------------------------- Buttons --------------------------------- */ .btn{ --c:var(--text); display:inline-flex; align-items:center; justify-content:center; gap:.55em; min-height:48px; padding:.7em 1.35em; font-family:var(--sans); font-size:.92rem; font-weight:600; letter-spacing:.01em; border:1px solid transparent; border-radius:var(--radius); cursor:pointer; transition:transform .18s ease, background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease; white-space:nowrap; } .btn svg{ width:18px; height:18px; flex:0 0 auto; } .btn:active{ transform:translateY(1px); } .btn-primary{ background:var(--secondary); color:var(--ink-on-dark); border-color:var(--secondary); } .btn-primary:hover{ background:var(--secondary-deep); } .btn-gold{ background:var(--primary); color:#2a2008; border-color:var(--primary); } .btn-gold:hover{ background:var(--primary-deep); } .btn-green{ background:var(--accent); color:#eef6f0; border-color:var(--accent); } .btn-green:hover{ background:var(--accent-deep); } .btn-ghost{ background:transparent; color:var(--text); border-color:var(--border-strong); } .btn-ghost:hover{ border-color:var(--secondary); color:var(--secondary); } .btn-ghost.on-dark{ color:var(--ink-on-dark); border-color:rgba(246,238,221,.4); } .btn-ghost.on-dark:hover{ border-color:var(--primary); color:var(--primary); } .btn-block{ width:100%; } /* ----------------------------- Header ---------------------------------- */ .header{ position:fixed; inset:0 0 auto 0; z-index:60; height:var(--header-h); display:flex; align-items:center; background:rgba(251,247,240,.82); backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid transparent; transition:border-color .25s ease, background .25s ease, box-shadow .25s ease; } .header.scrolled{ border-bottom-color:var(--border); box-shadow:var(--shadow-sm); } .header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; } .brand{ display:flex; align-items:center; gap:11px; flex:1 1 auto; min-width:0; } .brand .brand-text{ display:flex; flex-direction:column; line-height:1; min-width:0; } .menu-toggle{ flex:0 0 auto; } .brand .chip{ width:38px; height:38px; flex:0 0 auto; background:var(--secondary-deep); border-radius:var(--radius); display:grid; place-items:center; box-shadow:var(--shadow-sm); border:1px solid rgba(201,162,39,.35); } .brand .chip img{ width:24px; height:auto; } .brand .name{ font-family:var(--serif); font-weight:600; font-size:1.18rem; line-height:1.05; letter-spacing:.01em; white-space:nowrap; } .brand .sub{ font-family:var(--sans); font-size:.6rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin-top:4px; white-space:nowrap; } .nav{ display:none; align-items:center; gap:28px; } .nav a{ font-size:.86rem; font-weight:500; color:var(--text); position:relative; padding:6px 0; } .nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px; background:var(--primary); transition:right .25s ease; } .nav a:hover::after,.nav a.active::after{ right:0; } .header-cta{ display:none; align-items:center; gap:10px; } .menu-toggle{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:46px; height:46px; background:transparent; border:1px solid var(--border-strong); border-radius:var(--radius); cursor:pointer; color:var(--text); } .menu-toggle svg{ width:20px; height:20px; } @media (min-width:920px){ :root{ --header-h:76px; } .nav{ display:flex; } .header-cta{ display:flex; } .menu-toggle{ display:none; } .brand .chip{ width:44px; height:44px; } .brand .chip img{ width:28px; } .brand .name{ font-size:1.32rem; } } /* Mobile drawer */ .drawer{ position:fixed; inset:0; z-index:70; display:none; background:rgba(36,26,20,.5); backdrop-filter:blur(2px); } .drawer.open{ display:block; } .drawer-panel{ position:absolute; top:0; right:0; height:100%; width:min(86vw,360px); background:var(--bg); border-left:1px solid var(--border); padding:22px var(--gutter) 28px; display:flex; flex-direction:column; gap:6px; transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.1,1); box-shadow:var(--shadow-lg); } .drawer.open .drawer-panel{ transform:translateX(0); } .drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; } .drawer-close{ width:44px; height:44px; border:1px solid var(--border-strong); background:transparent; border-radius:var(--radius); cursor:pointer; display:grid; place-items:center; } .drawer-close svg{ width:20px; height:20px; } .drawer a.dlink{ font-family:var(--serif); font-size:1.7rem; font-weight:500; padding:11px 0; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; } .drawer a.dlink .idx{ font-family:var(--sans); font-size:.66rem; letter-spacing:.2em; color:var(--primary-deep); } .drawer-foot{ margin-top:auto; display:flex; flex-direction:column; gap:10px; padding-top:20px; } .drawer-foot .meta{ font-size:.82rem; color:var(--muted); } /* ----------------------------- Hero ------------------------------------ */ .hero{ position:relative; background:var(--secondary-deep); color:var(--ink-on-dark); padding-top:calc(var(--header-h) + 26px); padding-bottom:34px; overflow:hidden; } .hero::before{ /* subtle damask texture via radial dots */ content:""; position:absolute; inset:0; opacity:.5; pointer-events:none; background: radial-gradient(circle at 18% 12%, rgba(201,162,39,.12), transparent 38%), radial-gradient(circle at 92% 88%, rgba(201,162,39,.10), transparent 42%); } .hero .wrap{ position:relative; } .hero-grid{ display:grid; gap:26px; } .hero-masthead .eyebrow{ color:var(--primary); } .hero h1{ font-size:clamp(2.7rem,11vw,4.6rem); margin:.32em 0 .16em; color:#fff; } .hero h1 .loc{ display:block; font-style:italic; font-weight:500; color:var(--primary); font-size:.56em; letter-spacing:.01em; margin-top:.12em; } .hero .lede{ font-size:1.06rem; line-height:1.6; color:rgba(246,238,221,.82); max-width:46ch; margin:0 0 22px; } .hero-cta{ display:flex; flex-wrap:wrap; gap:11px; margin-bottom:24px; } /* hallmark stamp */ .stamp{ display:inline-flex; align-items:stretch; gap:0; border:1px solid rgba(201,162,39,.45); border-radius:var(--radius); overflow:hidden; background:rgba(0,0,0,.18); } .stamp .cell{ padding:10px 16px; display:flex; flex-direction:column; gap:2px; } .stamp .cell + .cell{ border-left:1px solid rgba(201,162,39,.32); } .stamp .k{ font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(246,238,221,.6); } .stamp .v{ font-family:var(--serif); font-size:1.18rem; font-weight:600; color:#fff; display:flex; align-items:center; gap:6px; } .stamp .v .star{ color:var(--primary); } .dot-open{ width:8px; height:8px; border-radius:50%; background:#4ec07a; box-shadow:0 0 0 3px rgba(78,192,122,.25); display:inline-block; } /* hero plate (catalogue cover image) */ .hero-plate{ position:relative; border:1px solid rgba(201,162,39,.5); padding:9px; background:rgba(0,0,0,.25); box-shadow:var(--shadow-lg); } .hero-plate::after{ content:""; position:absolute; inset:3px; border:1px solid rgba(201,162,39,.22); pointer-events:none; } .hero-plate .frame{ position:relative; aspect-ratio:4/5; overflow:hidden; } .hero-plate img{ width:100%; height:100%; object-fit:cover; } .hero-plate .tag{ position:absolute; left:9px; bottom:9px; z-index:2; background:rgba(90,19,32,.86); border:1px solid rgba(201,162,39,.45); padding:7px 12px; backdrop-filter:blur(4px); } .hero-plate .tag .t{ font-family:var(--serif); font-size:1.02rem; color:#fff; line-height:1.1; } .hero-plate .tag .s{ font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--primary); } @media (min-width:920px){ .hero{ padding-bottom:56px; } .hero-grid{ grid-template-columns:1.06fr .94fr; align-items:center; gap:56px; } .hero-plate .frame{ aspect-ratio:4/4.6; } } @media (min-width:1160px){ .hero-grid{ gap:72px; } } /* ------------------------- Concierge band ------------------------------ */ .console{ background:var(--secondary); color:var(--ink-on-dark); border-top:1px solid rgba(201,162,39,.3); } .console .wrap{ padding-block:0; } .console-grid{ display:grid; grid-template-columns:repeat(2,1fr); } .console a.tile{ display:flex; flex-direction:column; gap:7px; padding:22px var(--gutter); border-right:1px solid rgba(246,238,221,.14); border-bottom:1px solid rgba(246,238,221,.14); transition:background .2s ease; position:relative; } .console a.tile:hover{ background:rgba(0,0,0,.16); } .console a.tile .ico{ width:26px; height:26px; color:var(--primary); } .console a.tile .k{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(246,238,221,.62); } .console a.tile .v{ font-family:var(--serif); font-size:1.16rem; font-weight:600; color:#fff; line-height:1.15; } .console a.tile .meta{ font-size:.78rem; color:rgba(246,238,221,.7); } @media (min-width:760px){ .console-grid{ grid-template-columns:repeat(4,1fr); } .console a.tile{ padding:26px 22px; } } /* ----------------------------- Sections -------------------------------- */ .section{ padding-block:clamp(56px,9vw,108px); position:relative; } .section.alt{ background:var(--surface-2); } .section.ink{ background:var(--secondary-deep); color:var(--ink-on-dark); } .sec-head{ max-width:720px; } .sec-head.center{ margin-inline:auto; text-align:center; } .sec-head h2{ font-size:clamp(2.1rem,6vw,3.4rem); margin:.28em 0 0; } .sec-head .lede{ color:var(--muted); font-size:1.04rem; margin-top:14px; max-width:56ch; } .sec-head.center .lede{ margin-inline:auto; } .ink .sec-head .lede{ color:rgba(246,238,221,.72); } /* --------------------------- Collections ------------------------------- */ .collections{ margin-top:clamp(34px,5vw,56px); display:grid; gap:16px; grid-template-columns:repeat(2,1fr); } .col-card{ position:relative; overflow:hidden; background:#1a0d10; border:1px solid var(--border); border-radius:var(--radius); display:block; isolation:isolate; min-height:0; } .col-card .frame{ aspect-ratio:3/4; overflow:hidden; } .col-card img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.6,.2,1); } .col-card:hover img{ transform:scale(1.06); } .col-card .scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(20,8,12,0) 38%,rgba(20,8,12,.82) 100%); } .col-card .body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:16px; color:#fff; } .col-card .kicker{ font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--primary); } .col-card h3{ font-family:var(--serif); font-weight:600; font-size:1.5rem; line-height:1.05; margin:4px 0 0; } .col-card .desc{ font-size:.82rem; color:rgba(246,238,221,.82); margin-top:5px; max-width:30ch; opacity:0; max-height:0; transition:opacity .3s ease, max-height .3s ease; } .col-card:hover .desc, .col-card:focus-visible .desc{ opacity:1; max-height:60px; } /* feature card spans */ .col-card.feature{ grid-column:span 2; } .col-card.feature .frame{ aspect-ratio:16/11; } .col-card.feature h3{ font-size:1.9rem; } @media (min-width:760px){ .collections{ grid-template-columns:repeat(4,1fr); grid-auto-flow:dense; } .col-card.feature{ grid-column:span 2; grid-row:span 2; } .col-card.feature .frame{ aspect-ratio:auto; height:100%; } .col-card.feature img{ position:absolute; inset:0; } .col-card .desc{ opacity:1; max-height:none; } } /* sub-brand strip */ .signature{ margin-top:clamp(30px,4vw,48px); } .sig-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; } .sig{ border:1px solid var(--border-strong); border-radius:999px; padding:9px 16px; background:var(--surface); display:flex; align-items:baseline; gap:9px; } .sig .nm{ font-family:var(--serif); font-size:1.08rem; font-weight:600; } .sig .ds{ font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } /* ----------------------------- Gallery --------------------------------- */ .gallery{ margin-top:clamp(34px,5vw,52px); display:grid; gap:12px; grid-template-columns:repeat(2,1fr); } .shot{ position:relative; overflow:hidden; border-radius:var(--radius); background:#1a0d10; cursor:zoom-in; border:1px solid var(--border); } .shot img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.6,.2,1); } .shot::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 0 rgba(201,162,39,0); transition:box-shadow .25s ease; } .shot:hover img{ transform:scale(1.05); } .shot:hover::after{ box-shadow:inset 0 0 0 2px var(--gold-line); } .shot .zoom{ position:absolute; right:10px; top:10px; width:30px; height:30px; border-radius:50%; background:rgba(20,8,12,.55); display:grid; place-items:center; opacity:0; transition:opacity .2s ease; } .shot .zoom svg{ width:15px; height:15px; color:#fff; } .shot:hover .zoom{ opacity:1; } .shot.a{ aspect-ratio:1/1; } .shot.tall{ aspect-ratio:3/4; } .shot.wide{ grid-column:span 2; aspect-ratio:16/10; } @media (min-width:760px){ .gallery{ grid-template-columns:repeat(12,1fr); grid-auto-rows:1fr; gap:14px; } .shot{ aspect-ratio:auto !important; } .g1{ grid-column:span 5; grid-row:span 2; } .g2{ grid-column:span 4; } .g3{ grid-column:span 3; } .g4{ grid-column:span 4; } .g5{ grid-column:span 3; } .g6{ grid-column:span 5; grid-row:span 2; } .g7{ grid-column:span 4; } .g8{ grid-column:span 3; } } /* ----------------------------- About ----------------------------------- */ .about-grid{ display:grid; gap:30px; margin-top:clamp(30px,4vw,48px); } .about-copy p{ font-size:1.06rem; line-height:1.72; color:var(--text); } .about-copy p + p{ margin-top:1em; } .about-copy .lead{ font-family:var(--serif); font-size:1.5rem; line-height:1.4; font-weight:500; color:var(--text); } .about-media{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .about-media .m{ overflow:hidden; border:1px solid var(--border); border-radius:var(--radius); } .about-media .m img{ width:100%; height:100%; object-fit:cover; } .about-media .m.big{ grid-column:span 2; aspect-ratio:16/9; } .about-media .m.sm{ aspect-ratio:1/1; } .stat-row{ display:flex; flex-wrap:wrap; gap:0; margin-top:26px; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--surface); } .stat{ flex:1 1 130px; padding:18px 20px; } .stat + .stat{ border-left:1px solid var(--border); } .stat .n{ font-family:var(--serif); font-size:2rem; font-weight:600; color:var(--secondary); line-height:1; } .stat .l{ font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:6px; } @media (min-width:880px){ .about-grid{ grid-template-columns:1fr 1.04fr; align-items:center; gap:56px; } } /* ----------------------------- Visit ----------------------------------- */ .visit-grid{ display:grid; gap:24px; margin-top:clamp(30px,4vw,48px); } .visit-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:26px; } .visit-row{ display:flex; gap:14px; padding:15px 0; border-bottom:1px solid var(--border); } .visit-row:last-child{ border-bottom:0; } .visit-row .ic{ flex:0 0 auto; width:26px; height:26px; color:var(--secondary); } .visit-row .k{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); } .visit-row .v{ font-size:1rem; color:var(--text); margin-top:2px; line-height:1.45; } .visit-row .v a{ color:var(--secondary); font-weight:600; } .hours-list{ display:grid; gap:0; } .hours-list .hr{ display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px dashed var(--border); font-size:.92rem; } .hours-list .hr:last-child{ border-bottom:0; } .hours-list .hr .d{ color:var(--muted); } .hours-list .hr .t{ font-variant-numeric:tabular-nums; } .map-ph{ position:relative; border:1px solid var(--border-strong); border-radius:var(--radius); overflow:hidden; background: repeating-linear-gradient(45deg, #efe6d4 0 14px, #f4ecdc 14px 28px); min-height:280px; display:grid; place-items:center; text-align:center; } .map-ph::before{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(122,37,51,.06) 1px, transparent 1px) 0 0/48px 48px, linear-gradient(0deg, rgba(122,37,51,.06) 1px, transparent 1px) 0 0/48px 48px; } .map-ph .pin{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:12px; padding:24px; } .map-ph .pin .dot{ width:46px; height:46px; border-radius:50% 50% 50% 0; background:var(--secondary); transform:rotate(-45deg); display:grid; place-items:center; box-shadow:var(--shadow-md); } .map-ph .pin .dot::after{ content:""; width:16px; height:16px; border-radius:50%; background:var(--bg); transform:rotate(45deg); } .map-ph .pin .lbl{ font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); background:var(--bg); padding:5px 11px; border:1px solid var(--border); border-radius:999px; } .map-ph .pin .addr{ font-family:var(--serif); font-size:1.15rem; max-width:24ch; color:var(--text); } @media (min-width:880px){ .visit-grid{ grid-template-columns:1fr 1fr; } .map-ph{ min-height:100%; } } /* ----------------------------- Form ------------------------------------ */ .enquiry-wrap{ display:grid; gap:30px; margin-top:clamp(30px,4vw,48px); align-items:start; } .slip{ background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius); box-shadow:var(--shadow-md); overflow:hidden; } .slip-head{ background:var(--secondary-deep); color:var(--ink-on-dark); padding:18px 26px; display:flex; align-items:center; justify-content:space-between; gap:12px; } .slip-head .t{ font-family:var(--serif); font-size:1.35rem; font-weight:600; color:#fff; } .slip-head .ref{ font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--primary); } .slip-body{ padding:24px 26px 28px; } .field{ margin-bottom:16px; } .field label{ display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; font-weight:600; } .field .req{ color:var(--secondary); } .field input,.field select,.field textarea{ width:100%; font-family:var(--sans); font-size:.98rem; color:var(--text); background:var(--bg); border:1px solid var(--border-strong); border-radius:var(--radius); padding:13px 14px; transition:border-color .18s ease, box-shadow .18s ease; } .field textarea{ resize:vertical; min-height:104px; } .field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--secondary); box-shadow:0 0 0 3px rgba(122,37,51,.12); } .field.bad input,.field.bad select,.field.bad textarea{ border-color:#b4432f; box-shadow:0 0 0 3px rgba(180,67,47,.12); } .field .err{ display:none; color:#9c3a28; font-size:.78rem; margin-top:6px; } .field.bad .err{ display:block; } .field-row{ display:grid; gap:16px; } @media (min-width:560px){ .field-row{ grid-template-columns:1fr 1fr; } } .chip-row{ display:flex; flex-wrap:wrap; gap:8px; } .chip-opt{ position:relative; } .chip-opt input{ position:absolute; opacity:0; pointer-events:none; } .chip-opt span{ display:inline-flex; align-items:center; min-height:42px; padding:0 15px; border:1px solid var(--border-strong); border-radius:999px; font-size:.86rem; cursor:pointer; background:var(--bg); transition:all .16s ease; } .chip-opt input:checked + span{ background:var(--secondary); color:var(--ink-on-dark); border-color:var(--secondary); } .chip-opt input:focus-visible + span{ outline:2.5px solid var(--focus); outline-offset:2px; } .form-note{ font-size:.78rem; color:var(--muted); margin-top:14px; line-height:1.5; } .form-success{ display:none; padding:30px 26px; text-align:center; } .form-success.show{ display:block; } .form-success .seal{ width:64px; height:64px; margin:0 auto 16px; border-radius:50%; border:2px solid var(--primary); display:grid; place-items:center; color:var(--accent); } .form-success .seal svg{ width:30px; height:30px; } .form-success h3{ font-family:var(--serif); font-size:1.7rem; margin:0 0 8px; } .form-success p{ color:var(--muted); margin:0; } .enq-aside .lede{ color:var(--muted); font-size:1.04rem; } .enq-aside .why{ margin-top:22px; display:grid; gap:2px; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--surface); } .enq-aside .why .it{ display:flex; gap:13px; padding:15px 18px; border-bottom:1px solid var(--border); } .enq-aside .why .it:last-child{ border-bottom:0; } .enq-aside .why .it .ic{ flex:0 0 auto; width:22px; height:22px; color:var(--primary-deep); } .enq-aside .why .it .tx b{ font-weight:600; } .enq-aside .why .it .tx{ font-size:.92rem; } .enq-aside .why .it .tx small{ display:block; color:var(--muted); font-size:.82rem; } @media (min-width:920px){ .enquiry-wrap{ grid-template-columns:.82fr 1.18fr; gap:48px; } } /* ----------------------------- Footer ---------------------------------- */ .footer{ background:var(--secondary-deep); color:rgba(246,238,221,.78); padding-block:clamp(48px,7vw,80px) 28px; } .footer .top{ display:grid; gap:34px; } .footer .brand-block .name{ font-family:var(--serif); font-size:1.7rem; color:#fff; line-height:1; } .footer .brand-block .chip{ width:46px; height:46px; background:rgba(0,0,0,.28); border:1px solid rgba(201,162,39,.4); border-radius:var(--radius); display:grid; place-items:center; margin-bottom:16px; } .footer .brand-block .chip img{ width:30px; } .footer .brand-block p{ max-width:38ch; font-size:.92rem; margin:14px 0 0; } .footer h4{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--primary); margin:0 0 14px; } .footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; } .footer ul a,.footer ul li{ font-size:.92rem; color:rgba(246,238,221,.78); } .footer ul a:hover{ color:var(--primary); } .footer .cols{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px; } .footer .bottom{ margin-top:38px; padding-top:22px; border-top:1px solid rgba(246,238,221,.16); display:flex; flex-direction:column; gap:10px; font-size:.78rem; color:rgba(246,238,221,.6); } .footer .bottom a{ color:rgba(246,238,221,.78); } .footer .socials{ display:flex; gap:10px; margin-top:16px; } .footer .socials a{ width:40px; height:40px; border:1px solid rgba(246,238,221,.24); border-radius:var(--radius); display:grid; place-items:center; transition:all .2s ease; } .footer .socials a:hover{ border-color:var(--primary); color:var(--primary); } .footer .socials svg{ width:18px; height:18px; } .disclaimer{ font-size:.72rem; color:rgba(246,238,221,.45); line-height:1.5; max-width:70ch; margin-top:8px; } @media (min-width:760px){ .footer .top{ grid-template-columns:1.4fr 1.6fr; } .footer .cols{ grid-template-columns:repeat(3,1fr); } .footer .bottom{ flex-direction:row; align-items:center; justify-content:space-between; } } /* ------------------------- Mobile bottom bar --------------------------- */ .bottombar{ position:fixed; left:0; right:0; bottom:0; z-index:55; display:grid; grid-template-columns:repeat(3,1fr); background:rgba(90,19,32,.97); backdrop-filter:blur(8px); border-top:1px solid rgba(201,162,39,.4); box-shadow:0 -10px 30px -16px rgba(0,0,0,.6); padding-bottom:env(safe-area-inset-bottom); } .bottombar a{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 4px; color:var(--ink-on-dark); font-size:.66rem; letter-spacing:.04em; } .bottombar a + a{ border-left:1px solid rgba(246,238,221,.16); } .bottombar a svg{ width:21px; height:21px; color:var(--primary); } .bottombar a:active{ background:rgba(0,0,0,.2); } @media (min-width:920px){ .bottombar{ display:none; } } body{ padding-bottom:62px; } @media (min-width:920px){ body{ padding-bottom:0; } } /* ----------------------------- Lightbox -------------------------------- */ .lightbox{ position:fixed; inset:0; z-index:90; display:none; background:rgba(20,8,12,.94); align-items:center; justify-content:center; padding:20px; } .lightbox.open{ display:flex; } .lightbox img{ max-width:94vw; max-height:84vh; object-fit:contain; border:1px solid rgba(201,162,39,.4); box-shadow:var(--shadow-lg); } .lightbox .lb-cap{ position:absolute; left:0; right:0; bottom:24px; text-align:center; color:var(--ink-on-dark); font-size:.84rem; letter-spacing:.04em; } .lb-btn{ position:absolute; width:50px; height:50px; border-radius:50%; border:1px solid rgba(201,162,39,.4); background:rgba(0,0,0,.4); color:#fff; cursor:pointer; display:grid; place-items:center; transition:background .2s ease; } .lb-btn:hover{ background:rgba(0,0,0,.7); } .lb-btn svg{ width:22px; height:22px; } .lb-close{ top:18px; right:18px; } .lb-prev{ left:14px; top:50%; transform:translateY(-50%); } .lb-next{ right:14px; top:50%; transform:translateY(-50%); } @media (max-width:620px){ .lb-prev{ left:8px; } .lb-next{ right:8px; } .lb-btn{ width:44px; height:44px; } } /* ----------------------------- Reveal ---------------------------------- */ .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); } .reveal.in{ opacity:1; transform:none; } .reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; } @media (prefers-reduced-motion:reduce){ .reveal{ opacity:1 !important; transform:none !important; } } /* ----------------------------- Tweaks ---------------------------------- */ #tweaks-root{ position:fixed; z-index:120; } /* BytesGlue QA map patch */ .bg-map-embed{display:block!important;position:relative!important;width:100%!important;min-height:240px!important;border-radius:12px!important;overflow:hidden!important;background:#e9edf1!important;box-shadow:0 0 0 1px rgba(0,0,0,.08) inset!important} .bg-map-embed iframe{display:block!important;width:100%!important;min-height:260px!important;border:0!important} .bg-map-embed + .bg-map-embed, .bg-map-embed + .pin, .bg-map-embed + .lbl, .bg-map-embed + .corner-note, .bg-map-embed + .placeholder, .bg-map-embed + .center, .bg-map-embed + [class*="map-note"], .bg-map-embed + [class*="map-tag"]{display:none!important} .map .placeholder .pin,.map-ph .pin,.map-pin,.map-marker,.map-ph__pin,.map-ph__pin .dot,.map-ph__pin .pin,.map-ph .mi{max-width:18px!important;max-height:18px!important;width:18px!important;height:18px!important;box-shadow:none!important} .map .placeholder .pin svg,.map-ph .pin svg,.map-pin svg,.map-marker svg,.map-ph__pin svg,.map-ph .mi{width:12px!important;height:12px!important} .map-note,.map-tag,[class*="map-note"],[class*="map-tag"]{display:none!important}