/* ============================================================ Oakly® — Modern Furnica · Storefront system Shared styles for the product & store pages. A committed warm-boutique identity (single light world). ============================================================ */ :root { --oak: #201a14; --oak-deep: #14100c; --ink: #201a14; --ink-soft: rgba(32, 26, 20, 0.62); --ink-faint: rgba(32, 26, 20, 0.42); --line: rgba(32, 26, 20, 0.12); --line-soft: rgba(32, 26, 20, 0.07); --cream: #f3ede4; --paper: #fbf8f3; --paper-2: #ffffff; --dark: #1b1712; --on-dark: #f3ede4; --on-dark-dim: rgba(243, 237, 228, 0.6); /* Ambient "reviews" wash — deeper beige lifted by two soft warm glows, used as the site-wide page background. Kept as gradient layers only (no trailing colour) so background-attachment: fixed applies to both glows and every screenful carries the wash. */ --beige-deep: #e9ddc9; --ambient-bg: radial-gradient(58vw 55vw at 12% 6%, rgba(255, 250, 240, 0.92), rgba(255, 250, 240, 0) 60%), radial-gradient(52vw 52vw at 88% 96%, rgba(198, 166, 119, 0.38), rgba(198, 166, 119, 0) 62%); --star: #201a14; --ok: #5c7a53; --r-lg: 28px; --r-md: 18px; --r-sm: 12px; --r-pill: 100px; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-soft: cubic-bezier(0.45, 0, 0.15, 1); --font: "DM Sans", "General Sans", "Poppins", system-ui, -apple-system, sans-serif; --font-head: "Sora", "DM Sans", "General Sans", sans-serif; --font-eyebrow: "Manrope", "DM Sans", sans-serif; --pad: clamp(1.1rem, 4vw, 4rem); --maxw: 1180px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; overflow-x: hidden; } /* Lenis owns scroll smoothing once it's active — CSS scroll-behavior would otherwise fight its eased scrollTo() calls. */ html.lenis, html.lenis body { height: auto; } html.lenis-smooth { scroll-behavior: auto !important; } html.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } html.lenis.lenis-stopped { overflow: hidden; } body { font-family: var(--font); color: var(--ink); background-color: var(--beige-deep); background-image: var(--ambient-bg); background-attachment: fixed; background-repeat: no-repeat; line-height: 1.5; /* overflow-x is clipped on only (below) — setting it here too would force the UA to give body its own overflow-y:auto (per the CSS overflow spec's cross-axis rule), turning body into a second, independent scroll container. That breaks position:sticky for any descendant (e.g. the Lookbook pinned scroll), since it then sticks relative to body's own scrollTop, which never actually moves. */ } a { color: inherit; text-decoration: none; } button { font-family: inherit; color: inherit; cursor: pointer; border: none; background: none; } img { display: block; max-width: 100%; } ul { list-style: none; } /* Display/heading typeface site-wide, matching scribehow.com's heading font applied over its body font. */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); } :focus-visible { outline: 2px solid var(--oak); outline-offset: 3px; border-radius: 4px; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } /* ============================================================ Header ============================================================ */ .site-header { position: sticky; top: 0; z-index: 40; /* Same light beige frosted-glass material as the footer, so the header and footer correlate. */ background: rgba(243, 237, 228, 0.55); backdrop-filter: blur(30px) saturate(1.15); -webkit-backdrop-filter: blur(30px) saturate(1.15); border-bottom: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 12px 30px -22px rgba(40, 28, 16, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.55); } .site-header::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); opacity: 0.06; pointer-events: none; } .site-header__row { display: flex; align-items: center; gap: clamp(1rem, 3vw, 3rem); height: clamp(60px, 8vw, 76px); } .brand { display: inline-flex; align-items: center; } .brand img { height: clamp(24px, 2.6vw, 32px); width: auto; } .mainnav { display: flex; gap: clamp(1rem, 2vw, 2rem); font-size: 0.95rem; } .mainnav a { position: relative; padding: 4px 0; color: var(--ink-soft); transition: color .25s; } .mainnav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px; background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease-out); } .mainnav a:hover { color: var(--ink); } .mainnav a:hover::after, .mainnav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; } .mainnav a[aria-current="page"] { color: var(--ink); } .header-tools { margin-left: auto; display: flex; align-items: center; gap: 0.4rem; } .icon-btn { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); transition: background-color .25s, transform .25s var(--ease-out); } .icon-btn:hover { background: rgba(32, 26, 20, 0.06); transform: translateY(-1px); } .icon-btn svg { width: 20px; height: 20px; } .cart-btn { position: relative; } .cart-count { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; font-size: 0.64rem; font-weight: 600; color: var(--cream); background: var(--ink); border-radius: 100px; transform: scale(0); transition: transform .3s var(--ease-out); } .cart-count.is-on { transform: scale(1); } .nav-toggle { display: none; } /* ============================================================ Buttons ============================================================ */ .btn { --bg: var(--ink); --fg: var(--cream); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; padding: 1rem 1.6rem; border-radius: var(--r-pill); background: var(--bg); color: var(--fg); font-size: 1rem; font-weight: 500; overflow: hidden; transition: transform .3s var(--ease-out); } .btn > * { position: relative; z-index: 1; } .btn::before { content: ""; position: absolute; inset: 0; background: var(--oak); transform: translateY(101%); transition: transform .45s var(--ease-out); z-index: 0; } .btn:active { transform: scale(0.98); } .btn svg { width: 19px; height: 19px; } .btn--ghost { --bg: transparent; --fg: var(--ink); border: 1.5px solid var(--line); } .btn--ghost::before { background: var(--ink); } /* Hover-only fill/lift, gated to devices that report real hover support. Without this, a tap on a touchscreen can leave :hover "stuck" until the next unrelated tap — the ghost "Buy it now" button would turn solid black on tap and never revert. Gating on hover alone (not also pointer:fine) matters: some hybrid devices report pointer:coarse even with a mouse attached, which would have blocked the hover text-color swap along with the tap-fill fix. */ @media (hover: hover) { .btn:hover::before { transform: translateY(0); } .btn:hover { transform: translateY(-2px); } .btn--ghost:hover { --fg: var(--cream); } } .btn--full { width: 100%; } /* ============================================================ Add-to-cart click feedback — the button crossfades from its resting content to an "Added to cart" label and back. No color/background change: it keeps exactly the look it already had (frosted, solid, outlined, ...), just a beat of extra lift + a drawn checkmark. ============================================================ */ [data-add] { position: relative; transition: box-shadow .3s var(--ease-out); } /* Resting content (icon/text already in the markup) fades + drops out as the label fades + rises in — a real crossfade, not a hard cut. */ [data-add] > *:not(.add-label) { transition: opacity .22s var(--ease-out), transform .22s var(--ease-out), filter .22s var(--ease-out); } [data-add].is-added > *:not(.add-label) { opacity: 0; transform: scale(0.9) translateY(-3px); filter: blur(2px); pointer-events: none; } [data-add] .add-label { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; white-space: nowrap; opacity: 0; transform: scale(0.9) translateY(3px); pointer-events: none; transition: opacity .25s var(--ease-out) .08s, transform .3s var(--ease-out) .08s; } [data-add].is-added .add-label { opacity: 1; transform: scale(1) translateY(0); } [data-add].is-leaving .add-label { opacity: 0; transform: scale(0.94) translateY(-2px); transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); } /* A checkmark that draws itself in, then settles with a soft pop. */ [data-add] .add-label__check path { stroke-dasharray: 1; stroke-dashoffset: 1; } [data-add].is-added .add-label__check path { animation: add-check-draw .45s var(--ease-out) .22s forwards; } [data-add] .add-label__check { transform-origin: center; } [data-add].is-added .add-label__check { animation: add-check-settle .5s var(--ease-out) .22s both; } /* Subtle lift while the confirmation is showing, echoing the button's own hover elevation instead of introducing a new material. */ [data-add].is-added { box-shadow: 0 10px 26px -14px rgba(32, 26, 20, 0.35); } @keyframes add-check-draw { to { stroke-dashoffset: 0; } } @keyframes add-check-settle { 0% { transform: scale(0.5); } 55% { transform: scale(1.2); } 80% { transform: scale(0.95); } 100% { transform: scale(1); } } /* ============================================================ Footer ============================================================ */ /* The footer shell holds a warm interior photo that begins ABOVE the footer and continues behind it; the footer itself is a light beige, grainy frosted-glass sheet that blurs the image through it. */ .footer-shell { position: relative; margin-top: clamp(3rem, 8vw, 7rem); isolation: isolate; } .footer-shell__img { position: absolute; left: 0; right: 0; top: clamp(-260px, -22vw, -150px); /* image starts before the footer */ bottom: 0; z-index: 0; background: url("assets/footer-bg.jpg") center 32% / cover no-repeat; /* fade the exposed strip in at the top so it doesn't hard-cut */ -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 clamp(90px, 12vw, 150px)); mask-image: linear-gradient(to bottom, transparent 0, #000 clamp(90px, 12vw, 150px)); pointer-events: none; } /* When the CTA shares the shell, the photo spans from the top of the shell (behind the CTA) down through the footer, instead of bleeding up into the section above. */ .footer-shell--cta { margin-top: clamp(2rem, 5vw, 3.5rem); } .footer-shell--cta .footer-shell__img { top: 0; } .site-footer { position: relative; z-index: 1; color: var(--ink); overflow: hidden; /* light beige frosted sheet over the photo */ background: rgba(243, 237, 228, 0.55); backdrop-filter: blur(30px) saturate(1.15); -webkit-backdrop-filter: blur(30px) saturate(1.15); border-top: 1px solid rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); } /* Grain over the frosted sheet */ .site-footer__grain { position: absolute; inset: 0; z-index: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); opacity: 0.06; pointer-events: none; } .site-footer__grid, .site-footer__bar { position: relative; z-index: 1; } .site-footer__grid { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: clamp(2rem, 4vw, 3rem); padding-block: clamp(3rem, 6vw, 5rem); } .site-footer__brand img { height: 30px; margin-bottom: 1.1rem; } .site-footer__brand p { color: var(--ink-soft); font-size: 0.94rem; line-height: 1.55; max-width: 36ch; } .site-footer__social { display: flex; gap: 0.6rem; margin-top: 1.5rem; } .site-footer__social a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--ink-soft); background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.7); transition: transform .3s var(--ease-out), background-color .3s, color .3s, border-color .3s; } .site-footer__social a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.85); border-color: #fff; transform: translateY(-3px); } .site-footer__social svg { width: 17px; height: 17px; } .site-footer h4 { font-family: var(--font-eyebrow); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--oak-deep); margin-bottom: 1.1rem; font-weight: 600; } .site-footer ul { display: grid; gap: 0.7rem; list-style: none; } .site-footer li a { position: relative; display: inline-block; color: var(--ink-soft); font-size: 0.94rem; transition: color .25s, transform .25s var(--ease-out); } .site-footer li a:hover { color: var(--ink); transform: translateX(3px); } .site-footer__bar { border-top: 1px solid rgba(32, 26, 20, 0.14); padding-block: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; align-items: center; font-size: 0.84rem; color: var(--ink-soft); } .site-footer__legal { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; } .site-footer__legal a { transition: color .25s; } .site-footer__legal a:hover { color: var(--ink); } @media (max-width: 820px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } } @media (max-width: 480px) { .site-footer__grid { grid-template-columns: 1fr; } .site-footer__bar { flex-direction: column; align-items: flex-start; } .site-footer__legal { margin-left: 0; } } /* ============================================================ Cart drawer ============================================================ */ .cart-drawer { position: fixed; inset: 0; z-index: 95; visibility: hidden; } .cart-drawer.is-open { visibility: visible; } .cart-drawer__backdrop { position: absolute; inset: 0; background: rgba(20, 16, 10, 0.4); opacity: 0; transition: opacity 0.35s var(--ease-out); } .cart-drawer.is-open .cart-drawer__backdrop { opacity: 1; } .cart-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(400px, 92vw); display: flex; flex-direction: column; background: var(--paper-2); box-shadow: -30px 0 60px -20px rgba(40, 28, 16, 0.45); transform: translateX(100%); transition: transform 0.4s var(--ease-out); } .cart-drawer.is-open .cart-drawer__panel { transform: translateX(0); } .cart-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1.4rem 1.4rem 1.1rem; border-bottom: 1px solid var(--line-soft); } .cart-drawer__head h3 { font-size: 1.15rem; font-weight: 600; } .cart-drawer__close { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; transition: background-color 0.25s var(--ease-out); } .cart-drawer__close:hover { background: var(--line-soft); } .cart-drawer__close svg { width: 18px; height: 18px; } .cart-drawer__items { flex: 1; overflow-y: auto; padding: 0.4rem 1.4rem; } .cart-drawer__empty { display: none; padding: 3rem 1.4rem; text-align: center; color: var(--ink-faint); font-size: 0.92rem; } .cart-item { display: flex; align-items: center; gap: 0.85rem; padding: 1rem 0; border-bottom: 1px solid var(--line-soft); } .cart-item__img { width: 58px; height: 58px; flex: none; border-radius: var(--r-sm); object-fit: cover; background: var(--cream); } .cart-item__body { flex: 1; min-width: 0; } .cart-item__name { font-size: 0.9rem; font-weight: 600; } .cart-item__price { margin-top: 0.15rem; font-size: 0.82rem; color: var(--ink-soft); } .cart-item__qty { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 0.5rem; } .cart-item__qty button { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; font-size: 0.85rem; line-height: 1; transition: background-color 0.2s var(--ease-out); } .cart-item__qty button:hover { background: var(--line-soft); } .cart-item__qty span { min-width: 1.2em; text-align: center; font-size: 0.85rem; font-weight: 600; } .cart-item__remove { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--ink-faint); border-radius: 50%; transition: color 0.2s var(--ease-out), background-color 0.2s var(--ease-out); } .cart-item__remove:hover { color: var(--ink); background: var(--line-soft); } .cart-item__remove svg { width: 15px; height: 15px; } .cart-drawer__foot { padding: 1.2rem 1.4rem 1.5rem; border-top: 1px solid var(--line-soft); } .cart-drawer__row { display: flex; align-items: center; justify-content: space-between; font-size: 1rem; } .cart-drawer__row b { font-size: 1.15rem; } .cart-drawer__note { margin-top: 0.5rem; font-size: 0.76rem; line-height: 1.5; color: var(--ink-faint); } .cart-drawer__checkout { margin-top: 1rem; background: #000; gap: 0.6rem; } .cart-drawer__checkout::before { background: #222; } .cart-drawer__checkout svg { width: 20px; height: 20px; } /* ============================================================ Reveal-on-scroll ============================================================ */ .reveal { opacity: 0; transform: translateY(26px) scale(0.985); filter: blur(6px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out); transition-delay: var(--rd, 0s); } .reveal.is-in { opacity: 1; transform: none; filter: blur(0); } /* ============================================================ Custom cursor ============================================================ */ .cursor { display: none; } @media (pointer: fine) { .cursor { display: block; } .cursor__dot, .cursor__ring { position: fixed; top: 0; left: 0; z-index: 90; border-radius: 50%; pointer-events: none; transform: translate(-100px,-100px); } .cursor__dot { width: 6px; height: 6px; background: var(--ink); } .cursor__ring { width: 32px; height: 32px; border: 1.5px solid rgba(32,26,20,0.4); transition: width .25s var(--ease-out), height .25s var(--ease-out), background-color .25s; } .cursor.is-hover .cursor__ring { width: 50px; height: 50px; background: rgba(32,26,20,0.05); border-color: rgba(32,26,20,0.15); } } /* ============================================================ Mobile nav ============================================================ */ @media (max-width: 760px) { .mainnav { position: fixed; inset: 0 0 0 auto; width: min(78vw, 320px); flex-direction: column; gap: 0.4rem; padding: 6rem 1.6rem 2rem; background: var(--paper); box-shadow: -30px 0 60px -20px rgba(40,28,16,0.4); transform: translateX(100%); transition: transform .4s var(--ease-out); font-size: 1.1rem; } .mainnav.is-open { transform: translateX(0); } .mainnav a { padding: 0.7rem 0; border-bottom: 1px solid var(--line-soft); } .mainnav a::after { display: none; } .nav-toggle { display: grid; } .header-tools { margin-left: auto; } .cursor { display: none; } .site-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.4rem; } .site-footer__brand { grid-column: 1 / -1; } } @media (max-width: 480px) { .site-footer__grid { grid-template-columns: 1fr; gap: 1.8rem; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; } .reveal { opacity: 1; transform: none; filter: none; } .cursor { display: none; } }