/* ============================================================================= Auramystic — the whole stylesheet. Mobile-first. Custom properties carry the light/dark themes, so switching is one attribute flip on with no repaint of rules. ========================================================================== */ /* --- Fonts ---------------------------------------------------------------- */ /* Self-host in production: /assets/fonts/. Two weights only, subset to latin. */ @font-face { font-family: 'Auramystic Display'; src: url('../fonts/display-700.woff2') format('woff2'); font-weight: 700; font-display: swap; font-style: normal; } @font-face { font-family: 'Auramystic Text'; src: url('../fonts/text-400.woff2') format('woff2'); font-weight: 400; font-display: swap; font-style: normal; } @font-face { font-family: 'Auramystic Text'; src: url('../fonts/text-600.woff2') format('woff2'); font-weight: 600; font-display: swap; font-style: normal; } /* --- Theme tokens --------------------------------------------------------- */ :root { --aura-ink: oklch(0.18 0.006 60); --aura-ink-soft: oklch(0.45 0.006 60); --aura-ink-faint: oklch(0.62 0.006 60); --aura-bg: oklch(0.985 0.004 80); --aura-surface: oklch(1 0 0); --aura-line: oklch(0.88 0.005 80); --aura-line-soft: oklch(0.94 0.004 80); --aura-accent: oklch(0.58 0.14 255); --aura-accent-ink: oklch(1 0 0); --aura-ok: oklch(0.55 0.13 150); --aura-warn: oklch(0.62 0.15 55); --aura-ph: oklch(0.93 0.004 80); --aura-ph-alt: oklch(0.97 0.004 80); --aura-r: 4px; --aura-r-lg: 10px; --aura-gut: 16px; --aura-max: 1320px; --aura-tap: 44px; --aura-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --aura-fast: 140ms; --aura-slow: 520ms; --aura-display: 'Auramystic Display', 'Helvetica Neue', Helvetica, sans-serif; --aura-text: 'Auramystic Text', 'Helvetica Neue', Helvetica, sans-serif; --aura-mono: ui-monospace, 'SF Mono', Menlo, monospace; } [data-theme='dark'] { --aura-ink: oklch(0.96 0.004 80); --aura-ink-soft: oklch(0.74 0.005 80); --aura-ink-faint: oklch(0.58 0.005 80); --aura-bg: oklch(0.16 0.005 60); --aura-surface: oklch(0.21 0.005 60); --aura-line: oklch(0.31 0.006 60); --aura-line-soft: oklch(0.25 0.006 60); --aura-accent: oklch(0.72 0.13 255); --aura-accent-ink: oklch(0.16 0.005 60); --aura-ph: oklch(0.25 0.005 60); --aura-ph-alt: oklch(0.21 0.005 60); } /* --- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--aura-bg); color: var(--aura-ink); font: 400 16px/1.55 var(--aura-text); font-synthesis-weight: none; text-wrap: pretty; -webkit-font-smoothing: antialiased; transition: background-color var(--aura-fast) linear, color var(--aura-fast) linear; } img, svg, video, canvas { display: block; max-width: 100%; height: auto; } a { color: var(--aura-ink); text-decoration: none; text-underline-offset: 3px; } a:hover { color: var(--aura-accent); text-decoration: underline; } button { font: inherit; color: inherit; } h1, h2, h3 { font-family: var(--aura-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; margin: 0; } :where(a, button, input, select, summary):focus-visible { outline: 2px solid var(--aura-accent); outline-offset: 2px; border-radius: 2px; } .aura-sr, .aura-skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .aura-skip:focus { position: fixed; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip-path: none; padding: 10px 14px; background: var(--aura-ink); color: var(--aura-bg); } /* Striped placeholder — everywhere real imagery is not in yet. */ .aura-ph { display: grid; place-items: center; background: repeating-linear-gradient(45deg, var(--aura-ph) 0 8px, var(--aura-ph-alt) 8px 16px); color: var(--aura-ink-faint); font: 400 11px/1.4 var(--aura-mono); text-align: center; padding: 12px; min-height: 120px; } .aura-wrap { max-width: var(--aura-max); margin-inline: auto; padding-inline: var(--aura-gut); } .aura-wrap--narrow { max-width: 760px; } /* --- Ticker (velocity marquee) -------------------------------------------- */ .aura-ticker { overflow: hidden; background: var(--aura-ink); color: var(--aura-bg); border-bottom: 1px solid var(--aura-ink); } .aura-ticker__track { display: flex; gap: 32px; width: max-content; padding: 10px 0; font: 500 12px/1 var(--aura-mono); letter-spacing: 0.12em; text-transform: uppercase; /* --aura-vel is set by JS from scroll velocity; 1 at rest. */ animation: aura-marquee 26s linear infinite; animation-play-state: running; will-change: transform; } .aura-ticker__item { white-space: nowrap; } .aura-ticker__item::after { content: '·'; margin-left: 32px; opacity: 0.5; } @media (min-width: 900px) { .aura-ticker__track { padding: 11px 0; font-size: 13px; } } @keyframes aura-marquee { to { transform: translate3d(-50%, 0, 0); } } /* --- Header --------------------------------------------------------------- */ .aura-header { position: sticky; top: 0; z-index: 40; background: color-mix(in oklab, var(--aura-bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--aura-line); transition: transform var(--aura-slow) var(--aura-ease); } .aura-header.is-hidden { transform: translate3d(0, -101%, 0); } .aura-header__inner { max-width: var(--aura-max); margin-inline: auto; display: flex; align-items: center; gap: 12px; padding: 10px var(--aura-gut); min-height: 72px; } .aura-logo img { height: 56px; width: auto; } .aura-logo--invert img { filter: invert(1) grayscale(1); } [data-theme='dark'] .aura-logo img { filter: invert(1) grayscale(1); } [data-theme='dark'] .aura-logo--invert img { filter: none; } .aura-header__burger { margin-right: -4px; } .aura-burger, .aura-burger::before { display: block; width: 18px; height: 2px; background: currentColor; } .aura-burger::before { content: ''; transform: translateY(5px); } .aura-nav { display: none; } .aura-nav__list { display: flex; gap: 20px; margin: 0; padding: 0; list-style: none; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; } .aura-nav__list > li { position: relative; } .aura-nav__list .sub-menu { position: absolute; top: 100%; left: -14px; z-index: 50; min-width: 230px; margin: 0; padding: 8px 0; list-style: none; background: var(--aura-surface); border: 1px solid var(--aura-line); border-radius: var(--aura-r); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity var(--aura-fast) linear, transform var(--aura-fast) var(--aura-ease), visibility 0s linear var(--aura-fast); } .aura-nav__list > li:hover > .sub-menu, .aura-nav__list > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .aura-nav__list .sub-menu a { display: block; padding: 9px 16px; font-weight: 500; white-space: nowrap; } .aura-nav__list .sub-menu a:hover { background: var(--aura-line-soft); } .aura-nav__list > li.menu-item-has-children > a::after { content: ''; display: inline-block; margin-left: 6px; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); } /* Third level: collections fly out to the right of the case type. */ .aura-nav__list .sub-menu > li { position: relative; } .aura-nav__list .sub-menu .sub-menu { top: -9px; left: 100%; margin-left: 2px; min-width: 190px; max-height: 80vh; overflow-y: auto; } .aura-nav__list .sub-menu > li:hover > .sub-menu, .aura-nav__list .sub-menu > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .aura-nav__list .sub-menu > li.menu-item-has-children > a { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .aura-nav__list .sub-menu > li.menu-item-has-children > a::after { content: ''; width: 5px; height: 5px; flex: 0 0 auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); } .aura-catalog__coll { font-weight: 400; color: var(--aura-ink-soft); } /* Mobile drawer: submenus are just indented lists. */ .aura-drawer__nav .sub-menu { list-style: none; margin: 0; padding: 0 0 6px 14px; } .aura-drawer__nav .sub-menu a { font-size: 15px; font-weight: 500; padding: 9px 0; } .aura-header__actions { display: flex; align-items: center; gap: 4px; margin-left: auto; } .aura-iconbtn { display: grid; place-items: center; min-width: var(--aura-tap); min-height: var(--aura-tap); background: none; border: 0; cursor: pointer; padding: 0; border-radius: 50%; transition: background-color var(--aura-fast) linear; } .aura-iconbtn:hover { background: var(--aura-line-soft); } .aura-search { display: none; } .aura-search__input { width: 190px; height: 34px; padding: 0 14px; border: 1px solid var(--aura-line); border-radius: 99px; background: var(--aura-surface); color: inherit; font-size: 13px; } /* Icons: single-element CSS shapes, no SVG payload. */ .aura-icon { display: block; width: 18px; height: 18px; position: relative; } .aura-icon--heart { position: relative; width: 14px; height: 13px; margin: 3px auto 0; } .aura-icon--heart::before, .aura-icon--heart::after { content: ''; position: absolute; top: 0; width: 7px; height: 11px; background: currentColor; border-radius: 7px 7px 0 0; } .aura-icon--heart::before { left: 7px; transform-origin: 0 100%; transform: rotate(-45deg); } .aura-icon--heart::after { left: 0; transform-origin: 100% 100%; transform: rotate(45deg); } .aura-svg { display: block; width: 22px; height: 22px; } .aura-themeicon { transition: transform var(--aura-slow) var(--aura-ease); } [data-theme='dark'] .aura-themeicon { transform: rotate(180deg); } .aura-cartbtn { position: relative; } .aura-cart-count { position: absolute; top: 5px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; background: var(--aura-accent); color: var(--aura-accent-ink); border-radius: 99px; font: 600 10px/1 var(--aura-text); } .aura-cart-count[data-count='0'] { display: none; } /* --- Buttons -------------------------------------------------------------- */ .aura-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--aura-tap); padding: 0 24px; border: 1px solid var(--aura-ink); border-radius: 99px; font: 600 13px/1 var(--aura-text); letter-spacing: 0.02em; cursor: pointer; text-decoration: none; transition: transform var(--aura-fast) var(--aura-ease), background-color var(--aura-fast) linear, color var(--aura-fast) linear; } .aura-btn:hover { text-decoration: none; transform: translateY(-1px); } .aura-btn:active { transform: translateY(0); } .aura-btn--solid { background: var(--aura-ink); color: var(--aura-bg); } .aura-btn--solid:hover { background: var(--aura-accent); border-color: var(--aura-accent); color: var(--aura-accent-ink); } .aura-btn--ghost { background: transparent; color: var(--aura-ink); } .aura-btn--ghost:hover { background: var(--aura-ink); color: var(--aura-bg); } .aura-btn--block { width: 100%; } .aura-btn--sm { min-height: 38px; padding: 0 14px; font-size: 12px; } .aura-btn[disabled], .aura-btn.is-busy { opacity: 0.55; pointer-events: none; } /* --- Hero + kinetic reveal ------------------------------------------------ */ .aura-hero { position: relative; min-height: min(82svh, 720px); display: grid; } .aura-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; min-height: 100%; } .aura-hero__slides { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-x pan-y; } .aura-hero__slides::-webkit-scrollbar { display: none; } .aura-hero__slides.is-dragging { cursor: grabbing; scroll-snap-type: none; } .aura-hero__slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; } /* The text sits over the slides; let swipes through it, but keep the buttons live. */ .aura-hero__inner { pointer-events: none; } .aura-hero__cta a { pointer-events: auto; } .aura-hero__inner { position: relative; z-index: 1; align-self: end; padding: 24px var(--aura-gut) calc(28px + env(safe-area-inset-bottom)); display: grid; gap: 14px; background: linear-gradient(to top, oklch(0.18 0.006 60 / 0.72), transparent); color: oklch(0.99 0 0); } /* Kinetic text: each line clipped by its own mask, inner slides up. */ .aura-kinetic { font-size: clamp(38px, 11vw, 96px); max-width: 16ch; } .aura-kinetic__line { display: block; overflow: hidden; padding-bottom: 0.06em; } .aura-kinetic__inner { display: block; transform: translate3d(0, 105%, 0) rotate(2deg); opacity: 0; will-change: transform; } .aura-kinetic.is-in .aura-kinetic__inner { transform: none; opacity: 1; transition: transform 700ms var(--aura-ease) var(--aura-d, 0ms), opacity 400ms linear var(--aura-d, 0ms); } /* No-JS and reduced-motion: the text is simply there. */ .no-js .aura-kinetic__inner, .aura-kinetic.is-static .aura-kinetic__inner { transform: none; opacity: 1; } .aura-hero__sub { margin: 0; max-width: 42ch; font-size: 15px; color: oklch(0.99 0 0 / 0.88); } .aura-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; } .aura-hero__cta .aura-btn--solid { background: oklch(0.99 0 0); color: oklch(0.18 0.006 60); border-color: oklch(0.99 0 0); } .aura-hero__cta .aura-btn--ghost { color: oklch(0.99 0 0); border-color: oklch(0.99 0 0 / 0.7); } .aura-hero__cta .aura-btn--ghost:hover { background: oklch(0.99 0 0); color: oklch(0.18 0.006 60); } /* --- Sections ------------------------------------------------------------- */ .aura-section { max-width: var(--aura-max); margin-inline: auto; padding: 44px var(--aura-gut); } .aura-section--flush { padding-inline: 0; } .aura-section--flush .aura-section__head { padding-inline: var(--aura-gut); } .aura-section__head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; } .aura-section__title { font-size: clamp(22px, 5vw, 34px); } .aura-section__more { margin-left: auto; font-size: 13px; font-weight: 600; text-decoration: underline; } /* --- Finite category grid ------------------------------------------------- */ .aura-catgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .aura-catgrid__cell { opacity: 0; transform: translate3d(0, 22px, 0) scale(0.97); transition: opacity 420ms linear calc(var(--aura-i, 0) * 55ms), transform 620ms var(--aura-ease) calc(var(--aura-i, 0) * 55ms); } .aura-catgrid.is-in .aura-catgrid__cell { opacity: 1; transform: none; } .aura-cat { position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; border: 1px solid var(--aura-line); border-radius: var(--aura-r); background: var(--aura-surface); aspect-ratio: 4 / 5; transition: transform 420ms var(--aura-ease), border-color var(--aura-fast) linear; } .aura-cat:hover { border-color: var(--aura-ink); } .aura-cat__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; min-height: 100%; } /* Name sits bottom-left over a soft scrim so it reads on any image. */ .aura-cat::after { content: ''; position: absolute; inset: auto 0 0 0; height: 55%; pointer-events: none; background: linear-gradient(to top, oklch(0.12 0.005 60 / 0.72), transparent); } .aura-cat__name { position: relative; z-index: 1; display: block; padding: 0 14px 14px; text-align: left; font: 600 15px/1.2 var(--aura-text); color: oklch(0.99 0 0); } /* Neighbours ease away from the hovered tile; JS sets --aura-push. */ .aura-catgrid:hover .aura-cat { transform: translate3d(var(--aura-push-x, 0), var(--aura-push-y, 0), 0); } .aura-catgrid .aura-cat:hover { transform: scale(1.015); z-index: 2; } /* --- Product cards -------------------------------------------------------- */ /* Woo's clearfix pseudo-elements (display: table) become real grid cells and leave an empty first tile. The grid doesn't need a clearfix. */ ul.products::before, ul.products::after, .woocommerce ul.products::before, .woocommerce ul.products::after, .woocommerce-page ul.products::before, .woocommerce-page ul.products::after { content: none; display: none; } ul.products, .aura-products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; } .aura-card { position: relative; display: flex; flex-direction: column; } /* The link takes the spare height so the button sits on the same line in every card of a row, whatever the title wraps to. */ .aura-card__link { display: flex; flex-direction: column; gap: 7px; flex: 1 1 auto; } .aura-card__link .aura-card__price { margin-top: auto; } .aura-card__link:hover { text-decoration: none; } .aura-card__media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border: 1px solid var(--aura-line); border-radius: var(--aura-r); background: var(--aura-ph-alt); } .aura-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; min-height: 100%; transition: opacity 320ms linear, transform 700ms var(--aura-ease); } .aura-card__img--alt { opacity: 0; } @media (hover: hover) { .aura-card:hover .aura-card__img--alt { opacity: 1; } .aura-card:hover .aura-card__img { transform: scale(1.03); } } .aura-card__badges { position: absolute; top: 7px; left: 7px; z-index: 1; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } .aura-badge { background: var(--aura-ink); color: var(--aura-bg); padding: 3px 7px; border-radius: 2px; font: 600 9px/1 var(--aura-text); letter-spacing: 0.06em; text-transform: uppercase; } .aura-badge--alt { background: var(--aura-accent); color: var(--aura-accent-ink); } .aura-badge--outline { background: var(--aura-surface); color: var(--aura-ink); box-shadow: inset 0 0 0 1px var(--aura-ink); } .aura-card__name { font: 600 13px/1.35 var(--aura-text); font-family: var(--aura-text); letter-spacing: 0; } .aura-card__sizes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; } .aura-card__sizes li { min-height: 20px; padding: 0 7px; display: inline-flex; align-items: center; border: 1px solid var(--aura-line); border-radius: 99px; font: 600 10px/1 var(--aura-mono); color: var(--aura-ink-faint); } .aura-card__price { font: 600 13px/1 var(--aura-text); } .aura-card__price del { color: var(--aura-ink-faint); font-weight: 400; margin-left: 5px; } .aura-card__price ins { text-decoration: none; } .aura-card__wish { position: absolute; top: 5px; right: 5px; z-index: 2; width: 34px; height: 34px; display: grid; place-items: center; background: color-mix(in oklab, var(--aura-surface) 85%, transparent); border: 1px solid var(--aura-line); border-radius: 50%; cursor: pointer; } .aura-card__wish[aria-pressed='true'] { background: var(--aura-accent); border-color: var(--aura-accent); color: var(--aura-accent-ink); } .aura-card__add, .aura-card .button { margin-top: 8px; min-height: var(--aura-tap); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--aura-ink); border-radius: var(--aura-r); background: transparent; color: var(--aura-ink); font: 600 11px/1 var(--aura-text); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; } .aura-card__add:hover, .aura-card .button:hover { background: var(--aura-ink); color: var(--aura-bg); text-decoration: none; } .aura-card .added_to_cart { display: none; } /* --- Collection surfer ---------------------------------------------------- */ .aura-surfer { position: relative; } .aura-surfer__rail { list-style: none; margin: 0; padding: 4px var(--aura-gut) 14px; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: none; } .aura-surfer__rail::-webkit-scrollbar { display: none; } .aura-surfer__rail > .aura-card { flex: 0 0 auto; width: 46vw; max-width: 240px; scroll-snap-align: start; /* --aura-skew comes from scroll velocity in JS; 0 at rest. */ transform: skewX(var(--aura-skew, 0deg)); transition: transform 220ms var(--aura-ease); } .aura-surfer__nav { display: none; } /* --- Custom pitch + magnetic lines --------------------------------------- */ .aura-pitch { position: relative; overflow: hidden; border-block: 1px solid var(--aura-line); background: var(--aura-surface); } .aura-pitch__lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; pointer-events: none; } /* --- Social proof --------------------------------------------------------- */ /* --- Catalog -------------------------------------------------------------- */ .aura-crumbs { font: 400 11px/1.6 var(--aura-mono); color: var(--aura-ink-faint); display: flex; gap: 7px; flex-wrap: wrap; } .aura-crumbs a { color: inherit; } .aura-catalog__head { max-width: var(--aura-max); margin-inline: auto; padding: 18px var(--aura-gut) 16px; border-bottom: 1px solid var(--aura-line); } .aura-catalog__headrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .aura-catalog__title { font-size: clamp(22px, 6vw, 32px); margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; } .aura-catalog__count { font: 400 12px/1 var(--aura-mono); color: var(--aura-ink-faint); } .aura-catalog__desc { color: var(--aura-ink-soft); font-size: 14px; max-width: 62ch; margin-top: 12px; } .aura-catalog__bar { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; } .aura-catalog__bar .woocommerce-ordering { margin: 0; } .aura-catalog__bar select { min-height: 38px; padding: 0 30px 0 12px; border: 1px solid var(--aura-ink); border-radius: 99px; background: transparent; color: inherit; font: 600 12px/1 var(--aura-text); cursor: pointer; appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 14px center, right 9px center; background-size: 5px 5px; background-repeat: no-repeat; } .aura-filter-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; background: var(--aura-accent); color: var(--aura-accent-ink); border-radius: 99px; font: 600 10px/1 var(--aura-text); } .aura-catalog { max-width: var(--aura-max); margin-inline: auto; padding: 16px var(--aura-gut) 48px; } .aura-catalog__main { min-width: 0; } /* --- Filters -------------------------------------------------------------- */ .aura-filterform { display: grid; gap: 22px; padding: 18px 0; min-width: 0; } /* Inside the mobile drawer the form is the scrolling body, with side padding and the Apply row pinned to the bottom. The desktop sidebar overrides all of this. */ .aura-filters .aura-filterform { flex: 1 1 auto; align-content: start; overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px 0; } .aura-filters .aura-filterform__foot { margin: 0 -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--aura-line); } .aura-filtergroup { border: 0; margin: 0; padding: 0; min-width: 0; } .aura-filtergroup__legend { font: 600 10px/1 var(--aura-text); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px; color: var(--aura-ink-soft); } .aura-filtergroup__body { display: grid; gap: 2px; min-width: 0; } .aura-filtergroup--chip .aura-filtergroup__body { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; } .aura-filteropt { display: flex; align-items: center; gap: 9px; min-height: 38px; min-width: 0; cursor: pointer; font-size: 14px; } .aura-filteropt span { min-width: 0; overflow-wrap: anywhere; } .aura-filteropt__n { margin-left: auto; flex: 0 0 auto; font: 400 11px/1 var(--aura-mono); color: var(--aura-ink-faint); } .aura-filtergroup--chip .aura-filteropt { min-height: 36px; padding: 0 12px; gap: 0; border: 1px solid var(--aura-line); border-radius: 99px; font-size: 12px; font-weight: 600; } .aura-filtergroup--chip .aura-filteropt input { position: absolute; opacity: 0; pointer-events: none; } .aura-filtergroup--chip .aura-filteropt:has(input:checked) { background: var(--aura-ink); color: var(--aura-bg); border-color: var(--aura-ink); } .aura-filtergroup--chip .aura-filteropt__n { display: none; } .aura-pricerange { position: relative; height: 36px; min-width: 0; padding: 0 8px; margin-bottom: 16px; } .aura-pricerange__track { position: absolute; top: 50%; left: 8px; right: 8px; height: 3px; background: var(--aura-line); border-radius: 2px; transform: translateY(-50%); } .aura-pricerange__fill { position: absolute; top: 0; bottom: 0; background: var(--aura-ink); border-radius: 2px; } .aura-pricerange input[type='range'] { position: absolute; top: 50%; left: 0; right: 0; margin: 0; width: 100%; height: 16px; transform: translateY(-50%); background: transparent; pointer-events: none; appearance: none; -webkit-appearance: none; } .aura-pricerange input[type='range']::-webkit-slider-runnable-track { background: transparent; } .aura-pricerange input[type='range']::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; pointer-events: auto; width: 16px; height: 16px; margin-top: 0; border-radius: 50%; background: var(--aura-ink); border: 2px solid var(--aura-bg); box-shadow: 0 0 0 1px var(--aura-ink); cursor: pointer; } .aura-pricerange input[type='range']::-moz-range-track { background: transparent; } .aura-pricerange input[type='range']::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--aura-ink); border: 2px solid var(--aura-bg); cursor: pointer; } .aura-pricerange__labels { position: absolute; top: 100%; left: 8px; right: 8px; margin-top: 6px; display: flex; justify-content: space-between; font: 600 11px/1 var(--aura-mono); color: var(--aura-ink-soft); } .aura-filterform__foot { display: grid; gap: 10px; justify-items: center; min-width: 0; position: sticky; bottom: 0; padding: 12px 0; background: var(--aura-surface); } .aura-filterform__clear { font-size: 12px; text-decoration: underline; color: var(--aura-ink-soft); } /* --- Drawers -------------------------------------------------------------- */ .aura-scrim { position: fixed; inset: 0; z-index: 50; background: oklch(0.18 0.006 60 / 0.5); opacity: 0; transition: opacity 260ms linear; } .aura-scrim.is-open { opacity: 1; } .aura-drawer { position: fixed; top: 0; bottom: 0; z-index: 60; width: min(420px, 92vw); display: flex; flex-direction: column; background: var(--aura-surface); transition: transform 380ms var(--aura-ease); will-change: transform; } .aura-drawer--right { right: 0; transform: translate3d(101%, 0, 0); border-left: 1px solid var(--aura-line); } .aura-drawer--left { left: 0; transform: translate3d(-101%, 0, 0); border-right: 1px solid var(--aura-line); } .aura-drawer.is-open { transform: none; } .aura-drawer[hidden] { display: none; } .aura-drawer__head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--aura-line); flex: 0 0 auto; } .aura-drawer__title { font-size: 17px; margin-right: auto; } .aura-drawer__title #aura-cart-title-count { font: 400 13px/1 var(--aura-mono); color: var(--aura-ink-faint); margin-left: 4px; } .aura-drawer__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .aura-drawer__nav { list-style: none; margin: 0; padding: 10px 14px; display: grid; gap: 2px; } .aura-drawer__nav a { display: block; padding: 13px 0; font-size: 17px; font-weight: 600; border-bottom: 1px solid var(--aura-line-soft); } body.aura-locked { overflow: hidden; } /* --- Reward ladder -------------------------------------------------------- */ .aura-rewards { padding: 14px; border-bottom: 1px solid var(--aura-line); background: var(--aura-bg); } .aura-rewards__msg { margin: 0 0 10px; font-size: 13px; } .aura-rewards__msg strong { color: var(--aura-accent); } .aura-rewards__bar { height: 6px; border-radius: 99px; background: var(--aura-line); overflow: hidden; } .aura-rewards__fill { display: block; height: 100%; width: var(--aura-fill, 0%); background: var(--aura-ink); border-radius: 99px; transition: width 620ms var(--aura-ease); } .aura-rewards__tiers { list-style: none; margin: 14px 0 0; padding: 0; display: flex; } .aura-rewards__tier { flex: 1; text-align: center; display: grid; gap: 6px; justify-items: center; } .aura-rewards__dot { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--aura-line); background: var(--aura-surface); color: transparent; font-size: 18px; font-weight: 700; transition: background-color 240ms linear, border-color 240ms linear, color 240ms linear, transform 320ms var(--aura-ease); } .aura-rewards__tier.is-next .aura-rewards__dot { border-color: var(--aura-ink); border-style: solid; } .aura-rewards__tier.is-future .aura-rewards__dot { border-style: dashed; border-color: var(--aura-ink-faint); } .aura-rewards__tier.is-unlocked .aura-rewards__dot { background: var(--aura-ink); border-color: var(--aura-ink); color: var(--aura-bg); } .aura-rewards__tier.just-unlocked .aura-rewards__dot { transform: scale(1.15); } .aura-rewards__amt, .aura-rewards__label { font: 600 9px/1.3 var(--aura-text); } .aura-rewards__amt { color: var(--aura-ink-soft); } .aura-rewards__label { text-transform: uppercase; letter-spacing: 0.05em; } .aura-rewards__tier.is-future .aura-rewards__label { color: var(--aura-ink-faint); } /* --- Cart items ----------------------------------------------------------- */ .aura-cart-items { list-style: none; margin: 0; padding: 0; } .aura-cart-item { display: flex; gap: 12px; padding: 14px; border-bottom: 1px solid var(--aura-line-soft); } .aura-cart-item.is-busy { opacity: 0.5; pointer-events: none; } .aura-cart-item__media { flex: 0 0 64px; } .aura-cart-item__media img { width: 64px; height: 80px; object-fit: cover; border: 1px solid var(--aura-line); border-radius: 2px; } .aura-cart-item__main { flex: 1; min-width: 0; display: grid; gap: 5px; align-content: start; } .aura-cart-item__name { margin: 0; font: 600 13px/1.35 var(--aura-text); } .aura-cart-item__meta { margin: 0; font-size: 11px; color: var(--aura-ink-soft); } .aura-cart-item__meta p { margin: 0; } .aura-cart-item__art { margin: 0; font: 400 10px/1.4 var(--aura-mono); color: var(--aura-ink-faint); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .aura-chip { padding: 2px 6px; border-radius: 2px; font: 600 9px/1.4 var(--aura-text); text-transform: uppercase; letter-spacing: 0.05em; } .aura-chip--ok { background: color-mix(in oklab, var(--aura-ok) 18%, transparent); color: var(--aura-ok); } .aura-chip--warn { background: color-mix(in oklab, var(--aura-warn) 20%, transparent); color: var(--aura-warn); } .aura-cart-item__foot { display: flex; align-items: center; gap: 10px; margin-top: 3px; } .aura-qty { display: inline-flex; align-items: center; border: 1px solid var(--aura-line); border-radius: 99px; } .aura-qty button { width: 30px; height: 30px; background: none; border: 0; cursor: pointer; font-size: 15px; line-height: 1; } .aura-qty span { min-width: 20px; text-align: center; font: 600 12px/1 var(--aura-text); } .aura-cart-item__price { margin-left: auto; font: 600 13px/1 var(--aura-text); } .aura-cart-item__remove { background: none; border: 0; padding: 4px; cursor: pointer; font: 400 10px/1 var(--aura-mono); color: var(--aura-ink-faint); text-decoration: underline; } .aura-cart-empty { padding: 48px 20px; text-align: center; display: grid; gap: 16px; justify-items: center; color: var(--aura-ink-soft); } .aura-cart-upsell { padding: 14px; border-bottom: 1px solid var(--aura-line-soft); } .aura-cart-upsell__title { font: 600 10px/1 var(--aura-text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--aura-ink-soft); margin-bottom: 10px; } .aura-cart-upsell ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .aura-cart-upsell a { display: grid; gap: 4px; padding: 8px; border: 1px dashed var(--aura-line); border-radius: var(--aura-r); font-size: 11px; } .aura-cart-upsell img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; } .aura-cart-upsell__price { font-weight: 600; } .aura-cart-foot { flex: 0 0 auto; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--aura-line); display: grid; gap: 9px; background: var(--aura-surface); } .aura-cart-foot__row { display: flex; align-items: baseline; font-size: 15px; } .aura-cart-foot__row strong { margin-left: auto; font-size: 18px; } .aura-cart-foot__note { margin: 0; font-size: 11px; color: var(--aura-ink-faint); } .aura-cart-foot__note--win { color: var(--aura-ok); font-weight: 600; } /* --- Product page --------------------------------------------------------- */ .aura-pdp__wrap { max-width: var(--aura-max); margin-inline: auto; padding: 16px var(--aura-gut) 60px; } .aura-pdp__grid { display: grid; gap: 24px; margin-top: 12px; } .aura-pdp__media { min-width: 0; } .aura-pdp__info { display: grid; gap: 16px; align-content: start; } .aura-pdp__title { font-size: clamp(24px, 6vw, 36px); } .aura-pdp__rating { display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 2px; font-size: 13px; color: var(--aura-ink-soft); } .aura-pdp__rating .star-rating { font-size: 14px; color: var(--aura-warn); } .aura-pdp__rating span { text-decoration: underline; text-underline-offset: 2px; } .aura-pdp__material { margin: 0; font: 400 12px/1.5 var(--aura-mono); color: var(--aura-ink-faint); } .aura-pdp__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-size: 22px; font-weight: 600; } .aura-pdp__price del { color: var(--aura-ink-faint); font-size: 15px; font-weight: 400; } .aura-pdp__price ins { text-decoration: none; } .aura-pdp__tax { flex-basis: 100%; font: 400 11px/1 var(--aura-mono); color: var(--aura-ink-faint); } .aura-trust { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 12px; color: var(--aura-ink-soft); } .aura-trust li::before { content: '✓'; margin-right: 7px; color: var(--aura-ok); font-weight: 700; } .aura-accordion details { border-top: 1px solid var(--aura-line); } .aura-accordion summary { padding: 14px 0; cursor: pointer; font: 600 13px/1 var(--aura-text); list-style: none; display: flex; } .aura-accordion summary::-webkit-details-marker { display: none; } .aura-accordion summary::after { content: '+'; margin-left: auto; font-size: 17px; line-height: 1; } .aura-accordion details[open] summary::after { content: '–'; } .aura-accordion .aura-prose { padding-bottom: 16px; } /* --- Native WooCommerce reviews (#reviews on the product page) ------------ */ #reviews { max-width: var(--aura-max); margin: 48px auto 0; padding: 0 var(--aura-gut) 48px; } #reviews .woocommerce-Reviews-title { font-size: clamp(20px, 4vw, 28px); margin: 0 0 20px; } #reviews .commentlist { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } #reviews .comment_container { border: 1px solid var(--aura-line); border-radius: var(--aura-r-lg); padding: 18px; background: var(--aura-surface); } #reviews .comment-text { margin: 0; } #reviews .star-rating { margin-bottom: 8px; color: var(--aura-warn); } #reviews .woocommerce-review__author { font: 600 13px/1 var(--aura-text); } #reviews .woocommerce-review__dash { display: none; } #reviews .woocommerce-review__published-date { display: block; margin-top: 2px; font: 400 11px/1 var(--aura-mono); color: var(--aura-ink-faint); } #reviews .description p { margin: 10px 0 0; font-size: 14px; color: var(--aura-ink-soft); } #reviews #respond { max-width: 480px; } #reviews #respond .comment-form-rating select, #reviews #respond input[type='text'], #reviews #respond input[type='email'], #reviews #respond textarea { width: 100%; min-height: var(--aura-tap); padding: 0 14px; border: 1px solid var(--aura-line); border-radius: var(--aura-r); background: var(--aura-surface); color: inherit; font: inherit; } #reviews #respond textarea { min-height: 100px; padding: 12px 14px; } #reviews #respond p { margin: 0 0 14px; } #reviews #respond .form-submit input { display: inline-flex; align-items: center; justify-content: center; min-height: var(--aura-tap); padding: 0 24px; border: 1px solid var(--aura-ink); border-radius: 99px; background: var(--aura-ink); color: var(--aura-bg); font: 600 13px/1 var(--aura-text); cursor: pointer; } /* Woo variation selects, restyled. */ .variations { width: 100%; border-collapse: collapse; } .variations th, .variations td { display: block; text-align: left; padding: 0; } .variations th label { font: 600 10px/1 var(--aura-text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--aura-ink-soft); display: block; margin-bottom: 8px; } .variations td { margin-bottom: 16px; } .variations select { width: 100%; min-height: var(--aura-tap); padding: 0 34px 0 14px; border: 1px solid var(--aura-ink); border-radius: var(--aura-r); background: var(--aura-surface); color: inherit; font: 600 14px/1 var(--aura-text); appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 18px center, right 13px center; background-size: 5px 5px; background-repeat: no-repeat; } .aura-swatches { display: flex; flex-wrap: wrap; gap: 8px; } .aura-swatch { min-height: var(--aura-tap); padding: 0 16px; border: 1px solid var(--aura-ink); border-radius: var(--aura-r); background: transparent; color: var(--aura-ink); font: 600 13px/1 var(--aura-text); cursor: pointer; transition: background-color var(--aura-fast) linear, color var(--aura-fast) linear; } .aura-swatch:hover { background: var(--aura-line-soft); } .aura-swatch.is-active { background: var(--aura-ink); color: var(--aura-bg); } .reset_variations { font-size: 11px; text-decoration: underline; } .woocommerce-variation-price { font-size: 20px; font-weight: 600; margin-bottom: 12px; } form.cart { display: grid; gap: 12px; } form.cart .quantity { display: inline-flex; } form.cart .quantity input { width: 68px; min-height: var(--aura-tap); text-align: center; border: 1px solid var(--aura-ink); border-radius: var(--aura-r); background: var(--aura-surface); color: inherit; font-weight: 600; } form.cart .single_add_to_cart_button { flex: 1; min-height: 52px; padding: 0 24px; border: 1px solid var(--aura-ink); border-radius: var(--aura-r); background: var(--aura-ink); color: var(--aura-bg); font: 700 14px/1 var(--aura-text); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: background-color var(--aura-fast) linear; } form.cart .single_add_to_cart_button:hover { background: var(--aura-accent); border-color: var(--aura-accent); color: var(--aura-accent-ink); } form.cart .single_add_to_cart_button.disabled { opacity: 0.4; cursor: not-allowed; } form.cart .aura-buyrow { display: flex; gap: 10px; flex-wrap: wrap; } form.cart .aura-buyrow .quantity { flex: 0 0 auto; } form.cart .aura-buynow { flex: 1; min-height: 52px; padding: 0 24px; border: 1px solid var(--aura-ink); border-radius: var(--aura-r); background: transparent; color: var(--aura-ink); font: 700 14px/1 var(--aura-text); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: background-color var(--aura-fast) linear; } form.cart .aura-buynow:hover { background: var(--aura-line-soft); } .aura-stickybuy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: flex; align-items: center; gap: 12px; padding: 10px var(--aura-gut) calc(10px + env(safe-area-inset-bottom)); background: color-mix(in oklab, var(--aura-surface) 94%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--aura-line); transform: translate3d(0, 101%, 0); transition: transform 320ms var(--aura-ease); } .aura-stickybuy.is-in { transform: none; } .aura-stickybuy__price { font-weight: 600; } .aura-stickybuy .aura-btn { margin-left: auto; } /* --- Auth + dashboard ----------------------------------------------------- */ .aura-auth { max-width: 440px; margin: 40px auto 80px; padding-inline: var(--aura-gut); } .aura-auth__card { border: 1px solid var(--aura-line); border-radius: var(--aura-r-lg); padding: 26px 22px; background: var(--aura-surface); display: grid; gap: 18px; } .aura-auth__logo { justify-self: center; } .aura-auth__tabs { display: flex; border: 1px solid var(--aura-ink); border-radius: var(--aura-r); overflow: hidden; } .aura-auth__tab { flex: 1; min-height: 42px; background: none; border: 0; cursor: pointer; font: 600 12px/1 var(--aura-text); letter-spacing: 0.06em; text-transform: uppercase; } .aura-auth__tab.is-active { background: var(--aura-ink); color: var(--aura-bg); } .aura-auth__form { display: none; gap: 14px; } .aura-auth__form.is-active { display: grid; } .aura-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; } .aura-auth__or { display: flex; align-items: center; gap: 12px; color: var(--aura-ink-faint); font: 400 10px/1 var(--aura-mono); text-transform: uppercase; } .aura-auth__or::before, .aura-auth__or::after { content: ''; flex: 1; height: 1px; background: var(--aura-line); } .aura-auth__social a, .aura-auth__social button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: var(--aura-tap); border: 1px solid var(--aura-ink); border-radius: var(--aura-r); background: transparent; cursor: pointer; font-weight: 600; font-size: 13px; } .aura-field { display: grid; gap: 6px; margin: 0; } .aura-field label { font: 600 10px/1 var(--aura-text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--aura-ink-soft); } .aura-input, input[type='text'], input[type='email'], input[type='password'], input[type='tel'], textarea { width: 100%; min-height: var(--aura-tap); padding: 10px 14px; border: 1px solid var(--aura-line); border-radius: var(--aura-r); background: var(--aura-bg); color: inherit; font: 400 15px/1.4 var(--aura-text); } .aura-input:focus { border-color: var(--aura-ink); } .aura-check { display: flex; align-items: center; gap: 8px; cursor: pointer; } .aura-hint { font: 400 11px/1.5 var(--aura-mono); color: var(--aura-ink-faint); } .aura-hint--block { margin: 0; } .aura-dash { display: grid; gap: 28px; } .aura-dash__hello { font-size: clamp(22px, 6vw, 32px); } .aura-dash__title { font: 600 10px/1 var(--aura-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--aura-ink-soft); margin-bottom: 14px; } .aura-dash__empty { color: var(--aura-ink-faint); font-size: 14px; margin: 0; } .aura-dash__all { font-size: 12px; text-decoration: underline; } .aura-orders { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; } .aura-order { border: 1px solid var(--aura-line); border-radius: var(--aura-r); padding: 14px; background: var(--aura-surface); } .aura-order__head { display: flex; align-items: center; gap: 10px; } .aura-order__id { font: 600 13px/1 var(--aura-mono); } .aura-order__status { margin-left: auto; background: var(--aura-ink); color: var(--aura-bg); padding: 3px 8px; border-radius: 2px; font: 600 9px/1.4 var(--aura-text); text-transform: uppercase; letter-spacing: 0.06em; } .aura-order__track { height: 4px; background: var(--aura-line); border-radius: 99px; margin: 12px 0 7px; overflow: hidden; } .aura-order__fill { display: block; height: 100%; width: var(--aura-fill, 0%); background: var(--aura-ink); } .aura-order__steps { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; font: 400 9px/1 var(--aura-text); color: var(--aura-ink-faint); } .aura-order__steps .is-done { color: var(--aura-ink); font-weight: 600; } .aura-order__meta { margin: 10px 0 0; font: 400 11px/1 var(--aura-mono); color: var(--aura-ink-faint); } /* --- Legal ---------------------------------------------------------------- */ .aura-legal { max-width: 900px; margin: 0 auto; padding: 32px var(--aura-gut) 80px; } .aura-legal__stamp { margin: 0 0 10px; font: 400 10px/1 var(--aura-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--aura-ink-faint); } .aura-legal__title { font-size: clamp(28px, 8vw, 46px); margin-bottom: 10px; } .aura-legal__lede { margin: 0; color: var(--aura-ink-soft); font-size: 16px; max-width: 56ch; } .aura-legal__body { display: grid; gap: 28px; margin-top: 30px; } .aura-legal__toc { position: sticky; top: 72px; align-self: start; } .aura-legal__toc ul { list-style: none; margin: 0; padding-left: 12px; border-left: 2px solid var(--aura-ink); display: grid; gap: 9px; } .aura-legal__toc a { font-size: 12px; color: var(--aura-ink-soft); } .aura-legal__help { margin-top: 36px; border: 1px dashed var(--aura-line); border-radius: var(--aura-r); padding: 18px; display: grid; gap: 12px; justify-items: start; } .aura-legal__help p { margin: 0; font-weight: 600; } .aura-prose { font-size: 16px; line-height: 1.7; color: var(--aura-ink-soft); max-width: 68ch; } .aura-prose h2 { font-size: 20px; margin: 30px 0 10px; color: var(--aura-ink); scroll-margin-top: 80px; } .aura-prose h3 { font-size: 16px; margin: 22px 0 8px; color: var(--aura-ink); } .aura-prose p, .aura-prose ul, .aura-prose ol { margin: 0 0 14px; } .aura-prose a { color: var(--aura-accent); text-decoration: underline; } .aura-prose blockquote { margin: 18px 0; padding-left: 14px; border-left: 3px solid var(--aura-accent); color: var(--aura-ink); } .aura-prose--legal { max-width: 68ch; } .aura-article { padding-block: 32px 60px; } .aura-article__title { font-size: clamp(26px, 7vw, 40px); margin-bottom: 18px; } /* --- Footer --------------------------------------------------------------- */ .aura-footer { background: var(--aura-ink); color: var(--aura-bg); margin-top: 40px; padding-bottom: env(safe-area-inset-bottom); } .aura-footer__inner { max-width: var(--aura-max); margin-inline: auto; padding: 36px var(--aura-gut); display: grid; gap: 28px; } .aura-footer__brand { display: grid; gap: 14px; justify-items: start; } .aura-footer__line { margin: 0; font-size: 13px; opacity: 0.7; max-width: 34ch; } .aura-footer a { color: inherit; } .aura-footer a:hover { color: var(--aura-accent); } .aura-footer__title { font: 600 10px/1 var(--aura-text); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.55; margin-bottom: 12px; } .aura-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 13px; } .aura-footer__legal { max-width: var(--aura-max); margin-inline: auto; padding: 14px var(--aura-gut); display: flex; gap: 16px; flex-wrap: wrap; border-top: 1px solid color-mix(in oklab, currentColor 12%, transparent); font: 400 10px/1 var(--aura-mono); opacity: 0.5; } .aura-signup { display: flex; width: 100%; max-width: 320px; } .aura-signup input { flex: 1; min-width: 0; min-height: 42px; padding: 0 12px; border: 1px solid color-mix(in oklab, currentColor 30%, transparent); border-right: 0; border-radius: var(--aura-r) 0 0 var(--aura-r); background: transparent; color: inherit; font-size: 13px; } .aura-signup input::placeholder { color: color-mix(in oklab, currentColor 55%, transparent); } .aura-signup button { min-height: 42px; padding: 0 18px; cursor: pointer; border: 1px solid color-mix(in oklab, currentColor 30%, transparent); border-radius: 0 var(--aura-r) var(--aura-r) 0; background: color-mix(in oklab, currentColor 10%, transparent); color: inherit; font: 600 12px/1 var(--aura-text); } .aura-empty { padding: 60px 20px; text-align: center; display: grid; gap: 16px; justify-items: center; color: var(--aura-ink-soft); } .aura-loadmore { padding: 32px 0; display: flex; justify-content: center; } .aura-loadmore .aura-btn[disabled] { opacity: 0.5; cursor: wait; } .aura-pagination { padding: 32px 0; display: flex; justify-content: center; } .aura-pagination ul, .woocommerce-pagination ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; } .woocommerce-pagination a, .woocommerce-pagination span { display: grid; place-items: center; min-width: 40px; min-height: 40px; border: 1px solid var(--aura-line); border-radius: var(--aura-r); font-size: 13px; font-weight: 600; } .woocommerce-pagination .current { background: var(--aura-ink); color: var(--aura-bg); border-color: var(--aura-ink); } /* ============================================================================= Breakpoints. Mobile is the base; these only add. ========================================================================== */ @media (min-width: 600px) { :root { --aura-gut: 24px; } ul.products, .aura-products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 14px; } .aura-catgrid { grid-template-columns: repeat(3, 1fr); gap: 12px; } .aura-surfer__rail > .aura-card { width: 30vw; } .aura-footer__inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .aura-cart-upsell ul { grid-template-columns: 1fr 1fr; } } @media (min-width: 900px) { .aura-stickybuy { display: none; } .aura-hero { min-height: min(78vh, 760px); } .aura-hero__inner { padding: 60px 40px; max-width: var(--aura-max); margin-inline: auto; width: 100%; } .aura-catgrid { grid-template-columns: repeat(4, 1fr); } ul.products, .aura-products { grid-template-columns: repeat(4, minmax(0, 1fr)); } .aura-products--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); } .aura-surfer__rail { padding-inline: var(--aura-gut); } .aura-surfer__rail > .aura-card { width: 260px; max-width: none; } .aura-surfer__nav { display: flex; gap: 6px; position: absolute; top: -52px; right: var(--aura-gut); } .aura-surfer__nav button { width: 38px; height: 38px; border-radius: 50%; cursor: pointer; border: 1px solid var(--aura-line); background: var(--aura-surface); } .aura-surfer__nav button:disabled { opacity: 0.35; cursor: default; } /* Catalog: real sidebar, no drawer. */ .aura-catalog { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 32px; } .aura-catalog .aura-filters { position: sticky; top: 124px; align-self: start; width: auto; min-width: 0; inset: auto; transform: none; z-index: 1; background: transparent; border: 0; display: block; max-height: none; overflow-y: visible; } .aura-catalog .aura-filters[hidden] { display: block; } .aura-catalog .aura-filters .aura-filterform { padding: 18px 0; flex: none; overflow: visible; } .aura-filters__head { display: none; } .aura-catalog .aura-filters .aura-filterform__foot { position: static; background: transparent; margin: 0; padding: 12px 0; border-top: 0; } .aura-catalog__bar [data-aura-open='filters'] { display: none; } .aura-pdp__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: start; } .aura-pdp__media { position: sticky; top: 96px; } .aura-legal__body { grid-template-columns: 200px minmax(0, 1fr); gap: 48px; } } @media (min-width: 1200px) { ul.products, .aura-products { gap: 24px 18px; } } /* --- Motion + data saving ------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .aura-kinetic__inner { transform: none; opacity: 1; } .aura-catgrid__cell { opacity: 1; transform: none; } .aura-pitch__lines { display: none; } } @media print { .aura-header, .aura-footer, .aura-ticker, .aura-drawer, .aura-scrim, .aura-stickybuy { display: none !important; } body { background: #fff; color: #000; } } /* --- WooCommerce notices --------------------------------------------------- */ .woocommerce-error, .woocommerce-message, .woocommerce-info { list-style: none; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--aura-line); border-left: 3px solid var(--aura-accent); border-radius: var(--aura-r); background: var(--aura-surface); font-size: 13px; } .woocommerce-error { border-left-color: var(--aura-warn); } /* Woo's own status icon sits absolutely at the left; leave it room. */ .woocommerce-error, .woocommerce-message, .woocommerce-info { position: relative; padding-left: 44px; } .woocommerce-error::before, .woocommerce-message::before, .woocommerce-info::before { left: 14px; top: 12px; } .aura-acct .woocommerce-error, .aura-acct .woocommerce-message, .aura-acct .woocommerce-info { padding-left: 14px; } .woocommerce-message .button { margin-left: 8px; text-decoration: underline; } /* --- Category tree (shop sidebar) ------------------------------------------ */ .aura-catgroup { border-bottom: 1px solid var(--aura-line-soft); } .aura-catgroup summary { display: flex; align-items: center; justify-content: space-between; min-height: 40px; cursor: pointer; list-style: none; font: 600 14px/1.2 var(--aura-text); } .aura-catgroup summary::-webkit-details-marker { display: none; } .aura-catgroup__chev { width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--aura-fast) var(--aura-ease); } .aura-catgroup[open] .aura-catgroup__chev { transform: translateY(2px) rotate(-135deg); } .aura-catgroup__kids { display: grid; gap: 2px; padding: 0 0 10px 14px; } /* --- Category tiles leading a heading page ---------------------------------- */ .aura-subcats { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (min-width: 600px) { .aura-subcats { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 900px) { .aura-subcats { gap: 16px; } } /* Tile pages have no sidebar, so the layout is a single full-width column. */ .aura-catalog.aura-catalog--tiles { display: block; } @media (min-width: 1200px) { .aura-catalog--tiles .aura-subcats { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* --- Homepage collections strip --------------------------------------------- */ /* Scrolled by auramystic.js (auto-drift, hover pause, arrows). The track is moved with a transform, so the viewport just clips. */ .aura-collections { position: relative; overflow: hidden; } .aura-collections__track { display: flex; gap: 12px; width: max-content; will-change: transform; } .aura-collections__list { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; } .aura-collections__list > li { flex: 0 0 clamp(170px, 20vw, 250px); } .aura-collections__arrow { position: absolute; top: 50%; z-index: 3; width: 44px; height: 44px; transform: translateY(-50%); display: grid; place-items: center; cursor: pointer; font-size: 18px; line-height: 1; background: var(--aura-surface); color: var(--aura-ink); border: 1px solid var(--aura-line); border-radius: 50%; box-shadow: 0 2px 14px oklch(0 0 0 / 0.18); transition: background-color var(--aura-fast) linear, border-color var(--aura-fast) linear; } .aura-collections__arrow:hover { border-color: var(--aura-ink); } .aura-collections__arrow--prev { left: 8px; } .aura-collections__arrow--next { right: 8px; } @media (prefers-reduced-motion: reduce) { .aura-collections { overflow-x: auto; } .aura-collections__track { width: auto; } .aura-collections__list[aria-hidden="true"] { display: none; } } /* --- "The one who bought" reel ---------------------------------------------------- */ /* Left-to-right, not clickable. Two identical lists; the track slides from -(one list + gap) back to 0. The pointer-driven lines canvas sits behind it. */ .aura-reelsec { padding: 64px 0; } .aura-reelsec__head { position: relative; z-index: 1; max-width: var(--aura-max); margin-inline: auto; padding-inline: var(--aura-gut); } .aura-reel { position: relative; z-index: 1; overflow: hidden; pointer-events: none; user-select: none; -webkit-user-select: none; } .aura-reel__track { display: flex; gap: 12px; width: max-content; animation: aura-reel 70s linear infinite; will-change: transform; } .aura-reel__list { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; } .aura-reel__tile { flex: 0 0 clamp(150px, 16vw, 210px); aspect-ratio: 9 / 16; position: relative; overflow: hidden; border: 1px solid var(--aura-line); border-radius: var(--aura-r-lg); background: var(--aura-ph-alt); } .aura-reel__tile img, .aura-reel__tile video, .aura-reel__ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } @keyframes aura-reel { from { transform: translate3d(calc(-50% - 6px), 0, 0); } to { transform: translate3d(0, 0, 0); } } @media (prefers-reduced-motion: reduce) { .aura-reel__track { animation: none; transform: none; } .aura-reel__list + .aura-reel__list { display: none; } } .aura-catgroup__sub { margin: 10px 0 2px; padding-top: 10px; border-top: 1px solid var(--aura-line-soft); font: 600 10px/1 var(--aura-text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--aura-ink-soft); } /* Header: the case-type menu needs ~1100px; below that the burger menu takes over, and search appears once there is room. */ .aura-nav__list > li > a { white-space: nowrap; } @media (min-width: 1100px) { .aura-header__burger { display: none; } .aura-nav { display: block; } } @media (min-width: 1320px) { .aura-search { display: block; } } .aura-subcats__after { margin: 28px 0 14px; font-size: 18px; } /* --- "From our customers": two opposing rows, photo / review alternating ----- */ .aura-wallsec { overflow: hidden; } .aura-wall { overflow: hidden; pointer-events: none; user-select: none; -webkit-user-select: none; } .aura-wall + .aura-wall { margin-top: 12px; } .aura-wall__track { display: flex; gap: 12px; width: max-content; will-change: transform; } .aura-wall--a .aura-wall__track { animation: aura-wall-left 110s linear infinite; } .aura-wall--b .aura-wall__track { animation: aura-wall-right 110s linear infinite; } .aura-wall__list { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; } .aura-wall__tile { flex: 0 0 auto; height: clamp(150px, 16vw, 210px); border-radius: var(--aura-r-lg); overflow: hidden; } .aura-wall__tile--photo { aspect-ratio: 1; position: relative; border: 1px solid var(--aura-line); background: var(--aura-ph-alt); } .aura-wall__tile--photo img, .aura-wall__ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .aura-wall__tile--review { width: clamp(210px, 22vw, 290px); padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--aura-surface); border: 1px solid var(--aura-line); } .aura-wall__who { display: flex; align-items: center; gap: 10px; } .aura-wall__avatar { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--aura-ink); color: var(--aura-bg); font: 700 12px/1 var(--aura-text); letter-spacing: 0.02em; } .aura-wall__stars { color: var(--aura-warn); font-size: 14px; letter-spacing: 1px; white-space: nowrap; } .aura-wall__tile--review p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--aura-ink); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .aura-wall__skel { display: block; border-radius: 99px; background: var(--aura-line); } .aura-wall__avatar.aura-wall__skel { background: var(--aura-line); } .aura-wall__skel--stars { width: 90px; height: 10px; } .aura-wall__skel--line { height: 10px; } .aura-wall__skel--short { width: 60%; } /* Two identical lists side by side: slide by one list's width (+ the gap). */ @keyframes aura-wall-left { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-50% - 6px), 0, 0); } } @keyframes aura-wall-right { from { transform: translate3d(calc(-50% - 6px), 0, 0); } to { transform: translate3d(0, 0, 0); } } @media (prefers-reduced-motion: reduce) { .aura-wall--a .aura-wall__track, .aura-wall--b .aura-wall__track { animation: none; transform: none; } .aura-wall__list + .aura-wall__list { display: none; } } /* Cart drawer: items scroll, the subtotal + checkout stay pinned to the bottom. */ #aura-cart-body { display: flex; flex-direction: column; overflow: hidden; } .aura-cart-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } #aura-cart-body > .aura-cart-foot { box-shadow: 0 -8px 20px -14px oklch(0 0 0 / 0.35); } /* ============================================================================= My Account ========================================================================== */ .aura-wrap--account { max-width: 1120px; padding-block: 28px 64px; } .aura-wrap--account > .aura-article__title { font-size: clamp(24px, 5vw, 34px); margin: 0 0 18px; } .aura-wrap--account .aura-prose { max-width: none; } .aura-acct { display: grid; gap: 22px; align-items: start; } .aura-acct__content { min-width: 0; } /* Menu: profile header + links. Pills on phones, a column from 900px. */ .aura-acct__nav { display: grid; gap: 14px; } .aura-acct__user { display: flex; align-items: center; gap: 12px; } .aura-acct__avatar { flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--aura-ink); color: var(--aura-bg); font: 700 15px/1 var(--aura-text); } .aura-acct__who { display: grid; gap: 2px; min-width: 0; } .aura-acct__who strong { font: 600 15px/1.2 var(--aura-text); } .aura-acct__who span { font: 400 11px/1.3 var(--aura-mono); color: var(--aura-ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aura-acct__menu { list-style: none; margin: 0; padding: 0 0 4px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; } .aura-acct__menu::-webkit-scrollbar { display: none; } .aura-acct__menu a { display: flex; align-items: center; min-height: 40px; padding: 0 16px; white-space: nowrap; border: 1px solid var(--aura-line); border-radius: 99px; font: 600 13px/1 var(--aura-text); color: var(--aura-ink-soft); transition: background-color var(--aura-fast) linear, color var(--aura-fast) linear, border-color var(--aura-fast) linear; } .aura-acct__menu a:hover { color: var(--aura-ink); border-color: var(--aura-ink); text-decoration: none; } .aura-acct__menu .is-active a { background: var(--aura-ink); color: var(--aura-bg); border-color: var(--aura-ink); } .aura-acct__menu .aura-acct__item--customer-logout a { margin-left: auto; } @media (min-width: 900px) { .aura-acct { grid-template-columns: 250px minmax(0, 1fr); gap: 48px; } .aura-acct__nav { position: sticky; top: 124px; padding: 20px; border: 1px solid var(--aura-line); border-radius: var(--aura-r-lg); background: var(--aura-surface); } .aura-acct__menu { flex-direction: column; overflow: visible; gap: 2px; padding: 0; } .aura-acct__menu a { border: 0; border-radius: var(--aura-r); padding: 0 12px; min-height: 42px; } .aura-acct__menu a:hover { background: var(--aura-line-soft); } .aura-acct__menu .aura-acct__item--customer-logout { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--aura-line-soft); } .aura-acct__menu .aura-acct__item--customer-logout a { margin-left: 0; } } /* Dashboard */ .aura-dash__head { display: grid; gap: 6px; } .aura-dash__kicker { margin: 0; font: 600 10px/1 var(--aura-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--aura-ink-faint); } .aura-dash__lede { margin: 0; color: var(--aura-ink-soft); font-size: 15px; max-width: 52ch; } .aura-dash__stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .aura-dash__stats a { display: grid; gap: 4px; padding: 16px; height: 100%; border: 1px solid var(--aura-line); border-radius: var(--aura-r-lg); background: var(--aura-surface); transition: border-color var(--aura-fast) linear; } .aura-dash__stats a:hover { border-color: var(--aura-ink); text-decoration: none; } .aura-dash__stats strong { font: 700 clamp(20px, 4vw, 28px)/1.1 var(--aura-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aura-dash__stats span { font: 400 11px/1.3 var(--aura-mono); color: var(--aura-ink-faint); } .aura-dash__block { display: grid; gap: 12px; } .aura-dash__title { margin: 0; } /* Forms inside the account (details, addresses, password reset) */ .aura-acct__content form .form-row, .aura-wrap--account form .form-row { display: grid; gap: 7px; margin: 0 0 16px; padding: 0; } .aura-acct__content form .form-row label { font: 600 10px/1 var(--aura-text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--aura-ink-soft); } .aura-acct__content form .form-row label .required { color: var(--aura-warn); text-decoration: none; } .aura-acct__content .input-text, .aura-acct__content select, .aura-acct__content textarea, .aura-wrap--account .input-text, .aura-wrap--account select { width: 100%; min-height: var(--aura-tap); padding: 0 14px; border: 1px solid var(--aura-line); border-radius: var(--aura-r); background: var(--aura-surface); color: inherit; font: 400 15px/1.2 var(--aura-text); } .aura-acct__content textarea { padding: 12px 14px; min-height: 110px; } .aura-acct__content .input-text:focus, .aura-acct__content select:focus { outline: 2px solid var(--aura-accent); outline-offset: 1px; border-color: transparent; } .aura-acct__content .woocommerce-address-fields__field-wrapper, .aura-acct__content .woocommerce-EditAccountForm { display: grid; grid-template-columns: 1fr; column-gap: 14px; } .aura-acct__content .woocommerce-EditAccountForm fieldset { grid-column: 1 / -1; border: 1px solid var(--aura-line); border-radius: var(--aura-r-lg); padding: 18px; margin: 8px 0 18px; } .aura-acct__content .woocommerce-EditAccountForm legend { padding: 0 8px; font: 600 12px/1 var(--aura-text); } .aura-acct__content .form-row-wide, .aura-acct__content .woocommerce-EditAccountForm > p:not(.form-row-first):not(.form-row-last), .aura-acct__content .woocommerce-EditAccountForm > .clear { grid-column: 1 / -1; } .aura-acct__content em { font: 400 12px/1.4 var(--aura-mono); font-style: normal; color: var(--aura-ink-faint); } @media (min-width: 640px) { .aura-acct__content .woocommerce-address-fields__field-wrapper, .aura-acct__content .woocommerce-EditAccountForm { grid-template-columns: 1fr 1fr; } } .aura-acct__content .button, .aura-acct__content button[type='submit'], .aura-wrap--account .woocommerce-Button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--aura-tap); padding: 0 26px; border: 1px solid var(--aura-ink); border-radius: 99px; background: var(--aura-ink); color: var(--aura-bg); font: 600 13px/1 var(--aura-text); letter-spacing: 0.02em; cursor: pointer; text-decoration: none; transition: background-color var(--aura-fast) linear, color var(--aura-fast) linear; } .aura-acct__content .button:hover, .aura-acct__content button[type='submit']:hover { background: var(--aura-accent); border-color: var(--aura-accent); color: var(--aura-accent-ink); } .aura-acct__content .button.is-secondary, .aura-acct__content a.button.view, .aura-acct__content .woocommerce-orders-table .button { background: transparent; color: var(--aura-ink); } .aura-acct__content .woocommerce-orders-table .button:hover { background: var(--aura-ink); color: var(--aura-bg); border-color: var(--aura-ink); } /* Orders table: a clean table on wide screens, stacked cards on phones. */ .aura-acct__content table.shop_table, .aura-acct__content table.woocommerce-orders-table { width: 100%; border-collapse: collapse; font-size: 14px; } .aura-acct__content table.shop_table th { text-align: left; padding: 10px 12px; font: 600 10px/1 var(--aura-text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--aura-ink-soft); border-bottom: 1px solid var(--aura-ink); } .aura-acct__content table.shop_table td { padding: 14px 12px; border-bottom: 1px solid var(--aura-line); vertical-align: middle; } .aura-acct__content table.shop_table a:not(.button) { text-decoration: underline; text-underline-offset: 3px; } .aura-acct__content .woocommerce-orders-table__cell-order-number a { font: 600 13px/1 var(--aura-mono); } .aura-acct__content .woocommerce-orders-table__cell-order-actions { white-space: nowrap; } @media (max-width: 719px) { .aura-acct__content table.woocommerce-orders-table thead { display: none; } .aura-acct__content table.woocommerce-orders-table, .aura-acct__content table.woocommerce-orders-table tbody { display: block; } .aura-acct__content table.woocommerce-orders-table tr { display: grid; gap: 8px; margin-bottom: 12px; padding: 14px; border: 1px solid var(--aura-line); border-radius: var(--aura-r-lg); background: var(--aura-surface); } .aura-acct__content table.woocommerce-orders-table td { display: flex; justify-content: space-between; gap: 16px; padding: 0; border: 0; text-align: right; } .aura-acct__content table.woocommerce-orders-table td::before { content: attr(data-title); font: 600 10px/1.6 var(--aura-text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--aura-ink-faint); text-align: left; } .aura-acct__content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions { justify-content: flex-start; padding-top: 4px; } .aura-acct__content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions::before { display: none; } } .aura-acct__content .woocommerce-pagination--without-numbers { display: flex; gap: 10px; margin-top: 16px; } /* Order view + addresses */ .aura-acct__content mark { background: var(--aura-ink); color: var(--aura-bg); padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; } .aura-acct__content .woocommerce-order-details__title, .aura-acct__content .woocommerce-column__title, .aura-acct__content .woocommerce-Address-title h2, .aura-acct__content h2 { font-size: 18px; margin: 28px 0 12px; } .aura-acct__content > p:first-child { color: var(--aura-ink-soft); } .aura-acct__content .woocommerce-Addresses, .aura-acct__content .woocommerce-columns--addresses { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 640px) { .aura-acct__content .woocommerce-Addresses, .aura-acct__content .woocommerce-columns--addresses { grid-template-columns: 1fr 1fr; } } .aura-acct__content .woocommerce-Address, .aura-acct__content .woocommerce-column--billing-address, .aura-acct__content .woocommerce-column--shipping-address { width: auto; float: none; padding: 18px; border: 1px solid var(--aura-line); border-radius: var(--aura-r-lg); background: var(--aura-surface); } .aura-acct__content .woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .aura-acct__content .woocommerce-Address-title h2, .aura-acct__content .woocommerce-column__title { margin: 0 0 8px; } .aura-acct__content .woocommerce-Address-title a.edit { font-size: 12px; font-weight: 600; text-decoration: underline; } .aura-acct__content address { font-style: normal; line-height: 1.6; color: var(--aura-ink-soft); } /* Login / signup card */ .aura-auth { margin-top: 12px; } .aura-auth__lede { margin: 0; text-align: center; color: var(--aura-ink-soft); font-size: 14px; } .aura-wrap--account .select2-container .select2-selection--single { min-height: var(--aura-tap); display: flex; align-items: center; border: 1px solid var(--aura-line); border-radius: var(--aura-r); background: var(--aura-surface); } /* The account lives inside .aura-prose, which underlines and colours links; undo that for UI links. */ .aura-acct a:not(.button):not(.edit):not(.aura-dash__all):not(.woocommerce-LostPassword) { color: inherit; text-decoration: none; } .aura-acct .aura-dash__stats a { color: var(--aura-ink); } .aura-acct .aura-dash__stats span { color: var(--aura-ink-faint); } .aura-acct .aura-acct__menu .is-active a { color: var(--aura-bg); } .aura-acct .aura-dash__all, .aura-acct .woocommerce-Address-title a.edit { color: var(--aura-ink); text-decoration: underline; text-underline-offset: 3px; } .aura-acct .aura-order__id { text-decoration: underline; text-underline-offset: 3px; } .aura-acct__title { font-size: clamp(22px, 4.5vw, 30px); margin: 0 0 18px; color: var(--aura-ink); } /* Woo's own notices: readable text, no stray icon, button sits on the right. */ .aura-acct .woocommerce-info, .aura-acct .woocommerce-message, .aura-acct .woocommerce-error { color: var(--aura-ink); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; } .aura-acct .woocommerce-info::before, .aura-acct .woocommerce-message::before, .aura-acct .woocommerce-error::before { content: none; } .aura-acct .woocommerce-info .button, .aura-acct .woocommerce-message .button { margin-left: auto; min-height: 38px; padding: 0 18px; } /* Beat WooCommerce's own field styling (white boxes) and keep the dark theme. */ body .aura-acct__content form .form-row input.input-text, body .aura-acct__content form .form-row textarea, body .aura-acct__content form .form-row select, body .aura-acct__content form input[type='password'], body .aura-acct__content form input[type='email'], body .aura-acct__content form input[type='text'], body .aura-acct__content form input[type='tel'] { background: var(--aura-surface); color: var(--aura-ink); border: 1px solid var(--aura-line); border-radius: var(--aura-r); box-shadow: none; } body .aura-acct__content form input::placeholder { color: var(--aura-ink-faint); } .aura-acct__content .password-input { position: relative; display: block; } .aura-acct__content .show-password-input { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; } /* selectWoo (country / state) */ .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--aura-ink); line-height: 1.2; padding-left: 14px; } .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); height: auto; } .select2-dropdown { background: var(--aura-surface); color: var(--aura-ink); border: 1px solid var(--aura-ink); border-radius: var(--aura-r); } .select2-container--default .select2-search--dropdown .select2-search__field { background: var(--aura-bg); color: var(--aura-ink); border: 1px solid var(--aura-line); } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--aura-ink); color: var(--aura-bg); } .select2-container--default .select2-results__option[aria-selected='true'] { background: var(--aura-line-soft); } /* Account polish: full-contrast text, notice button, single-border order cards. */ .aura-acct { color: var(--aura-ink); } .aura-acct__who strong { color: var(--aura-ink); } .aura-acct .aura-acct__menu a { color: var(--aura-ink-soft); } .aura-acct .aura-acct__menu .is-active a { color: var(--aura-bg); } .aura-acct .woocommerce-info .button, .aura-acct .woocommerce-message .button { float: none; background: var(--aura-ink); color: var(--aura-bg); border: 1px solid var(--aura-ink); line-height: 1; order: 2; } .aura-acct__content table.shop_table { border: 0; border-radius: 0; margin: 0; } @media (max-width: 719px) { .aura-acct__content table.woocommerce-orders-table tbody th { display: block; padding: 0 0 8px; border: 0; border-bottom: 1px solid var(--aura-line-soft); text-align: left; font: 600 14px/1 var(--aura-mono); letter-spacing: 0; text-transform: none; color: var(--aura-ink); } .aura-acct__content table.woocommerce-orders-table tbody th::before { content: none; } .aura-acct__content table.woocommerce-orders-table td { display: block; text-align: right; } .aura-acct__content table.woocommerce-orders-table td::before { float: left; } .aura-acct__content table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions { text-align: left; } } /* The link-colour reset above is very specific; these win over it. */ body .aura-acct .aura-acct__menu li a:not(.button):not(.edit):not(.aura-dash__all):not(.woocommerce-LostPassword) { color: var(--aura-ink-soft); } body .aura-acct .aura-acct__menu li.is-active a:not(.button):not(.edit):not(.aura-dash__all):not(.woocommerce-LostPassword) { color: var(--aura-bg); } body .aura-acct .aura-acct__menu li a:not(.button):hover { color: var(--aura-ink); } body .aura-acct .aura-acct__menu li.is-active a:not(.button):hover { color: var(--aura-bg); } body .aura-acct .woocommerce-info .button, body .aura-acct .woocommerce-message .button { display: inline-flex; align-items: center; justify-content: center; height: auto; min-height: 40px; padding: 0 18px; line-height: 1; margin: 0 0 0 auto; } body .aura-acct .woocommerce-orders-table .button, body .aura-acct a.button.view { border: 1px solid var(--aura-ink); background: transparent; color: var(--aura-ink); min-height: 38px; padding: 0 20px; } body .aura-acct .woocommerce-orders-table .button:hover { background: var(--aura-ink); color: var(--aura-bg); } body .aura-acct .woocommerce-orders-table .button, body .aura-acct a.button.view { display: inline-flex; align-items: center; justify-content: center; line-height: 1; } /* --- About & Policies: two-column dropdown (Help | Legal) -------------------- */ .aura-nav__list .aura-policies__panel { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 6px 36px; min-width: 400px; padding: 18px 24px 14px; } .aura-policies__col ul { list-style: none; margin: 0; padding: 0; } .aura-policies__title { display: block; margin-bottom: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--aura-line-soft); font: 600 10px/1 var(--aura-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--aura-ink-faint); } .aura-nav__list .aura-policies__col a { display: block; padding: 8px 0; font-weight: 500; white-space: nowrap; } .aura-nav__list .aura-policies__col a:hover { background: none; text-decoration: underline; text-underline-offset: 3px; } /* Mobile drawer: the two columns just stack. */ .aura-drawer__nav .aura-policies__panel { padding: 0 0 6px 14px; } .aura-drawer__nav .aura-policies__title { margin: 10px 0 2px; border: 0; padding: 0; } .aura-drawer__nav .aura-policies__col a { font-size: 15px; font-weight: 500; padding: 9px 0; border: 0; } /* Best sellers rail: while dragging with a mouse, snapping is off and the cursor grabs. */ .aura-surfer__rail.is-dragging { scroll-snap-type: none; cursor: grabbing; scroll-behavior: auto; } .aura-surfer__rail img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; } /* --- Cart page ------------------------------------------------------------- */ .woocommerce-cart .woocommerce { display: grid; gap: 24px 40px; align-items: start; } .woocommerce-cart .woocommerce-notices-wrapper { grid-column: 1 / -1; } @media (min-width: 1000px) { .woocommerce-cart .woocommerce { grid-template-columns: minmax(0, 1fr) 360px; } } table.shop_table.cart { width: 100%; border-collapse: collapse; border: 0; font-size: 14px; } table.shop_table.cart th { text-align: left; padding: 10px 12px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--aura-ink-soft); border-bottom: 1px solid var(--aura-line); font-weight: 600; } table.shop_table.cart td { padding: 14px 12px; border-bottom: 1px solid var(--aura-line-soft); vertical-align: middle; } table.shop_table.cart td.product-thumbnail img { width: 72px; height: 90px; object-fit: cover; border-radius: var(--aura-r); display: block; } table.shop_table.cart td.product-name a { color: var(--aura-ink); text-decoration: none; font-weight: 600; } table.shop_table.cart td.product-name a:hover { text-decoration: underline; text-underline-offset: 3px; } table.shop_table.cart dl.variation { margin: 4px 0 0; font-size: 12px; color: var(--aura-ink-soft); } table.shop_table.cart dl.variation dt, table.shop_table.cart dl.variation dd { display: inline; margin: 0; } table.shop_table.cart dl.variation dd p { display: inline; margin: 0; } table.shop_table.cart dl.variation dt { margin-right: 4px; } .cart-collaterals table.shop_table tr { border: 0; } table.shop_table.cart a.remove { color: var(--aura-ink-soft) !important; background: none !important; text-decoration: none; font-size: 22px; line-height: 1; padding: 6px; } table.shop_table.cart a.remove:hover { color: var(--aura-warn); } .woocommerce-cart-form .quantity input.qty { width: 68px; min-height: 40px; text-align: center; background: var(--aura-surface); color: var(--aura-ink); border: 1px solid var(--aura-line); border-radius: var(--aura-r); font: inherit; } table.shop_table.cart td.actions { padding: 16px 0 0; border-bottom: 0; } table.shop_table.cart td.actions .coupon { display: flex; flex-wrap: wrap; gap: 8px; float: left; } table.shop_table.cart td.actions .coupon label { position: absolute; left: -9999px; } table.shop_table.cart td.actions .coupon .input-text { min-height: 44px; padding: 0 12px; background: var(--aura-surface); color: var(--aura-ink); border: 1px solid var(--aura-line); border-radius: var(--aura-r); } table.shop_table.cart td.actions > .button { float: right; } table.shop_table.cart td.actions::after { content: ''; display: block; clear: both; } table.shop_table.cart button[disabled] { opacity: .45; cursor: not-allowed; } .cart-collaterals .cart_totals { border: 1px solid var(--aura-line); border-radius: var(--aura-r-lg); padding: 18px; background: var(--aura-surface); } .cart-collaterals .cart_totals h2 { font-size: 18px; margin: 0 0 8px; } .cart-collaterals table.shop_table { width: 100%; border: 0; border-collapse: collapse; } .cart-collaterals table.shop_table th, .cart-collaterals table.shop_table td { padding: 10px 0; border: 0; border-bottom: 1px solid var(--aura-line-soft); text-align: left; } .cart-collaterals table.shop_table td { text-align: right; } .cart-collaterals .wc-proceed-to-checkout { padding-top: 14px; } .cart-collaterals .wc-proceed-to-checkout .button { display: flex; width: 100%; justify-content: center; } @media (max-width: 700px) { table.shop_table.cart thead { display: none; } table.shop_table.cart, table.shop_table.cart tbody, table.shop_table.cart tr, table.shop_table.cart td { display: block; } table.shop_table.cart tr.cart_item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid var(--aura-line-soft); } table.shop_table.cart tr.cart_item td { padding: 0; border: 0; } table.shop_table.cart td.product-thumbnail { grid-column: 1; grid-row: 1 / span 3; } table.shop_table.cart td.product-remove { grid-column: 3; grid-row: 1; justify-self: end; } table.shop_table.cart td.product-name { grid-column: 2; grid-row: 1; } table.shop_table.cart td.product-price { display: none; } table.shop_table.cart td.product-quantity { grid-column: 2; grid-row: 2; } table.shop_table.cart td.product-subtotal { grid-column: 3; grid-row: 2; align-self: center; font-weight: 600; } table.shop_table.cart td.actions .coupon, table.shop_table.cart td.actions > .button { float: none; width: 100%; } table.shop_table.cart td.actions .coupon .input-text { flex: 1 1 140px; } table.shop_table.cart td.actions > .button { margin-top: 10px; } } /* Visually hidden, still read by screen readers (headings that name a page). */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }