/* ========================================================================== SolvFin — Global Stylesheet ========================================================================== Table of contents: 1. Design tokens (CSS custom properties) 2. Reset / base 3. Typography helpers 4. Layout helpers (container, grid, section spacing) 5. Buttons 6. Header / navigation / burger menu (breakpoint: 991px) 7. Search panel + autosuggest dropdown 8. Cart badge 9. Cookie consent banner + settings modal 10. Footer 11. Cards (product, article, benefit, testimonial) 12. Hero 13. Generic sections (why-it-matters, lead magnet, tabs, forms) 14. Shop page (filters/sort/grid) 15. Product page (detail, tabs, similar/fbt) 16. Cart page 17. Scroll-reveal animation utility 18. Responsive breakpoints (fluid type + 991px burger + down to 300px) ========================================================================== */ /* ------------------------------------------------------------------------- 1. Design tokens ------------------------------------------------------------------------- */ :root{ --color-ink:#0F1B33; /* primary dark navy - text, header bg on dark sections */ --color-navy-2:#16264A; --color-cream:#F8F5EF; /* page background */ --color-cream-2:#F1ECE1; --color-gold:#C9A227; /* primary accent */ --color-gold-2:#E8C766; --color-emerald:#1F9D6B; /* secondary accent / success / CTA alt */ --color-emerald-dark:#167A54; --color-text:#1A2233; --color-text-muted:#5B6478; --color-white:#FFFFFF; --color-border:#E4DECF; --radius-sm:8px; --radius-md:16px; --radius-lg:24px; --shadow-soft:0 8px 30px rgba(15,27,51,0.08); --shadow-hover:0 16px 40px rgba(15,27,51,0.16); --font-heading:'Fraunces', Georgia, serif; --font-body:'Inter', Arial, sans-serif; --header-h: 84px; --container-w: 1240px; } /* ------------------------------------------------------------------------- 2. Reset / base ------------------------------------------------------------------------- */ *, *::before, *::after{ box-sizing: border-box; } *{ margin:0; padding:0; } html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* Must be set here too, not just on body: Safari/iOS only keeps position:fixed elements (mobile-nav drawer, header, chat widget, cookie banner) anchored to the real viewport when the ROOT element is the scrolling element. If only has overflow-x hidden, Safari makes body the fixed-position containing block instead of the viewport, and since .mobile-nav uses height:100% (which then resolves against body's own auto/content height, not the screen height), the drawer renders far shorter than the screen — this is the actual cause of the burger drawer "displaying poorly / less than half visible". */ overflow-x: hidden; } body{ font-family: var(--font-body); background: var(--color-cream); color: var(--color-text); line-height: 1.6; font-size: 16px; min-width: 300px; overflow-x: hidden; } img, svg{ display:block; max-width:100%; height:auto; } a{ color: inherit; text-decoration:none; } button{ font-family: inherit; cursor:pointer; border:0; background:none; } input, textarea, select{ font-family: inherit; font-size: 1rem; } ul, ol{ list-style: none; } h1,h2,h3,h4,h5,h6{ font-family: var(--font-heading); color: var(--color-ink); line-height: 1.2; font-weight: 700; } /* ------------------------------------------------------------------------- 3. Typography helpers ------------------------------------------------------------------------- */ .eyebrow{ display:inline-block; font-family: var(--font-body); font-weight:600; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-emerald-dark); margin-bottom: 0.75rem; } .section-title{ font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); margin-bottom: 1rem; } .section-lead{ color: var(--color-text-muted); font-size: clamp(1rem, 0.95rem + 0.2vw, 1.15rem); max-width: 62ch; } .text-muted{ color: var(--color-text-muted); } .italic-serif{ font-family: var(--font-heading); font-style: italic; } /* ------------------------------------------------------------------------- 4. Layout helpers ------------------------------------------------------------------------- */ .container{ width: 100%; max-width: var(--container-w); margin: 0 auto; padding: 0 24px; } .section{ padding: clamp(3rem, 2.4rem + 3vw, 6rem) 0; } .section-head{ max-width: 720px; margin-bottom: clamp(2rem, 1.6rem + 2vw, 3.2rem); } .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; } .grid{ display:grid; gap: 1.5rem; } .grid-4{ grid-template-columns: repeat(4, 1fr); } .grid-3{ grid-template-columns: repeat(3, 1fr); } .grid-2{ grid-template-columns: repeat(2, 1fr); } .flex-row{ display:flex; align-items:center; gap: 0.75rem; } .flex-between{ display:flex; align-items:center; justify-content: space-between; } .visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip: rect(0 0 0 0); white-space:nowrap; } /* ------------------------------------------------------------------------- 5. Buttons ------------------------------------------------------------------------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; padding: 0.85rem 1.6rem; border-radius: 999px; font-weight:600; font-size: 0.95rem; white-space: nowrap; transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease; border: 1.5px solid transparent; } .btn:hover{ transform: translateY(-3px); } .btn-primary{ background: var(--color-gold); color: var(--color-ink); box-shadow: var(--shadow-soft); } .btn-primary:hover{ background: var(--color-gold-2); box-shadow: var(--shadow-hover); } .btn-secondary{ /* var(--color-emerald) only gives ~3.45:1 contrast against white text, below the 4.5:1 WCAG AA minimum for normal-size button text — use the darker emerald so the label stays readable for low-vision users. */ background: var(--color-emerald-dark); color: var(--color-white); box-shadow: var(--shadow-soft); } .btn-secondary:hover{ filter: brightness(0.92); box-shadow: var(--shadow-hover); } .btn-ghost{ background: transparent; border-color: var(--color-ink); color: var(--color-ink); } .btn-ghost:hover{ background: var(--color-ink); color: var(--color-white); } .btn-ghost-light{ background: transparent; border-color: rgba(255,255,255,0.55); color: var(--color-white); } .btn-ghost-light:hover{ background: rgba(255,255,255,0.12); border-color:#fff; } .btn-sm{ padding: 0.55rem 1.1rem; font-size: 0.85rem; } .btn-block{ width:100%; } .btn:disabled{ opacity:0.5; cursor:not-allowed; transform:none; } .btn-icon{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; color: var(--color-ink); transition: background-color .2s ease, transform .2s ease; position:relative; } .btn-icon:hover{ background: var(--color-cream-2); transform: translateY(-1px); } .btn-icon svg{ width:22px; height:22px; } /* ------------------------------------------------------------------------- 6. Header / navigation / burger (breakpoint 991px) ------------------------------------------------------------------------- */ .site-header{ position: sticky; top:0; z-index: 500; background: var(--color-cream); border-bottom: 1px solid transparent; transition: box-shadow 0.3s ease, border-color 0.3s ease, background-color .3s ease; } .site-header.is-scrolled{ box-shadow: var(--shadow-soft); border-bottom-color: var(--color-border); background: rgba(248,245,239,0.96); backdrop-filter: blur(6px); } .site-header__inner{ display:flex; align-items:center; justify-content:space-between; gap: 1.5rem; min-height: var(--header-h); padding: 0.6rem 0; } .logo{ display:flex; align-items:center; gap:0.6rem; font-family: var(--font-heading); font-size: 1.5rem; font-weight:700; flex-shrink:0; } .logo__mark{ width:34px; height:34px; flex-shrink:0; } .logo__solv{ color: var(--color-ink); } .logo__fin{ color: var(--color-gold); } .main-nav{ display:flex; align-items:center; gap: clamp(1rem, 0.6rem + 1.6vw, 2.2rem); } .main-nav a{ font-weight:600; font-size: 0.96rem; color: var(--color-text); position:relative; padding: 0.35rem 0.1rem; transition: color .2s ease; } .main-nav a::after{ content:''; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background: var(--color-gold); transition: right .25s ease; } .main-nav a:hover{ color: var(--color-ink); } .main-nav a:hover::after, .main-nav a.is-active::after{ right:0; } .main-nav a.is-active{ color: var(--color-ink); } .header-actions{ display:flex; align-items:center; gap: 0.35rem; flex-shrink:0; } .cart-btn{ position:relative; } .cart-badge{ position:absolute; top:2px; right:2px; min-width:18px; height:18px; padding:0 4px; border-radius:999px; background: var(--color-emerald-dark); /* var(--color-emerald) is only ~3.45:1 against white text */ color:#fff; font-size:0.65rem; font-weight:700; display:flex; align-items:center; justify-content:center; line-height:1; transform: scale(0); transition: transform .2s ease; } .cart-badge.is-visible{ transform: scale(1); } /* Burger button — hidden by default, shown at <=991px */ .burger-btn{ display:none; width:44px; height:44px; border-radius:50%; align-items:center; justify-content:center; flex-direction:column; gap:5px; } .burger-btn span{ display:block; width:22px; height:2px; background: var(--color-ink); border-radius:2px; transition: transform .3s ease, opacity .3s ease; } .burger-btn.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); } .burger-btn.is-open span:nth-child(2){ opacity:0; } .burger-btn.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } /* Mobile nav drawer */ .mobile-nav-overlay{ position:fixed; inset:0; background: rgba(15,27,51,0.45); opacity:0; visibility:hidden; transition: opacity .3s ease, visibility .3s ease; z-index: 600; } .mobile-nav-overlay.is-open{ opacity:1; visibility:visible; } .mobile-nav{ position:fixed; top:0; right:0; height:100vh; /* not 100% — that resolves against whatever ends up being the fixed-position containing block, which is fragile; 100vh always means the actual viewport height */ width: min(84vw, 360px); background: var(--color-cream); box-shadow: var(--shadow-hover); transform: translateX(100%); transition: transform .35s ease; z-index: 700; display:flex; flex-direction:column; padding: 1.5rem 1.5rem 2rem; overflow-y:auto; } .mobile-nav.is-open{ transform: translateX(0); } .mobile-nav__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 2rem; } .mobile-nav__close{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; } .mobile-nav__close:hover{ background: var(--color-cream-2); } .mobile-nav a{ display:block; font-family: var(--font-heading); font-size: 1.3rem; font-weight:600; padding: 0.85rem 0; border-bottom: 1px solid var(--color-border); color: var(--color-ink); } .mobile-nav a.is-active{ color: var(--color-gold); } .mobile-nav__foot{ margin-top: 1.5rem; display:flex; gap: 0.75rem; } /* ------------------------------------------------------------------------- 7. Search panel + autosuggest ------------------------------------------------------------------------- */ .search-panel{ position:absolute; top: 100%; left:0; right:0; background: var(--color-white); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-soft); padding: 1.25rem 0; transform: translateY(-8px); opacity:0; visibility:hidden; transition: opacity .25s ease, transform .25s ease, visibility .25s ease; z-index: 400; } .search-panel.is-open{ transform: translateY(0); opacity:1; visibility:visible; } .search-panel__inner{ position:relative; } .search-input-wrap{ display:flex; align-items:center; gap:0.75rem; border: 1.5px solid var(--color-border); border-radius: 999px; padding: 0.65rem 1.25rem; background: var(--color-cream); } .search-input-wrap svg{ width:20px; height:20px; flex-shrink:0; color: var(--color-text-muted); } .search-input-wrap input{ flex:1; border:0; background:transparent; outline:none; font-size: 1rem; color: var(--color-text); } /* The input itself has no visible border to show a focus ring on, so put the indicator on the pill wrapper instead — outline:none above must never ship without this, or keyboard users lose focus visibility. */ .search-input-wrap:focus-within{ border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(201,162,39,0.3); } .search-close{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .search-close:hover{ background: var(--color-cream-2); } .autosuggest-list{ margin-top: 0.75rem; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); max-height: 360px; overflow-y:auto; display:none; } .autosuggest-list.is-open{ display:block; } .autosuggest-item{ display:flex; align-items:center; gap:0.9rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--color-border); transition: background-color .15s ease; cursor:pointer; } .autosuggest-item:last-child{ border-bottom:0; } .autosuggest-item:hover, .autosuggest-item.is-active{ background: var(--color-cream-2); } .autosuggest-item img{ width:38px; height:52px; object-fit:cover; border-radius:4px; flex-shrink:0; background: var(--color-cream-2); } .autosuggest-item__title{ font-weight:600; font-size:0.92rem; color: var(--color-ink); } .autosuggest-item__meta{ font-size:0.78rem; color: var(--color-text-muted); } .autosuggest-empty{ padding: 0.9rem 1rem; color: var(--color-text-muted); font-size:0.9rem; } /* ------------------------------------------------------------------------- 9. Cookie consent banner + modal ------------------------------------------------------------------------- */ .cookie-banner{ position: fixed; left: 16px; right:16px; bottom:16px; max-width: 620px; margin: 0 auto; background: var(--color-ink); color: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-hover); padding: 1.4rem 1.5rem; z-index: 900; transform: translateY(120%); opacity: 0; transition: transform .4s ease, opacity .4s ease; } .cookie-banner.is-visible{ transform: translateY(0); opacity:1; } .cookie-banner p{ font-size: 0.9rem; color: rgba(255,255,255,0.85); margin-bottom: 1rem; } .cookie-banner a{ color: var(--color-gold-2); text-decoration: underline; } .cookie-banner__actions{ display:flex; flex-wrap:wrap; gap:0.6rem; } .modal-overlay{ position:fixed; inset:0; background: rgba(15,27,51,0.55); display:flex; align-items:center; justify-content:center; padding: 1.5rem; opacity:0; visibility:hidden; transition: opacity .25s ease, visibility .25s ease; z-index: 1000; } .modal-overlay.is-open{ opacity:1; visibility:visible; } .modal-box{ background: var(--color-white); border-radius: var(--radius-lg); max-width: 480px; width:100%; max-height: 88vh; overflow-y:auto; padding: 2rem; box-shadow: var(--shadow-hover); transform: translateY(16px) scale(0.98); transition: transform .3s ease; } .modal-overlay.is-open .modal-box{ transform: translateY(0) scale(1); } .modal-box h3{ font-size: 1.4rem; margin-bottom: 1rem; } .modal-box .modal-close{ position:absolute; top:1.1rem; right:1.1rem; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; } .modal-box .modal-close:hover{ background: var(--color-cream-2); } .modal-box{ position:relative; } .toggle-row{ display:flex; align-items:center; justify-content:space-between; padding: 0.9rem 0; border-bottom: 1px solid var(--color-border); gap: 1rem; } .toggle-row__label{ font-weight:600; font-size:0.95rem; } .toggle-row__desc{ font-size:0.82rem; color: var(--color-text-muted); margin-top:0.15rem; } .switch{ position:relative; width:46px; height:26px; flex-shrink:0; } .switch input{ opacity:0; width:0; height:0; position:absolute; } .switch__track{ position:absolute; inset:0; background: var(--color-border); border-radius:999px; transition: background-color .2s ease; } .switch__track::after{ content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; background:#fff; border-radius:50%; transition: transform .2s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.25); } .switch input:checked + .switch__track{ background: var(--color-emerald); } .switch input:checked + .switch__track::after{ transform: translateX(20px); } .switch input:disabled + .switch__track{ background: var(--color-gold); opacity:0.7; cursor:not-allowed; } /* ------------------------------------------------------------------------- 10. Footer ------------------------------------------------------------------------- */ .site-footer{ background: var(--color-ink); color: rgba(255,255,255,0.78); padding: clamp(3rem, 2.4rem + 2.4vw, 4.5rem) 0 2rem; margin-top: clamp(3rem, 2.4rem + 3vw, 6rem); } .footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,0.12); } .footer-brand .logo__solv{ color: var(--color-white); } .footer-brand p{ margin-top:1rem; font-size:0.9rem; color: rgba(255,255,255,0.6); max-width: 320px; } .social-icons{ display:flex; gap:0.7rem; margin-top:1.35rem; } .social-icons a{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.75); transition: background-color .2s ease, color .2s ease, transform .2s ease; } .social-icons a:hover{ background: var(--color-gold); color: var(--color-ink); transform: translateY(-3px); } .social-icons svg{ width:19px; height:19px; } .footer-col h4{ color: var(--color-white); font-family: var(--font-body); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1.1rem; } .footer-col a{ display:block; font-size: 0.92rem; color: rgba(255,255,255,0.72); padding: 0.35rem 0; transition: color .2s ease; } .footer-col a:hover{ color: var(--color-gold-2); } .footer-contact address{ font-size:0.92rem; color: rgba(255,255,255,0.72); margin-bottom: 0.9rem; line-height:1.6; } .footer-contact a.tel-link{ color: var(--color-gold-2); font-weight:600; display:inline-block; margin-bottom:0.9rem; } .footer-map{ border-radius: var(--radius-sm); overflow:hidden; border: 1px solid rgba(255,255,255,0.15); margin-top: 0.75rem; } .footer-map iframe{ width:100%; height:150px; border:0; display:block; } .footer-bottom{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap: 1rem; padding-top: 1.75rem; font-size: 0.85rem; color: rgba(255,255,255,0.55); } .payment-badges{ display:flex; gap:0.7rem; align-items:center; flex-wrap:wrap; } .payment-badges img, .payment-badges svg{ width:62px; height:40px; flex-shrink:0; } /* ------------------------------------------------------------------------- 11. Cards ------------------------------------------------------------------------- */ .product-card{ background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow:hidden; display:flex; flex-direction:column; transition: transform .3s ease, box-shadow .3s ease; height:100%; } .product-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-hover); } .product-card__cover{ aspect-ratio: 3/4; background: var(--color-cream-2); overflow:hidden; position:relative; } .product-card__cover img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; } .product-card:hover .product-card__cover img{ transform: scale(1.06); } .product-card__badge{ position:absolute; top:10px; left:10px; background: var(--color-gold); color: var(--color-ink); font-size: 0.68rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; padding: 0.25rem 0.6rem; border-radius: 999px; } .product-card__badge.fresh{ background: var(--color-emerald-dark); color:#fff; left:auto; right:10px; } .product-card__body{ padding: 1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; flex:1; gap:0.4rem; } .product-card__topic{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color: var(--color-emerald-dark); font-weight:700; } .product-card__title{ font-size: 1.05rem; line-height:1.3; } .product-card__title a{ transition: color .2s ease; } .product-card__title a:hover{ color: var(--color-gold); } .product-card__author{ font-size:0.85rem; color: var(--color-text-muted); } .product-card__excerpt{ font-size:0.85rem; color: var(--color-text-muted); flex:1; } .stars{ display:inline-flex; align-items:center; gap:0.2rem; color: var(--color-gold); font-size:0.85rem; } .stars svg{ width:14px; height:14px; } .stars .stars__value{ color: var(--color-text-muted); margin-left:0.25rem; font-size:0.8rem; } .product-card__footrow{ display:flex; align-items:center; justify-content:space-between; margin-top:0.5rem; } .product-card__price{ font-family: var(--font-heading); font-weight:700; font-size:1.15rem; color: var(--color-ink); } /* Bestseller carousel row */ .carousel{ display:flex; gap: 1.25rem; overflow-x:auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; scrollbar-width: thin; } .carousel::-webkit-scrollbar{ height:8px; } .carousel::-webkit-scrollbar-thumb{ background: var(--color-border); border-radius:8px; } .carousel .product-card{ flex: 0 0 250px; width: 250px; scroll-snap-align: start; } .carousel .product-card .product-card__cover{ aspect-ratio: 3/4; } .carousel .product-card .product-card__body{ padding: 1.15rem 1.25rem 1.4rem; gap:0.5rem; } .carousel .product-card .product-card__title{ min-height: 2.6em; } .carousel .product-card .product-card__footrow{ flex-direction: column; align-items: stretch; gap: 0.65rem; margin-top: 0.35rem; } .carousel .product-card .product-card__price{ font-size: 1.2rem; } .carousel .product-card [data-add-to-cart]{ width: 100%; text-align:center; white-space: nowrap; } .carousel-controls{ display:flex; gap:0.6rem; justify-content:flex-end; margin-bottom:1rem; } .carousel-arrow{ width:44px; height:44px; border-radius:50%; border:1.5px solid var(--color-border); display:flex; align-items:center; justify-content:center; transition: background-color .2s ease, transform .2s ease; } .carousel-arrow:hover{ background: var(--color-ink); color:#fff; transform: translateY(-2px); } .carousel-arrow svg{ width:18px; height:18px; } /* Why-it-matters icon cards */ .icon-card{ background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.75rem 1.5rem; transition: transform .3s ease, box-shadow .3s ease; } .icon-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-hover); } .icon-card__icon{ width:52px; height:52px; margin-bottom:1.1rem; } .icon-card h3{ font-size: 1.15rem; margin-bottom:0.6rem; } .icon-card p{ font-size:0.92rem; color: var(--color-text-muted); } /* Benefit blocks */ .benefit-card{ display:flex; gap:1rem; align-items:flex-start; } .benefit-card__icon{ width:44px; height:44px; flex-shrink:0; } .benefit-card h3{ font-size:1.05rem; margin-bottom:0.4rem; } .benefit-card p{ font-size:0.9rem; color: var(--color-text-muted); } /* Testimonials */ .testimonial-card{ background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.6rem; display:flex; flex-direction:column; gap:0.9rem; height:100%; } .testimonial-card__quote{ font-family: var(--font-heading); font-style:italic; color: var(--color-ink); font-size:1.02rem; } .testimonial-card__who{ display:flex; align-items:center; gap:0.7rem; margin-top:auto; } .testimonial-avatar{ width:38px; height:38px; border-radius:50%; flex-shrink:0; } .testimonial-card__name{ font-weight:700; font-size:0.88rem; } .testimonial-card__meta{ font-size:0.78rem; color: var(--color-text-muted); } /* Blog teaser cards */ .blog-card{ background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow:hidden; transition: transform .3s ease, box-shadow .3s ease; height:100%; display:flex; flex-direction:column; } .blog-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-hover); } .blog-card__cover{ aspect-ratio:16/10; background: var(--color-cream-2); overflow:hidden; } .blog-card__cover img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s ease; } .blog-card:hover .blog-card__cover img{ transform: scale(1.05); } .blog-card__body{ padding:1.3rem 1.4rem; display:flex; flex-direction:column; gap:0.6rem; flex:1; } .blog-card__body h3{ font-size:1.1rem; } .blog-card__body p{ font-size:0.88rem; color: var(--color-text-muted); flex:1; } /* ------------------------------------------------------------------------- 12. Hero ------------------------------------------------------------------------- */ .hero{ position:relative; background: linear-gradient(135deg, var(--color-ink) 0%, var(--color-navy-2) 55%, #1c3355 100%); color: var(--color-white); overflow:hidden; } .hero::before{ content:''; position:absolute; inset:0; background: radial-gradient(circle at 85% 20%, rgba(201,162,39,0.28), transparent 55%), radial-gradient(circle at 15% 85%, rgba(31,157,107,0.22), transparent 50%); pointer-events:none; } .hero__inner{ position:relative; display:grid; grid-template-columns: 1.1fr 0.9fr; align-items:center; gap: 2.5rem; padding: clamp(3.5rem, 3rem + 3vw, 6.5rem) 0 clamp(3rem, 2.5rem + 2vw, 5rem); } .hero__eyebrow{ display:inline-flex; align-items:center; gap:0.5rem; font-size:0.78rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color: var(--color-gold-2); margin-bottom:1.25rem; } .hero h1{ color: var(--color-white); font-size: clamp(2.2rem, 1.6rem + 3vw, 3.6rem); line-height:1.1; margin-bottom: 1.25rem; } .hero h1 em{ color: var(--color-gold-2); font-style:italic; } .hero p.hero__sub{ font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem); color: rgba(255,255,255,0.82); max-width: 46ch; margin-bottom: 2rem; } .hero__ctas{ display:flex; flex-wrap:wrap; gap:1rem; } .hero__art{ position:relative; } .hero__art svg{ width:100%; height:auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.35)); } .hero__art img{ width:100%; height:auto; display:block; border-radius: var(--radius-lg); filter: drop-shadow(0 20px 40px rgba(0,0,0,0.35)); } /* ------------------------------------------------------------------------- 13. Generic sections ------------------------------------------------------------------------- */ .bg-cream-2{ background: var(--color-cream-2); } .bg-ink{ background: var(--color-ink); color: rgba(255,255,255,0.85); } .bg-ink h2, .bg-ink h3{ color: var(--color-white); } .body-copy{ max-width: 72ch; } .body-copy p{ margin-bottom: 1.1rem; color: var(--color-text); } .body-copy p.lead{ font-size:1.1rem; color: var(--color-text); } .body-copy h3{ margin: 1.8rem 0 0.6rem; font-size:1.3rem; } .case-study{ background: var(--color-white); border-left: 4px solid var(--color-gold); border-radius: var(--radius-sm); padding: 1.25rem 1.5rem; margin: 1.5rem 0; box-shadow: var(--shadow-soft); } /* Lead magnet banner */ .lead-magnet{ background: linear-gradient(120deg, var(--color-emerald) 0%, var(--color-emerald-dark) 100%); border-radius: var(--radius-lg); color: var(--color-white); padding: clamp(2.2rem, 1.8rem + 2vw, 3.5rem); display:grid; grid-template-columns: 1.2fr 1fr; gap:2.5rem; align-items:center; } .lead-magnet h2{ color:#fff; font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.3rem); margin-bottom:0.75rem; } .lead-magnet p{ color: rgba(255,255,255,0.88); margin-bottom:1.25rem; } .lead-form{ display:flex; gap:0.6rem; flex-wrap:wrap; margin-bottom:1rem; } .lead-form input{ flex:1; min-width:200px; padding: 0.85rem 1.2rem; border-radius:999px; border:0; font-size:0.95rem; } .lead-form-msg{ font-size:0.88rem; font-weight:600; color: var(--color-gold-2); min-height:1.2em; } .lead-magnet__secondary{ display:flex; flex-direction:column; gap:1rem; align-items:flex-start; } /* Tabs */ .tabs__nav{ display:flex; gap:0.5rem; border-bottom: 1px solid var(--color-border); margin-bottom:1.5rem; flex-wrap:wrap; } .tabs__btn{ padding: 0.85rem 1.4rem; font-weight:600; font-size:0.92rem; color: var(--color-text-muted); border-bottom: 2px solid transparent; margin-bottom:-1px; } .tabs__btn.is-active{ color: var(--color-ink); border-bottom-color: var(--color-gold); } .tabs__panel{ display:none; } .tabs__panel.is-active{ display:block; } /* Generic form controls */ .form-group{ margin-bottom:1.1rem; } .form-group label{ display:block; font-weight:600; font-size:0.88rem; margin-bottom:0.4rem; } .form-group input, .form-group select, .form-group textarea{ width:100%; padding: 0.75rem 1rem; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-white); transition: border-color .2s ease; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus{ outline:none; border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(201,162,39,0.3); } /* Generic keyboard-focus fallback for anything else that doesn't define its own focus treatment (links, cards, icon buttons, quiz options, etc.) — only shown for keyboard focus, not mouse clicks. */ :focus-visible{ outline: 2px solid var(--color-gold); outline-offset: 2px; } /* Skip-to-content link: invisible until a keyboard user tabs to it, then jumps straight past the header/nav to
. */ .skip-link{ position:absolute; top:-48px; left:12px; z-index: 1100; background: var(--color-ink); color: #fff; padding: 0.75rem 1.25rem; border-radius: var(--radius-sm); font-weight:700; font-size:0.92rem; transition: top .2s ease; } .skip-link:focus{ top:12px; outline: 2px solid var(--color-gold); outline-offset: 2px; } /* Respect the OS-level "reduce motion" preference: turn off the scroll- reveal fade/slide-up animations and other decorative transitions for users who've asked for less motion, without breaking functionality — content is simply shown immediately at full opacity instead. */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal{ opacity:1 !important; transform:none !important; } } .radio-row{ display:flex; gap:1.5rem; flex-wrap:wrap; } .radio-row label{ display:flex; align-items:center; gap:0.5rem; font-weight:500; font-size:0.92rem; } .form-success{ background: rgba(31,157,107,0.1); border: 1px solid var(--color-emerald); color: var(--color-emerald-dark); border-radius: var(--radius-sm); padding: 1rem 1.2rem; font-weight:600; font-size:0.92rem; } /* ------------------------------------------------------------------------- 14. Shop page ------------------------------------------------------------------------- */ .shop-layout{ display:grid; grid-template-columns: 280px 1fr; gap: 2.5rem; align-items:flex-start; } .filters{ background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.5rem; position: sticky; top: calc(var(--header-h) + 20px); } .filters h3{ font-size:1.1rem; margin-bottom:1rem; } .filter-group{ margin-bottom:1.6rem; padding-bottom:1.4rem; border-bottom:1px solid var(--color-border); } .filter-group:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0; } .filter-group h4{ font-family: var(--font-body); font-size:0.82rem; text-transform:uppercase; letter-spacing:0.05em; color: var(--color-text-muted); margin-bottom:0.75rem; } .filter-option{ display:flex; align-items:center; gap:0.6rem; padding:0.35rem 0; font-size:0.92rem; cursor:pointer; } .filter-option input{ width:16px; height:16px; accent-color: var(--color-emerald); cursor:pointer; } .price-range-row{ display:flex; align-items:center; gap:0.6rem; } .price-range-row input[type="number"]{ width: 70px; padding:0.45rem 0.6rem; border:1.5px solid var(--color-border); border-radius: var(--radius-sm); } .price-range-row input[type="range"]{ width:100%; accent-color: var(--color-gold); } .shop-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom: 1.5rem; } .result-count{ font-size:0.9rem; color: var(--color-text-muted); } .sort-select{ padding: 0.6rem 1rem; border: 1.5px solid var(--color-border); border-radius: 999px; background: var(--color-white); font-weight:600; font-size:0.88rem; } .product-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .empty-state{ text-align:center; padding: 3.5rem 1.5rem; background: var(--color-white); border: 1px dashed var(--color-border); border-radius: var(--radius-md); } .empty-state h3{ margin-bottom:0.6rem; } .empty-state p{ color: var(--color-text-muted); margin-bottom:1.3rem; } .clear-filters-btn{ display:block; width:100%; margin-top:0.5rem; } /* ------------------------------------------------------------------------- 15. Product page ------------------------------------------------------------------------- */ .product-detail{ display:grid; grid-template-columns: 380px 1fr; gap: 3rem; align-items:flex-start; } .product-detail__cover{ border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow-hover); aspect-ratio: 3/4; background: var(--color-cream-2); position: sticky; top: calc(var(--header-h) + 20px); } .product-detail__cover img{ width:100%; height:100%; object-fit:cover; } .product-detail__topic{ font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; color: var(--color-emerald-dark); font-weight:700; margin-bottom:0.6rem; } .product-detail h1{ font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); margin-bottom:0.5rem; } .product-detail__author{ font-size:1.05rem; color: var(--color-text-muted); margin-bottom:0.9rem; } .product-detail__meta-row{ display:flex; align-items:center; gap:1.2rem; margin-bottom:1.3rem; flex-wrap:wrap; } .product-detail__price{ font-family: var(--font-heading); font-size:1.9rem; font-weight:700; color: var(--color-ink); } .product-detail__desc{ color: var(--color-text); margin-bottom:1.6rem; max-width:60ch; } .qty-selector{ display:inline-flex; align-items:center; border: 1.5px solid var(--color-border); border-radius:999px; overflow:hidden; } .qty-selector button{ width:40px; height:44px; font-size:1.1rem; font-weight:700; } .qty-selector button:hover{ background: var(--color-cream-2); } .qty-selector button:disabled{ opacity:0.35; cursor:not-allowed; background:transparent; } .qty-selector input{ width:44px; height:44px; text-align:center; border:0; border-left:1px solid var(--color-border); border-right:1px solid var(--color-border); background:transparent; } .product-actions{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; } .amazon-link{ font-weight:600; color: var(--color-emerald-dark); text-decoration:underline; font-size:0.92rem; } .add-msg{ font-size:0.85rem; color: var(--color-emerald-dark); font-weight:600; min-height:1.2em; } .our-take{ background: var(--color-cream-2); border-radius: var(--radius-sm); padding: 1rem 1.2rem; font-size: 0.92rem; margin-top: 1rem; } .our-take strong{ display:inline; color: var(--color-ink); } .review-block p{ margin-bottom: 1rem; color: var(--color-text); } .not-found{ text-align:center; padding: 5rem 1.5rem; } .not-found h1{ margin-bottom:1rem; } .not-found p{ color: var(--color-text-muted); margin-bottom:1.5rem; } /* ------------------------------------------------------------------------- 16. Cart page ------------------------------------------------------------------------- */ .cart-layout{ display:grid; grid-template-columns: 1fr 340px; gap: 2.5rem; align-items:flex-start; } .cart-line{ display:grid; grid-template-columns: 70px 1fr auto auto; gap:1.2rem; align-items:center; padding: 1.2rem 0; border-bottom: 1px solid var(--color-border); } .cart-line__cover{ width:70px; height:96px; border-radius:6px; overflow:hidden; background: var(--color-cream-2); } .cart-line__cover img{ width:100%; height:100%; object-fit:cover; } .cart-line__title{ font-weight:700; font-size:1rem; margin-bottom:0.2rem; } .cart-line__author{ font-size:0.85rem; color: var(--color-text-muted); } .cart-line__unit{ font-size:0.82rem; color: var(--color-text-muted); margin-top:0.35rem; } .cart-line__qty{ display:flex; flex-direction:column; align-items:center; gap:0.5rem; } .cart-line__remove{ font-size:0.78rem; color: var(--color-text-muted); text-decoration:underline; } .cart-line__subtotal{ text-align:right; font-family: var(--font-heading); font-weight:700; font-size:1.1rem; white-space:nowrap; } .cart-summary{ background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.5rem; position: sticky; top: calc(var(--header-h) + 20px); } .cart-summary__row{ display:flex; justify-content:space-between; margin-bottom:0.75rem; font-size:0.95rem; } .cart-summary__row.total{ font-weight:700; font-size:1.15rem; border-top:1px solid var(--color-border); padding-top:0.9rem; margin-top:0.5rem; } .cart-empty{ text-align:center; padding: 4rem 1.5rem; } .cart-empty svg, .cart-empty img{ width:80px; height:80px; margin: 0 auto 1.5rem; display:block; } .checkout-form-wrap{ margin-top:1.5rem; } .order-confirm{ background: rgba(31,157,107,0.1); border: 1px solid var(--color-emerald); border-radius: var(--radius-md); padding: 2rem; text-align:center; } .order-confirm svg{ width:56px; height:56px; margin:0 auto 1rem; color: var(--color-emerald); } /* ------------------------------------------------------------------------- 17. Scroll-reveal ------------------------------------------------------------------------- */ .reveal{ opacity:0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; } .reveal.is-visible{ opacity:1; transform: translateY(0); } .reveal-delay-1{ transition-delay: .08s; } .reveal-delay-2{ transition-delay: .16s; } .reveal-delay-3{ transition-delay: .24s; } .reveal-delay-4{ transition-delay: .32s; } /* ------------------------------------------------------------------------- 18. Stub pages (privacy/cookie/terms) ------------------------------------------------------------------------- */ .stub-page{ padding: clamp(3rem,2.5rem+3vw,6rem) 0; min-height:40vh; } .stub-page h1{ font-size: clamp(1.8rem,1.5rem+1.6vw,2.6rem); margin-bottom:1.2rem; } .stub-page p{ max-width:60ch; color: var(--color-text-muted); font-size:1.05rem; } /* ---- Legal / policy pages ---- */ .legal-page{ padding: clamp(2.5rem,2rem+2.5vw,5rem) 0 clamp(3rem,2.5rem+3vw,6rem); } .legal-page .legal-inner{ max-width: 760px; margin: 0 auto; } .legal-page .legal-updated{ color: var(--color-text-muted); font-size: 0.92rem; margin-bottom: 2.2rem; } .legal-page h1{ font-size: clamp(1.9rem,1.5rem+1.8vw,2.7rem); margin-bottom: 0.6rem; } .legal-page h2{ font-family: var(--font-heading); font-size: clamp(1.25rem,1.1rem+0.6vw,1.55rem); margin: 2.2rem 0 0.9rem; color: var(--color-ink); } .legal-page h3{ font-size: 1.05rem; margin: 1.4rem 0 0.5rem; color: var(--color-ink); } .legal-page p{ color: var(--color-text); line-height: 1.75; margin-bottom: 1rem; max-width: 72ch; } .legal-page ul, .legal-page ol{ margin: 0 0 1.2rem 1.3rem; color: var(--color-text); line-height: 1.75; } .legal-page li{ margin-bottom: 0.5rem; } .legal-page a{ color: var(--color-emerald-dark); text-decoration: underline; } .legal-page table{ width:100%; border-collapse: collapse; margin: 1rem 0 1.8rem; font-size: 0.95rem; } .legal-page th, .legal-page td{ text-align:left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--color-border); vertical-align: top; } .legal-page th{ font-family: var(--font-heading); color: var(--color-ink); } .legal-page .legal-note{ background: var(--color-cream-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 1rem 1.2rem; margin: 1.4rem 0; font-size: 0.95rem; } /* Wide reference tables (cookie-policy.html) never had a mobile treatment — 3-4 columns of prose text squeezed into a 300-420px cell each just wraps into an unreadable ladder. Below 700px, drop the grid entirely and restack each row as a labeled card instead. */ @media (max-width: 700px){ .legal-page table.table-stack{ border:0; } .legal-page table.table-stack thead, .legal-page table.table-stack tr:first-child{ display:none; } .legal-page table.table-stack tr{ display:block; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.9rem 1rem; margin-bottom: 0.9rem; background: var(--color-white); } .legal-page table.table-stack tr:last-child{ margin-bottom:1.8rem; } .legal-page table.table-stack td{ display:block; padding: 0.35rem 0; border-bottom:0; } .legal-page table.table-stack td::before{ content: attr(data-label); display:block; font-family: var(--font-heading); font-size: 0.78rem; font-weight:700; text-transform: uppercase; letter-spacing:0.03em; color: var(--color-emerald-dark); margin-bottom:0.15rem; } } /* ========================================================================== RESPONSIVE BREAKPOINTS ========================================================================== */ /* ---- Tablet / burger breakpoint : 991px ---- */ @media (max-width: 991px){ .main-nav{ display:none; } .burger-btn{ display:flex; } /* 4- and 3-up card grids get cramped on tablets — step them down before the 640px breakpoint takes them to their final mobile layout. */ .grid-4{ grid-template-columns: repeat(2, 1fr); } .grid-3{ grid-template-columns: repeat(2, 1fr); } .hero__inner{ grid-template-columns: 1fr; text-align:center; } .hero__ctas{ justify-content:center; } .hero__art{ max-width: 420px; margin: 0 auto; } .footer-grid{ grid-template-columns: 1fr 1fr; gap:2rem; } .shop-layout{ grid-template-columns: 1fr; } .filters{ position:static; } .product-grid{ grid-template-columns: repeat(2, 1fr); } .product-detail{ grid-template-columns: 1fr; } .product-detail__cover{ position:static; max-width:340px; margin:0 auto; } .cart-layout{ grid-template-columns: 1fr; } .cart-summary{ position:static; } .lead-magnet{ grid-template-columns: 1fr; text-align:center; } .lead-magnet__secondary{ align-items:center; } .lead-form{ justify-content:center; } .blog-grid{ grid-template-columns: 1fr; } .also-like-grid{ grid-template-columns: 1fr; } .team-grid{ grid-template-columns: repeat(2, 1fr); } .review-grid{ grid-template-columns: repeat(2, 1fr); } .quiz-steps{ grid-template-columns: 1fr; } .quiz-result__books{ grid-template-columns: repeat(2, 1fr); } } /* ---- Small tablet ---- */ @media (max-width: 800px){ .product-grid{ grid-template-columns: repeat(2, 1fr); } .footer-bottom{ flex-direction:column; align-items:flex-start; } } /* ---- Mobile ---- */ @media (max-width: 640px){ .container{ padding: 0 18px; } .grid-4{ grid-template-columns: repeat(2, 1fr); } .grid-3{ grid-template-columns: 1fr; } .grid-2{ grid-template-columns: 1fr; } .footer-grid{ grid-template-columns: 1fr; gap:2rem; } .product-grid{ grid-template-columns: repeat(2, 1fr); gap:1rem; } .team-grid{ grid-template-columns: 1fr; } .review-grid{ grid-template-columns: 1fr; } .quiz-result__books{ grid-template-columns: 1fr; } .article-cta{ flex-direction:column; align-items:stretch; text-align:center; } .cart-line{ grid-template-columns: 56px 1fr; grid-template-areas: "cover title" "cover qty" "cover subtotal"; row-gap:0.5rem; } .cart-line__cover{ grid-area: cover; width:56px; height:78px; } .cart-line__info{ grid-area: title; } .cart-line__qty{ grid-area: qty; flex-direction:row; align-items:center; } .cart-line__subtotal{ grid-area: subtotal; text-align:left; } /* The button's white-space:nowrap text ("Send me the checklist") and the input's min-width:200px were fighting for space on real mobile widths between 421-640px (e.g. 428/430px logical-width phones) — the old fix only stacked below 420px. Stack the whole range instead of relying on wrap, which just crammed both elements edge-to-edge without room. */ .lead-form{ flex-direction:column; } .lead-form input{ min-width:0; width:100%; } .lead-form .btn{ width:100%; white-space:normal; } /* Same nowrap-button overflow problem, but for the sibling "Book a Free 15-Minute Money Consultation" button — it lives outside .lead-form in .lead-magnet__secondary, so the fix above never reached it. Its text alone is wider than a 320-375px phone screen with white-space:nowrap and no width limit, which pushes the whole section into horizontal scroll. */ .lead-magnet__secondary{ width:100%; } .lead-magnet__secondary .btn{ width:100%; white-space:normal; } } /* ========================================================================== 19. New pages: Blog index/filters, Article layout, About team, Reviews filter/case-studies, Quiz ========================================================================== */ /* --- Blog filter bar (shop-filter visual language, single row) --- */ .blog-filter-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.25rem 1.5rem; margin-bottom: 2rem; } .blog-filter-bar .search-input-wrap{ flex:1; min-width:220px; width:100%; border-color: var(--color-border); } .blog-topic-pills{ display:flex; flex-wrap:wrap; gap:0.5rem; } .blog-topic-pill{ padding:0.5rem 1rem; border-radius:999px; border:1.5px solid var(--color-border); font-weight:600; font-size:0.85rem; color: var(--color-text-muted); background: var(--color-cream); transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .blog-topic-pill.is-active{ background: var(--color-ink); color: var(--color-white); border-color: var(--color-ink); } .blog-topic-pill:hover{ border-color: var(--color-ink); } .blog-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:1.5rem; } .blog-grid .blog-card{ height:100%; } .blog-card__meta-row{ display:flex; align-items:center; gap:0.6rem; font-size:0.78rem; color: var(--color-text-muted); } /* --- Article page --- */ .article-header{ max-width: 78ch; margin: 0 auto 2rem; text-align:center; } .article-header .eyebrow{ display:block; } .article-header h1{ font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem); margin: 0.6rem 0 1rem; } .article-byline{ display:flex; align-items:center; justify-content:center; gap:0.6rem; color: var(--color-text-muted); font-size:0.9rem; } .article-byline .dot{ opacity:0.5; } .article-cover{ max-width: 760px; margin: 0 auto 2.5rem; border-radius: var(--radius-lg); overflow:hidden; background: var(--color-cream-2); aspect-ratio: 16/7; } .article-cover img{ width:100%; height:100%; object-fit:cover; display:block; } .article-body{ max-width: 68ch; margin: 0 auto; } .article-body h2{ font-size: 1.5rem; margin: 2rem 0 0.8rem; } .article-body p{ margin-bottom: 1.1rem; color: var(--color-text); } .article-body ul, .article-body ol{ margin: 0 0 1.2rem 0.2rem; padding-left: 1.3rem; } .article-body li{ margin-bottom:0.55rem; color: var(--color-text); list-style: disc; } .article-body ol li{ list-style: decimal; } .article-body blockquote{ border-left: 4px solid var(--color-gold); padding: 0.2rem 0 0.2rem 1.2rem; font-family: var(--font-heading); font-style: italic; font-size: 1.1rem; color: var(--color-ink); margin: 1.5rem 0; } .article-cta{ background: var(--color-cream-2); border-radius: var(--radius-md); padding: 1.5rem 1.75rem; margin: 2rem 0; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; } .article-cta p{ margin:0; font-weight:600; color: var(--color-ink); } .also-like{ max-width: 900px; margin: 3rem auto 0; } .also-like h3{ margin-bottom:1.25rem; text-align:center; } .also-like-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:1.5rem; } /* --- About page: values + team --- */ .value-card{ background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.75rem; } .value-card__num{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background: var(--color-gold); color: var(--color-ink); font-family: var(--font-heading); font-weight:700; margin-bottom:1rem; } .value-card h3{ margin-bottom:0.5rem; font-size:1.15rem; } .value-card p{ color: var(--color-text-muted); font-size:0.92rem; } .team-art{ border-radius: var(--radius-lg); overflow:hidden; margin-bottom: 2.5rem; background: var(--color-cream-2); } .team-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:1.5rem; } .team-card{ background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.5rem; text-align:center; } .team-card__avatar{ width:64px; height:64px; margin: 0 auto 1rem; border-radius:50%; background: var(--color-cream-2); padding:12px; } .team-card h3{ font-size:1.05rem; margin-bottom:0.2rem; } .team-card__role{ font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color: var(--color-emerald-dark); margin-bottom:0.6rem; display:block; } .team-card p{ font-size:0.88rem; color: var(--color-text-muted); } /* --- Reviews page --- */ .reviews-hero-art{ max-width:420px; margin:0 auto 2rem; } .age-filter-row{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-bottom:2rem; } .age-filter-btn{ padding:0.6rem 1.3rem; border-radius:999px; border:1.5px solid var(--color-border); font-weight:600; font-size:0.9rem; color: var(--color-text); background: var(--color-white); transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; } .age-filter-btn:hover{ transform: translateY(-2px); } .age-filter-btn.is-active{ background: var(--color-emerald-dark); color:#fff; border-color: var(--color-emerald-dark); } .review-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1.5rem; margin-bottom:3rem; } .review-card{ background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.5rem; display:flex; flex-direction:column; gap:0.7rem; } .review-card__head{ display:flex; align-items:center; justify-content:space-between; gap:0.5rem; } .review-card__name{ font-weight:700; font-size:0.95rem; } .review-card__meta{ font-size:0.78rem; color: var(--color-text-muted); } .review-card__book{ font-size:0.78rem; font-weight:700; color: var(--color-emerald-dark); text-transform:uppercase; letter-spacing:0.03em; } .review-card__text{ font-size:0.92rem; color: var(--color-text); flex:1; } .review-empty{ text-align:center; padding:2.5rem; color: var(--color-text-muted); } .case-study-block{ background: var(--color-white); border: 1px solid var(--color-border); border-left: 4px solid var(--color-emerald); border-radius: var(--radius-md); padding: 1.75rem 2rem; margin-bottom: 1.75rem; } .case-study-block h3{ margin-bottom:0.9rem; font-size:1.25rem; } .case-study-block p{ margin-bottom:0.9rem; color: var(--color-text); font-size:0.95rem; } .case-study-block p:last-child{ margin-bottom:0; } /* --- Quiz page --- */ .quiz-hero-art{ max-width:640px; margin:0 auto 1.5rem; } .quiz-hero-art img{ width:100%; height:auto; display:block; border-radius: var(--radius-lg); box-shadow: var(--shadow-hover); } .quiz-steps{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1.5rem; margin: 2rem 0 3rem; } .quiz-step{ text-align:center; } .quiz-step__num{ width:42px; height:42px; border-radius:50%; background: var(--color-ink); color: var(--color-gold-2); display:flex; align-items:center; justify-content:center; font-family: var(--font-heading); font-weight:700; font-size:1.1rem; margin: 0 auto 0.8rem; } .quiz-step h3{ font-size:1rem; margin-bottom:0.4rem; } .quiz-step p{ font-size:0.88rem; color: var(--color-text-muted); } .quiz-box{ max-width: 640px; margin: 0 auto; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); } .quiz-progress-track{ height:8px; border-radius:999px; background: var(--color-cream-2); overflow:hidden; margin-bottom:1.75rem; } .quiz-progress-bar{ height:100%; background: linear-gradient(90deg, var(--color-gold), var(--color-emerald)); border-radius:999px; width:12.5%; transition: width .35s ease; } .quiz-progress-label{ font-size:0.8rem; color: var(--color-text-muted); font-weight:600; margin-bottom:1rem; display:block; } .quiz-question h2{ font-size:1.4rem; margin-bottom:1.5rem; } .quiz-options{ display:flex; flex-direction:column; gap:0.75rem; margin-bottom:2rem; } .quiz-option{ display:block; width:100%; text-align:left; padding: 0.95rem 1.25rem; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); font-weight:500; font-size:0.95rem; color: var(--color-text); background: var(--color-cream); transition: border-color .2s ease, background-color .2s ease, transform .2s ease; } .quiz-option:hover{ border-color: var(--color-gold); transform: translateY(-2px); } .quiz-option.is-selected{ border-color: var(--color-emerald); background: rgba(31,157,107,0.08); font-weight:700; } .quiz-nav-row{ display:flex; justify-content:space-between; align-items:center; gap:1rem; } .quiz-result__persona{ text-align:center; margin-bottom:2rem; } .quiz-result__persona span.eyebrow{ display:block; } .quiz-result__persona h2{ font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.2rem); margin-bottom:0.75rem; } .quiz-result__persona p{ color: var(--color-text-muted); max-width:52ch; margin:0 auto; } .quiz-result__books{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; margin-bottom:1.75rem; } .quiz-result__actions{ display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; } /* ---- Very small mobile (down to 300px) ---- */ @media (max-width: 420px){ :root{ --header-h: 72px; } .container{ padding: 0 14px; } .logo{ font-size: 1.2rem; } .logo__mark{ width:26px; height:26px; } .blog-filter-bar{ padding: 1rem; } .blog-filter-bar .search-input-wrap{ min-width: 0; } .also-like-grid{ grid-template-columns: 1fr; } .review-grid{ grid-template-columns: 1fr; } .quiz-box{ padding: 1.1rem; } .quiz-option{ padding: 0.8rem 1rem; font-size:0.9rem; } .header-actions{ gap:0.1rem; } .btn-icon{ width:38px; height:38px; } .btn-icon svg{ width:19px; height:19px; } .hero__ctas{ flex-direction:column; align-items:stretch; } .hero__ctas .btn{ width:100%; } .product-grid{ grid-template-columns: 1fr; } .grid-4{ grid-template-columns: 1fr; } .carousel .product-card{ flex: 0 0 210px; width: 210px; } .footer-bottom{ text-align:center; } .payment-badges{ justify-content:center; width:100%; } .payment-badges img, .payment-badges svg{ width:52px; height:34px; } .social-icons{ justify-content:center; width:100%; } .cookie-banner{ left:10px; right:10px; bottom:10px; padding:1.1rem; } .cookie-banner__actions{ flex-direction:column; } .cookie-banner__actions .btn{ width:100%; } .modal-box{ padding:1.4rem; } .cart-summary, .filters{ padding: 1.1rem; } } /* ========================================================================== 20. Chat widget (bottom-right site & product assistant) ========================================================================== */ .chat-widget{ position: fixed; right: 22px; bottom: 22px; z-index: 850; /* above content/header(500)/mobile-nav(700), below cookie-banner(900)/modal(1000) */ display:flex; flex-direction:column; align-items:flex-end; gap:1rem; transition: bottom .3s ease; } /* Being above the mobile-nav drawer (700) is normally fine — but it means the floating launcher would otherwise sit on top of the open burger drawer itself, right where its "View Cart" button lives. Hide it while the drawer is open (main.js toggles this class in openMenu()/closeMenu()). */ body.mobile-nav-open .chat-widget{ display:none; } .chat-widget__toggle{ width:60px; height:60px; border-radius:50%; background: var(--color-ink); color: var(--color-gold-2); display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-hover); transition: transform .25s ease, background-color .25s ease; position:relative; flex-shrink:0; } .chat-widget__toggle:hover{ transform: translateY(-3px) scale(1.05); background: var(--color-navy-2); } .chat-widget__toggle svg{ width:26px; height:26px; position:absolute; transition: opacity .2s ease, transform .2s ease; } .chat-widget__toggle .icon-close{ opacity:0; transform: rotate(-45deg) scale(0.6); } .chat-widget__toggle .icon-open{ opacity:1; transform:none; } .chat-widget.is-open .chat-widget__toggle .icon-open{ opacity:0; transform: rotate(45deg) scale(0.6); } .chat-widget.is-open .chat-widget__toggle .icon-close{ opacity:1; transform:none; } .chat-widget__ping{ position:absolute; top:-2px; right:-2px; width:14px; height:14px; border-radius:50%; background: var(--color-emerald); border:2px solid var(--color-cream); animation: chatPing 2s ease-in-out infinite; } .chat-widget.is-open .chat-widget__ping, .chat-widget__ping.is-dismissed{ display:none; } @keyframes chatPing{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.3); } } .chat-widget__panel{ width: min(360px, calc(100vw - 2.5rem)); max-height: min(560px, calc(100vh - 120px)); background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-hover); border: 1px solid var(--color-border); display:flex; flex-direction:column; overflow:hidden; transform: translateY(16px) scale(0.96); opacity:0; visibility:hidden; transform-origin: bottom right; transition: opacity .25s ease, transform .25s ease, visibility .25s ease; } .chat-widget.is-open .chat-widget__panel{ opacity:1; visibility:visible; transform: translateY(0) scale(1); } .chat-widget__head{ display:flex; align-items:center; justify-content:space-between; gap:0.75rem; padding: 1rem 1.1rem; background: var(--color-ink); color:#fff; flex-shrink:0; } .chat-widget__head-info{ display:flex; align-items:center; gap:0.7rem; min-width:0; } .chat-widget__head-info strong{ display:block; font-size:0.95rem; } .chat-widget__head-info span{ display:block; font-size:0.72rem; color: rgba(255,255,255,0.65); } .chat-widget__avatar{ width:36px; height:36px; border-radius:50%; flex-shrink:0; background: rgba(255,255,255,0.12); color: var(--color-gold-2); display:flex; align-items:center; justify-content:center; } .chat-widget__avatar svg{ width:18px; height:18px; } .chat-widget__close{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; } .chat-widget__close:hover{ background: rgba(255,255,255,0.15); } .chat-widget__close svg{ width:16px; height:16px; } .chat-widget__body{ flex:1; overflow-y:auto; padding: 1rem 1.1rem; display:flex; flex-direction:column; gap:0.75rem; background: var(--color-cream); min-height: 180px; } .chat-msg{ max-width:88%; padding:0.65rem 0.9rem; border-radius: var(--radius-md); font-size:0.86rem; line-height:1.5; } .chat-msg a{ text-decoration:underline; font-weight:600; } .chat-msg--bot{ align-self:flex-start; background: var(--color-white); border:1px solid var(--color-border); color: var(--color-text); border-bottom-left-radius:4px; } .chat-msg--user{ align-self:flex-end; background: var(--color-ink); color:#fff; border-bottom-right-radius:4px; } .chat-typing{ display:inline-flex; gap:4px; padding:0.2rem 0; } .chat-typing span{ width:6px; height:6px; border-radius:50%; background: var(--color-text-muted); animation: chatTyping 1.1s ease-in-out infinite; } .chat-typing span:nth-child(2){ animation-delay:.15s; } .chat-typing span:nth-child(3){ animation-delay:.3s; } @keyframes chatTyping{ 0%,60%,100%{ opacity:0.25; transform: translateY(0); } 30%{ opacity:1; transform: translateY(-3px); } } .chat-msg__book{ display:flex; gap:0.6rem; align-items:center; margin-top:0.55rem; padding:0.5rem; background: var(--color-cream-2); border-radius: var(--radius-sm); transition: background-color .15s ease; } .chat-msg__book:hover{ background: var(--color-border); } .chat-msg__book img{ width:34px; height:46px; object-fit:cover; border-radius:4px; flex-shrink:0; background: var(--color-white); } .chat-msg__book div{ font-size:0.78rem; color: var(--color-text-muted); } .chat-msg__book strong{ display:block; font-size:0.82rem; color: var(--color-ink); } .chat-widget__quick{ display:flex; flex-wrap:wrap; gap:0.5rem; padding: 0 1.1rem 0.85rem; flex-shrink:0; } .chat-quick-btn{ padding:0.45rem 0.85rem; border-radius:999px; border:1.5px solid var(--color-border); font-size:0.76rem; font-weight:600; color: var(--color-text); background: var(--color-white); transition: border-color .2s ease, background-color .2s ease; } .chat-quick-btn:hover{ border-color: var(--color-gold); background: var(--color-cream-2); } .chat-widget__input-row{ display:flex; align-items:center; gap:0.5rem; padding: 0.85rem 1rem; border-top: 1px solid var(--color-border); background: var(--color-white); flex-shrink:0; } .chat-widget__input-row input{ flex:1; border:0; outline:none; background: var(--color-cream); border-radius:999px; padding:0.6rem 1rem; font-size:0.88rem; min-width:0; } .chat-widget__input-row input:focus{ box-shadow: 0 0 0 3px rgba(201,162,39,0.3); } .chat-widget__send{ width:38px; height:38px; border-radius:50%; flex-shrink:0; background: var(--color-gold); color: var(--color-ink); display:flex; align-items:center; justify-content:center; transition: background-color .2s ease, transform .2s ease; } .chat-widget__send:hover{ background: var(--color-gold-2); transform: translateY(-1px); } .chat-widget__send svg{ width:17px; height:17px; } @media (max-width: 480px){ .chat-widget{ right:14px; bottom:14px; } .chat-widget__toggle{ width:54px; height:54px; } .chat-widget__toggle svg{ width:23px; height:23px; } .chat-widget__panel{ width: calc(100vw - 1.75rem); max-height: calc(100vh - 110px); } } /* The cookie banner can span nearly the full viewport width on phones, right under where the chat launcher sits — nudge the launcher up out of the way while the banner is showing (see main.js: has-cookie-banner). */ @media (max-width: 640px){ body.has-cookie-banner .chat-widget{ bottom: 190px; } } @media (max-width: 380px){ body.has-cookie-banner .chat-widget{ bottom: 230px; } }