/* ============================================================ Hirono KRAFT theme — INTEGRATION layer Maps the kraft design (theme-kraft.css, by Gemini Studio) onto THIS codebase's real class names + structural differences. • Loaded AFTER theme-kraft.css. • Every rule scoped :root[data-theme="kraft"] → affects nothing else. • Delete this + theme-kraft.css + tokens.kraft.css to fully revert. ============================================================ */ /* ===================== Header / nav ===================== Gemini styled .header/.brand/.toggle-tab — ours is .hero__nav* */ :root[data-theme="kraft"] .hero__brand-text { font-family: var(--kraft-font-display); color: var(--kraft-ink); letter-spacing: 0; text-shadow: none; } :root[data-theme="kraft"] .hero__nav-toggle { background-color: var(--kraft-paper); background-image: var(--kraft-paper-grain); background-size: 220px; border: 1px solid var(--kraft-border-strong); border-radius: var(--kraft-radius-sm); color: var(--kraft-ink); font-family: var(--kraft-font-note); letter-spacing: 0.04em; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--kraft-shadow-pin); } :root[data-theme="kraft"] .hero__nav-toggle.is-active, :root[data-theme="kraft"] .hero__nav-toggle[aria-pressed="true"], :root[data-theme="kraft"] .hero__nav-toggle.active { background-color: var(--kraft-ink); background-image: var(--kraft-ink-grain); color: var(--kraft-offwhite); } /* ===================== Page board ===================== base.css paints an opaque midnight bg on ; the kraft board lives on , so make transparent to reveal it full-viewport. */ :root[data-theme="kraft"] body { background: none; } /* ===================== Hero ===================== Kraft = paper board, no dark video, ink text */ :root[data-theme="kraft"] .hero__video { display: none; } /* Alex (4th/5th pass): FULL VIEWPORT hero like the old site. Gemini had turned .hero into a centred 840px rotated paper CARD (display:grid, max-width, washi tape) which read as a narrow strip and mispositioned the content. Override back to a full-width, full-height flex hero with centred content. */ :root[data-theme="kraft"] .hero { max-width: none; width: 100%; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100dvh; border: none; border-radius: 0; box-shadow: none; transform: none; background-color: var(--kraft-bg); background-image: var(--kraft-bg-image); background-size: cover; background-position: center; background-attachment: fixed; } :root[data-theme="kraft"] .hero::before { display: none; } /* drop the card's washi tape */ :root[data-theme="kraft"] .hero__content { position: relative; /* base makes it absolute (for the video overlay); as a flex child it now centres inside the full-height hero */ inset: auto; max-width: 760px; margin: 0 auto; padding: 0 var(--kraft-space-5); } :root[data-theme="kraft"] .hero__title { color: var(--kraft-ink); -webkit-text-fill-color: var(--kraft-ink); background: none; -webkit-background-clip: border-box; background-clip: border-box; text-shadow: none; } :root[data-theme="kraft"] .hero__subtitle { color: var(--kraft-brown); } :root[data-theme="kraft"] .hero__scroll-indicator { color: var(--kraft-ink); opacity: 0.6; } /* ===================== Gallery — title / tabs ===================== */ :root[data-theme="kraft"] .gallery__title { font-family: var(--kraft-font-display); color: var(--kraft-ink); } :root[data-theme="kraft"] .gallery__tab { background-color: var(--kraft-paper); background-image: var(--kraft-paper-grain); background-size: 200px; border: 1px solid var(--kraft-border-strong); border-radius: var(--kraft-radius-sm); color: var(--kraft-ink); font-family: var(--kraft-font-note); box-shadow: var(--kraft-shadow-pin); } :root[data-theme="kraft"] .gallery__tab--active { background-color: var(--kraft-ink); background-image: var(--kraft-ink-grain); color: var(--kraft-offwhite); border-color: var(--kraft-ink); box-shadow: var(--kraft-shadow-pin); } /* base uses a purple fill bar via ::before — recolour to ink */ :root[data-theme="kraft"] .gallery__tab::before { background: var(--kraft-ink); } :root[data-theme="kraft"] .gallery__tab--preorder { color: var(--kraft-accent); border-color: var(--kraft-accent); background-image: none; } /* ===================== Gallery — filters / search / pagination ===================== */ :root[data-theme="kraft"] .gallery__series-filter, :root[data-theme="kraft"] .gallery__type-filter, :root[data-theme="kraft"] .gallery__filters select, :root[data-theme="kraft"] .gallery__search-input { background-color: var(--kraft-offwhite); border: 1px solid var(--kraft-border-strong); border-radius: var(--kraft-radius-sm); color: var(--kraft-ink); font-family: var(--kraft-font-body); } :root[data-theme="kraft"] .gallery__search-icon, :root[data-theme="kraft"] .gallery__search-clear { color: var(--kraft-text-muted); } :root[data-theme="kraft"] .gallery__page-btn { background-color: var(--kraft-paper); background-image: var(--kraft-paper-grain); background-size: 180px; border: 1px solid var(--kraft-border-strong); border-radius: var(--kraft-radius-sm); color: var(--kraft-ink); font-family: var(--kraft-font-note); } :root[data-theme="kraft"] .gallery__page-btn--active { background-color: var(--kraft-ink); background-image: var(--kraft-ink-grain); color: var(--kraft-offwhite); } /* ===================== Product card — editorial "pinned photo" ===================== Alex round-3: decorate like a scrapbook/newspaper page (dashed frame, washi tape, sparkle), darken the washed-out text, give the photo even margins. */ :root[data-theme="kraft"] .product-card { position: relative; overflow: visible; background-color: var(--kraft-paper); background-image: var(--kraft-paper-grain); background-size: 320px; border: 1px solid var(--kraft-border); border-radius: var(--kraft-radius-card); box-shadow: var(--kraft-shadow-card); padding: 18px 14px 14px; transition: transform var(--kraft-dur) var(--kraft-ease), box-shadow var(--kraft-dur) var(--kraft-ease); } /* hand-drawn dashed frame */ :root[data-theme="kraft"] .product-card::after { content: ""; position: absolute; inset: 7px; border: 1.5px dashed rgba(30, 27, 24, 0.28); border-radius: 8px; pointer-events: none; } :root[data-theme="kraft"] .product-card:hover { transform: translateY(-4px) rotate(var(--kraft-tilt-b)); box-shadow: var(--kraft-shadow-lift); } /* photo — framed, taped, even top/bottom margins */ :root[data-theme="kraft"] .product-card__image-wrap { position: relative; margin: 6px 6px 12px; border-radius: var(--kraft-radius-photo); } :root[data-theme="kraft"] .product-card__image { border-radius: 3px; border: 5px solid var(--kraft-offwhite); box-shadow: var(--kraft-shadow-pin); } /* washi tape across the top of the photo */ :root[data-theme="kraft"] .product-card__image-wrap::before { content: ""; position: absolute; top: -13px; left: 50%; margin-left: -32px; width: 64px; height: 24px; background: var(--kraft-washi-1) center / 100% 100% no-repeat; transform: rotate(-4deg); z-index: 3; pointer-events: none; } /* sparkle accent, bottom-right of the photo */ :root[data-theme="kraft"] .product-card__image-wrap::after { content: ""; position: absolute; bottom: -8px; right: -5px; width: 22px; height: 22px; background: var(--kraft-sparkle) center / contain no-repeat; z-index: 3; pointer-events: none; } /* text — dark & readable on the paper (was washed-out red / inherited white) */ :root[data-theme="kraft"] .product-card__info { position: relative; z-index: 1; color: var(--kraft-ink); } :root[data-theme="kraft"] .product-card__series { font-family: var(--kraft-font-note); color: var(--kraft-brown); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } :root[data-theme="kraft"] .product-card__name { font-family: var(--kraft-font-body); font-weight: 800; color: var(--kraft-ink); } :root[data-theme="kraft"] .product-card__price { font-family: var(--kraft-font-body); font-weight: 800; color: var(--kraft-accent); } :root[data-theme="kraft"] .product-card__ask { font-family: var(--kraft-font-note); color: var(--kraft-brown); } /* stock badge → small kraft tag */ :root[data-theme="kraft"] .product-card__stock { font-family: var(--kraft-font-note); border-radius: var(--kraft-radius-sm); padding: 2px 10px; color: var(--kraft-offwhite); display: inline-block; } :root[data-theme="kraft"] .product-card__stock--in_stock { background: var(--kraft-in-stock); } :root[data-theme="kraft"] .product-card__stock--reserved { background: var(--kraft-reserved); } :root[data-theme="kraft"] .product-card__stock--sold_out, :root[data-theme="kraft"] .product-card__stock--sold { background: var(--kraft-sold); } :root[data-theme="kraft"] .product-card__preorder-badge { background: var(--kraft-preorder); color: var(--kraft-offwhite); font-family: var(--kraft-font-note); border-radius: var(--kraft-radius-sm); } /* ===================== Showcase carousel ===================== Promo carousel: drop the full-width dark block so the kraft board shows; frame each slide as a paper photo. (Slide imagery is content — owner can swap in kraft promo art later.) */ /* BUG (Alex, 5×): Gemini capped the showcase at max-width:840px → it rendered HALF the size of the old site (840px vs full-width 1728px = short & tiny). Remove the cap so it's full-width like the old site. */ :root[data-theme="kraft"] .showcase { background: transparent; max-width: none; margin-block: var(--kraft-space-6); } :root[data-theme="kraft"] .showcase__slide { border: 5px solid var(--kraft-offwhite); border-radius: var(--kraft-radius-card); box-shadow: var(--kraft-shadow-frame); overflow: hidden; } :root[data-theme="kraft"] .showcase__title { font-family: var(--kraft-font-display); } :root[data-theme="kraft"] .showcase__eyebrow { font-family: var(--kraft-font-note); } :root[data-theme="kraft"] .showcase__counter { font-family: var(--kraft-font-note); color: var(--kraft-ink); } /* ===================== Section titles (generic) ===================== */ :root[data-theme="kraft"] .section__title { font-family: var(--kraft-font-display); color: var(--kraft-ink); -webkit-text-fill-color: var(--kraft-ink); } :root[data-theme="kraft"] .section__eyebrow { font-family: var(--kraft-font-note); color: var(--kraft-accent); } /* ===================== Product modal ===================== Gemini styled .modal wrapper; our real panel is .modal__panel (still dark). */ /* STRUCTURAL FIX: our .modal is the fixed full-screen overlay, but Gemini's kraft rule assumed .modal IS the panel (position:relative, max-width, paper bg) — which drops our overlay into document flow. Restore overlay here and move the panel styling onto our real .modal__panel. */ :root[data-theme="kraft"] .modal { position: fixed; inset: 0; width: auto; max-width: none; max-height: none; overflow: auto; padding: var(--kraft-space-4); background: none; border: none; border-radius: 0; } /* BUG (Alex, real screen): the modal opened dark + blurry — the backdrop's blur(8px) was frosting the panel itself. Kill the blur, use a plain dark scrim, and lift the (opaque) paper panel above it so it stays crisp. */ :root[data-theme="kraft"] .modal__backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(30, 27, 24, 0.55); z-index: 1; } :root[data-theme="kraft"] .modal__panel { position: relative; z-index: 2; max-width: 720px; max-height: 92vh; overflow-y: auto; background-color: var(--kraft-paper); background-image: var(--kraft-paper-grain); background-size: 480px; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--kraft-border-strong); border-radius: var(--kraft-radius-card); color: var(--kraft-ink); } :root[data-theme="kraft"] .modal__title { font-family: var(--kraft-font-display); color: var(--kraft-ink); -webkit-text-fill-color: var(--kraft-ink); } :root[data-theme="kraft"] .modal__price { color: var(--kraft-price); font-weight: 700; } :root[data-theme="kraft"] .modal__meta, :root[data-theme="kraft"] .modal__story, :root[data-theme="kraft"] .modal__description, :root[data-theme="kraft"] .modal__taxonomy, :root[data-theme="kraft"] .modal__sku { color: var(--kraft-ink); } :root[data-theme="kraft"] .modal__sku, :root[data-theme="kraft"] .modal__taxonomy { background: rgba(30, 27, 24, 0.06); border: 1px solid var(--kraft-border); border-radius: var(--kraft-radius-sm); } /* Product image: Gemini sized .modal__gallery (doesn't exist here); our real .modal__image is width:100% + aspect-ratio:1 → a 720² image swallowed the whole modal, pushing title/price below the fold. Cap it so details show. */ :root[data-theme="kraft"] .modal__image-wrap { display: flex; justify-content: center; align-items: center; background: transparent; border: none; overflow: visible; max-height: none; margin: 0 auto 4px; } /* show the photo at its natural aspect (square display case OR tall story card), capped in height, framed like a polaroid — no forced-square letterbox */ :root[data-theme="kraft"] .modal__image { width: auto; height: auto; max-width: 100%; max-height: 52vh; aspect-ratio: auto; object-fit: contain; background: var(--kraft-offwhite); border: 6px solid var(--kraft-offwhite); border-radius: var(--kraft-radius-photo); box-shadow: var(--kraft-shadow-frame); display: block; } :root[data-theme="kraft"] .modal__eyebrow, :root[data-theme="kraft"] .modal__series { font-family: var(--kraft-font-note); color: var(--kraft-accent); } /* readable body text: base leaves meta values (dd), paragraphs and note bullets near-white → force ink so the story/details are legible on paper */ :root[data-theme="kraft"] .modal__body dd, :root[data-theme="kraft"] .modal__body p, :root[data-theme="kraft"] .modal__body li, :root[data-theme="kraft"] .modal__body .modal__notes, :root[data-theme="kraft"] .modal__body .modal__notes * { color: var(--kraft-ink); } /* "Read Hirono's Story" was a faint gold — make it a clear accent chip */ :root[data-theme="kraft"] .modal__story-btn { color: var(--kraft-accent); background: rgba(181, 70, 47, 0.08); border: 1.6px solid var(--kraft-accent); border-radius: var(--kraft-radius-sm); font-family: var(--kraft-font-note); } :root[data-theme="kraft"] .modal__story-btn:hover:not([disabled]) { background: var(--kraft-accent); color: var(--kraft-offwhite); } /* ===================== About + Contact (transparent → kraft board) ===================== */ :root[data-theme="kraft"] .about__title, :root[data-theme="kraft"] .contact__title { font-family: var(--kraft-font-display); color: var(--kraft-ink); -webkit-text-fill-color: var(--kraft-ink); } :root[data-theme="kraft"] .about__story, :root[data-theme="kraft"] .about__body, :root[data-theme="kraft"] .contact__address, :root[data-theme="kraft"] .contact__bottom { color: var(--kraft-brown); } :root[data-theme="kraft"] .contact__wa-card { border: 1px solid var(--kraft-border-strong); border-radius: var(--kraft-radius-card); } /* ===================== Pre-order form (overlay) ===================== Our classes are .preorder-form__* / .preorder-panel__* (Gemini used generic .field/.qty/.image-picker, so none of it matched). */ :root[data-theme="kraft"] .preorder-panel { background-color: var(--kraft-paper); background-image: var(--kraft-paper-grain); background-size: 420px; color: var(--kraft-ink); border: 1px solid var(--kraft-border-strong); } :root[data-theme="kraft"] .preorder-panel__title, :root[data-theme="kraft"] .preorder-form__section-title { font-family: var(--kraft-font-display); color: var(--kraft-ink); } :root[data-theme="kraft"] .preorder-form__label { color: var(--kraft-ink); font-family: var(--kraft-font-note); } :root[data-theme="kraft"] .preorder-form__input, :root[data-theme="kraft"] .preorder-form__textarea, :root[data-theme="kraft"] .preorder-form__qty-input { background: var(--kraft-offwhite); border: 1px solid var(--kraft-border-strong); border-radius: var(--kraft-radius-sm); color: var(--kraft-ink); font-family: var(--kraft-font-body); } :root[data-theme="kraft"] .preorder-form__qty-btn { background: var(--kraft-ink); color: var(--kraft-offwhite); border: none; border-radius: var(--kraft-radius-sm); } :root[data-theme="kraft"] .preorder-form__submit { background: var(--kraft-accent); color: var(--kraft-offwhite); font-family: var(--kraft-font-note); border: none; border-radius: var(--kraft-radius-sm); } :root[data-theme="kraft"] .preorder-panel__close { color: var(--kraft-ink); } :root[data-theme="kraft"] .preorder-form__status { color: var(--kraft-ink); } /* ===================== Chatbox — "can't close" fix ===================== ROOT CAUSE: Gemini set .chatbox__panel { display:flex }. A class `display` beats the UA rule [hidden]{display:none}, so toggling panel.hidden = true no longer hid the panel — clicking the ✕ ran the handler but the chat stayed on screen. Restore [hidden] hiding (the real fix). Also re-anchor the panel to the viewport (base uses fixed; Gemini's absolute was relative to a 0-height wrapper). */ :root[data-theme="kraft"] .chatbox__panel[hidden], :root[data-theme="kraft"] .chatbox__trigger[hidden] { display: none !important; } :root[data-theme="kraft"] .chatbox__panel { position: fixed; bottom: var(--kraft-space-5); right: var(--kraft-space-5); } /* ===================== Ribbon — red+white paper gift ribbon ===================== Alex: the dark ink marquee doesn't fit kraft. Make it a festive gift-wrap ribbon — red paper, faint diagonal wrap stripes, white perforated edges, white text. (Overrides Gemini's ink-bar .ribbon.) */ :root[data-theme="kraft"] .ribbon { background-color: var(--kraft-accent); background-image: repeating-linear-gradient( 45deg, rgba(255, 255, 255, 0.13) 0 10px, transparent 10px 24px); border-block: 2px dashed rgba(255, 255, 255, 0.7); box-shadow: var(--kraft-shadow-pin); padding: var(--kraft-space-3) 0; } :root[data-theme="kraft"] .ribbon__text { color: #fff; font-family: var(--kraft-font-note); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18); } :root[data-theme="kraft"] .ribbon__text .star { color: #fff; opacity: 0.9; }