/* ============================================================ Ritec Sleep — GLOBAL Stylesheet ------------------------------------------------------------ IMPORTANT — this ONE file styles EVERY page. Any page (index, collections, about, consultation, deals, cart, contact...) just needs this single line in its : ...and it instantly gets all the variables, layout, and the responsive scaling below. Change something here once and it updates across the whole website. Structure of this file (same order as the HTML): 0. VARIABLES -> colours, fonts, spacing in ONE place 1. RESPONSIVE ROOT -> the rem engine (scales to the device) 2. RESET -> sensible defaults 3. NAVBAR -> sticky + transparent header 4. HERO -> full-screen slideshow 5. SHOWCASE -> big image + 4 small images grid 6. MATERIALS -> "why us" feature blurbs 7. FOOTER -> subscribe form + link columns 8. BREAKPOINTS -> phone/tablet tweaks ============================================================ */ /* Design fonts: Playfair Display (headings) + Inter (body). Imported here so every page gets them via this one stylesheet. */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap'); /* ============================================================ 0. VARIABLES (change colours / spacing here — once, for all pages) ------------------------------------------------------------ NOTE: every size below is written in rem, not px. rem = a multiple of the root font-size set in section 1. So when the root scales for a phone, ALL of these scale too. ============================================================ */ :root { /* --- Brand colours (Luxury palette) --- */ --color-bg: #FAF9F6; /* warm white — page background */ --color-white: #ffffff; /* cards / surfaces */ --color-dark: #111111; /* deep black — text / footer */ --color-cream: #F2ECE4; /* soft beige — secondary surfaces */ --color-accent: #D4AF37; /* luxury gold accent */ --color-accent-dark: #B8941F; /* darker gold for hover */ --color-muted: #666666; /* muted grey body text */ --color-border: rgba(0,0,0,0.08); /* subtle hairline borders */ /* --- Typography --- */ --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-head: 'Playfair Display', Georgia, serif; /* headings */ /* --- Layout sizes (in rem, so they scale per device) --- */ --nav-height: 4.5rem; /* 72px at the default root size */ --max-width: 87.5rem; /* 1400px — matches the design's container */ --radius: 0.75rem; /* 12px rounded corners */ --radius-lg: 1rem; /* 16px — cards (rounded-2xl) */ /* --- Spacing scale (use these instead of random numbers) --- */ --space-xs: 0.5rem; /* 8px */ --space-sm: 1rem; /* 16px */ --space-md: 1.5rem; /* 24px */ --space-lg: 3rem; /* 48px */ --space-xl: 6rem; /* 96px — generous section padding (py-24) */ } /* ============================================================ 1. RESPONSIVE ROOT (the "rem engine") ------------------------------------------------------------ This is the heart of device-adaptiveness. font-size on is what 1rem equals everywhere. clamp(MIN, PREFERRED, MAX) means: - never smaller than MIN (phones) - grows smoothly with the screen via the vw part (tablets) - never larger than MAX (big desktops) Result: the whole site gently scales to the device, with no extra work — because everything else is measured in rem. ============================================================ */ html { font-size: clamp(14px, 0.55vw + 11px, 18px); scroll-behavior: smooth; /* smooth jumps for #anchor links */ } /* ============================================================ 2. RESET (make every browser start from the same place) ============================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; /* padding/border counted INSIDE width */ } body { font-family: var(--font-main); color: var(--color-dark); background: var(--color-bg); /* warm white page background */ line-height: 1.5; } /* Headings use the serif display font (Playfair Display) */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); font-weight: 500; line-height: 1.25; } img { display: block; max-width: 100%; /* images never overflow their box */ } a { text-decoration: none; color: inherit; /* links use the surrounding text colour */ } ul { list-style: none; /* remove bullet points */ } /* ============================================================ 3. NAVBAR (two-row, centred logo, transparent → white on scroll) ------------------------------------------------------------ Row 1: cart (left) · logo (centre) · search + language (right) Row 2: centred menu By default the bar is transparent with WHITE text (it sits over the hero). When you scroll, JS adds .scrolled → white background with DARK text. Inner pages start .scrolled (no hero behind). ============================================================ */ .site-header { position: sticky; top: 0; z-index: 100; background: transparent; border-bottom: 0.0625rem solid transparent; transition: background 0.3s, box-shadow 0.3s, border-color 0.3s; } .site-header.scrolled { background: var(--color-white); border-bottom-color: var(--color-cream); box-shadow: 0 0.125rem 0.75rem rgba(0,0,0,0.08); } /* ROW 1 — a 3-column grid keeps the logo perfectly centred */ .nav-top { max-width: var(--max-width); margin: 0 auto; padding: 0.75rem var(--space-md); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-sm); } .nav-left { display: flex; align-items: center; gap: 0.85rem; justify-self: start; } .nav-right { display: flex; align-items: center; gap: 0.85rem; justify-self: end; } .nav-logo { justify-self: center; } .nav-logo img { height: 2.75rem; width: auto; } /* Over the hero (not scrolled) a dark logo would vanish, so show it white. Remove this line if your logo is already light/coloured. */ .site-header:not(.scrolled) .nav-logo img { filter: brightness(0) invert(1); } /* Icon + text buttons */ .nav-icon { position: relative; background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; padding: 0.2rem; } .lang-toggle { background: none; border: none; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; } /* ROW 2 — centred menu */ .nav-menu { display: flex; justify-content: center; align-items: center; gap: var(--space-md); padding: 0.6rem var(--space-md); border-top: 0.0625rem solid transparent; } .site-header.scrolled .nav-menu { border-top-color: rgba(0,0,0,0.06); } .nav-menu > a, .nav-menu .dropdown > a { font-weight: 500; cursor: pointer; padding: 0.2rem 0; } /* TEXT COLOUR: white by default (over hero), dark once scrolled */ .nav-icon, .lang-toggle, .nav-menu > a, .nav-menu .dropdown > a { color: var(--color-white); } .nav-burger span { background: var(--color-white); } .site-header.scrolled .nav-icon, .site-header.scrolled .lang-toggle, .site-header.scrolled .nav-menu > a, .site-header.scrolled .nav-menu .dropdown > a { color: var(--color-dark); } .site-header.scrolled .nav-burger span { background: var(--color-dark); } .nav-icon:hover, .lang-toggle:hover, .nav-menu > a:hover, .nav-menu .dropdown > a:hover { color: var(--color-accent); } /* Cart count badge */ .cart-count { position: absolute; top: -0.35rem; right: -0.5rem; font-size: 0.65rem; font-weight: 700; background: var(--color-accent); color: var(--color-dark); border-radius: 999px; padding: 0.05rem 0.35rem; } /* Hamburger — hidden on desktop, shown on phones */ .nav-burger { flex-direction: column; gap: 0.25rem; display: none; } .nav-burger span { width: 1.3rem; height: 0.14rem; border-radius: 2px; } /* ============================================================ 4. HERO SLIDESHOW ============================================================ */ .hero { position: relative; height: 100vh; /* full screen until you scroll (like the design) */ overflow: hidden; } .slide { position: absolute; inset: 0; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; /* Push the centred content below the transparent nav so they don't overlap. --nav-h is set by main.js to the nav's height. The bottom padding keeps the content clear of the slide dots. */ padding-top: var(--nav-h, 0); padding-bottom: 4rem; opacity: 0; transition: opacity 0.8s ease; } .slide.is-active { opacity: 1; } .slide::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.35); /* readability overlay */ } .slide-text { position: relative; color: var(--color-white); max-width: 37.5rem; padding: 0 var(--space-sm); } .slide-text h1 { font-size: clamp(2rem, 6vw, 4rem); margin-bottom: 0.75rem; } .slide-text p { font-size: clamp(1rem, 2.5vw, 1.4rem); margin-bottom: var(--space-md); } /* ============================================================ BUTTONS — one base + modifiers. Used on EVERY page. ------------------------------------------------------------ Base: .btn gold filled (the default CTA) Colour: .btn--dark dark filled .btn--outline outline for LIGHT backgrounds (cards, filters) .btn--outline-light outline for DARK backgrounds (hero, nav) Shape: .btn--sm smaller .btn--pill rounded .btn--block full width State: .is-active filled gold (filters / chips) Combine them, e.g. class="btn btn--outline btn--pill btn--sm" ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; background: var(--color-accent); color: var(--color-dark); /* gold buttons have BLACK text (design) */ border: 0.0625rem solid transparent; padding: 0.75rem 1.5rem; border-radius: var(--radius); font: inherit; font-weight: 600; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s; } .btn:hover { background: var(--color-accent-dark); transform: translateY(-0.125rem); } /* Colour variants */ .btn--dark { background: var(--color-dark); color: var(--color-white); } .btn--dark:hover { background: var(--color-accent); color: var(--color-dark); } /* dark -> gold w/ black text */ .btn--outline { background: transparent; border-color: var(--color-border); color: var(--color-muted); } .btn--outline:hover { background: transparent; border-color: var(--color-accent); color: var(--color-accent); transform: none; } .btn--outline-light { background: transparent; border-color: rgba(255,255,255,0.6); color: var(--color-white); } .btn--outline-light:hover { background: var(--color-white); color: var(--color-dark); transform: none; } /* Shape / size */ .btn--sm { padding: 0.5rem 1rem; font-size: 0.85rem; } .btn--pill { border-radius: 999px; } .btn--block { width: 100%; } /* Selected state (filters, chips) — wins over the outline look */ .btn.is-active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-dark); } .hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.3); color: var(--color-white); border: none; font-size: 1.75rem; width: 3rem; height: 3rem; border-radius: 50%; cursor: pointer; transition: background 0.2s; } .hero-arrow:hover { background: rgba(0,0,0,0.6); } .hero-arrow.prev { left: var(--space-sm); } .hero-arrow.next { right: var(--space-sm); } .hero-dots { position: absolute; bottom: var(--space-md); left: 50%; transform: translateX(-50%); display: flex; gap: 0.625rem; } .dot { width: 0.75rem; height: 0.75rem; border-radius: 50%; border: 0.125rem solid var(--color-white); background: transparent; cursor: pointer; transition: background 0.2s; } .dot.is-active { background: var(--color-white); } /* ============================================================ 5. SHOWCASE GRID (big left + 4 small right) ============================================================ */ .showcase { max-width: var(--max-width); margin: var(--space-xl) auto; padding: 0 var(--space-md); display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--space-sm); height: 35rem; } .card { position: relative; border-radius: var(--radius-lg); overflow: hidden; background-size: cover; background-position: center; display: flex; align-items: flex-end; box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.06); transition: transform 0.5s, box-shadow 0.3s; } .card:hover { transform: scale(1.03); box-shadow: 0 1.25rem 2.5rem rgba(0,0,0,0.15); } .card-big { grid-row: span 2; } .card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.3) 40%, rgba(0,0,0,0) 70%); } .card-label { position: relative; z-index: 1; font-family: var(--font-head); /* Playfair, like the design */ color: var(--color-white); font-size: 1.6rem; font-weight: 500; padding: var(--space-md); } .card-big .card-label { font-size: 2.2rem; } /* ============================================================ 6. MATERIALS ("why us" feature blurbs) ============================================================ */ .materials { background: var(--color-cream); padding: var(--space-xl) var(--space-md); text-align: center; } .materials h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin-bottom: 0.75rem; } .materials-intro { max-width: 40rem; margin: 0 auto var(--space-lg); color: var(--color-muted); } .materials-grid { max-width: var(--max-width); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); } .feature { background: var(--color-white); padding: 1.75rem 1.25rem; border-radius: var(--radius); box-shadow: 0 0.25rem 0.875rem rgba(0,0,0,0.05); } .feature h3 { color: var(--color-accent); margin-bottom: 0.625rem; } .feature p { color: var(--color-muted); font-size: 0.95rem; } /* ============================================================ 7. FOOTER (subscribe + link columns) — appears on every page ============================================================ */ .site-footer { background: var(--color-dark); color: var(--color-cream); padding: 4rem var(--space-md) var(--space-md); } .subscribe { max-width: 32.5rem; margin: 0 auto var(--space-lg); text-align: center; } .subscribe h2 { margin-bottom: var(--space-xs); } .subscribe p { margin-bottom: 1.25rem; color: #b8b0a5; } .subscribe-form { display: flex; gap: var(--space-xs); } .subscribe-form input { flex: 1; padding: 0.75rem 0.875rem; border: none; border-radius: var(--radius); outline: none; } .subscribe-form button { background: var(--color-accent); color: var(--color-white); border: none; padding: 0.75rem var(--space-md); border-radius: var(--radius); font-weight: 600; cursor: pointer; transition: background 0.2s; } .subscribe-form button:hover { background: var(--color-accent-dark); } .footer-links { max-width: var(--max-width); margin: 0 auto var(--space-lg); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } .footer-col h4 { margin-bottom: 0.875rem; color: var(--color-white); } .footer-col li { margin-bottom: var(--space-xs); } .footer-col a { color: #b8b0a5; transition: color 0.2s; } .footer-col a:hover { color: var(--color-accent); } .copyright { text-align: center; border-top: 0.0625rem solid rgba(255,255,255,0.1); padding-top: var(--space-md); color: #8a8278; font-size: 0.9rem; } /* ============================================================ 8. BREAKPOINTS (phones + tablets) ------------------------------------------------------------ Breakpoints use em (48em = 768px). Using em here means the layout switches based on the device's own text size too. ============================================================ */ @media (max-width: 48em) { .nav-links { display: none; /* hidden on phones (mobile menu added in JS) */ } .search input { width: 5.625rem; } .showcase { grid-template-columns: 1fr; grid-template-rows: none; height: auto; } .card { height: 13.75rem; } .card-big { grid-row: auto; height: 18.75rem; } .materials-grid { grid-template-columns: repeat(2, 1fr); } .footer-links { grid-template-columns: 1fr; text-align: center; } .subscribe-form { flex-direction: column; } } /* ============================================================ 9. COLLECTIONS DROPDOWN (hover menu in the navbar) ------------------------------------------------------------ - .dropdown is the "Collections" list item. - .dropdown-menu is the little panel that drops down. - It is hidden by default and revealed on hover (or keyboard focus, so it's accessible too). ============================================================ */ .dropdown { position: relative; /* the menu is positioned against this */ } .dropdown-menu { position: absolute; top: 100%; /* sit right below the "Collections" link */ left: 0; min-width: 12rem; /* Solid panel so the links are readable over any background */ background: var(--color-white); border-radius: var(--radius); box-shadow: 0 0.5rem 1.25rem rgba(0,0,0,0.18); padding: 0.5rem 0; /* Hidden until hovered: fade + tiny slide, and ignore clicks */ opacity: 0; visibility: hidden; transform: translateY(0.5rem); transition: opacity 0.2s, transform 0.2s, visibility 0.2s; } /* Show the menu when hovering the parent OR focusing a link inside it */ .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } /* The individual category links inside the dropdown */ .dropdown-menu li a { display: block; padding: 0.625rem 1.25rem; color: var(--color-dark); /* dark text on the white panel */ font-weight: 500; white-space: nowrap; transition: background 0.15s, color 0.15s; } .dropdown-menu li a:hover { background: var(--color-cream); color: var(--color-accent); } /* ============================================================ 11. COLLECTIONS PAGE (back button + category grid + CTA) ============================================================ */ /* Wrapper that centres the page content */ .page { max-width: var(--max-width); margin: 0 auto; padding: var(--space-lg) var(--space-md); } /* Back button (its click is wired up in the JS step) */ .back-btn { display: inline-flex; align-items: center; gap: 0.375rem; background: none; border: 0.0625rem solid var(--color-accent); color: var(--color-accent); padding: 0.5rem 1rem; border-radius: var(--radius); font-weight: 600; cursor: pointer; transition: background 0.2s, color 0.2s; } .back-btn:hover { background: var(--color-accent); color: var(--color-white); } /* Page title block */ .page-title { margin: var(--space-md) 0 var(--space-lg); text-align: center; } .page-title h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); margin-bottom: var(--space-xs); } .page-title p { color: var(--color-muted); } /* The category grid — auto-fits as many cards as fit, then wraps. This is why it works on phone, tablet and desktop automatically: each card is at least 16rem wide, and the grid fills the row. */ .collection-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-md); } /* Each category card (reuses the .card look from the homepage) */ .collection-grid .card { height: 16rem; /* give the wrapped cards a height */ } /* "Book your consultation" banner at the bottom of the page */ .consultation-cta { margin-top: var(--space-xl); background: var(--color-cream); border-radius: var(--radius); padding: var(--space-lg); text-align: center; } .consultation-cta h2 { font-size: clamp(1.4rem, 4vw, 2.2rem); margin-bottom: 0.5rem; } .consultation-cta p { color: var(--color-muted); margin-bottom: var(--space-md); } /* ============================================================ 12. SHARED SHELL CHROME (injected by components.js) ------------------------------------------------------------ Styles for everything the shell adds to every page: announcement bar, nav buttons, mobile menu, search overlay, cart drawer, floating buttons, WhatsApp button, toast. ============================================================ */ /* ── Announcement bar (thin strip above the nav) ── */ #announce { background: var(--color-dark); color: var(--color-cream); text-align: center; font-size: 0.8rem; letter-spacing: 0.03em; padding: 0.5rem 1rem; } #announce a { color: var(--color-accent); font-weight: 600; cursor: pointer; } /* (Nav icons, language, search now styled in section 3.) */ /* ── Mobile slide-in menu ── */ #mobile-nav { position: fixed; top: 0; right: 0; width: 78%; max-width: 20rem; height: 100%; background: var(--color-dark); color: var(--color-cream); z-index: 300; padding: 4rem 1.5rem 2rem; transform: translateX(100%); transition: transform 0.3s ease; display: flex; flex-direction: column; gap: 0.5rem; } #mobile-nav.open { transform: translateX(0); } #mobile-nav ul { display: flex; flex-direction: column; gap: 0.25rem; } #mobile-nav li a { display: block; padding: 0.75rem 0; color: var(--color-cream); border-bottom: 0.0625rem solid rgba(255,255,255,0.08); cursor: pointer; } #mobile-nav li a:hover { color: var(--color-accent); } .mob-close { position: absolute; top: 1.25rem; right: 1.25rem; background: none; border: none; color: var(--color-cream); font-size: 1.4rem; cursor: pointer; } .mob-lang-btn { margin-top: auto; background: var(--color-accent); color: var(--color-white); border: none; border-radius: var(--radius); padding: 0.75rem; font-weight: 600; cursor: pointer; font-family: inherit; } /* ── Search overlay (the big tab opened by the search icon) ── */ #search-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 350; opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; } #search-overlay.on { opacity: 1; visibility: visible; } #search-panel { position: fixed; top: 0; left: 0; right: 0; background: var(--color-white); z-index: 360; padding: 1.5rem var(--space-md) var(--space-md); transform: translateY(-100%); transition: transform 0.3s ease; max-height: 85vh; overflow-y: auto; } #search-panel.on { transform: translateY(0); } .search-head { display: flex; align-items: center; gap: 0.75rem; max-width: 50rem; margin: 0 auto; border-bottom: 0.0625rem solid var(--color-cream); padding-bottom: 0.75rem; color: var(--color-muted); } .search-head input { flex: 1; border: none; outline: none; font: inherit; font-size: 1.2rem; color: var(--color-dark); } .search-x { background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--color-muted); } /* Category shortcut chips */ .search-cats { display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: 50rem; margin: 1rem auto 0; } .search-cat { background: var(--color-cream); border: none; border-radius: 999px; padding: 0.45rem 1rem; font: inherit; font-size: 0.85rem; cursor: pointer; transition: background 0.2s, color 0.2s; } .search-cat:hover { background: var(--color-accent); color: var(--color-white); } /* Results grid */ .search-results { max-width: 50rem; margin: 1.25rem auto 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.5rem; } .search-card { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem; border: 0.0625rem solid var(--color-cream); border-radius: var(--radius); cursor: pointer; transition: border-color 0.15s; } .search-card:hover { border-color: var(--color-accent); } .search-card-icon { font-size: 1.8rem; } .search-card-name { font-weight: 600; } .search-card-price { color: var(--color-accent); font-size: 0.85rem; } .search-empty { grid-column: 1/-1; text-align: center; color: var(--color-muted); padding: 2rem; } /* ── Cart drawer + overlay ── */ #cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 350; opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; } #cart-overlay.on { opacity: 1; visibility: visible; } #cart-drawer { position: fixed; top: 0; right: 0; width: 90%; max-width: 24rem; height: 100%; background: var(--color-white); z-index: 360; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.3s ease; box-shadow: -0.5rem 0 2rem rgba(0,0,0,0.15); } #cart-drawer.on { transform: translateX(0); } .cart-head { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem var(--space-md); border-bottom: 0.0625rem solid var(--color-cream); } .cart-head h3 { font-size: 1.2rem; } .cart-x { background: none; border: none; font-size: 1.2rem; cursor: pointer; } .cart-body { flex: 1; overflow-y: auto; padding: var(--space-md); } .cart-empty-msg { text-align: center; color: var(--color-muted); margin-top: 2rem; } /* One line item in the cart */ .ci { display: flex; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 0.0625rem solid var(--color-cream); } .ci-thumb { font-size: 1.8rem; width: 3.5rem; height: 3.5rem; display: flex; align-items: center; justify-content: center; background: var(--color-cream); border-radius: var(--radius); } .ci-info { flex: 1; } .ci-name { font-weight: 600; font-size: 0.9rem; } .ci-sub { color: var(--color-muted); font-size: 0.8rem; } .ci-price { color: var(--color-accent); font-size: 0.85rem; margin: 0.25rem 0; } .ci-qty { display: flex; align-items: center; gap: 0.5rem; } .qty-btn { width: 1.5rem; height: 1.5rem; border: 0.0625rem solid var(--color-cream); background: none; cursor: pointer; border-radius: 4px; } .ci-rm { background: none; border: none; cursor: pointer; color: var(--color-muted); } .cart-foot { padding: var(--space-md); border-top: 0.0625rem solid var(--color-cream); } .cart-row, .cart-total-row { display: flex; justify-content: space-between; margin-bottom: 0.5rem; } .cart-total-row { font-weight: 700; font-size: 1.1rem; margin: 0.75rem 0; } /* Cart buttons use .btn / .btn--block. WhatsApp keeps its brand green. */ .btn-wa { background: #25d366; margin-top: 0.5rem; } .btn-wa:hover { background: #1da851; } .pay-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin-top: 0.85rem; } .pay-badge { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em; background: var(--color-cream); color: var(--color-muted); padding: 0.25rem 0.5rem; border-radius: 4px; } /* ── Floating cart button (hidden when empty) ── */ #cart-fab { position: fixed; bottom: 5.5rem; right: 1.5rem; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--color-dark); color: var(--color-white); border: none; cursor: pointer; font-size: 1.3rem; z-index: 200; box-shadow: 0 0.5rem 1.25rem rgba(0,0,0,0.25); } #cart-fab.empty { display: none; } .fab-badge { position: absolute; top: -0.25rem; right: -0.25rem; background: var(--color-accent); color: var(--color-dark); font-size: 0.7rem; font-weight: 700; border-radius: 999px; padding: 0.05rem 0.4rem; } /* ── WhatsApp float button ── */ .wa-wrap { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 200; display: flex; align-items: center; gap: 0.5rem; } .wa-btn { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #25d366; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; box-shadow: 0 0.5rem 1.25rem rgba(0,0,0,0.25); } .wa-tip { background: var(--color-white); color: var(--color-dark); font-size: 0.8rem; padding: 0.4rem 0.7rem; border-radius: var(--radius); box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.15); } /* ── Toast popup ── */ #toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(1rem); background: var(--color-dark); color: var(--color-white); padding: 0.75rem 1.5rem; border-radius: 999px; font-size: 0.9rem; z-index: 400; opacity: 0; visibility: hidden; transition: opacity 0.25s, transform 0.25s, visibility 0.25s; } #toast.on { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* ── Hero badge + ghost button + button row (homepage) ── */ .hero-badge { display: inline-block; background: rgba(255,255,255,0.15); color: var(--color-white); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.35rem 0.9rem; border-radius: 999px; margin-bottom: 1rem; } .hero-btns { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; } /* ============================================================ 13. SHELL — phone adjustments ============================================================ */ @media (max-width: 48em) { /* On phones: hide the row-2 menu and language toggle; keep the cart + search icons, and show the hamburger. */ .nav-menu { display: none; } .nav-right .lang-toggle { display: none; } .nav-burger { display: inline-flex; } /* Search results become a single column on small screens */ .search-results { grid-template-columns: 1fr; } } /* ============================================================ 14. CATEGORY PAGES (breadcrumb, hero, filters, products) ------------------------------------------------------------ Shared by beds / mattresses / closets / tv-units / wall-panels. ============================================================ */ /* Breadcrumb trail */ .breadcrumb { font-size: 0.85rem; color: var(--color-muted); margin-bottom: var(--space-md); } .breadcrumb a { color: var(--color-muted); } .breadcrumb a:hover { color: var(--color-accent); } /* Small uppercase label above a heading */ .eyebrow { font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 0.5rem; } /* Category page hero: title on one side, button on the other */ .cat-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-lg); } .cat-hero h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); } .cat-sub { color: var(--color-muted); margin-top: 0.4rem; max-width: 32rem; } /* Filter buttons row (the buttons use .btn .btn--outline .btn--pill .btn--sm) */ .filter-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-lg); } /* Product grid: auto-fits, so it's fluid on every screen */ .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--space-md); } /* One product card */ .product-card { border: 0.0625rem solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; background: var(--color-white); box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.06); transition: box-shadow 0.3s, transform 0.3s; } .product-card:hover { box-shadow: 0 1.25rem 2.5rem rgba(0,0,0,0.12); transform: translateY(-0.25rem); } /* Card image area */ .product-media { position: relative; aspect-ratio: 4 / 3; background: var(--color-cream) center / cover no-repeat; display: block; } .product-badge { position: absolute; top: 0.75rem; left: 0.75rem; background: var(--color-accent); color: var(--color-dark); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; padding: 0.2rem 0.6rem; border-radius: 999px; } /* Card text + actions */ .product-body { padding: var(--space-sm); display: flex; flex-direction: column; gap: 0.35rem; flex: 1; } .product-collection { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); } .product-name { font-size: 1.1rem; } .product-desc { font-size: 0.85rem; color: var(--color-muted); } .product-price { font-family: var(--font-head); /* Playfair, like the design */ font-size: 1.6rem; font-weight: 600; color: var(--color-accent); /* gold price */ margin-top: 0.25rem; } .product-price small { font-size: 0.7rem; color: var(--color-muted); font-weight: 500; font-family: var(--font-main); } /* Size chips */ .size-row { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.4rem 0; } .size-chip { border: 0.0625rem solid var(--color-border); background: none; font-size: 0.75rem; padding: 0.3rem 0.55rem; border-radius: 6px; cursor: pointer; font-family: inherit; transition: all 0.15s; } .size-chip:hover { border-color: var(--color-accent); } .size-chip.is-active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-dark); } /* Card buttons row (buttons use .btn .btn--sm; the two share the width) */ .product-actions { display: flex; gap: 0.5rem; margin-top: auto; /* pin to the bottom of the card */ padding-top: 0.5rem; } .product-actions .btn { flex: 1; } /* "Design your own" custom-order card */ .custom-card { border: 0.125rem dashed var(--color-accent); border-radius: var(--radius); padding: var(--space-lg) var(--space-md); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; background: var(--color-cream); } .custom-icon { font-size: 2rem; } .custom-card h3 { font-size: 1.15rem; } .custom-card p { font-size: 0.85rem; color: var(--color-muted); max-width: 18rem; } .custom-card .btn { margin-top: 0.5rem; } /* ============================================================ 15. FORMS (shared by consultation + checkout) ============================================================ */ /* Two fields side by side, stacking to one column on phones */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); } /* One labelled field */ .field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: var(--space-sm); } .field label { font-size: 0.8rem; font-weight: 600; color: var(--color-muted); } .field input, .field select, .field textarea { padding: 0.7rem 0.9rem; border: 0.0625rem solid var(--color-cream); border-radius: var(--radius); font: inherit; outline: none; background: var(--color-white); transition: border-color 0.2s; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-accent); } .field textarea { min-height: 6rem; resize: vertical; } /* Phone field with a fixed country code */ .phone-field { display: flex; } .phone-code { display: flex; align-items: center; padding: 0 0.8rem; background: var(--color-cream); border: 0.0625rem solid var(--color-cream); border-radius: var(--radius) 0 0 var(--radius); font-size: 0.9rem; white-space: nowrap; } .phone-field input { border-radius: 0 var(--radius) var(--radius) 0; flex: 1; } .form-note { font-size: 0.8rem; color: var(--color-muted); margin-top: 0.75rem; } /* Hidden until JS reveals it after submit */ .success-box { display: none; margin-top: var(--space-sm); padding: 0.9rem 1rem; border-radius: var(--radius); background: #e8f5e9; color: #2e7d32; font-weight: 600; } .success-box.on { display: block; } /* "or" divider */ .or-divider { text-align: center; color: var(--color-muted); font-size: 0.85rem; margin: var(--space-sm) 0; } /* ============================================================ 16. CONSULTATION + CHECKOUT layouts ============================================================ */ /* Consultation: form on one side, info cards on the other */ .consult-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-lg); align-items: start; } .panel { background: var(--color-white); border: 0.0625rem solid var(--color-cream); border-radius: var(--radius); padding: var(--space-md); } /* Info cards (consultation side) */ .info-card { display: flex; gap: 0.75rem; padding: var(--space-sm) 0; border-bottom: 0.0625rem solid var(--color-cream); } .info-card:last-child { border-bottom: none; } .info-icon { font-size: 1.5rem; } .info-card h4 { font-size: 0.95rem; margin-bottom: 0.2rem; } .info-card p { font-size: 0.85rem; color: var(--color-muted); } /* Checkout: form + sticky order summary */ .checkout-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-lg); align-items: start; } /* Payment method options */ .pay-opts { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: var(--space-sm); } .pay-opt { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1rem; border: 0.0625rem solid var(--color-cream); border-radius: var(--radius); cursor: pointer; transition: border-color 0.2s, background 0.2s; } .pay-opt.on { border-color: var(--color-accent); background: var(--color-cream); } .pay-opt .pb { margin-left: auto; font-size: 0.65rem; font-weight: 700; background: var(--color-white); padding: 0.15rem 0.4rem; border-radius: 4px; } /* Dashed placeholder where the payment gateway will mount */ .pay-placeholder { border: 0.125rem dashed var(--color-cream); border-radius: var(--radius); padding: var(--space-md); text-align: center; color: var(--color-muted); margin-bottom: var(--space-sm); } .secure-note { font-size: 0.8rem; color: var(--color-muted); text-align: center; margin-top: 0.75rem; } /* Order summary box */ .summary { background: var(--color-cream); border-radius: var(--radius); padding: var(--space-md); position: sticky; top: 6rem; } .summary-item { display: flex; gap: 0.6rem; padding: 0.5rem 0; font-size: 0.85rem; } .summary-line, .summary-total { display: flex; justify-content: space-between; padding: 0.4rem 0; } .summary-total { font-weight: 700; font-size: 1.1rem; border-top: 0.0625rem solid var(--color-white); margin-top: 0.4rem; padding-top: 0.6rem; } /* Order-confirmed panel (hidden until JS shows it) */ .order-ok { display: none; text-align: center; flex-direction: column; align-items: center; gap: 0.75rem; padding: var(--space-xl) var(--space-md); } .order-ok.on { display: flex; } /* ============================================================ 17. PRODUCT DETAIL (product.html) ============================================================ */ .product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: start; } /* Image gallery (main image + clickable thumbnails) */ .gallery { position: sticky; top: 6rem; } .gallery-main { aspect-ratio: 4 / 3; background: var(--color-cream) center / cover no-repeat; border-radius: var(--radius); } .gallery-thumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; } .thumb { width: 4.5rem; aspect-ratio: 1; background: var(--color-cream) center / cover no-repeat; border: 0.125rem solid transparent; border-radius: var(--radius); cursor: pointer; padding: 0; } .thumb.is-active { border-color: var(--color-accent); } .detail-features { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: var(--space-sm) 0; } .detail-feature { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--color-muted); } .detail-feature::before { content: "✦"; color: var(--color-accent); } /* Selected-price box */ .price-box { background: var(--color-cream); border: 0.0625rem solid var(--color-accent); border-radius: var(--radius); padding: 0.9rem 1.1rem; margin: var(--space-sm) 0; } .price-box .amount { font-size: 1.6rem; font-weight: 700; color: var(--color-dark); } /* ============================================================ 18. FORMS / LAYOUTS — phone adjustments ============================================================ */ @media (max-width: 48em) { .form-grid, .consult-grid, .checkout-grid, .product-detail, .detail-features { grid-template-columns: 1fr; } .summary, .gallery { position: static; } }