/* ═══════════════════════════════════════════ gtiramisu — NEW CLASSIC theme Activated by Reuses the classic Tiramisu palette, typography and button styles (defined in gtiramisu.css) — only adds: 1. Top masthead marquee (defiling text strip) 2. Hero split layout with a small product media card on the right (Classico photo + price), border-radius 4px. 3. Bento manifesto block (shared with the drop theme — styles live in gtiramisu-drop.css under :is(drop, newclassic)). ═══════════════════════════════════════════ */ /* Bento-related CSS variables (same values as drop theme) so the shared bento selectors find them when newclassic is active. */ html[data-site-theme="newclassic"] { --d-cream: #F5EDE3; --d-cream-warm: #EDE3D2; --d-cream-soft: #FAF6EE; --d-ink: #1A0E08; --d-ink-soft: #2C1810; --d-ink-mute: rgba(26, 14, 8, 0.55); --d-line: rgba(26, 14, 8, 0.10); --d-line-strong: rgba(26, 14, 8, 0.25); --d-caramel: #C8956C; --d-caramel-deep: #A87752; --d-cocoa: #5C3D2E; --d-gold: #D4A853; --d-radius: 28px; --d-radius-pill: 999px; } /* ─── Bento CTA buttons — no border-radius in newclassic ─── */ html[data-site-theme="newclassic"] .drop-btn-fill, html[data-site-theme="newclassic"] .drop-btn-fill-cream { border-radius: 0; } /* Smaller variant for the bento "Commander" button + a thin chevron */ html[data-site-theme="newclassic"] .drop-btn-fill.drop-btn-sm { font-family: 'Josefin Sans', sans-serif; font-weight: 400; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.55rem 1rem; gap: 0.5rem; align-self: flex-start; } html[data-site-theme="newclassic"] .drop-btn-fill.drop-btn-sm::after { content: '›'; font-family: 'Josefin Sans', sans-serif; font-weight: 300; font-size: 1.1em; line-height: 1; letter-spacing: 0; transform: translateY(-1px); transition: transform 0.3s cubic-bezier(.2,.8,.2,1); } html[data-site-theme="newclassic"] .drop-btn-fill.drop-btn-sm:hover::after { transform: translate(4px, -1px); } /* ─── Bento cells — match classic .product-card radius (4px) ─── */ html[data-site-theme="newclassic"] .drop-bento-cell, html[data-site-theme="newclassic"] .drop-bento-big, html[data-site-theme="newclassic"] .drop-bento-stat, html[data-site-theme="newclassic"] .drop-bento-mosaic, html[data-site-theme="newclassic"] .drop-bento-quote, html[data-site-theme="newclassic"] .drop-bento-process, html[data-site-theme="newclassic"] .drop-bento-cta { border-radius: 4px; } html[data-site-theme="newclassic"] .drop-bento-mosaic img { border-radius: 2px; } /* ─── Discreet beige shape decorations across newclassic ─── */ /* "9 saveurs" stat cell — feuilles (shape-8) bottom-right */ html[data-site-theme="newclassic"] .drop-bento-stat { position: relative; overflow: hidden; } html[data-site-theme="newclassic"] .drop-bento-stat::before { content: ''; position: absolute; inset: 0; background-image: url('/assets/img/shaps/gt_shape_feuille_beige.svg'); background-repeat: no-repeat; background-position: right -15% bottom -5%; background-size: 70% auto; opacity: 0.22; pointer-events: none; z-index: 0; } html[data-site-theme="newclassic"] .drop-bento-stat > * { position: relative; z-index: 1; } /* Big featured cell — shape-1 top-right corner */ html[data-site-theme="newclassic"] .drop-bento-big { position: relative; overflow: hidden; } html[data-site-theme="newclassic"] .drop-bento-big::after { content: ''; position: absolute; top: -5%; right: -5%; width: 35%; height: 50%; background-image: url('/assets/img/shaps/gt_shape_petite_feuilles_beige.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: 0.15; pointer-events: none; z-index: 1; } /* Quote cell (caramel) — shape-5 top-left */ html[data-site-theme="newclassic"] .drop-bento-quote { position: relative; overflow: hidden; } html[data-site-theme="newclassic"] .drop-bento-quote::before { content: ''; position: absolute; top: -10%; left: -10%; width: 40%; height: 80%; background-image: url('/assets/img/shaps/gt_shape_feuille_angle_beige.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: 0.18; pointer-events: none; z-index: 0; } html[data-site-theme="newclassic"] .drop-bento-quote > * { position: relative; z-index: 1; } /* ─── Bento pills — clickable (active) + disabled (greyed) states ─── */ html[data-site-theme="newclassic"] .drop-bento-pills li { transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease; } html[data-site-theme="newclassic"] .drop-bento-pills li a { color: inherit; text-decoration: none; display: inline-block; margin: -0.3rem -0.75rem; padding: 0.3rem 0.75rem; } html[data-site-theme="newclassic"] .drop-bento-pills li:has(a) { cursor: pointer; } html[data-site-theme="newclassic"] .drop-bento-pills li:has(a):hover { background: var(--d-caramel); color: var(--d-ink); border-color: var(--d-caramel); transform: translateY(-2px); } html[data-site-theme="newclassic"] .drop-bento-pills li.is-disabled { opacity: 0.45; background: rgba(245, 237, 227, 0.04); border-color: rgba(245, 237, 227, 0.08); color: rgba(245, 237, 227, 0.55); text-decoration: line-through; cursor: not-allowed; } /* "Aussi simple qu'un dessert" section — petite-feuille decoration */ html[data-site-theme="newclassic"] .how-it-works { position: relative; overflow: hidden; } html[data-site-theme="newclassic"] .how-it-works::before { content: ''; position: absolute; top: -8%; right: -6%; width: 30%; height: 90%; background-image: url('/assets/img/shaps/gt_shape_petite_feuilles_caramel.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: 0.16; pointer-events: none; z-index: 0; } html[data-site-theme="newclassic"] .how-it-works::after { content: ''; position: absolute; bottom: -5%; left: -4%; width: 24%; height: 70%; background-image: url('/assets/img/shaps/gt_shape_petite_feuilles_beige.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: 0.40; transform: scaleX(-1) rotate(-12deg); pointer-events: none; z-index: 0; } html[data-site-theme="newclassic"] .how-it-works > * { position: relative; z-index: 1; } /* Footer shapes — anchored to .footer-grid so they sit ABOVE .footer-bottom (the lang/copyright/socials row stays clean). */ html[data-site-theme="newclassic"] footer.site-footer { position: relative; overflow: hidden; } html[data-site-theme="newclassic"] footer.site-footer .footer-grid { position: relative; } html[data-site-theme="newclassic"] footer.site-footer .footer-grid::before { /* RIGHT — shape-5 beige */ content: ''; position: absolute; top: -25%; right: -10%; width: 50%; height: 150%; background-image: url('/assets/img/shaps/gt_shape_feuille_angle_beige.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: 0.18; pointer-events: none; z-index: 0; } html[data-site-theme="newclassic"] footer.site-footer .footer-grid::after { /* LEFT — shape-2 soft-light (white, flowing) */ content: ''; position: absolute; top: -15%; left: -10%; width: 45%; height: 140%; background-image: url('/assets/img/shaps/shape-2-soft-light.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: 0.30; pointer-events: none; z-index: 0; } html[data-site-theme="newclassic"] footer.site-footer .footer-grid > * { position: relative; z-index: 1; } /* ─── Bento testimonial quote — use the classic Tiramisu typography ─── */ html[data-site-theme="newclassic"] .drop-bento-quote blockquote { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-style: italic; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.45; letter-spacing: 0; color: var(--cocoa); } html[data-site-theme="newclassic"] .drop-bento-quote .drop-eyebrow { font-family: 'Josefin Sans', sans-serif; font-weight: 500; font-style: normal; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: #FFF8F0; /* light cream/beige to pop on caramel background */ text-shadow: 0 1px 1px rgba(44, 24, 16, 0.15); } /* ─── 1. Masthead marquee (top of home) ─── */ html[data-site-theme="newclassic"] .nc-masthead { background: var(--espresso); color: var(--cream); overflow: hidden; padding: 0.6rem 0; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } html[data-site-theme="newclassic"] .nc-masthead-track { display: inline-flex; align-items: center; gap: 1.5rem; white-space: nowrap; font-family: 'Josefin Sans', sans-serif; font-weight: 400; font-size: 0.78rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--cream); animation: ncMastheadRoll 38s linear infinite; } html[data-site-theme="newclassic"] .nc-masthead-track > span:nth-child(2n) { color: var(--caramel); } @keyframes ncMastheadRoll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ─── 2. Hero split layout ─── */ html[data-site-theme="newclassic"] .hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3.5rem; align-items: center; text-align: left; padding: 4rem 3rem; min-height: 86vh; } html[data-site-theme="newclassic"] .hero-content { text-align: left; max-width: 600px; padding-bottom: 0; } html[data-site-theme="newclassic"] .hero h1 { font-size: clamp(2.5rem, 6vw, 5.5rem); } html[data-site-theme="newclassic"] .hero-sub { max-width: 480px; margin: 0 0 2.5rem; } html[data-site-theme="newclassic"] .hero-cta { justify-content: flex-start; } html[data-site-theme="newclassic"] .scroll-hint { display: none; } /* ─── 3. Hero media — main photo + puzzle column on the right ─── */ html[data-site-theme="newclassic"] .nc-hero-media { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 78vh; background: transparent; border-radius: 0; display: grid; grid-template-columns: 1fr 110px; gap: 1rem; overflow: visible; opacity: 0; transform: translateY(20px); animation: ncFadeUp 1s cubic-bezier(.2,.8,.2,1) 0.4s forwards; } /* Main framed photo — fade target for swap animation */ html[data-site-theme="newclassic"] .nc-hero-media-main { position: relative; border-radius: 4px; overflow: visible; box-shadow: 0 25px 60px -22px rgba(44, 24, 16, 0.4); transition: transform 0.6s cubic-bezier(.2,.8,.2,1); } html[data-site-theme="newclassic"] .nc-hero-media-main > img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 4px; transition: transform 0.8s cubic-bezier(.2,.8,.2,1); } html[data-site-theme="newclassic"] .nc-hero-media-main:hover > img { transform: scale(1.03); } /* Soft cross-fade swap — main img fades out + slight zoom, src is swapped at the midpoint by JS, then fades back in. No flip / no rotation. */ html[data-site-theme="newclassic"] .nc-hero-media-main.is-flipping > img { animation: ncCrossFade 0.7s cubic-bezier(.4,0,.2,1); } @keyframes ncCrossFade { 0% { opacity: 1; transform: scale(1); } 45% { opacity: 0; transform: scale(1.06); } 55% { opacity: 0; transform: scale(0.94); } 100% { opacity: 1; transform: scale(1); } } /* Tag + price block fade-replace synced with the flip */ html[data-site-theme="newclassic"] .nc-hero-media-tag.is-replacing, html[data-site-theme="newclassic"] .nc-hero-media-price.is-replacing { animation: ncReplaceLabel 0.75s cubic-bezier(.4,0,.2,1); } @keyframes ncReplaceLabel { 0% { opacity: 1; transform: translateY(0); } 45% { opacity: 0; transform: translateY(10px); } 55% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: translateY(0); } } /* Puzzle column — 3 mini images stacked with alternating offsets */ html[data-site-theme="newclassic"] .nc-hero-puzzle { position: relative; display: grid; grid-template-rows: 1fr 1fr 1fr; gap: 0.85rem; padding: 0.5rem 0; } html[data-site-theme="newclassic"] .nc-hero-puzzle img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 4px; box-shadow: 0 12px 30px -12px rgba(44, 24, 16, 0.4); transition: transform 0.5s cubic-bezier(.2,.8,.2,1); opacity: 0; animation: ncFadeUp 0.9s cubic-bezier(.2,.8,.2,1) forwards; } /* Alternating horizontal offset + slight rotation = puzzle interlock effect */ html[data-site-theme="newclassic"] .nc-hero-puzzle img:nth-child(1) { transform: translateX(-14px) rotate(-3deg); animation-delay: 0.8s; } html[data-site-theme="newclassic"] .nc-hero-puzzle img:nth-child(2) { transform: translateX(10px) rotate(2deg); animation-delay: 1.0s; } html[data-site-theme="newclassic"] .nc-hero-puzzle img:nth-child(3) { transform: translateX(-10px) rotate(-2deg); animation-delay: 1.2s; } html[data-site-theme="newclassic"] .nc-hero-puzzle img { cursor: pointer; } html[data-site-theme="newclassic"] .nc-hero-puzzle img:hover { transform: translateX(0) rotate(0) scale(1.06); z-index: 2; box-shadow: 0 18px 40px -10px rgba(44, 24, 16, 0.5); } html[data-site-theme="newclassic"] .nc-hero-puzzle img:focus-visible { outline: 2px solid var(--caramel); outline-offset: 4px; } /* "Pop" animation when a puzzle img is clicked & being sent to main */ html[data-site-theme="newclassic"] .nc-hero-puzzle img.is-picking { animation: ncPuzzlePick 0.75s cubic-bezier(.4,0,.2,1); } @keyframes ncPuzzlePick { 0% { transform: translateX(0) rotate(0) scale(1.06); } 35% { transform: translateX(0) rotate(0) scale(1.15) translateY(-8px); box-shadow: 0 24px 50px -12px rgba(44, 24, 16, 0.55); } 50% { transform: translateX(0) rotate(0) scale(0.6) translateY(-12px); opacity: 0.2; } 51% { transform: translateX(0) rotate(0) scale(0.6) translateY(12px); opacity: 0.2; } 100% { /* will be reset by JS to the new resting state */ opacity: 1; } } @media (max-width: 900px) { html[data-site-theme="newclassic"] .nc-hero-media { grid-template-columns: 1fr 80px; aspect-ratio: 4 / 3; gap: 0.6rem; } } /* Best-seller tag — top-left of the front photo */ html[data-site-theme="newclassic"] .nc-hero-media-tag { position: absolute; top: 1rem; left: 1rem; background: var(--cream); color: var(--espresso); font-family: 'Josefin Sans', sans-serif; font-size: 0.65rem; letter-spacing: 0.25em; text-transform: uppercase; padding: 0.45rem 0.9rem; border-radius: 999px; z-index: 3; } /* Price block — bottom of the front photo */ html[data-site-theme="newclassic"] .nc-hero-media-price { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: rgba(44, 24, 16, 0.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--cream); padding: 0.85rem 1rem; border-radius: 14px; z-index: 3; } html[data-site-theme="newclassic"] .nc-hero-media-price-label { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 1rem; letter-spacing: 0.02em; } html[data-site-theme="newclassic"] .nc-hero-media-price-value { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 1.15rem; color: var(--caramel-light, var(--caramel)); } /* ─── 4 corner brackets framing the composition ─── */ html[data-site-theme="newclassic"] .nc-hero-media-bracket { display: block; position: absolute; width: 38px; height: 38px; pointer-events: none; z-index: 4; opacity: 0; animation: ncFadeIn 0.6s ease 1s forwards; } html[data-site-theme="newclassic"] .nc-hero-media-bracket::before, html[data-site-theme="newclassic"] .nc-hero-media-bracket::after { content: ''; position: absolute; background: var(--cocoa); } html[data-site-theme="newclassic"] .nc-hero-media-bracket-tl { top: -10px; left: -10px; } html[data-site-theme="newclassic"] .nc-hero-media-bracket-tl::before { top: 0; left: 0; width: 38px; height: 2px; } html[data-site-theme="newclassic"] .nc-hero-media-bracket-tl::after { top: 0; left: 0; width: 2px; height: 38px; } html[data-site-theme="newclassic"] .nc-hero-media-bracket-tr { top: -10px; right: -10px; } html[data-site-theme="newclassic"] .nc-hero-media-bracket-tr::before { top: 0; right: 0; width: 38px; height: 2px; } html[data-site-theme="newclassic"] .nc-hero-media-bracket-tr::after { top: 0; right: 0; width: 2px; height: 38px; } html[data-site-theme="newclassic"] .nc-hero-media-bracket-bl { bottom: -10px; left: -10px; } html[data-site-theme="newclassic"] .nc-hero-media-bracket-bl::before { bottom: 0; left: 0; width: 38px; height: 2px; } html[data-site-theme="newclassic"] .nc-hero-media-bracket-bl::after { bottom: 0; left: 0; width: 2px; height: 38px; } html[data-site-theme="newclassic"] .nc-hero-media-bracket-br { bottom: -10px; right: -10px; } html[data-site-theme="newclassic"] .nc-hero-media-bracket-br::before { bottom: 0; right: 0; width: 38px; height: 2px; } html[data-site-theme="newclassic"] .nc-hero-media-bracket-br::after { bottom: 0; right: 0; width: 2px; height: 38px; } @keyframes ncFadeIn { to { opacity: 1; } } @keyframes ncFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } /* ─── Responsive ─── */ @media (max-width: 900px) { html[data-site-theme="newclassic"] .hero { grid-template-columns: 1fr; padding: 2rem 1.25rem 3rem; gap: 2rem; min-height: auto; } html[data-site-theme="newclassic"] .hero-content { text-align: center; max-width: 100%; } html[data-site-theme="newclassic"] .hero-cta { justify-content: center; } html[data-site-theme="newclassic"] .nc-hero-media { max-height: 50vh; aspect-ratio: 4 / 3; } html[data-site-theme="newclassic"] .nc-masthead-track { font-size: 0.68rem; letter-spacing: 0.3em; } }