/* ============================================================ HOLLO SUPPLY — Functional layer (interactions) Cursor · search · cart drawer · modal · mobile menu · mega menu · transitions · toast · back-to-top ============================================================ */ /* ---- Page transition curtain ---- */ .pt-curtain { position: fixed; inset: 0; background: var(--ink); z-index: 9999; transform: scaleY(0); transform-origin: bottom; pointer-events: none; } body.pt-leaving .pt-curtain { transform: scaleY(1); transform-origin: bottom; transition: transform .42s var(--ease); } body.pt-enter .pt-curtain { transform: scaleY(0); transform-origin: top; transition: transform .5s var(--ease); } .pt-fade { opacity: 0; animation: ptIn .6s var(--ease) forwards; } @keyframes ptIn { to { opacity: 1; } } /* ---- Custom cursor (desktop, fine pointer only) ---- */ @media (hover: hover) and (pointer: fine) { body.has-cursor, body.has-cursor * { cursor: none; } .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 10000; pointer-events: none; border-radius: 50%; mix-blend-mode: difference; } .cursor-dot { width: 6px; height: 6px; background: #fff; margin: -3px 0 0 -3px; } .cursor-ring { width: 34px; height: 34px; border: 1px solid #fff; margin: -17px 0 0 -17px; transition: width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease), background .25s; } body.cursor-hover .cursor-ring { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: rgba(255,255,255,.12); } } /* ---- Header trigger buttons ---- */ .head__util a { cursor: pointer; } .head__util .cart::after { content: none; } /* JS manages "Bag (n)" */ .menu-toggle { display: none; font-family: var(--label); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; background: none; border: 0; cursor: pointer; } @media (max-width: 860px){ .menu-toggle { display: inline-block; } .head__util .acct { display:none; } } /* ---- Mega menu (Shop) ---- */ .mega { position: fixed; left: 0; right: 0; top: 70px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px -28px rgba(19,28,36,.4); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: .28s var(--ease); z-index: 45; } .mega.open { opacity: 1; visibility: visible; transform: none; } .mega .wrap { display: grid; grid-template-columns: repeat(3,1fr) 1.2fr; gap: 40px; padding-block: 40px; } .mega h5 { font-family: var(--label); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze); margin: 0 0 1rem; } .mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; } .mega a { font-family: var(--display); font-size: 1.3rem; text-transform: uppercase; transition: color .2s; } .mega a:hover { color: var(--stone); } .mega__feat { position: relative; min-height: 180px; color: #fff; display: grid; align-items: end; overflow: hidden; } .mega__feat .shot { position: absolute; inset: 0; } .mega__feat .c { position: relative; padding: 20px; } .mega__feat span { font-family: var(--label); font-size: .68rem; letter-spacing: .12em; color: var(--stone); } .mega__feat b { display: block; font-family: var(--display); font-size: 1.6rem; font-weight: 400; } @media (max-width: 860px){ .mega { display: none; } } /* ---- Overlay base (search + modal) ---- */ .ov { position: fixed; inset: 0; z-index: 200; display: grid; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; } .ov.open { opacity: 1; visibility: visible; } .ov__scrim { position: absolute; inset: 0; background: rgba(19,28,36,.55); backdrop-filter: blur(4px); } /* ---- Search overlay ---- */ .search { align-content: start; } .search__panel { position: relative; background: var(--paper); padding: clamp(24px,5vw,56px); transform: translateY(-20px); transition: transform .35s var(--ease); } .search.open .search__panel { transform: none; } .search__bar { display: flex; align-items: center; gap: 16px; border-bottom: 2px solid var(--ink); padding-bottom: 14px; } .search__bar input { flex: 1; border: 0; background: none; font-family: var(--display); font-size: clamp(1.8rem,4vw,3rem); text-transform: uppercase; outline: none; color: var(--ink); } .search__bar input::placeholder { color: var(--mist); } .search__close { font-family: var(--label); font-size: .8rem; letter-spacing: .1em; cursor: pointer; background:none;border:0; } .search__results { display: grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: 18px; margin-top: 28px; max-height: 56vh; overflow: auto; } .sres { display: block; } .sres .shot { aspect-ratio: 4/5; margin-bottom: 8px; } .sres h4 { font-family: var(--display); font-size: 1.2rem; text-transform: uppercase; margin: 0; font-weight: 400; } .sres .price { font-family: var(--label); font-size: .8rem; color: var(--ink-50); } .search__hint { font-family: var(--label); font-size: .72rem; letter-spacing: .08em; color: var(--ink-50); margin-top: 24px; } /* ---- Cart drawer ---- */ .drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 92vw); background: var(--paper); z-index: 210; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .4s var(--ease); box-shadow: -30px 0 60px -30px rgba(19,28,36,.5); } .drawer.open { transform: none; } .drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 22px 24px; border-bottom: 1px solid var(--line); } .drawer__head h3 { font-family: var(--display); font-size: 1.6rem; text-transform: uppercase; } .drawer__close { background: none; border: 0; font-family: var(--label); font-size: .8rem; cursor: pointer; letter-spacing: .1em; } .drawer__ship { padding: 14px 24px; background: var(--bone); font-family: var(--label); font-size: .72rem; letter-spacing: .04em; } .drawer__track { height: 5px; background: var(--mist); border-radius: 3px; margin-top: 8px; overflow: hidden; } .drawer__fill { height: 100%; width: 0; background: var(--stone); transition: width .5s var(--ease); } .drawer__items { flex: 1; overflow: auto; padding: 8px 24px; } .ditem { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); } .ditem .shot { aspect-ratio: 4/5; } .ditem h4 { font-family: var(--display); font-size: 1.1rem; text-transform: uppercase; margin: 0; font-weight: 400; } .ditem .v { font-family: var(--label); font-size: .68rem; color: var(--ink-50); } .ditem .qty { display: inline-flex; gap: 10px; align-items: center; margin-top: 4px; font-family: var(--label); font-size: .8rem; } .ditem .qty button { border: 1px solid var(--line); background: none; width: 22px; height: 22px; cursor: pointer; } .ditem .rm { font-family: var(--label); font-size: .62rem; letter-spacing: .08em; color: var(--ink-50); cursor: pointer; background:none;border:0; text-transform: uppercase; } .drawer__empty { padding: 48px 24px; text-align: center; color: var(--ink-50); font-family: var(--label); font-size: .8rem; } .drawer__foot { padding: 20px 24px; border-top: 1px solid var(--line); } .drawer__foot .row { display: flex; justify-content: space-between; font-family: var(--label); font-size: .9rem; margin-bottom: 14px; } .drawer__foot .btn { width: 100%; text-align: center; } /* ---- Newsletter modal ---- */ .modal { place-items: center; } .modal__box { position: relative; background: var(--paper); max-width: 720px; width: 92vw; display: grid; grid-template-columns: 1fr 1fr; transform: scale(.96); transition: transform .35s var(--ease); } .modal.open .modal__box { transform: none; } .modal__img { min-height: 320px; } .modal__c { padding: clamp(28px,4vw,48px); align-content: center; display: grid; } .modal__c h3 { font-family: var(--display); font-size: clamp(2rem,4vw,3rem); text-transform: uppercase; line-height: .95; } .modal__c input { border: 1px solid var(--ink); padding: 1em; font-family: var(--label); font-size: .85rem; margin: 14px 0 10px; width: 100%; } .modal__close { position: absolute; top: 12px; right: 14px; background: none; border: 0; font-family: var(--label); font-size: .9rem; cursor: pointer; z-index: 2; } .modal__dismiss { font-family: var(--label); font-size: .68rem; letter-spacing: .06em; color: var(--ink-50); background: none; border: 0; cursor: pointer; margin-top: 12px; text-align: left; } @media (max-width: 620px){ .modal__box { grid-template-columns: 1fr; } .modal__img { display: none; } } /* ---- Mobile menu ---- */ .mnav { position: fixed; inset: 0; z-index: 220; background: var(--ink); color: #fff; transform: translateX(-100%); transition: transform .4s var(--ease); display: flex; flex-direction: column; padding: 24px; } .mnav.open { transform: none; } .mnav__top { display: flex; justify-content: space-between; align-items: center; } .mnav__top .logo { font-family: var(--display); font-size: 1.6rem; } .mnav__top .logo span { color: var(--stone); } .mnav__close { background: none; border: 0; color: #fff; font-family: var(--label); font-size: .85rem; cursor: pointer; } .mnav ul { list-style: none; margin: auto 0; padding: 0; display: grid; gap: 4px; } .mnav a { font-family: var(--display); font-size: clamp(2.4rem,9vw,3.4rem); text-transform: uppercase; } .mnav a:active { color: var(--stone); } .mnav__util { display: flex; gap: 20px; font-family: var(--label); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--stone); } /* ---- Toast ---- */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 120%); z-index: 230; background: var(--ink); color: #fff; padding: 14px 22px; font-family: var(--label); font-size: .78rem; letter-spacing: .06em; transition: transform .4s var(--ease); display: flex; gap: 14px; align-items: center; } .toast.show { transform: translate(-50%, 0); } .toast a { color: var(--stone); border-bottom: 1px solid var(--stone); } /* ---- Back to top ---- */ .totop { position: fixed; bottom: 22px; right: 22px; z-index: 90; width: 46px; height: 46px; background: var(--ink); color: #fff; border: 0; cursor: pointer; opacity: 0; transform: translateY(12px); transition: .3s var(--ease); font-family: var(--label); } .totop.show { opacity: 1; transform: none; } /* ---- Header hide-on-scroll-down ---- */ .head { transition: transform .35s var(--ease); } body.head-hidden .head { transform: translateY(-100%); } /* ---- lock scroll ---- */ body.lock { overflow: hidden; } @media (prefers-reduced-motion: reduce){ .pt-curtain, .pt-fade { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; } } /* ---- Real imagery fill ---- */ .shot.has-img .shot__note { display: none; } .shot.has-img { color: transparent; } /* ============================================================ WordPress / WooCommerce overrides (theme only) ============================================================ */ /* Product card — real Woo image (product-on-white → contain on bone) */ .pcard__media { position: relative; aspect-ratio: 4/5; margin-bottom: 14px; background: var(--bone); overflow: hidden; } .pcard__media .pcard__img, .pcard__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s var(--ease); } .pcard:hover .pcard__media img { transform: translateY(-4px); } .pcard .quick { position: absolute; inset: auto 0 16px 0; opacity: 0; transition: opacity .3s; text-align: center; z-index: 2; } .pcard:hover .quick { opacity: 1; } /* Drawer line-item thumbnail */ .ditem { grid-template-columns: 56px 1fr auto; } .ditem__img { aspect-ratio: 4/5; background: var(--bone); overflow: hidden; } .ditem__img img { width: 100%; height: 100%; object-fit: contain; } /* Cart count */ .cart-count { font-variant-numeric: tabular-nums; } /* PDP — Woo gallery */ .pdp__gallery .woocommerce-product-gallery { width: 100% !important; margin: 0; } .pdp__gallery .woocommerce-product-gallery__wrapper { margin: 0; } .pdp__gallery .woocommerce-product-gallery__image { background: var(--bone); } .pdp__gallery .woocommerce-product-gallery__image img { object-fit: contain; } .pdp__gallery .flex-control-thumbs { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin-top: 10px; padding: 0; list-style: none; } .pdp__gallery .flex-control-thumbs li { margin: 0; } .pdp__gallery .flex-control-thumbs img { background: var(--bone); cursor: pointer; } /* PDP — Woo add-to-cart + variations, styled to brand */ .pdp__buy .variations { width: 100%; border-collapse: collapse; margin-bottom: 1rem; } .pdp__buy .variations th { font-family: var(--label); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-50); text-align: left; padding: 8px 0; } .pdp__buy .variations td { padding: 4px 0 12px; } .pdp__buy select, .hollo-woo select, .woocommerce-ordering select { font-family: var(--label); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; padding: .8em 1em; border: 1px solid var(--ink); background: var(--paper); cursor: pointer; } .pdp__buy .quantity input.qty { width: 64px; padding: .9em .6em; border: 1px solid var(--line); text-align: center; font-family: var(--label); } .woocommerce .single_add_to_cart_button, .woocommerce .button, .woocommerce-page .button { font-family: var(--label); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; padding: 1.05em 2.2em; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: 0; cursor: pointer; transition: all .35s var(--ease); } .woocommerce .single_add_to_cart_button:hover, .woocommerce .button:hover { background: var(--stone); border-color: var(--stone); color: var(--ink); } .pdp__buy .single_add_to_cart_button { width: 100%; margin-top: 8px; } .pdp__buy form.cart { display: block; margin: 1rem 0; } .pdp__buy .woocommerce-variation-price { font-family: var(--label); margin: 10px 0; } /* Woo notices */ .woocommerce-message, .woocommerce-info, .woocommerce-error { font-family: var(--label); font-size: .82rem; border-top: 2px solid var(--stone); background: var(--bone); padding: 14px 18px; list-style: none; } /* Ordering / sort bar */ .filterbar .woocommerce-ordering { margin: 0; } /* Pagination */ .woocommerce-pagination ul { display: inline-flex; gap: 6px; list-style: none; padding: 0; } .woocommerce-pagination a, .woocommerce-pagination span { font-family: var(--label); font-size: .8rem; padding: .6em 1em; border: 1px solid var(--line); } .woocommerce-pagination .current { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* Related / upsell grid uses Woo's ul.products — force our grid */ .hollo-woo ul.products, .related ul.products, .up-sells ul.products { display: grid !important; grid-template-columns: repeat(3,1fr); gap: clamp(16px,2.4vw,36px); list-style: none; margin: 0; padding: 0; } .hollo-woo ul.products::before, .hollo-woo ul.products::after { display: none; } @media(max-width:760px){ .hollo-woo ul.products, .related ul.products, .up-sells ul.products { grid-template-columns: repeat(2,1fr); } } /* ============================================================ AAA components (theme) ============================================================ */ /* Accessibility */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 10001; background: var(--ink); color: #fff; padding: 12px 18px; font-family: var(--label); font-size: .8rem; } .skip-link:focus { left: 8px; top: 8px; } :focus-visible { outline: 2px solid var(--stone); outline-offset: 3px; } .screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; } /* Announcement bar */ .announce { background: var(--ink); color: rgba(255,255,255,.9); font-family: var(--label); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; overflow: hidden; transition: height .35s var(--ease), opacity .35s; } .announce .wrap { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 9px 0; position: relative; } .announce a { border-bottom: 1px solid var(--stone); } .announce__x { position: absolute; right: 0; background: none; border: 0; color: inherit; cursor: pointer; font-size: .8rem; } .announce--out { height: 0 !important; opacity: 0; padding: 0; } /* Transparent header over hero */ .head--transparent { background: transparent; border-bottom-color: transparent; } .head--transparent .head__logo, .head--transparent .nav a, .head--transparent .head__util a, .head--transparent .menu-toggle { color: #fff; } .head--transparent .head__logo span { color: var(--stone); } body.scrolled .head--transparent { background: rgba(255,255,255,.92); border-bottom-color: var(--line); } body.scrolled .head--transparent .head__logo, body.scrolled .head--transparent .nav a, body.scrolled .head--transparent .head__util a, body.scrolled .head--transparent .menu-toggle { color: var(--ink); } /* Product card — restructured */ .pcard__media { position: relative; aspect-ratio: 4/5; margin-bottom: 14px; background: var(--bone); overflow: hidden; } .pcard__link { display: block; width: 100%; height: 100%; } .pcard__link img, .pcard__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s var(--ease); } .pcard:hover .pcard__media img { transform: translateY(-4px); } .pcard__title { display: block; } .pcard .quick { position: absolute; inset: auto 0 16px 0; opacity: 0; transition: opacity .3s; text-align: center; z-index: 2; } .pcard:hover .quick { opacity: 1; } /* Badges */ .badges { position: absolute; top: 12px; left: 12px; display: grid; gap: 6px; z-index: 2; } .badge { font-family: var(--label); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; padding: 5px 9px; background: var(--ink); color: #fff; } .badge--sale { background: var(--bronze); } .badge--low { background: #8a4b3a; } .badge--new { background: var(--stone); color: var(--ink); } /* Wishlist + quick-view actions */ .pcard__actions { position: absolute; top: 12px; right: 12px; display: grid; gap: 8px; z-index: 3; opacity: 0; transform: translateX(6px); transition: .3s var(--ease); } .pcard:hover .pcard__actions { opacity: 1; transform: none; } .wish { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.92); cursor: pointer; font-size: 1rem; color: var(--ink-50); transition: .25s; line-height: 1; } .wish:hover { color: var(--bronze); } .wish.on { color: #fff; background: var(--bronze); border-color: var(--bronze); } .qv-btn { font-family: var(--label); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; padding: 9px 10px; background: rgba(255,255,255,.92); border: 1px solid var(--line); cursor: pointer; writing-mode: horizontal-tb; } .qv-btn:hover { background: var(--ink); color: #fff; } /* Quick-view modal */ .modal__box--qv { max-width: 880px; grid-template-columns: 1fr; } .qv { display: grid; grid-template-columns: 1fr 1fr; } .qv__img { background: var(--bone); } .qv__img img { width: 100%; height: 100%; object-fit: contain; } .qv__body { padding: clamp(28px,4vw,48px); align-content: center; display: grid; gap: 4px; } .qv__desc { color: var(--ink-70); font-size: .95rem; margin: .4rem 0 1.2rem; } .qv-loading { padding: 60px; text-align: center; font-family: var(--label); color: var(--ink-50); } @media(max-width:640px){ .qv { grid-template-columns: 1fr; } .qv__img { aspect-ratio: 4/3; } } /* Wishlist count in header */ .wish-count { font-variant-numeric: tabular-nums; } /* ============================================================ v2.1.1 — real-world WordPress/WooCommerce layout fixes (live audit) ============================================================ */ /* 1. Primary nav: wp_nav_menu outputs