/* ========================================================= FirstChoice – styles.css (CLEAN + FIXED FULL) ✅ One set of rules (no duplicate “index patches”) ✅ Index hero focus + height controlled cleanly ✅ CTA carousel fixed to match your “Image 1” layout ✅ Navbar stays visible on mobile (no hamburger) ✅ Feedback / Contact / Spice pages supported ========================================================= */ /* ========================= 1) TOKENS / VARIABLES ========================= */ :root{ /* Dark / Premium theme (default) */ --bg1:#2a0000; --bg2:#5a0b0b; --text:#f6f1ee; --muted:#d6c9c4; --gold:#d7b56d; --gold2:#f0d78d; --ring: rgba(215,181,109,.45); --ok:#7CFFB2; --radius:18px; --shadow: 0 22px 70px rgba(0,0,0,.55); --border: 1px solid rgba(215,181,109,.28); /* Light helpers */ --ink:#23160e; --ink2:#5c4639; --brand:#b3261e; --brand2:#d83b2d; --line: rgba(35,22,14,0.12); --card: rgba(255,255,255,0.92); --shadow-light: 0 16px 40px rgba(35,22,14,0.10); --shadow2-light: 0 12px 28px rgba(35,22,14,0.08); /* Button palettes (used on spice page pills) */ --white-1:#ffffff; --white-2:#f1f1f1; --blue-1:#7ec3ff; --blue-2:#1e78ff; --red-1:#ff7a7a; --red-2:#d81f2a; --green-1:#b7ff6a; --green-2:#35c44d; --yellow-1:#fff39a; --yellow-2:#ffc933; } .req-star{ color: var(--gold2); } /* ========================= 2) BASE / RESET ========================= */ *{ box-sizing:border-box; } img, svg, video{ max-width:100%; height:auto; } html, body{ height:100%; width:100%; } html{ overflow-x:hidden; } body{ margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text); background: radial-gradient(1200px 700px at 20% 20%, rgba(240,215,141,.12), transparent 60%), radial-gradient(900px 600px at 80% 20%, rgba(215,181,109,.09), transparent 55%), linear-gradient(135deg, var(--bg1), var(--bg2)); display:flex; flex-direction:column; min-height:100%; overflow-x:hidden; -webkit-text-size-adjust: 100%; } a{ color:inherit; text-decoration:none; } button{ font:inherit; } /* Safe wrapper used on multiple pages */ .page-wrapper{ width:100%; padding: 30px 22px 70px 22px; } /* ========================= 2.1) INDEX PAGE OVERRIDE (LIGHT) Use: ========================= */ body.index-page{ color: var(--ink); background:#faf8f5; } /* ========================= 3) SHARED: NAVBAR + SEARCH (NO HAMBURGER) ========================= */ .navbar-container{ width:100%; background:#ffffff; margin:0; } .navbar{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 26px; background:#ffffff; box-shadow:0 4px 14px rgba(0,0,0,0.18); position:sticky; top:0; z-index:9999; } .navbar-left{ display:flex; align-items:center; min-width:0; } .navbar-left a{ display:flex; align-items:center; } .navbar-left img{ height:80px; width:auto; display:block; } .navbar-center{ display:flex; align-items:center; justify-content:center; gap:32px; flex:1 1 auto; min-width:0; max-height:100%; } .nav-link{ color:#b01616; font-weight:800; font-size:16px; padding:2px 4px; line-height:1; display:inline-flex; align-items:center; white-space:nowrap; } .nav-link:hover{ color:#7d0c0c; } /* Dropdown */ .dropdown-wrapper{ position:relative; display:inline-flex; align-items:center; } .dropdown-toggle{ display:none; } .dropdown-label{ cursor:pointer; } .dropdown-menu{ position:absolute; top:36px; left:0; width:170px; background:#ffffff; border-radius:10px; padding:10px 0; box-shadow:0 8px 20px rgba(0,0,0,0.2); display:none; } .dropdown-toggle:checked + .dropdown-label + .dropdown-menu{ display:block; } .dropdown-menu a{ display:block; padding:8px 12px; font-size:14px; color:#7b0b0b; } .dropdown-menu a:hover{ background:#ffe4d4; } /* Right */ .navbar-right{ display:flex; align-items:center; gap:14px; min-width:0; } .flag-icon{ height:18px; display:block; flex:0 0 auto; } /* Search */ .search-box{ display:flex; align-items:center; background:#f9f9f9; border-radius:999px; border:1px solid #dcdcdc; padding:6px 14px; position:relative; max-width:100%; } .search-box input{ border:none; background:none; outline:none; font-size:14px; width:160px; color:#333; min-width:0; } .search-button{ background:#e53935; border:none; border-radius:50%; width:32px; height:32px; cursor:pointer; color:#fff; font-size:14px; display:inline-flex; align-items:center; justify-content:center; } /* Search dropdown */ .search-results{ position:absolute; top:52px; left:0; right:0; background:#ffffff; border-radius:14px; box-shadow:0 10px 26px rgba(0,0,0,0.20); border:1px solid #ededed; overflow:hidden; opacity:0; transform: translateY(-8px); max-height:0; pointer-events:none; transition: opacity 180ms ease, transform 180ms ease, max-height 220ms ease; z-index:10000; } .search-results.open{ opacity:1; transform: translateY(0); max-height:280px; pointer-events:auto; } .search-results a{ display:block; padding:10px 12px; font-size:14px; color:#7b0b0b; border-bottom:1px solid #f3f3f3; } .search-results a:last-child{ border-bottom:none; } .search-results a:hover{ background:#ffe4d4; color:#a10e0e; } .search-noresults{ padding:10px 12px; font-size:13px; color:#666; } /* ========================= 4) SHARED: FOOTER (WHITE) ========================= */ .site-footer{ width:100%; background:rgba(255,255,255,0.94); color:#444; margin-top:40px; font-size:13px; flex-shrink:0; border-top:1px solid rgba(0,0,0,0.10); } /* (top is optional in your HTML) */ .footer-top{ max-width:1200px; margin:0 auto; padding:20px 20px 10px 20px; display:flex; align-items:center; gap:20px; border-bottom:1px solid rgba(0,0,0,0.08); } .footer-halal-logo{ width:70px; height:70px; object-fit:contain; } .footer-top-text{ font-size:13px; color:#555; } .footer-bottom{ max-width:1200px; margin:0 auto; padding:25px 20px 30px 20px; display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:20px; } .footer-heading{ font-weight:900; font-size:13px; letter-spacing:0.5px; margin-bottom:8px; color:#111; } .footer-text{ margin:0 0 6px 0; color:#666; line-height:1.5; } .footer-company{ font-weight:900; color:#802873; } .footer-link{ display:block; color:#555; margin-bottom:6px; font-weight:800; } .footer-link:hover{ color:#d62828; } .social-row{ display:flex; gap:8px; margin-top:6px; } .social-icon{ width:34px; height:34px; border-radius:999px; background:#ffffff; border:1px solid rgba(0,0,0,0.12); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 18px rgba(35,22,14,0.06); transition: transform 180ms ease, background 180ms ease, border-color 180ms ease; } .social-icon:hover{ transform: translateY(-2px); background: rgba(214,40,40,0.06); border-color: rgba(214,40,40,0.35); } /* ========================= 5) SHARED: REDUCE MOTION ========================= */ @media (prefers-reduced-motion: reduce){ *{ scroll-behavior:auto !important; transition:none !important; animation:none !important; } } /* ========================= 6) INDEX PAGE (HOME) STYLES Use: ========================= */ /* --- Index hero vars (single source of truth) --- */ .index-page{ --hero-img: url("./images/index/_imageIndex.png"); --hero-height: clamp(860px, 76vh, 900px); --hero-focus-y: 20%; --hero-size: cover; --hero-overlay-left: 0.52; --hero-overlay-right: 0.52; } .index-page .page-wrapper{ width:100%; max-width:none; margin:0; padding:0; } .index-page .content{ width:100%; max-width:none; margin:0; } /* Hero */ .index-page .hero{ width:100%; min-height: var(--hero-height); height: var(--hero-height); position:relative; overflow:hidden; border-radius:0; border:0; margin-top:0; background:#2a1b12; background-image: var(--hero-img); background-repeat:no-repeat; background-size: var(--hero-size); background-position: center var(--hero-focus-y); } .index-page .hero::before{ content:""; position:absolute; inset:0; background: linear-gradient( 90deg, rgba(42,27,18,var(--hero-overlay-left)) 0%, rgba(42,27,18,0.0) 22%, rgba(42,27,18,0.0) 78%, rgba(42,27,18,var(--hero-overlay-right)) 100% ); z-index:1; pointer-events:none; } .index-page .hero-inner{ position:relative; z-index:2; min-height: var(--hero-height); height: var(--hero-height); display:grid; place-items:center; padding: 36px 18px; } /* Sections (light look) */ .index-page .section{ margin-top: 0px; border-radius: 0px; padding: 5px; border: 0px solid var(--line); background: var(--card); box-shadow: var(--shadow-light); overflow:hidden; } .index-page .section-inner{ padding: 22px; } .index-page .head{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom: 14px; } .index-page .head .left h2{ margin:0; font-size: 22px; font-weight: 900; letter-spacing:-0.2px; color: var(--ink); } .index-page .head .left p{ margin:6px 0 0 0; font-size: 13px; color: var(--ink2); line-height:1.65; max-width: 720px; } /* Featured products */ .index-page .featured-products{ margin-top: 0px; background: rgba(255,255,255,0.94); border:1px solid rgba(35,22,14,0.10); box-shadow: var(--shadow-light); overflow:hidden; } .index-page .featured-products .section-inner{ max-width:1200px; margin:0 auto; padding: 46px 22px; } .index-page .fp-title{ text-align:center; font-family: Fraunces, serif; font-weight: 750; letter-spacing: -0.6px; font-size: 44px; margin: 0 0 8px 0; color: var(--ink); } .index-page .fp-title .accent{ background: linear-gradient(90deg, var(--brand), var(--brand2)); -webkit-background-clip: text; background-clip:text; color: transparent; } .index-page .fp-sub{ text-align:center; margin: 0 auto 26px auto; max-width: 820px; font-size: 13px; color: var(--ink2); line-height: 1.7; font-weight: 700; } .index-page .fp-grid{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; } .index-page .fp-card{ border-radius: 22px; border: 1px solid rgba(35,22,14,0.08); background: rgba(255,255,255,0.92); padding: 18px 16px 18px; text-align:center; box-shadow: 0 14px 28px rgba(35,22,14,0.08); transition: transform 180ms ease, box-shadow 180ms ease; position:relative; overflow:hidden; } .index-page .fp-card:hover{ transform: translateY(-2px); box-shadow: 0 18px 34px rgba(35,22,14,0.10); } .index-page .fp-imgwrap{ height: 220px; display: grid; place-items: center; margin-bottom: 14px; } .index-page .fp-imgwrap img{ max-height: 200px; max-width: 100%; width: auto; height: auto; display: block; filter: drop-shadow(0 20px 26px rgba(0,0,0,0.16)); transition: transform 220ms ease; } .index-page .fp-card:hover .fp-imgwrap img{ transform: scale(1.06); } .index-page .fp-name{ font-weight: 900; font-size: 16px; margin: 6px 0 12px 0; color:#1f120b; letter-spacing: -0.2px; } .index-page .fp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 11px 18px; border-radius: 999px; border:none; cursor:pointer; font-weight: 900; font-size: 13px; color:#fff; background: linear-gradient(135deg, var(--brand), var(--brand2)); box-shadow: 0 14px 26px rgba(179,38,30,0.18); transition: transform 180ms ease, filter 180ms ease; } .index-page .fp-btn:hover{ transform: translateY(-2px); filter: brightness(1.05); } /* Why */ .index-page .why-grid{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .index-page .why-card{ border-radius: 18px; border:1px solid rgba(35,22,14,0.10); background: rgba(255,255,255,0.92); box-shadow: 0 10px 22px rgba(35,22,14,0.08); padding: 16px; transition: transform 180ms ease, box-shadow 180ms ease; } .index-page .why-card:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px rgba(35,22,14,0.10); } .index-page .why-title{ font-weight: 900; font-size: 14px; margin-bottom: 6px; color: var(--ink); } .index-page .why-text{ font-size: 12px; color: var(--ink2); line-height: 1.65; } /* Colorful why cards */ .index-page .why-grid-color{ gap:16px; } .index-page .why-grid-color .why-card{ position:relative; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 14px 28px rgba(35,22,14,0.10); overflow:hidden; } .index-page .why-grid-color .why-card::before{ content:""; position:absolute; inset:0; opacity:0.9; pointer-events:none; } .index-page .why-grid-color .why-card:hover{ transform: translateY(-4px); box-shadow: 0 18px 34px rgba(35,22,14,0.14); } .index-page .why-badge{ width:40px; height:40px; border-radius: 14px; display:grid; place-items:center; font-size:18px; font-weight:900; margin-bottom:10px; background: rgba(255,255,255,0.75); border: 1px solid rgba(255,255,255,0.65); box-shadow: 0 10px 18px rgba(0,0,0,0.08); } .index-page .why-grid-color .why-title{ font-size:15px; font-weight: 900; } .index-page .why-grid-color .why-text{ font-size:13px; font-weight:700; color: rgba(35,22,14,0.85); } .index-page .why-a::before{ background: linear-gradient(135deg, rgba(255,214,165,0.95), rgba(255,255,255,0.85)); } .index-page .why-b::before{ background: linear-gradient(135deg, rgba(185,255,210,0.95), rgba(255,255,255,0.85)); } .index-page .why-c::before{ background: linear-gradient(135deg, rgba(190,230,255,0.95), rgba(255,255,255,0.85)); } .index-page .why-d::before{ background: linear-gradient(135deg, rgba(255,190,210,0.95), rgba(255,255,255,0.85)); } .index-page .why-grid-color .why-card > *{ position:relative; z-index:2; } /* Reveal */ .reveal{ opacity:0; transform: translateY(14px); } .reveal.in{ opacity:1; transform: translateY(0); transition: opacity .55s ease, transform .55s ease; } /* ========================= 6.1) INDEX CTA + CAROUSEL (LOCK TO “IMAGE 1”) ========================= */ .index-page #contact.cta-strip{ max-width: 1200px; margin: 26px auto 0; border-radius: 26px; overflow: hidden; padding: 40px 26px; display:grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 26px; align-items:center; border:1px solid rgba(35,22,14,0.10); box-shadow: var(--shadow-light); background: radial-gradient(900px 380px at 10% 20%, rgba(179,38,30,0.12), transparent 60%), radial-gradient(700px 360px at 90% 30%, rgba(242,183,5,0.10), transparent 60%), linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.88)); } .index-page #contact .cta-text-main{ margin: 0 0 10px 0; } .index-page #contact .cta-button{ margin-top: 14px; border-radius: 999px; padding: 12px 18px; background: linear-gradient(135deg, var(--brand), var(--brand2)); color: #fff; font-weight: 900; border: none; cursor:pointer; box-shadow: 0 14px 26px rgba(179,38,30,0.18); } .index-page #contact .cta-button:hover{ transform: translateY(-2px); filter: brightness(1.03); } /* carousel stays right and clean */ .index-page #contact .right-carousel{ display:flex; justify-content: flex-end; min-width: 0; } .index-page #contact .carousel{ position: relative; width: min(520px, 100%); border-radius: 26px; overflow: hidden; } /* stable positioning + clean arrows/dots */ .index-page #contact .carousel-track{ position: relative; height: 320px; } .index-page #contact .carousel-slide{ position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 240ms ease; } .index-page #contact .carousel-slide.is-active{ opacity: 1; } .index-page #contact .carousel-slide img{ width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* arrows inside carousel */ .index-page #contact .carousel .car-btn{ position:absolute; top:50%; transform: translateY(-50%); z-index: 6; width: 44px; height: 44px; border-radius: 999px; border: none; background: rgba(255,255,255,0.82); color: #1a1a1a; cursor:pointer; box-shadow: 0 10px 22px rgba(0,0,0,0.16); } .index-page #contact .carousel .car-btn.prev{ left: 14px; } .index-page #contact .carousel .car-btn.next{ right: 14px; } .index-page #contact .carousel .car-btn:hover{ filter: brightness(0.98); } /* dots bottom center */ .index-page #contact .car-dots{ position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 7; display:flex; gap:10px; } .index-page #contact .dot{ width: 10px; height: 10px; border-radius: 999px; border: 0; background: rgba(255,255,255,0.72); cursor:pointer; box-shadow: 0 8px 14px rgba(0,0,0,0.14); } .index-page #contact .dot.is-active{ background: rgba(179,38,30,0.95); } /* ========================= 7) PAGE: FEEDBACK (feedback.html) ========================= */ body.feedback-page{ margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--text); background: radial-gradient(1200px 700px at 20% 20%, rgba(240,215,141,.12), transparent 60%), radial-gradient(900px 600px at 80% 20%, rgba(215,181,109,.09), transparent 55%), linear-gradient(135deg, var(--bg1), var(--bg2)); display:flex; flex-direction:column; min-height:100%; } .feedback-page .page{ width:100%; display:flex; justify-content:center; padding: 26px 16px 40px; flex: 1 0 auto; } .feedback-page .wrap{ width:min(820px, 100%); position:relative; } .feedback-page .brand{ text-align:center; margin-bottom: 16px; } .feedback-page .brand h1{ font-family: Fraunces, serif; font-weight:650; letter-spacing:.2px; margin: 0 0 6px; font-size: clamp(26px, 3.2vw, 36px); line-height:1.08; } .feedback-page .brand p{ margin:0; color: var(--muted); font-size: 14px; } .feedback-page .brand .accent{ display:inline-block; color: var(--gold2); text-shadow: 0 0 18px rgba(240,215,141,.15); } .feedback-page .card{ background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow:hidden; position:relative; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .feedback-page .card::before{ content:""; position:absolute; inset:0; pointer-events:none; border-radius: var(--radius); box-shadow: inset 0 0 0 1px rgba(240,215,141,.20); mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000); -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000); padding: 1px; } .feedback-page .card-head{ padding: 18px 18px 0; } .feedback-page .card-head h2{ margin: 0 0 6px; font-family: Fraunces, serif; font-weight: 650; font-size: 18px; color: var(--gold2); letter-spacing:.2px; } .feedback-page .card-head p{ margin: 0 0 14px; color: var(--muted); font-size: 13.5px; line-height: 1.45; } .feedback-page form{ padding: 0 18px 18px; } .feedback-page .grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 720px){ .feedback-page .grid{ grid-template-columns: 1fr; } } .feedback-page .span-all{ grid-column: 1 / -1; } .feedback-page label{ display:block; font-size: 12.5px; color: var(--muted); } .feedback-page .field{ position:relative; } .feedback-page .card input, .feedback-page .card select, .feedback-page .card textarea{ width:100%; border-radius: 12px; border: 1px solid rgba(215,181,109,.20); background: rgba(0,0,0,.22); color: var(--text); padding: 11px 12px; font-size: 14px; outline: none; transition: border-color .15s ease, box-shadow .15s ease, transform .08s ease; } .feedback-page .card input::placeholder, .feedback-page .card textarea::placeholder{ color: rgba(214,201,196,.70); } .feedback-page .card textarea{ min-height: 130px; resize: vertical; line-height: 1.45; } .feedback-page .card input:focus, .feedback-page .card select:focus, .feedback-page .card textarea:focus{ border-color: rgba(240,215,141,.55); box-shadow: 0 0 0 4px var(--ring); } .feedback-page .error input, .feedback-page .error select, .feedback-page .error textarea{ border-color: rgba(255,107,107,.75); box-shadow: 0 0 0 4px rgba(255,107,107,.18); } .feedback-page .hint{ margin-top: 6px; font-size: 12px; color: rgba(255,107,107,.92); display:none; } .feedback-page .error .hint{ display:block; } .feedback-page .actions{ display:flex; gap: 12px; align-items:center; justify-content: space-between; margin-top: 16px; flex-wrap: wrap; } .feedback-page .btn{ appearance:none; border:none; border-radius: 14px; padding: 12px 16px; font-weight: 700; font-size: 14px; cursor:pointer; transition: transform .08s ease, box-shadow .15s ease, filter .15s ease; user-select:none; } .feedback-page .btn-primary{ color: #2a1a00; background: linear-gradient(180deg, var(--gold2), var(--gold)); box-shadow: 0 12px 28px rgba(215,181,109,.22); min-width: 190px; display:inline-flex; align-items:center; justify-content:center; gap: 10px; } .feedback-page .btn-primary:hover{ filter: brightness(1.02); box-shadow: 0 16px 34px rgba(215,181,109,.28); } .feedback-page .btn-primary:active{ transform: translateY(1px); } .feedback-page .btn-primary:disabled{ opacity:.65; cursor:not-allowed; box-shadow:none; } .feedback-page .mini{ color: var(--muted); font-size: 12.5px; line-height:1.35; max-width: 420px; } .feedback-page .mini strong{ color: var(--gold2); font-weight:700; } /* Toast */ .feedback-page .toast{ position: fixed; inset: auto 16px 16px auto; width: min(420px, calc(100% - 32px)); border-radius: 16px; padding: 14px; background: rgba(15,10,10,.92); border: 1px solid rgba(215,181,109,.22); box-shadow: 0 22px 70px rgba(0,0,0,.55); transform: translateY(18px); opacity: 0; pointer-events:none; transition: transform .2s ease, opacity .2s ease; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 20000; } .feedback-page .toast.show{ transform: translateY(0); opacity: 1; pointer-events:auto; } .feedback-page .toast .top{ display:flex; gap: 10px; align-items:flex-start; } .feedback-page .badge{ width: 10px; height: 10px; margin-top: 6px; border-radius: 999px; background: var(--ok); box-shadow: 0 0 0 4px rgba(124,255,178,.12); flex: 0 0 auto; } .feedback-page .toast h3{ margin:0; font-family: Fraunces, serif; font-size: 16px; color: var(--gold2); letter-spacing:.2px; } .feedback-page .toast p{ margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; } .feedback-page .toast .close{ margin-left:auto; background: transparent; color: rgba(246,241,238,.75); border: 1px solid rgba(215,181,109,.18); border-radius: 12px; padding: 8px 10px; cursor:pointer; transition: border-color .15s ease, transform .08s ease; } .feedback-page .toast .close:hover{ border-color: rgba(240,215,141,.40); } .feedback-page .toast .close:active{ transform: translateY(1px); } /* ========================= 8) PAGE: CONTACT (contact.html) ========================= */ body.contact-page{ display:flex; flex-direction:column; min-height:100%; color:#fff; background: radial-gradient(900px 520px at 20% 18%, rgba(255,255,255,0.14), transparent 60%), radial-gradient(900px 520px at 80% 24%, rgba(255,224,190,0.10), transparent 60%), linear-gradient(135deg, #8f1b1b, #c73a2c); } .contact-page .page-wrapper{ width:100%; padding:0 22px 70px 22px; } /* hero */ .contact-hero{ padding: 26px 0 10px; } .contact-hero-inner{ max-width: 1200px; margin: 0 auto; padding: 0 22px; } .contact-hero-kicker{ display:inline-block; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.82); background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.16); padding: 8px 12px; border-radius: 999px; } .contact-hero-title{ margin: 12px 0 8px; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; font-weight: 900; } .contact-hero-sub{ margin: 0; max-width: 720px; color: rgba(255,255,255,0.86); line-height: 1.5; } /* quick chips */ .contact-quick{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 14px; } .quick-chip{ display:inline-flex; align-items:center; gap:10px; padding: 10px 14px; border-radius: 999px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); color:#fff; font-weight: 800; font-size: 13px; transition: transform .12s ease, background .15s ease, border-color .15s ease; } .quick-chip:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.28); } /* contact card premium */ .contact-wrapper{ max-width:1200px; margin:40px auto 0 auto; } .contact-card{ display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.4fr); gap:40px; padding:20px 0 40px; color:#ffffff; background:transparent; } .contact-card--premium{ background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); border-radius: 22px; padding: 26px 18px 30px; box-shadow: 0 18px 45px rgba(0,0,0,0.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* split sides */ .contact-left{ padding: 6px 10px; } .contact-right{ padding: 6px 10px; border-left: 1px solid rgba(255,255,255,0.14); } @media(max-width:900px){ .contact-card{ grid-template-columns:1fr; } .contact-right{ border-left:none; border-top: 1px solid rgba(255,255,255,0.14); padding-top: 18px; } } /* left copy */ .contact-heading{ font-size:34px; line-height:1.2; font-weight:900; margin-bottom:12px; } .contact-sub{ font-size:15px; line-height:1.5; margin-bottom:32px; max-width:360px; } .contact-block-title{ font-size:14px; font-weight:900; margin-top:18px; margin-bottom:6px; } .contact-block-text{ font-size:13px; line-height:1.5; color: rgba(255,255,255,0.88); } /* highlight box */ .contact-highlight{ margin: 18px 0 18px; padding: 14px 14px; border-radius: 16px; background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.14); } .contact-highlight-title{ font-weight: 900; margin-bottom: 6px; } .contact-highlight-text{ font-size: 13px; line-height: 1.45; color: rgba(255,255,255,0.86); } /* form */ .contact-form{ display:grid; gap:14px; } .form-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } @media(max-width:900px){ .form-row-2{ grid-template-columns:1fr; } } .form-field label{ display:block; font-size:12px; margin-bottom:4px; color:#ffe3d7; } .contact-form--premium .form-field input, .contact-form--premium .form-field textarea{ width:100%; padding:10px 16px; border-radius:16px; border:1px solid rgba(255,255,255,0.20); font-size:13px; font-family:inherit; background: rgba(255,255,255,0.96); color:#333; transition: box-shadow .15s ease, transform .08s ease, border-color .15s ease; } .contact-form--premium .form-field textarea{ min-height:150px; resize:vertical; } .contact-form--premium .form-field input:focus, .contact-form--premium .form-field textarea:focus{ outline:none; border-color: rgba(255,255,255,0.55); box-shadow: 0 0 0 4px rgba(255,255,255,0.20); } .contact-form-head{ margin-bottom: 12px; } .contact-form-title{ font-weight: 900; font-size: 18px; } .contact-form-sub{ font-size: 13px; color: rgba(255,255,255,0.86); margin-top: 4px; } .enquiry-row{ font-size:12px; color:#ffe3d7; } .enquiry-options{ margin-top:6px; display:flex; flex-wrap:wrap; gap:18px; } .enquiry-options label{ font-size:12px; } .enquiry-options input{ margin-right:4px; } .submit-btn{ width:100%; padding:12px 18px; border-radius:999px; border:none; background:#ffffff; color:#c73a2c; font-weight:900; font-size:15px; cursor:pointer; } .submit-btn:hover{ background:#f5f5f5; } .submit-btn--premium{ background: linear-gradient(180deg, #ffffff, #f6f6f6); color: #b01717; box-shadow: 0 12px 28px rgba(0,0,0,0.18); transition: transform .08s ease, filter .15s ease, box-shadow .15s ease; } .submit-btn--premium:hover{ filter: brightness(0.98); box-shadow: 0 16px 34px rgba(0,0,0,0.22); } .submit-btn--premium:active{ transform: translateY(1px); } .contact-form-note{ margin-top: 10px; font-size: 12px; color: rgba(255,255,255,0.82); } /* ========================= 9) PAGE: SPICE (spice.html) ========================= */ body.spice-page{ position: relative; min-height: 100%; overflow-x: hidden; background: #2a140a; } body.spice-page::before{ content:""; position: fixed; inset: -40px; z-index: -2; background-image: url("images/backgroundSpicePage.png"); background-size: cover; background-position: center; background-repeat: no-repeat; filter: blur(18px); transform: scale(1.08); opacity: 0.55; } body.spice-page::after{ content:""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(900px 520px at 18% 12%, rgba(255, 205, 135, 0.22), transparent 60%), radial-gradient(900px 520px at 82% 20%, rgba(255, 145, 90, 0.18), transparent 60%), radial-gradient(900px 700px at 50% 100%, rgba(255, 230, 180, 0.10), transparent 62%), linear-gradient(135deg, rgba(18,8,4,0.92), rgba(62,32,18,0.78) 45%, rgba(116,68,36,0.70)); } .spice-page .page-wrapper{ width: 100%; padding: 22px 0 70px; } /* Header */ .spice-header{ max-width: 1000px; margin: 0 auto; padding: 22px 22px 10px; text-align: center; } .spice-tagline{ text-transform: uppercase; letter-spacing: .18em; font-weight: 900; font-size: .86rem; opacity: .85; } .spice-header-title{ margin: 10px 0 8px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; font-size: clamp(2.1rem, 4vw, 3.4rem); } .spice-header-bar{ width: 86px; height: 5px; border-radius: 999px; margin: 12px auto 16px; background: rgba(255, 205, 135, 0.65); box-shadow: 0 10px 30px rgba(0,0,0,0.18); } .spice-header-desc{ max-width: 760px; margin: 0 auto; opacity: .88; line-height: 1.6; font-size: 1.03rem; } /* Controls bar */ .spice-controls{ max-width: 1200px; margin: 18px auto 0; padding: 14px 16px; display:flex; gap:12px; align-items:center; justify-content: space-between; flex-wrap: wrap; border-radius: 18px; background: rgba(255, 230, 140, 0.10); border: 1px solid rgba(255, 215, 90, 0.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 18px 50px rgba(0,0,0,0.18); } .filter-pills{ display:flex; align-items:center; gap:10px; flex-wrap: wrap; } .view-toggle{ display:flex; gap:10px; align-items:center; flex-wrap: wrap; } .mini-note{ opacity:1; font-size:.92rem; line-height:1.2; padding-left: 8px; white-space: nowrap; color: rgba(255, 248, 220, 0.92); text-shadow: 0 1px 10px rgba(0,0,0,0.25); } /* Pills */ .pill{ padding:10px 14px; border-radius: 999px; cursor:pointer; font-weight:900; letter-spacing:.15px; transition: transform .18s ease, filter .18s ease, box-shadow .18s ease, border-color .18s ease; user-select:none; outline:none; border: 1px solid rgba(255,255,255,0.22); box-shadow: 0 10px 22px rgba(0,0,0,0.18); } .pill:hover{ transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 14px 28px rgba(0,0,0,0.20); } .pill:focus-visible{ outline:none; box-shadow: 0 0 0 3px rgba(255,255,255,0.22), 0 12px 26px rgba(0,0,0,0.18); } /* Filter buttons */ #pillAll{ background: linear-gradient(180deg, var(--white-1) 0%, var(--white-2) 100%); color: #111; border-color: rgba(255,255,255,0.40); } #pillAll[aria-pressed="true"]{ filter: brightness(0.97); box-shadow: 0 16px 34px rgba(0,0,0,0.22), 0 0 0 3px rgba(255,255,255,0.14); } #pillBottle{ background: linear-gradient(180deg, var(--blue-1) 0%, var(--blue-2) 100%); color: #071a33; border-color: rgba(126,195,255,0.50); } #pillBottle[aria-pressed="true"]{ filter: saturate(1.08) brightness(1.02); box-shadow: 0 16px 34px rgba(0,0,0,0.22), 0 0 0 3px rgba(30,120,255,0.18); } #pillPouch{ background: linear-gradient(180deg, var(--red-1) 0%, var(--red-2) 100%); color: #2a0709; border-color: rgba(255,122,122,0.50); } #pillPouch[aria-pressed="true"]{ filter: saturate(1.08) brightness(1.02); box-shadow: 0 16px 34px rgba(0,0,0,0.22), 0 0 0 3px rgba(216,31,42,0.18); } /* View buttons */ #viewGrid{ background: linear-gradient(180deg, var(--green-1) 0%, var(--green-2) 100%); color: #0f2a12; border-color: rgba(190,255,140,0.40); } #viewGrid[aria-pressed="true"]{ filter: saturate(1.06) brightness(1.03); box-shadow: 0 16px 34px rgba(0,0,0,0.22), 0 0 0 3px rgba(170,255,140,0.18); } #viewList{ background: linear-gradient(180deg, var(--yellow-1) 0%, var(--yellow-2) 100%); color: #23160e; border-color: rgba(255,244,170,0.45); } #viewList[aria-pressed="true"]{ filter: saturate(1.06) brightness(1.03); box-shadow: 0 16px 34px rgba(0,0,0,0.22), 0 0 0 3px rgba(255,220,120,0.18); } /* Grid view */ .spice-grid.view-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; max-width: 1200px; margin: 18px auto 0; padding: 0 22px 24px; } /* List view */ .spice-grid.view-list{ display:flex; flex-direction:column; gap: 12px; max-width: 1200px; margin: 18px auto 0; padding: 0 22px 24px; } .spice-grid.view-list .spice-card{ display:grid; grid-template-columns: 190px 1fr; gap: 14px; align-items:center; } .spice-grid.view-list .spice-photo{ height:180px; margin:0; } .spice-grid.view-list .pack-chip{ top:10px; right:10px; } /* Card */ .spice-card{ position:relative; overflow:hidden; border-radius: 22px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 40px; opacity: 1; transform: none; background: linear-gradient(180deg, #fff7d6 0%, #f2d27a 100%); border: 1px solid rgba(255,255,255,0.45); box-shadow: 0 18px 55px rgba(0,0,0,0.18); } .spice-card::before{ content:""; position:absolute; inset: 0; border-radius: 22px; pointer-events:none; background: linear-gradient(135deg, rgba(255,255,255,0.35), transparent 55%); opacity: 0.9; } /* Image area */ .spice-photo{ width:100%; height: 230px; border-radius: 16px; background: rgba(255,255,255,0.78); border: 1px solid rgba(0,0,0,0.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35); display:flex; align-items:center; justify-content:center; margin-bottom: 12px; overflow:hidden; } .spice-photo img{ filter: drop-shadow(0 22px 26px rgba(0,0,0,0.28)) saturate(1.08) contrast(1.05); max-width: none; width: auto; height: 100%; object-fit: contain; padding: 0 !important; margin: 0 auto; display:block; transform-origin: center; } /* Bottle zoom */ .spice-card[data-pack="bottle"] .spice-photo img{ transform: scale(1.55); } .pack-chip{ position:absolute; top:12px; right:12px; font-size:.75rem; font-weight:900; letter-spacing:.8px; padding:8px 10px; border-radius: 999px; text-transform: uppercase; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgba(29,20,12,0.85); color:#fff; border: 1px solid rgba(255,255,255,0.25); } .spice-name{ color:#1d140c; font-weight: 900; letter-spacing: 0.02em; margin-top: 2px; font-size: 1.15rem; } .spice-desc{ color: rgba(29,20,12,0.78); margin-top: 6px; opacity: .86; line-height: 1.45; font-size: .98rem; max-width: 52ch; } .spice-tag-row{ display:flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .spice-tag{ display:inline-flex; align-items:center; justify-content:center; padding: 7px 12px; border-radius: 999px; font-size: .85rem; font-weight: 900; letter-spacing: .02em; background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.92); } /* Hidden by filter */ .is-hidden{ display:none !important; } /* Highlight after jumping to anchor */ .flash-focus{ outline: 3px solid rgba(255, 230, 160, 0.55); box-shadow: 0 0 0 6px rgba(255, 220, 120, 0.16), 0 24px 60px rgba(0,0,0,0.22); transition: outline-color .25s ease, box-shadow .25s ease; } /* ========================= 10) RESPONSIVE (GLOBAL) ========================= */ @media (max-width: 1050px){ .navbar{ flex-wrap: wrap; } .index-page .fp-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .index-page .fp-title{ font-size: 36px; } .index-page .why-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } /* CTA stacks on medium screens */ .index-page #contact.cta-strip{ grid-template-columns: 1fr; } .index-page #contact .right-carousel{ justify-content: stretch; } .index-page #contact .carousel{ width:100%; } .index-page #contact .carousel-track{ height: 240px; } } @media (max-width: 820px){ .navbar{ padding:12px 14px; flex-wrap:wrap; } .navbar-left img{ height:56px; } /* KEEP NAV LINKS VISIBLE (no hamburger) */ .navbar-center{ display:flex; gap:16px; flex: 1 1 100%; justify-content:center; flex-wrap:wrap; order:2; } /* Put flag+search below links */ .navbar-right{ width:100%; justify-content:center; order:3; } .search-box input{ width:120px; } } @media (max-width: 600px){ .footer-top{ flex-direction:column; align-items:flex-start; } .footer-bottom{ grid-template-columns:1fr 1fr; row-gap:24px; } /* Index hero: show more of the pouches on small screens */ .index-page{ --hero-height: clamp(560px, 72vh, 760px); --hero-focus-y: 28%; } .index-page .fp-grid{ grid-template-columns: 1fr; } .index-page .fp-title{ font-size: 36px; } } @media (max-width: 560px){ .spice-grid.view-grid{ grid-template-columns: 1fr; } .search-box input{ width: 150px; } .spice-grid.view-list .spice-card{ grid-template-columns: 1fr; } .spice-grid.view-list .spice-photo{ height: 220px; } } @media (max-width: 500px) { .footer-bottom{ grid-template-columns:1fr; } } @media (max-width: 460px){ .search-box input{ width:96px; } } /* ========================= MOBILE HERO GAP FIX ========================= */ /* ========================================= INDEX HERO – MOBILE FIX (≤ 600px) Shows full image + removes bottom gap ========================================= */ @media (max-width: 600px){ /* HERO CONTAINER */ .index-page .hero{ /* show entire image */ background-size: contain; background-position: center top; background-repeat: no-repeat; /* fill leftover space nicely */ background-color: #2a1b12; /* 🔴 CRITICAL: remove forced height */ height: auto; min-height: 0; /* control visible height without gaps */ aspect-ratio: 4 / 5; } /* HERO INNER WRAPPER (this was causing the gap) */ .index-page .hero-inner{ height: auto; min-height: 0; padding-top: 22px; padding-bottom: 22px; } /* REMOVE EXTRA SPACE BELOW HERO */ .index-page .page-wrapper{ padding-top: 0; } } /* ========================================= INDEX HERO – MOBILE (NO WASTED SPACE) ========================================= */ @media (max-width: 600px){ /* Hero container: give it a real mobile height */ .index-page .hero{ height: 56vh; /* ✅ controls space (try 52–62vh) */ min-height: 360px; max-height: 520px; background-repeat: no-repeat; background-color: #2a1b12; /* ✅ keep whole image mostly visible but not tiny */ background-size: 112% auto; /* zoom a bit so logo/product bigger */ background-position: center 18%; /* move focus up to show logo */ } /* remove any leftover forced heights from desktop vars */ .index-page .hero-inner{ height: auto; min-height: 0; padding: 0; } } /* ========================= 8.5) PAGE: ABOUT US (aboutUs.html) Use: ========================= */ body.about-page{ margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--ink); background:#faf8f5; display:flex; flex-direction:column; min-height:100%; } /* HERO BANNER */ .about-hero{ position: relative; min-height: 280px; display:flex; align-items:center; justify-content:center; text-align:center; padding: 90px 16px; overflow:hidden; /* ✅ Put your hero image here */ background-image: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.45)), url("./images/about-hero.jpg"); background-size: cover; background-position: center; background-attachment: fixed; } /* prevent sticky navbar overlay */ @media (min-width: 821px){ .about-hero{ padding-top: 130px; } } .about-hero h1{ margin:0; color:#fff; font-family: "Playfair Display", serif; font-weight: 700; letter-spacing:.02em; font-size: clamp(30px, 4vw, 46px); text-shadow: 0 10px 30px rgba(0,0,0,.35); } .about-breadcrumb{ margin-top: 10px; font-size: 12px; letter-spacing: .10em; text-transform: uppercase; color: rgba(255,255,255,.85); } .about-breadcrumb a{ color: rgba(255,255,255,.95); text-decoration:none; border-bottom: 1px solid rgba(255,255,255,.35); } .about-breadcrumb span{ opacity:.95; } /* MAIN WRAP */ .about-wrap{ max-width: 1180px; margin: 0 auto; padding: 72px 20px; } /* 2 COL */ .about-two-col{ display:grid; grid-template-columns: 1.05fr 1.25fr; gap: clamp(22px, 4vw, 54px); align-items:center; } /* product image */ .about-product-visual{ display:flex; justify-content:center; align-items:center; padding: 18px; } .about-frame{ width: min(520px, 100%); aspect-ratio: 16/10; border-radius: 22px; background: #fff; border: 1px solid rgba(35,22,14,0.12); box-shadow: 0 16px 40px rgba(35,22,14,0.10); overflow:hidden; display:flex; align-items:center; justify-content:center; padding: 18px; } .about-frame img{ max-width: 100%; max-height: 100%; object-fit: contain; transform: translateY(2px); filter: drop-shadow(0 18px 25px rgba(0,0,0,.10)); } /* text */ .about-kicker{ font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(35,22,14,.60); margin: 0 0 10px; font-weight: 900; } .about-title{ margin: 0 0 14px; font-family: "Playfair Display", serif; font-weight: 700; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; color: #23160e; } .about-text{ margin: 0 0 14px; color: rgba(35,22,14,.75); line-height: 1.85; font-size: 15.5px; max-width: 70ch; } .about-note{ margin-top: 14px; background: rgba(255,255,255,.72); border: 1px solid rgba(35,22,14,0.12); border-radius: 18px; padding: 16px 16px; box-shadow: 0 12px 28px rgba(35,22,14,0.08); } .about-note strong{ color: rgba(35,22,14,.92); } .about-bullets{ margin-top: 18px; display:grid; gap: 10px; padding: 0; list-style: none; } .about-bullets li{ display:flex; gap: 10px; align-items:flex-start; color: rgba(35,22,14,.78); line-height: 1.6; font-size: 14.5px; } .about-dot{ width: 10px; height: 10px; border-radius: 999px; background: #b3261e; margin-top: 6px; flex: 0 0 auto; box-shadow: 0 10px 18px rgba(179,38,30,.25); } /* QUOTE BANNER */ .about-quote-banner{ position:relative; margin-top: 10px; min-height: 260px; display:flex; align-items:center; justify-content:center; text-align:center; padding: 70px 16px; /* ✅ Put your spice background here */ background-image: linear-gradient(180deg, rgba(0,0,0,.58), rgba(0,0,0,.45)), url("./images/about-banner.jpg"); background-size: cover; background-position: center; background-attachment: fixed; } .about-quote{ max-width: 920px; color:#fff; font-family: "Playfair Display", serif; font-weight: 700; font-size: clamp(26px, 4.2vw, 44px); line-height: 1.15; text-shadow: 0 12px 34px rgba(0,0,0,.35); } .about-quote small{ display:block; margin-top: 14px; font-family: Inter, system-ui, sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; opacity: .9; } /* responsive */ @media (max-width: 880px){ .about-two-col{ grid-template-columns: 1fr; } .about-wrap{ padding: 56px 18px; } .about-hero, .about-quote-banner{ background-attachment: scroll; } } /* ========================= ABOUT US – MAIN SECTION (for your exact HTML snippet) ========================= */ /* main container */ .wrap{ max-width: 1180px; margin: 0 auto; padding: 72px 20px; } /* 2 column layout */ .two-col{ display:grid; grid-template-columns: 1.05fr 1.25fr; gap: clamp(22px, 4vw, 54px); align-items:center; } /* left product image block */ .product-visual{ display:flex; justify-content:center; align-items:center; padding: 18px; } .product-visual .frame{ width: min(520px, 100%); aspect-ratio: 16/10; border-radius: 22px; background: #fff; border: 1px solid rgba(35,22,14,0.12); box-shadow: 0 16px 40px rgba(35,22,14,0.10); overflow:hidden; display:flex; align-items:center; justify-content:center; padding: 18px; } .product-visual img{ max-width: 100%; max-height: 100%; object-fit: contain; transform: translateY(2px); filter: drop-shadow(0 18px 25px rgba(0,0,0,.10)); } /* right content */ .content .kicker{ font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(35,22,14,.60); margin: 0 0 10px; font-weight: 900; } .content h2{ margin: 0 0 14px; font-family: "Playfair Display", serif; font-weight: 700; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; color: #23160e; } .content p{ margin: 0 0 14px; color: rgba(35,22,14,.75); line-height: 1.85; font-size: 15.5px; max-width: 70ch; } /* note box */ .content .note{ margin-top: 14px; background: rgba(255,255,255,.72); border: 1px solid rgba(35,22,14,0.12); border-radius: 18px; padding: 16px 16px; box-shadow: 0 12px 28px rgba(35,22,14,0.08); } .content .note strong{ color: rgba(35,22,14,.92); } /* bullets */ .bullets{ margin-top: 18px; display:grid; gap: 10px; padding: 0; list-style: none; } .bullets li{ display:flex; gap: 10px; align-items:flex-start; color: rgba(35,22,14,.78); line-height: 1.6; font-size: 14.5px; } .dot{ width: 10px; height: 10px; border-radius: 999px; background: var(--brand, #b3261e); margin-top: 6px; flex: 0 0 auto; box-shadow: 0 10px 18px rgba(179,38,30,.25); } /* ========================= ABOUT US – QUOTE BANNER ========================= */ .quote-banner{ position:relative; margin-top: 70px; min-height: 260px; display:flex; align-items:center; justify-content:center; text-align:center; padding: 70px 16px; /* set your background image path here */ background-image: linear-gradient(180deg, rgba(0,0,0,.58), rgba(0,0,0,.45)), url("./images/aboutUs\ ImageHeader.png"); background-size: cover; background-position: center; background-attachment: fixed; } .quote{ max-width: 920px; color:#fff; font-family: "Playfair Display", serif; font-weight: 700; font-size: clamp(26px, 4.2vw, 44px); line-height: 1.15; text-shadow: 0 12px 34px rgba(0,0,0,.35); } .quote small{ display:block; margin-top: 14px; font-family: Inter, system-ui, sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; opacity: .9; } /* responsive */ @media (max-width: 880px){ .two-col{ grid-template-columns: 1fr; } .wrap{ padding: 56px 18px; } .quote-banner{ background-attachment: scroll; } } /* ===================================== ABOUT US – REMOVE WASTED SPACE ===================================== */ .two-col .product-visual{ padding: 0; /* remove outer padding */ } .two-col .product-visual .frame{ width: min(720px, 100%); aspect-ratio: auto; /* 🔥 let image define height */ padding: 8px; /* ⬅️ was 28px+ (too big) */ background: #ffffff; } .two-col .product-visual img{ width: 100%; height: auto; max-width: 100%; max-height: none; object-fit: cover; /* ⬅️ important */ border-radius: 14px; transform: none; }