/* --- PART 2 - Helper components (helper.css) --- */ /* ================================================================ helper.css — Shared styles for frameword helper files Sections: §0 Reset + base §1 Demo scaffolding (idx, sc-label, schema-box, variant preview) §2 Card scroller — shared track + nav §3 CS-01 Standard leaflet card §4 CS-02 Cinematic dark poster §5 CS-03 Landscape article §6 CS-04 Numbered feature §7 CS-05 Glass on gradient §8 CS-06 Tall editorial §9 CS-07 Wide panoramic §10 CS-08 Polaroid §11 CS-09 Flip card §12 CS-10 Layered depth §13 Floating social bar (fsb structure) §14 FSB themes (fs1–fs4) §15 Back to top buttons (bt01–bt05) §16 Keyframes §17 Responsive (320px up) ================================================================ */ /* ────────────────────────────────────────────────────────────── §0 Reset + base ────────────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;overflow-x:clip} body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--surface-color,#f8fafc);color:var(--text-strong,#1e293b);overflow-x:clip} /* Preview defaults — framework overrides these via Settings */ :root{ --primary-color:#fcd703; --primary-dark:#b8940a; --primary-text:#ffffff; --bg-color:#ffffff; --text-color:#374151; --text-strong:#111827; --text-muted:#6b7280; --card-bg:#ffffff; --card-border:#e5e7eb; --surface-color:#f8fafc; --card-radius:12px; --card-shadow:0 4px 24px rgba(0,0,0,.08); --card-shadow-hover:0 12px 40px rgba(0,0,0,.14); /* Type scale */ --fs-h1:clamp(3rem,7vw,6rem); --fs-h2:clamp(1.8rem,4vw,3rem); --fs-h3:clamp(1.3rem,2.5vw,2rem); --fs-h4:clamp(1.1rem,2vw,1.5rem); --fs-h5:clamp(.95rem,1.5vw,1.15rem); --fs-body:clamp(.9rem,1.2vw,1rem); --fs-sm:.875rem; --fs-xs:.75rem; --fs-btn:.92rem; --heading-font:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; } /* ────────────────────────────────────────────────────────────── §1 Demo scaffolding ────────────────────────────────────────────────────────────── */ .idx{padding:2.5rem clamp(1rem,8vw,5rem) 2rem;background:var(--bg-color,#fff);border-bottom:1px solid var(--card-border,#e2e8f0)} .idx h1{font-size:clamp(1.3rem,2.5vw,2rem);font-weight:900;color:var(--text-strong,#0f172a);margin-bottom:.25rem} .idx p{color:var(--text-muted,#64748b);font-size:var(--fs-sm,.86rem);max-width:600px;line-height:1.6} .idx code{background:var(--surface-color,#f1f5f9);padding:.12rem .38rem;border-radius:4px;font-size:var(--fs-sm,.78rem);color:var(--text-strong,#0f172a)} .schema-box{background:var(--surface-color,#f8fafc);border:1px solid var(--card-border,#e2e8f0);border-radius:8px;padding:1rem 1.4rem;margin-top:1rem;font-size:var(--fs-xs,.76rem);color:var(--text-color,#475569);line-height:1.9} .schema-box strong{color:var(--text-strong,#0f172a);font-size:var(--fs-sm,.8rem)} .schema-field{display:inline-block;background:#e0f2fe;color:#0369a1;padding:.1rem .45rem;border-radius:4px;margin:.1rem;font-size:var(--fs-xs,.7rem);font-weight:600} .schema-note{display:inline-flex;align-items:center;gap:.3rem;font-size:var(--fs-xs,.72rem);font-weight:700;padding:.2rem .6rem;border-radius:4px;margin-left:.4rem} .schema-note.pending{background:#fef3c7;color:#92400e} .sc-label{padding:1rem clamp(1rem,8vw,5rem);background:#0f172a;color:rgba(255,255,255,.3);font-size:var(--fs-xs,.6rem);letter-spacing:.22em;text-transform:uppercase;border-top:1px solid rgba(255,255,255,.07)} /* Variant preview wrapper */ .variants-section{background:var(--bg-color,#fff);padding:3rem clamp(1rem,8vw,5rem) 4rem} .variants-section h2{font-size:1rem;font-weight:800;color:var(--text-strong,#0f172a);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.4rem} .variants-section > p{font-size:var(--fs-xs,.78rem);color:var(--text-muted,#64748b);margin-bottom:2rem} .variants-grid{display:flex;flex-wrap:wrap;gap:2rem;align-items:flex-end} .variant-block{display:flex;flex-direction:column;align-items:center;gap:1rem} .variant-label{font-size:var(--fs-xs,.62rem);font-weight:700;color:var(--text-muted,#94a3b8);letter-spacing:.1em;text-transform:uppercase;text-align:center} .vp{display:flex;flex-direction:column;gap:8px;padding:12px 10px;border-radius:16px} .vp-item{display:flex;align-items:center;justify-content:flex-end;gap:7px} .vp-btn{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.13)} .vp-btn svg{width:18px;height:18px;display:block} .vp-call .vp-btn{width:46px;height:46px} .vp-call .vp-btn svg{width:20px;height:20px} /* BTT variant preview chip */ .vp-btt{width:90px;height:110px;border-radius:12px;display:flex;align-items:flex-end;justify-content:flex-end;padding:10px} .vp-btt-btn{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0} /* Helper label below preview */ .wrap{display:flex;flex-direction:column;align-items:center;gap:.9rem} .lbl{font-size:var(--fs-xs,.62rem);font-weight:700;color:var(--text-muted,#94a3b8);letter-spacing:.1em;text-transform:uppercase} /* ────────────────────────────────────────────────────────────── §2 Card scroller — shared track + nav ────────────────────────────────────────────────────────────── */ .sc-section{padding:3rem 0 3.5rem} .sc-inner{max-width:1280px;margin:0 auto;padding:0 clamp(1rem,5vw,4rem)} .sc-header{text-align:center;margin-bottom:2.5rem} .sc-header-row{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:2rem;flex-wrap:wrap} .sc-header-row .sc-header{text-align:left;margin-bottom:0} .sc-tag{display:inline-block;font-size:var(--fs-xs,.62rem);font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted,#64748b);margin-bottom:.5rem} .sc-title{font-size:clamp(1.3rem,3.2vw,2.4rem);font-weight:900;color:var(--text-strong,#0f172a);line-height:1.1;letter-spacing:-.02em} .sc-sub{font-size:var(--fs-body,.88rem);color:var(--text-muted,#64748b);margin-top:.45rem} .sc-track-wrap{position:relative} .sc-track::-webkit-scrollbar{display:none} /* padding-top/bottom exist purely so hover box-shadows have room to render before this track's own computed overflow-y (forced to 'auto' by the overflow-x:auto rule) clips them — bumped up since several card templates' hover shadows exceeded the old 4px/16px. */ .sc-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:20px;padding:12px 0 28px} .sc-track>*{scroll-snap-align:start;flex-shrink:0} /* Nav buttons — base state now reads --snav-bg/-border/-color (previously only :hover consumed --snav-hover/-hover-color, so the existing color-config panel had no visible effect on the resting state). --snav-size added for admin-configurable button size. */ .sc-nav{display:flex;justify-content:center;gap:.6rem;margin-top:1.2rem} .sc-btn{width:var(--snav-size,40px);height:var(--snav-size,40px);border-radius:50%;border:1.5px solid var(--snav-border,#cbd5e1);background:var(--snav-bg,var(--bg-color,#fff));cursor:pointer;font-size:var(--fs-body,1rem);color:var(--snav-color,var(--text-color,#475569));display:flex;align-items:center;justify-content:center;transition:all .16s} .sc-btn svg{width:45%;height:45%} .sc-btn:hover{background:var(--snav-hover,var(--primary-color,#0f172a));color:var(--snav-hover-color,var(--text-inverse,#fff));border-color:var(--snav-hover,var(--primary-color,#0f172a))} .sc-inline-nav{display:flex;gap:.5rem;flex-shrink:0} .sc-btn-outline{width:var(--snav-size,36px);height:var(--snav-size,36px);border-radius:50%;border:1.5px solid var(--snav-border,#cbd5e1);background:var(--snav-bg,var(--bg-color,#fff));cursor:pointer;font-size:var(--fs-body,.9rem);color:var(--snav-color,var(--text-color,#475569));display:flex;align-items:center;justify-content:center;transition:all .16s} .sc-btn-outline svg{width:45%;height:45%} .sc-btn-outline:hover{background:var(--snav-hover,#f0fdf4);border-color:var(--snav-hover-color,#10b981);color:var(--snav-hover-color,#10b981)} .sc-btn-dark{width:var(--snav-size,38px);height:var(--snav-size,38px);border-radius:50%;border:1.5px solid var(--snav-border,rgba(255,255,255,.15));background:var(--snav-bg,rgba(255,255,255,.05));cursor:pointer;font-size:var(--fs-body,.95rem);color:var(--snav-color,rgba(255,255,255,.65));display:flex;align-items:center;justify-content:center;transition:all .16s} .sc-btn-dark svg{width:45%;height:45%} .sc-btn-dark:hover{background:var(--snav-hover,rgba(255,255,255,.15));color:var(--snav-hover-color,#fff)} .sc-btn-ghost{width:var(--snav-size,38px);height:var(--snav-size,38px);border-radius:50%;border:1.5px solid var(--snav-border,rgba(255,255,255,.25));background:var(--snav-bg,rgba(255,255,255,.08));cursor:pointer;font-size:var(--fs-body,.95rem);color:var(--snav-color,rgba(255,255,255,.7));display:flex;align-items:center;justify-content:center;transition:all .16s} .sc-btn-ghost svg{width:45%;height:45%} .sc-btn-ghost:hover{background:var(--snav-hover,rgba(255,255,255,.2));color:var(--snav-hover-color,#fff)} .sc-pill-nav{display:flex;justify-content:center;gap:.5rem;margin-top:1.3rem;flex-wrap:wrap} .sc-btn-pill{padding:.45rem 1.3rem;border-radius:999px;border:1.5px solid var(--snav-border,var(--card-border,#e2e8f0));background:var(--snav-bg,var(--bg-color,#fff));cursor:pointer;font-size:var(--fs-xs,.76rem);font-weight:700;color:var(--snav-color,var(--text-color,#475569));transition:all .16s} .sc-btn-pill:hover{background:var(--snav-hover,#6366f1);color:var(--snav-hover-color,#fff);border-color:var(--snav-hover,#6366f1)} /* ────────────────────────────────────────────────────────────── §3 CS-01 Standard leaflet card ────────────────────────────────────────────────────────────── */ .h-leaflet-card{flex:0 0 270px;scroll-snap-align:start;background:var(--card-bg,#fff);border-radius:12px;overflow:hidden;border:1px solid var(--card-border,#e2e8f0);box-shadow:0 2px 8px rgba(0,0,0,.06);transition:box-shadow .22s,transform .22s;display:flex;flex-direction:column} .h-leaflet-card:hover{box-shadow:0 8px 28px rgba(0,0,0,.1);transform:translateY(-3px)} /* "Card style: No card (plain)" — class toggled by the style-config panel (see sp-pageedit.js renderStyleConfig) since box-shadow can't be zeroed via calc() the way border-width/background can. !important needed to beat each card's own inline border/background/box-shadow (which read the admin's Border width/Shadow/Background controls and would otherwise always win over a plain class rule). */ .cs01-no-card .h-leaflet-card,.cs01-no-card .h-leaflet-card:hover{border:none!important;box-shadow:none!important;background:transparent!important} .h-leaflet-body{padding:1.1rem 1.2rem 1.4rem;display:flex;flex-direction:column;flex:1;gap:.4rem} .h-leaflet-tag{display:inline-block;font-size:var(--fs-xs,.62rem);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#6366f1;background:#eef2ff;padding:.2rem .55rem;border-radius:4px;width:fit-content} .leaflet-title{font-size:var(--fs-body,.95rem);font-weight:700;color:var(--text-strong,#0f172a);line-height:1.35;margin-top:.1rem} .leaflet-desc{font-size:var(--fs-sm,.82rem);color:var(--cs01-desc-color,#64748b);line-height:1.55;flex:1} .h-leaflet-view-btn{display:inline-flex;align-items:center;gap:.3rem;margin-top:.8rem;font-size:var(--fs-sm,.78rem);font-weight:700;color:var(--primary-color,#6366f1);text-decoration:none;transition:gap .18s} .h-leaflet-view-btn:hover{gap:.55rem} .h-leaflet-view-btn::after{content:'→'} /* ────────────────────────────────────────────────────────────── §4 CS-02 Cinematic dark poster ────────────────────────────────────────────────────────────── */ /* overflow:hidden lived on .cs2-card itself, which clips a box's OWN box-shadow along with its content — that's why the shadow looked cut off. The rounded-corner clipping (needed so the poster image respects --cs02-radius) now lives on the inner .cs2-clip wrapper instead, leaving .cs2-card free to cast its shadow uncropped. */ .cs2-card{flex:0 0 220px;scroll-snap-align:start;border-radius:16px;box-shadow:0 4px 24px rgba(0,0,0,.4);transition:transform .22s,box-shadow .22s;cursor:pointer;display:flex;flex-direction:column} .cs2-card:hover{transform:scale(1.03);box-shadow:0 10px 40px rgba(0,0,0,.55)} .cs2-clip{border-radius:inherit;overflow:hidden;display:flex;flex-direction:column;flex:1} .cs02-no-card .cs2-card,.cs02-no-card .cs2-card:hover{border:none!important;box-shadow:none!important;background:transparent!important} /* Poster image is a real (object-fit:cover), not a CSS background-image — the asset-resolution/rewrite pipeline that turns the placeholder filename into a real served URL only touches attributes, so a background-image: url('banner_1.jpg') never got rewritten and silently failed to load, showing nothing under the overlay. */ .cs2-img{height:280px;position:relative;display:flex;align-items:flex-end;overflow:hidden} .cs2-img>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .cs2-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:1.2rem;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.2) 55%,transparent 100%)} /* Tag/title reuse the SAME Eyebrow/Heading Typography vars the section header uses (--cs02-tag-color/--cs02-title-color), instead of separate hardcoded whites, so one pair of controls governs both the section heading and each card's overlay text. */ .cs2-tag{font-size:var(--fs-xs,.58rem);font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--cs02-tag-color,rgba(255,255,255,.5));margin-bottom:.4rem;display:block} .cs2-title{font-size:var(--fs-body,.98rem);font-weight:800;color:var(--cs02-title-color,#ffffff);line-height:1.25} /* Footer band gets its OWN dedicated color control (--cs02-foot-bg) rather than sharing --cs02-inner-bg (the mostly-invisible card-root background, hidden under the poster image) — the two are visually unrelated so conflating them was confusing to configure. min-height keeps the band a stable size so a 3-line-clamped meta doesn't reflow card height card-to-card. */ .cs2-foot{background:var(--cs02-foot-bg,#111827);padding:.85rem 1.1rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem;min-height:88px} .cs2-meta{font-size:var(--fs-sm,.8rem);color:var(--cs02-foot-text-color,#94a3b8);line-height:1.45;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .cs2-btn{font-size:var(--fs-xs,.7rem);font-weight:700;color:var(--cs02-btn-color,#818cf8);white-space:nowrap;text-decoration:none;flex-shrink:0;padding:.35rem .8rem;border:1px solid color-mix(in srgb,var(--cs02-btn-color,#818cf8) 40%,transparent);border-radius:999px;transition:all .16s} .cs2-btn:hover{background:var(--cs02-btn-color,#818cf8);color:#fff} /* ────────────────────────────────────────────────────────────── §5 CS-03 Landscape article ────────────────────────────────────────────────────────────── */ .cs3-track{gap:14px} .cs3-card{flex:0 0 340px;scroll-snap-align:start;background:var(--card-bg,#fff);border-radius:12px;border:1px solid var(--card-border,#e2e8f0);overflow:hidden;display:flex;flex-direction:row;box-shadow:0 1px 4px rgba(0,0,0,.04);transition:box-shadow .2s,transform .2s} .cs3-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.08);transform:translateY(-2px)} .cs03-no-card .cs3-card,.cs03-no-card .cs3-card:hover{border:none!important;box-shadow:none!important;background:transparent!important} .cs3-img{width:100px;flex-shrink:0;position:relative;overflow:hidden} .cs3-img img{width:100%;height:100%;object-fit:cover;display:block} .cs3-accent{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cs3-accent,#10b981)} .cs3-body{padding:.85rem 1rem .9rem .75rem;display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:0} .cs3-tag{font-size:var(--fs-xs,.58rem);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cs3-accent,#10b981)} .cs3-title{font-size:var(--fs-body,.98rem);font-weight:700;color:var(--text-strong,#0f172a);line-height:1.3} .cs3-desc{color:var(--cs03-desc-color,#64748b);line-height:1.5;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .cs3-foot{display:flex;align-items:center;justify-content:space-between;margin-top:.5rem} .cs3-time{font-size:var(--fs-sm,.65rem);color:var(--text-muted,#94a3b8);font-weight:600} .cs3-btn{font-size:var(--fs-sm,.7rem);font-weight:700;color:var(--cs3-accent,#10b981);flex-shrink:0} .cs3-btn:hover{text-decoration:underline} /* ────────────────────────────────────────────────────────────── §6 CS-04 Numbered feature ────────────────────────────────────────────────────────────── */ .cs4-track{gap:16px} .cs4-card{flex:0 0 230px;scroll-snap-align:start;background:var(--card-bg,#fff);border-radius:14px;border:1px solid var(--card-border,#e2e8f0);padding:1.6rem 1.4rem 1.4rem;position:relative;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,.05);transition:box-shadow .2s,transform .2s;display:flex;flex-direction:column;gap:.4rem} /* Top bar derives from the SAME per-item "Number Badge Color" (--cs4-num) instead of an independent hardcoded gradient — was two unrelated colors on one card with no way to keep them in sync. color-mix darkens the (usually pastel) badge tint into a deep bar. */ .cs4-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:color-mix(in srgb,var(--cs4-num,#e0e7ff) 65%,black)} .cs4-card:hover{box-shadow:0 8px 28px rgba(0,0,0,.1);transform:translateY(-3px)} .cs04-no-card .cs4-card,.cs04-no-card .cs4-card:hover{border:none!important;box-shadow:none!important;background:transparent!important} .cs04-no-card .cs4-card::before{display:none} .cs4-num{font-size:3.2rem;font-weight:900;color:var(--cs4-num,#e0e7ff);line-height:1;letter-spacing:-.04em} .cs4-title{font-size:var(--fs-body,.9rem);font-weight:800;color:var(--text-strong,#0f172a);line-height:1.3;margin-top:.1rem} .cs4-desc{color:var(--cs04-desc-color,#64748b);line-height:1.55;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .cs4-btn{font-size:var(--fs-sm,.72rem);font-weight:700;color:var(--cs4-link,#6366f1);text-decoration:none;margin-top:.5rem;display:inline-flex;align-items:center;transition:gap .15s} .cs4-btn::after{content:'→'} .cs4-btn:hover{gap:.4rem} /* ────────────────────────────────────────────────────────────── §7 CS-05 Glass on gradient ────────────────────────────────────────────────────────────── */ .cs5-bg{background:linear-gradient(135deg,#1e1b4b 0%,#312e81 38%,#4c1d95 68%,#6b21a8 100%)} .cs5-track{gap:16px} /* Glass tint is composed from a color + opacity pair (--cs05-card-bg/--cs05-card-opacity) instead of one hardcoded rgba — lets the admin pick any hue at any translucency, not just white at a fixed 10%. Opacity is stored as a plain 0-1 decimal (the standard for every opacity control in this library), converted to color-mix's percentage syntax via calc(... * 100%). Hover bumps opacity by +0.07 to keep the same "brighten on hover" feel regardless of the chosen base opacity. */ .cs5-card{flex:0 0 220px;scroll-snap-align:start;border-radius:20px;background:color-mix(in srgb,var(--cs05-card-bg,#ffffff) calc(var(--cs05-card-opacity,0.1) * 100%),transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.2);padding:1.6rem 1.3rem 1.5rem;display:flex;flex-direction:column;gap:.4rem;transition:background .22s,transform .22s,box-shadow .22s} .cs5-card:hover{background:color-mix(in srgb,var(--cs05-card-bg,#ffffff) calc((var(--cs05-card-opacity,0.1) + 0.07) * 100%),transparent);transform:translateY(-5px);box-shadow:0 16px 48px rgba(0,0,0,.35)} .cs5-icon{width:52px;height:52px;border-radius:13px;overflow:hidden;border:1px solid rgba(255,255,255,.25);flex-shrink:0;margin-bottom:.3rem} .cs5-icon img{width:100%;height:100%;object-fit:cover;display:block} .cs5-tag{font-size:var(--fs-xs,.58rem);font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.45)} .cs5-title{font-size:var(--fs-body,.9rem);font-weight:800;color:#fff;line-height:1.3} .cs5-desc{color:var(--cs05-desc-color,rgba(255,255,255,.58));line-height:1.55;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .cs5-btn{font-size:var(--fs-sm,.7rem);font-weight:700;color:var(--cs05-btn-color,#c4b5fd);text-decoration:none;margin-top:.4rem;display:inline-flex;align-items:center;gap:.25rem;transition:color .15s} .cs5-btn::after{content:'→'} .cs5-btn:hover{color:#fff} /* ────────────────────────────────────────────────────────────── §8 CS-06 Tall editorial ────────────────────────────────────────────────────────────── */ .cs6-track{gap:22px} .cs6-card{flex:0 0 270px;scroll-snap-align:start;border-radius:22px;overflow:hidden;background:var(--card-bg,#fff);box-shadow:0 4px 20px rgba(0,0,0,.08);transition:transform .26s,box-shadow .26s;display:flex;flex-direction:column;height:440px} .cs6-card:hover{transform:translateY(-7px);box-shadow:0 20px 56px rgba(0,0,0,.14)} .cs6-img{height:56%;flex-shrink:0;overflow:hidden;position:relative} .cs6-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s} .cs6-card:hover .cs6-img img{transform:scale(1.07)} /* Tint is derived from the SAME per-item "Accent Color" (--cs6-accent) instead of an independent hardcoded --cs6-tint — was two unrelated colors on one card with no way to keep them in sync. color-mix lightens the accent into a pale tint for the body fill. */ .cs6-body{flex:1;padding:1.4rem 1.5rem 1.6rem;position:relative;overflow:hidden;background:color-mix(in srgb,var(--cs6-accent,#f97316) 8%,white);display:flex;flex-direction:column;gap:.4rem} .cs6-ghost{position:absolute;right:-8px;bottom:-28px;font-size:8rem;font-weight:900;color:rgba(0,0,0,.05);line-height:1;pointer-events:none;letter-spacing:-.05em;user-select:none} .cs6-tag{display:inline-block;font-size:var(--fs-xs,.6rem);font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--cs6-accent,#f97316);width:fit-content} .cs6-title{font-size:1.05rem;font-weight:800;color:var(--text-strong,#0f172a);line-height:1.28;letter-spacing:-.01em} .cs6-desc{font-size:var(--fs-sm,.8rem);color:var(--cs06-desc-color,#64748b);line-height:1.55;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .cs6-btn{font-size:var(--fs-xs,.75rem);font-weight:700;color:var(--cs6-accent,#f97316);text-decoration:none;margin-top:.5rem;display:inline-flex;align-items:center;gap:.28rem;transition:gap .15s} .cs6-btn::after{content:'→'} .cs6-btn:hover{gap:.44rem} /* ────────────────────────────────────────────────────────────── §9 CS-07 Wide panoramic ────────────────────────────────────────────────────────────── */ .cs7-track{gap:18px} .cs7-card{flex:0 0 400px;scroll-snap-align:start;border-radius:18px;overflow:hidden;background:var(--card-bg,#fff);box-shadow:0 2px 14px rgba(0,0,0,.07);display:flex;flex-direction:row;height:230px;transition:box-shadow .22s,transform .22s} .cs7-card:hover{box-shadow:0 12px 36px rgba(0,0,0,.11);transform:translateY(-4px)} .cs07-no-card .cs7-card,.cs07-no-card .cs7-card:hover{border:none!important;box-shadow:none!important;background:transparent!important} .cs7-img{width:48%;flex-shrink:0;overflow:hidden;position:relative} .cs7-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .42s} .cs7-card:hover .cs7-img img{transform:scale(1.07)} .cs7-body{flex:1;padding:1.4rem 1.3rem;display:flex;flex-direction:column;justify-content:center;gap:.4rem;min-width:0} .cs7-eyebrow{display:flex;align-items:center;gap:.4rem} .cs7-dot{width:7px;height:7px;border-radius:50%;background:var(--cs7-color,#6366f1);flex-shrink:0} .cs7-cat{font-size:var(--fs-xs,.6rem);font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--cs7-color,#6366f1)} .cs7-title{font-size:var(--fs-body,1rem);font-weight:800;color:var(--text-strong,#0f172a);line-height:1.25;letter-spacing:-.01em} .cs7-desc{font-size:var(--fs-body,.95rem);color:var(--cs07-desc-color,#64748b);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .cs7-foot{display:flex;align-items:center;justify-content:space-between;margin-top:.4rem;gap:.5rem;flex-wrap:wrap} .cs7-meta{font-size:var(--fs-sm,.65rem);color:var(--cs07-meta-color,#94a3b8);font-weight:600} .cs7-btn{font-size:var(--fs-sm,.7rem);font-weight:700;color:var(--cs7-color,#6366f1);text-decoration:none;padding:.3rem .75rem;border:1.5px solid var(--cs7-color,#6366f1);border-radius:999px;transition:all .15s;flex-shrink:0} .cs7-btn:hover{background:var(--cs7-color,#6366f1);color:#fff} /* ────────────────────────────────────────────────────────────── §10 CS-08 Polaroid ────────────────────────────────────────────────────────────── */ .cs8-track{gap:22px;padding:16px 4px 24px} .cs8-card{flex:0 0 240px;scroll-snap-align:start;background:var(--card-bg,#fff);padding:12px 12px 44px;border-radius:3px;box-shadow:0 8px 28px rgba(0,0,0,.12),0 1px 4px rgba(0,0,0,.06);display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s} .cs8-card:nth-child(odd){transform:rotate(-1.2deg)} .cs8-card:nth-child(even){transform:rotate(1.1deg)} .cs8-card:nth-child(3n){transform:rotate(-0.5deg)} .cs8-card:hover{transform:rotate(0deg) scale(1.04) !important;box-shadow:0 20px 56px rgba(0,0,0,.18)} .cs8-img{width:100%;aspect-ratio:1/1;overflow:hidden;position:relative} .cs8-img img{width:100%;height:100%;object-fit:cover;display:block} .cs8-caption{padding:.9rem .3rem .2rem;text-align:center} .cs8-title{font-size:var(--fs-body,.88rem);font-weight:700;color:var(--cs08-caption-title-color,#1e293b);font-family:Georgia,'Times New Roman',serif;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .cs8-sub{font-size:var(--fs-xs,.65rem);color:var(--cs08-caption-color,#94a3b8);margin-top:.25rem;font-style:italic} /* ────────────────────────────────────────────────────────────── §11 CS-09 Flip card ────────────────────────────────────────────────────────────── */ .cs9-track{gap:20px} .cs9-wrap{flex:0 0 270px;scroll-snap-align:start;height:390px;perspective:1100px;cursor:pointer} .cs9-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .58s cubic-bezier(.4,0,.2,1)} .cs9-wrap:hover .cs9-inner,.cs9-wrap.flipped .cs9-inner{transform:rotateY(180deg)} .cs9-front,.cs9-back{position:absolute;inset:0;border-radius:20px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden} .cs9-front{background:var(--card-bg,#fff);box-shadow:0 4px 22px rgba(0,0,0,.09)} .cs9-back{transform:rotateY(180deg);background:#6366f1;box-shadow:0 4px 22px rgba(0,0,0,.18);display:flex;flex-direction:column;padding:2rem 1.6rem;justify-content:flex-end} .cs9-front img{width:100%;height:68%;object-fit:cover;display:block} .cs9-front-body{padding:1.1rem 1.3rem 1.4rem} .cs9-front-tag{font-size:var(--fs-xs,.6rem);font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--cs09-front-tag-color,#94a3b8)} .cs9-front-title{font-size:var(--fs-body,.98rem);font-weight:800;color:var(--text-strong,#0f172a);line-height:1.28;margin-top:.35rem} /* Back-card text (hint/title/desc) shares ONE color control — they're all painted on the same admin-configurable --cs09-back-bg, so they need to move together if the back background is switched from dark to light, or the default white becomes unreadable. */ .cs9-back-hint{font-size:var(--fs-xs,.6rem);font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--cs09-back-text-color,#ffffff) 45%,transparent);margin-bottom:auto} .cs9-back-title{font-size:1.35rem;font-weight:900;color:var(--cs09-back-text-color,#ffffff);line-height:1.18;letter-spacing:-.02em;margin-bottom:.7rem} .cs9-back-desc{font-size:var(--fs-sm,.78rem);color:color-mix(in srgb,var(--cs09-back-text-color,#ffffff) 72%,transparent);line-height:1.55;margin-bottom:1.4rem;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .cs9-back-btn{display:inline-flex;align-items:center;gap:.3rem;font-size:var(--fs-xs,.75rem);font-weight:800;color:var(--cs09-btn-color,#ffffff);text-decoration:none;background:color-mix(in srgb,var(--cs09-btn-color,#ffffff) 18%,transparent);border:1.5px solid color-mix(in srgb,var(--cs09-btn-color,#ffffff) 40%,transparent);padding:.55rem 1.1rem;border-radius:999px;transition:background .15s;width:fit-content} .cs9-back-btn:hover{background:color-mix(in srgb,var(--cs09-btn-color,#ffffff) 30%,transparent)} .cs9-flip-hint{position:absolute;top:12px;right:14px;font-size:var(--fs-xs,.58rem);font-weight:700;color:var(--text-muted,#94a3b8);letter-spacing:.08em;text-transform:uppercase;background:var(--surface-color,#f8fafc);padding:.2rem .5rem;border-radius:999px} /* ────────────────────────────────────────────────────────────── §12 CS-10 Layered depth ────────────────────────────────────────────────────────────── */ .cs10-track{gap:28px;padding:14px 4px 22px} .cs10-wrap{flex:0 0 300px;scroll-snap-align:start;position:relative} /* Offset box derives from the SAME section-level "Accent color" (--cs10-accent) that already drives the tag + button, at a light tone, instead of an independent hardcoded blue that never matched a custom accent. */ .cs10-wrap::before{content:'';position:absolute;inset:0;border-radius:22px;background:color-mix(in srgb,var(--cs10-accent,#2563eb) 25%,white);transform:translate(9px,9px);transition:transform .26s;z-index:0} .cs10-wrap:hover::before{transform:translate(14px,14px)} /* background/border-radius/box-shadow dropped — every instance already sets these inline via --cs10-inner-bg/--cs10-radius/--cs10-shadow, so the class-level fallbacks were dead weight. height:100% makes the card actually fill .cs10-wrap's stretched flex height (siblings already stretch equal-tall via .sc-track's default align-items:stretch) — the 4th/user-added card with a taller image was leaving the others short without it. */ .cs10-card{position:relative;z-index:1;overflow:hidden;transition:transform .26s;display:flex;flex-direction:column;height:100%} .cs10-wrap:hover .cs10-card{transform:translate(-3px,-3px)} .cs10-img-wrap{width:100%;height:200px;position:relative;overflow:hidden} .cs10-img{width:100%;height:100%;object-fit:cover;display:block} .cs10-body{padding:1.5rem 1.5rem 1.7rem;display:flex;flex-direction:column;gap:.45rem;flex:1} .cs10-tag{display:inline-block;font-size:var(--fs-xs,.6rem);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cs10-accent,#2563eb);background:color-mix(in srgb,var(--cs10-accent,#2563eb) 15%,white);padding:.2rem .55rem;border-radius:4px;width:fit-content} .cs10-title{font-size:1.05rem;font-weight:800;color:var(--text-strong,#0f172a);line-height:1.28;letter-spacing:-.01em} .cs10-desc{font-size:var(--fs-sm,.8rem);color:var(--cs10-desc-color,#64748b);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .cs10-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto} .cs10-meta{font-size:var(--fs-xs,.65rem);color:var(--cs10-meta-color,#94a3b8);font-weight:600} .cs10-btn{font-size:var(--fs-xs,.73rem);font-weight:700;color:var(--cs10-accent,#2563eb);text-decoration:none;display:inline-flex;align-items:center;gap:.25rem;transition:gap .15s} .cs10-btn::after{content:'→'} .cs10-btn:hover{gap:.4rem} /* ────────────────────────────────────────────────────────────── §13 Floating social bar — structure ────────────────────────────────────────────────────────────── */ .fsb{ position:fixed;right:0;top:50%;transform:translateY(-50%); display:flex;flex-direction:column;gap:6px; padding:10px 0 10px 10px;z-index:9999 } .fsb-item{display:flex;align-items:center;justify-content:flex-end;gap:8px;position:relative} .fsb-label{ font-size:var(--fs-xs,.68rem);font-weight:700;white-space:nowrap; background:#1e293b;color:#fff;padding:.28rem .65rem;border-radius:6px; opacity:0;transform:translateX(8px);transition:opacity .18s,transform .18s;pointer-events:none } .fsb-label::after{ content:'';position:absolute;right:-5px;top:50%;transform:translateY(-50%); border:5px solid transparent;border-left-color:var(--text-strong,#1e293b) } .fsb-item:hover .fsb-label{opacity:1;transform:translateX(0)} .fsb-btn{ width:44px;height:44px;border-radius:50%;border:none; display:flex;align-items:center;justify-content:center; cursor:pointer;text-decoration:none;flex-shrink:0; transition:transform .18s,box-shadow .18s; box-shadow:0 2px 10px rgba(0,0,0,.15);position:relative } .fsb-btn:hover{transform:translateX(-5px);box-shadow:0 4px 18px rgba(0,0,0,.22)} .fsb-btn svg{width:20px;height:20px;display:block} .fsb-call .fsb-btn{width:50px;height:50px} .fsb-call .fsb-btn svg{width:22px;height:22px} .fsb-divider{width:36px;height:1px;background:rgba(0,0,0,.12);margin:2px 4px;align-self:flex-end} /* ────────────────────────────────────────────────────────────── §14 FSB themes ────────────────────────────────────────────────────────────── */ /* FS-01 White + icon color */ .fs1-call .fsb-btn{background:var(--card-bg,#fff);color:#16a34a} .fs1-wa .fsb-btn{background:var(--card-bg,#fff);color:#25D366} .fs1-ig .fsb-btn{background:var(--card-bg,#fff);color:#e1306c} .fs1-fb .fsb-btn{background:var(--card-bg,#fff);color:#1877f2} .fs1-yt .fsb-btn{background:var(--card-bg,#fff);color:#ff0000} .fs1-li .fsb-btn{background:var(--card-bg,#fff);color:#0077b5} /* FS-02 Filled brand */ .fs2-call .fsb-btn{background:#16a34a;color:#fff} .fs2-wa .fsb-btn{background:#25D366;color:#fff} .fs2-ig .fsb-btn{background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af);color:#fff} .fs2-fb .fsb-btn{background:#1877f2;color:#fff} .fs2-yt .fsb-btn{background:#ff0000;color:#fff} .fs2-li .fsb-btn{background:#0077b5;color:#fff} /* FS-03 Dark mono */ .fs3 .fsb-btn{background:#0f172a;color:#fff} .fs3 .fsb-call .fsb-btn{background:#6366f1;color:#fff} .fs3 .fsb-wa .fsb-btn{background:#25D366;color:#fff} /* FS-04 Ghost outline */ .fs4 .fsb-btn{background:rgba(255,255,255,.92);border:1.5px solid var(--card-border,#e2e8f0);color:var(--text-color,#475569);box-shadow:0 1px 6px rgba(0,0,0,.08)} .fs4 .fsb-call .fsb-btn{border-color:#16a34a;color:#16a34a} .fs4 .fsb-wa .fsb-btn{border-color:#25D366;color:#25D366} .fs4 .fsb-item:hover .fsb-btn{background:var(--surface-color,#f8fafc);box-shadow:0 3px 14px rgba(0,0,0,.12)} /* ────────────────────────────────────────────────────────────── §15 Back to top buttons ────────────────────────────────────────────────────────────── */ /* BT-01 Classic round */ .bt01{ width:52px;height:52px;border-radius:50%; background:var(--primary-color,#6366f1);color:#fff; border:none;cursor:pointer;display:flex;align-items:center;justify-content:center; box-shadow:0 4px 18px rgba(99,102,241,.4);transition:transform .2s,box-shadow .2s } .bt01:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(99,102,241,.55)} /* BT-02 Pill + label */ .bt02{ height:46px;padding:0 1.4rem;border-radius:999px; background:#0f172a;color:#fff;border:none;cursor:pointer; display:flex;align-items:center;gap:.5rem; font-size:var(--fs-xs,.78rem);font-weight:800;letter-spacing:.06em; box-shadow:0 4px 16px rgba(15,23,42,.25);transition:transform .2s,background .2s } .bt02:hover{background:#1e293b;transform:translateY(-3px)} /* BT-03 Progress ring */ .bt03-wrap{position:relative;width:56px;height:56px;cursor:pointer} .bt03-ring{position:absolute;inset:0;transform:rotate(-90deg)} .bt03-ring .track{fill:none;stroke:#e2e8f0;stroke-width:3} .bt03-ring .prog{fill:none;stroke:var(--primary-color,#6366f1);stroke-width:3;stroke-linecap:round;stroke-dasharray:138.23;stroke-dashoffset:55} .bt03-inner{ position:absolute;inset:7px;border-radius:50%; background:var(--card-bg,#fff);border:none;cursor:pointer; display:flex;align-items:center;justify-content:center; color:var(--text-strong,#0f172a);box-shadow:0 2px 10px rgba(0,0,0,.09);transition:background .2s } .bt03-wrap:hover .bt03-inner{background:var(--surface-color,#f8fafc)} /* BT-04 Frosted glass */ .bt04-wrap{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#a78bfa);display:flex;align-items:center;justify-content:center} .bt04{ width:48px;height:48px;border-radius:50%; background:rgba(255,255,255,.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border:1.5px solid rgba(255,255,255,.42);color:#fff;cursor:pointer; display:flex;align-items:center;justify-content:center; box-shadow:0 4px 18px rgba(0,0,0,.15);transition:background .2s,transform .2s } .bt04:hover{background:rgba(255,255,255,.3);transform:translateY(-3px)} /* BT-05 Neon pulse */ .bt05{ width:52px;height:52px;border-radius:50%;background:#0a0a0f; border:1.5px solid rgba(99,102,241,.5);color:#818cf8;cursor:pointer; display:flex;align-items:center;justify-content:center; animation:bttPulse 2.4s ease-out infinite;transition:border-color .2s,color .2s } .bt05:hover{border-color:rgba(99,102,241,.9);color:#c7d2fe} /* ────────────────────────────────────────────────────────────── §16 Keyframes ────────────────────────────────────────────────────────────── */ @keyframes fsbPulse{ 0%{box-shadow:0 0 0 0 rgba(22,163,74,.5),0 2px 10px rgba(0,0,0,.15)} 70%{box-shadow:0 0 0 10px rgba(22,163,74,0),0 2px 10px rgba(0,0,0,.15)} 100%{box-shadow:0 0 0 0 rgba(22,163,74,0),0 2px 10px rgba(0,0,0,.15)} } .fsb-call .fsb-btn{animation:fsbPulse 2.2s ease-out infinite} .fsb-call .fsb-btn:hover{animation:none} @keyframes bttPulse{ 0%{box-shadow:0 0 0 0 rgba(99,102,241,.6)} 70%{box-shadow:0 0 0 12px rgba(99,102,241,0)} 100%{box-shadow:0 0 0 0 rgba(99,102,241,0)} } /* ────────────────────────────────────────────────────────────── §17 Responsive — 320px and up ────────────────────────────────────────────────────────────── */ /* 320px–479px: smallest phones */ @media(max-width:480px){ /* Scroller section padding tighter */ .sc-section{padding:2rem 0 2.5rem} /* CS-01: shrink card slightly */ .h-leaflet-card{flex:0 0 240px} /* CS-02: shrink poster */ .cs2-card{flex:0 0 200px} .cs2-img{height:240px} /* CS-03: narrow landscape card */ .cs3-card{flex:0 0 290px} .cs3-img{width:85px} /* CS-06: shorter on small phones */ .cs6-card{flex:0 0 250px;height:400px} .cs6-ghost{font-size:5.5rem} /* CS-07: stack vertically on small screens */ .cs7-card{flex:0 0 280px;flex-direction:column;height:auto} .cs7-img{width:100%;height:160px} .cs7-body{padding:1rem 1.1rem 1.2rem} /* CS-08: smaller polaroid */ .cs8-card{flex:0 0 200px;padding:10px 10px 38px} /* CS-09: flip card narrower */ .cs9-wrap{flex:0 0 240px;height:360px} /* CS-10: depth card narrower */ .cs10-wrap{flex:0 0 260px} .cs10-img-wrap{height:170px} /* FSB: compact on very small screens */ .fsb{gap:4px;padding:7px 0 7px 7px} .fsb-btn{width:36px;height:36px} .fsb-btn svg{width:16px;height:16px} .fsb-call .fsb-btn{width:42px;height:42px} .fsb-call .fsb-btn svg{width:18px;height:18px} .fsb-label{display:none} /* BTT: BT-02 pill smaller text */ .bt02{height:40px;padding:0 1rem;font-size:var(--fs-xs,.72rem)} } /* 480px–639px */ @media(min-width:480px){ .h-leaflet-card{flex:0 0 260px} .cs2-card{flex:0 0 230px} .cs3-card{flex:0 0 320px} .cs7-card{flex:0 0 360px} .cs9-wrap{flex:0 0 260px} .cs10-wrap{flex:0 0 280px} } /* 640px–1023px */ @media(min-width:640px){ .h-leaflet-card{flex:0 0 280px} .cs2-card{flex:0 0 240px} .cs3-card{flex:0 0 350px} .cs5-card{flex:0 0 240px} .cs7-card{flex:0 0 420px;flex-direction:row;height:230px} .cs7-img{width:48%;height:100%} .cs9-wrap{flex:0 0 270px} .cs10-wrap{flex:0 0 300px} /* FSB restore normal on 640+ */ .fsb-btn{width:44px;height:44px} .fsb-btn svg{width:20px;height:20px} .fsb-call .fsb-btn{width:50px;height:50px} .fsb-call .fsb-btn svg{width:22px;height:22px} } /* 1024px+ */ @media(min-width:1024px){ .h-leaflet-card{flex:0 0 calc(25% - 15px)} .cs2-card{flex:0 0 270px} .cs5-card{flex:0 0 250px} .cs7-card{flex:0 0 460px} } /* Cards-per-view — universal, applies to any direct child of .sc-track (all 10 card types), placed AFTER every fixed-width breakpoint override above so it wins on source order (same specificity as .hNN-card/.csNN-card — one class each). Each section sets its own --cs-cards-* overrides inline via style-config, scoped to that section's subtree only (siblings/other sections unaffected by inheritance). */ .sc-track>*{flex:0 0 calc((100% - (var(--cs-cards-0,1) - 1)*var(--cs-gap,20px))/var(--cs-cards-0,1))} @media(min-width:480px){.sc-track>*{flex-basis:calc((100% - (var(--cs-cards-1,var(--cs-cards-0,1)) - 1)*var(--cs-gap,20px))/var(--cs-cards-1,var(--cs-cards-0,1)))}} @media(min-width:640px){.sc-track>*{flex-basis:calc((100% - (var(--cs-cards-2,var(--cs-cards-1,2)) - 1)*var(--cs-gap,20px))/var(--cs-cards-2,var(--cs-cards-1,2)))}} @media(min-width:768px){.sc-track>*{flex-basis:calc((100% - (var(--cs-cards-3,var(--cs-cards-2,3)) - 1)*var(--cs-gap,20px))/var(--cs-cards-3,var(--cs-cards-2,3)))}} @media(min-width:1024px){.sc-track>*{flex-basis:calc((100% - (var(--cs-cards-4,var(--cs-cards-3,4)) - 1)*var(--cs-gap,20px))/var(--cs-cards-4,var(--cs-cards-3,4)))}} @media(min-width:1280px){.sc-track>*{flex-basis:calc((100% - (var(--cs-cards-5,var(--cs-cards-4,5)) - 1)*var(--cs-gap,20px))/var(--cs-cards-5,var(--cs-cards-4,5)))}} /* ────────────────────────────────────────────────────────────── §18 Common preview utilities (section-label, gap-section, parallax, scroll-hint, wave) ────────────────────────────────────────────────────────────── */ /* Pill label used in blockquote, columns, cta, googlemap */ /* Section vertical gap */ /* CSS parallax — background-attachment:fixed (iOS ignores, desktop only) */ .parallax{background-attachment:fixed;background-size:cover;background-position:center;background-repeat:no-repeat} /* Vertical "SCROLL ——" hint */ .scroll-hint{ position:absolute;right:1.5rem;top:50%;transform:translateY(-50%) rotate(90deg); font-size:var(--fs-xs,.58rem);font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:rgba(255,255,255,.35);pointer-events:none; } /* Wave shape at bottom of section */ .wave-bottom{position:absolute;bottom:-1px;left:0;right:0;overflow:hidden;line-height:0} /* ────────────────────────────────────────────────────────────── §19 CTA buttons (btn-white / pink / blue / grad / ghost / primary) ────────────────────────────────────────────────────────────── */ .btn-white{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 2rem;background:var(--bg-color,#fff);color:#111;border-radius:99px;font-size:var(--fs-sm,.85rem);font-weight:700;text-decoration:none;white-space:nowrap;transition:background .2s,box-shadow .2s} .btn-white:hover{background:#f3f4f6} .btn-pink{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 2rem;background:linear-gradient(135deg,#f43f5e,#ec4899);color:#fff;border-radius:99px;font-size:var(--fs-sm,.85rem);font-weight:700;text-decoration:none;white-space:nowrap;transition:opacity .2s} .btn-pink:hover{opacity:.88} .btn-blue{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 2rem;background:#2563eb;color:#fff;border-radius:99px;font-size:var(--fs-sm,.85rem);font-weight:700;text-decoration:none;white-space:nowrap;transition:background .2s} .btn-blue:hover{background:#1d4ed8} .btn-grad{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 2.5rem;background:linear-gradient(135deg,#a855f7,#ec4899);color:#fff;border-radius:99px;font-size:var(--fs-sm,.85rem);font-weight:700;text-decoration:none;white-space:nowrap;transition:opacity .2s} .btn-grad:hover{opacity:.88} .btn-ghost{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 2rem;background:rgba(255,255,255,.15);color:#fff;border-radius:99px;font-size:var(--fs-sm,.85rem);font-weight:700;text-decoration:none;white-space:nowrap;border:1.5px solid rgba(255,255,255,.35);backdrop-filter:blur(8px);transition:background .2s} .btn-ghost:hover{background:rgba(255,255,255,.25)} .btn-primary{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 2rem;background:var(--primary-color);color:var(--text-strong);border-radius:99px;font-size:var(--fs-sm,.85rem);font-weight:700;text-decoration:none;white-space:nowrap;transition:background .2s} .btn-primary:hover{background:var(--primary-dark);color:#fff} /* ────────────────────────────────────────────────────────────── §20 Column layout utilities (COL-01 – COL-10) ────────────────────────────────────────────────────────────── */ .col-wrap{padding:0 1.5rem;max-width:1280px;margin:0 auto} /* Thin hairline vertical divider */ .vdivider{width:1px;background:var(--card-border);flex-shrink:0;align-self:stretch} /* Sticky sidebar column */ .sticky-col{position:sticky;top:2rem;align-self:start} /* Circular icon container */ .icon-circle{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0} /* Eyebrow / super-label */ .sup-label{font-size:var(--fs-xs,.68rem);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);display:block;margin-bottom:.5rem} /* Large stat number */ .stat-num{font-size:clamp(2.2rem,5vw,3.5rem);font-weight:900;line-height:1} /* Accent rule above stat */ .stat-rule{width:40px;height:3px;background:var(--primary-color);margin-bottom:1.25rem;border-radius:2px} /* Pull quote left border */ .pull-quote{border-left:4px solid var(--primary-color);padding:.75rem 1.25rem;font-size:1.05rem;font-weight:700;font-style:italic;color:var(--text-strong);line-height:1.5} /* Negative margin offset for magazine layouts */ .offset-up{margin-top:-3.5rem} @media(max-width:768px){ .col-2,.col-3,.col-4,.col-asym,.col-sticky{flex-direction:column !important} .offset-up{margin-top:0} .vdivider{width:100%;height:1px} } /* ────────────────────────────────────────────────────────────── §21 Blockquote variants (BQ-01 – BQ-10) ────────────────────────────────────────────────────────────── */ /* BQ-01 Classic Centered */ .bq01{text-align:center;padding:3rem 2rem} .bq01-mark{font-size:5rem;line-height:.8;color:var(--primary-color);font-family:Georgia,serif;font-weight:700;margin-bottom:.5rem} .bq01-text{font-size:var(--fs-body,1.15rem);font-style:italic;color:var(--text-strong);line-height:1.75;max-width:600px;margin:0 auto 1.5rem} .bq01-line{width:40px;height:2px;background:var(--primary-color);margin:.75rem auto} .bq01-avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;margin:0 auto .6rem;display:block;border:3px solid var(--primary-color)} .bq01-name{font-weight:700;font-size:var(--fs-body,.9rem);color:var(--text-strong)} .bq01-role{font-size:var(--fs-sm,.78rem);color:var(--text-muted)} /* BQ-02 Left Border */ .bq02{border-left:4px solid var(--primary-color);padding:1.25rem 1.75rem;background:var(--card-bg);border-radius:0 var(--card-radius) var(--card-radius) 0;box-shadow:var(--card-shadow)} .bq02-text{font-size:var(--fs-body,1.05rem);font-style:italic;color:var(--text-strong);line-height:1.7;margin-bottom:1rem} .bq02-footer{display:flex;align-items:center;gap:.75rem} .bq02-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0} .bq02-name{font-size:var(--fs-sm,.85rem);font-weight:700;color:var(--text-strong)} .bq02-role{font-size:var(--fs-xs,.75rem);color:var(--text-muted)} /* BQ-03 Card + Big Quote Mark */ .bq03{background:var(--card-bg);border-radius:var(--card-radius);box-shadow:var(--card-shadow);padding:2rem 1.75rem 1.5rem;position:relative;transition:box-shadow .2s} .bq03:hover{box-shadow:var(--card-shadow-hover)} .bq03-mark{font-size:4rem;line-height:.7;color:var(--primary-color);font-family:Georgia,serif;font-weight:700;margin-bottom:.5rem} .bq03-text{font-size:var(--fs-body,.95rem);color:var(--text-color);line-height:1.7;margin-bottom:1.25rem} .bq03-footer{display:flex;align-items:center;gap:.75rem;border-top:1px solid var(--card-border);padding-top:1rem} .bq03-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0} .bq03-name{font-size:var(--fs-sm,.85rem);font-weight:700;color:var(--text-strong)} .bq03-role{font-size:var(--fs-xs,.74rem);color:var(--text-muted)} /* BQ-04 Dark Inverted */ .bq04{background:var(--text-strong);border-radius:var(--card-radius);padding:2.5rem 2rem;text-align:center} .bq04-mark{font-size:4rem;line-height:.8;color:var(--primary-color);font-family:Georgia,serif;font-weight:700} .bq04-text{font-size:var(--fs-body,1.05rem);font-style:italic;color:#e5e7eb;line-height:1.75;margin:.75rem 0 1.5rem} .bq04-line{width:36px;height:2px;background:var(--primary-color);margin:.75rem auto} .bq04-name{font-weight:700;font-size:var(--fs-body,.88rem);color:#fff} .bq04-role{font-size:var(--fs-xs,.76rem);color:#9ca3af;margin-top:.2rem} /* BQ-05 Side Avatar */ .bq05{display:flex;gap:1.5rem;align-items:flex-start;background:var(--card-bg);border-radius:var(--card-radius);box-shadow:var(--card-shadow);padding:1.75rem} .bq05-avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;flex-shrink:0;border:3px solid var(--primary-color)} .bq05-divider{width:1px;background:var(--card-border);flex-shrink:0;align-self:stretch} .bq05-body{flex:1} .bq05-mark{font-size:2.5rem;line-height:.6;color:var(--primary-color);font-family:Georgia,serif;font-weight:700} .bq05-text{font-size:var(--fs-body,.95rem);font-style:italic;color:var(--text-strong);line-height:1.7;margin:.4rem 0 1rem} .bq05-name{font-size:var(--fs-sm,.85rem);font-weight:700;color:var(--text-strong)} .bq05-role{font-size:var(--fs-xs,.76rem);color:var(--text-muted)} /* BQ-06 Magazine Pull Quote */ .bq06{text-align:center;padding:2.5rem 1rem;border-top:2px solid var(--text-strong);border-bottom:2px solid var(--text-strong)} .bq06-text{font-size:clamp(1.4rem,3vw,2rem);font-weight:300;font-style:italic;color:var(--text-strong);line-height:1.4;letter-spacing:-.01em;margin-bottom:1.25rem} .bq06-name{font-size:var(--fs-sm,.8rem);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)} .bq06-accent{display:inline-block;width:28px;height:2px;background:var(--primary-color);vertical-align:middle;margin-right:.5rem} /* BQ-07 Full-Width with BG Image */ .bq07{position:relative;border-radius:var(--card-radius);overflow:hidden;min-height:300px;display:flex;align-items:center;justify-content:center} .bq07-bg{position:absolute;inset:0} .bq07-bg img{width:100%;height:100%;object-fit:cover;display:block} .bq07-overlay{position:absolute;inset:0;background:rgba(17,24,39,.72)} .bq07-content{position:relative;z-index:1;text-align:center;padding:3rem 2rem;max-width:680px} .bq07-mark{font-size:5rem;line-height:.7;color:var(--primary-color);font-family:Georgia,serif;font-weight:700} .bq07-text{font-size:var(--fs-body,1.15rem);font-style:italic;color:#fff;line-height:1.75;margin:.5rem 0 1.5rem} .bq07-line{width:40px;height:2px;background:var(--primary-color);margin:.75rem auto} .bq07-name{font-size:var(--fs-body,.88rem);font-weight:700;color:#fff} .bq07-role{font-size:var(--fs-xs,.76rem);color:rgba(255,255,255,.65)} /* BQ-08 Social / Tweet Card */ .bq08{background:var(--card-bg);border-radius:var(--card-radius);box-shadow:var(--card-shadow);padding:1.5rem;transition:box-shadow .2s} .bq08:hover{box-shadow:var(--card-shadow-hover)} .bq08-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem} .bq08-brand{display:flex;align-items:center;gap:.6rem} .bq08-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover} .bq08-name{font-size:var(--fs-sm,.85rem);font-weight:700;color:var(--text-strong);display:flex;align-items:center;gap:.3rem} .bq08-handle{font-size:var(--fs-xs,.76rem);color:var(--text-muted)} .bq08-icon{color:#1d9bf0;flex-shrink:0} .bq08-text{font-size:var(--fs-body,.95rem);color:var(--text-strong);line-height:1.65;margin-bottom:1rem} .bq08-meta{font-size:var(--fs-xs,.74rem);color:var(--text-muted);padding-top:.75rem;border-top:1px solid var(--card-border)} .bq08-check{display:inline-block;width:14px;height:14px;background:#1d9bf0;border-radius:50%;color:#fff;font-size:var(--fs-xs,.55rem);line-height:14px;text-align:center;font-weight:900} /* BQ-09 Star Rating Card */ .bq09{background:var(--card-bg);border-radius:var(--card-radius);box-shadow:var(--card-shadow);padding:1.75rem;transition:box-shadow .2s} .bq09:hover{box-shadow:var(--card-shadow-hover)} .bq09-stars{color:var(--primary-color);font-size:1rem;letter-spacing:.1em;margin-bottom:.75rem} .bq09-text{font-size:var(--fs-body,.93rem);font-style:italic;color:var(--text-color);line-height:1.7;margin-bottom:1.25rem} .bq09-footer{display:flex;align-items:center;gap:.75rem} .bq09-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;flex-shrink:0} .bq09-name{font-size:var(--fs-sm,.84rem);font-weight:700;color:var(--text-strong)} .bq09-company{font-size:var(--fs-xs,.74rem);color:var(--text-muted)} /* BQ-10 Speech Bubble */ .bq10-wrap{display:flex;flex-direction:column;align-items:center} .bq10-bubble{background:var(--card-bg);border-radius:var(--card-radius);box-shadow:var(--card-shadow);padding:1.75rem 2rem;position:relative;text-align:center;max-width:380px} .bq10-bubble::after{content:'';position:absolute;bottom:-12px;left:50%;transform:translateX(-50%);border:12px solid transparent;border-top-color:var(--card-bg);border-bottom:0;filter:drop-shadow(0 3px 2px rgba(0,0,0,.07))} .bq10-mark{font-size:2.5rem;line-height:.7;color:var(--primary-color);font-family:Georgia,serif;font-weight:700;margin-bottom:.4rem} .bq10-text{font-size:var(--fs-body,.93rem);font-style:italic;color:var(--text-strong);line-height:1.65} .bq10-tail{height:24px} .bq10-avatar{width:60px;height:60px;border-radius:50%;object-fit:cover;border:3px solid var(--primary-color);margin-top:.25rem} .bq10-name{font-size:var(--fs-sm,.84rem);font-weight:700;color:var(--text-strong);margin-top:.5rem} .bq10-role{font-size:var(--fs-xs,.74rem);color:var(--text-muted)} /* ────────────────────────────────────────────────────────────── §22 Google Maps utilities (GM-01 – GM-08) ────────────────────────────────────────────────────────────── */ .gm-tab.active{background:var(--text-strong);color:#fff;border-color:var(--text-strong)} .gm-tab:hover:not(.active){border-color:#9ca3af;color:var(--text-strong)} .gm-pin,.gm-pin-sm{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);z-index:3;pointer-events:none} @keyframes gmPulse{ 0%{transform:translate(-50%,-50%) scale(.4);opacity:1} 100%{transform:translate(-50%,-50%) scale(3);opacity:0} } /* ────────────────────────────────────────────────────────────── §23 Lists (LS-01 – LS-12) + TOC + section wrappers ────────────────────────────────────────────────────────────── */ /* TOC nav */ .toc strong{color:#fcd703;font-size:var(--fs-sm,.8rem);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap} .toc a{color:var(--text-muted,#94a3b8);font-size:var(--fs-xs,.78rem);text-decoration:none;white-space:nowrap;padding:.25rem .6rem;border-radius:4px;transition:background .15s,color .15s} .toc a:hover{background:#334155;color:#f1f5f9} /* Section wrapper */ .sec-label{background:#1e293b;color:#fcd703;font-size:var(--fs-xs,.7rem);font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:.45rem 1.2rem;display:inline-block} .sec-inner{padding:5rem clamp(1.5rem,5vw,3rem);max-width:1200px;margin:0 auto} /* Layout helpers */ .two-col{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center} .three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4rem;align-items:start} /* Typography helpers */ .sec-p{font-size:var(--fs-body,.95rem);color:var(--text-muted,#64748b);line-height:1.8;margin-bottom:1.8rem} /* List buttons */ .btn-pill{display:inline-block;padding:.6rem 1.8rem;border-radius:50px;background:#fcd703;color:var(--text-strong,#0f172a);font-size:var(--fs-sm,.82rem);font-weight:800;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;align-self:flex-start} .btn-outline{display:inline-block;padding:.6rem 1.8rem;border:2px solid #0f172a;border-radius:3px;font-size:var(--fs-sm,.82rem);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-strong,#0f172a);text-decoration:none;align-self:flex-start} .img-cover{width:100%;height:100%;object-fit:cover} /* LS-01 Checkmark list */ .ls01-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.9rem 2.5rem} .ls01-list li{display:flex;align-items:flex-start;gap:.75rem;font-size:var(--fs-body,.93rem);color:var(--text-color);line-height:1.6} .ls01-tick{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:#fcd703;display:flex;align-items:center;justify-content:center;margin-top:.1rem} /* LS-02 Numbered list */ .ls02-list{list-style:none;display:flex;flex-direction:column;gap:0} .ls02-item{display:flex;align-items:flex-start;gap:1.6rem;padding:1.6rem 0;border-bottom:1px solid #f1f5f9} .ls02-item:last-child{border-bottom:none} .ls02-num{font-size:2.4rem;font-weight:900;color:#f1f5f9;line-height:1;flex-shrink:0;width:3rem;text-align:right} .ls02-body h4{font-size:1rem;font-weight:800;color:var(--text-strong,#0f172a);margin-bottom:.35rem} .ls02-body p{font-size:var(--fs-sm,.88rem);color:var(--text-muted,#64748b);line-height:1.7} /* LS-03 Icon list */ .ls03-list{list-style:none;display:flex;flex-direction:column;gap:1.4rem} .ls03-item{display:flex;align-items:flex-start;gap:1.1rem} .ls03-icon{flex-shrink:0;width:44px;height:44px;border-radius:8px;display:flex;align-items:center;justify-content:center} .ls03-icon.y{background:#fefce8} .ls03-icon.b{background:#ecfeff} .ls03-icon.o{background:#fff7ed} .ls03-icon.g{background:#f0fdf4} .ls03-body h4{font-size:var(--fs-body,.98rem);font-weight:800;color:var(--text-strong,#0f172a);margin-bottom:.3rem} .ls03-body p{font-size:var(--fs-sm,.87rem);color:var(--text-muted,#64748b);line-height:1.65} /* LS-04 Bordered card list */ .ls04-list{list-style:none;display:flex;flex-direction:column;gap:.6rem} .ls04-item{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.4rem;border:1px solid var(--card-border,#e2e8f0);background:var(--card-bg,#fff);transition:box-shadow .2s,border-color .2s} .ls04-item:hover{border-color:#fcd703;box-shadow:0 4px 20px rgba(0,0,0,.06)} .ls04-dot{width:10px;height:10px;border-radius:50%;background:#fcd703;flex-shrink:0} .ls04-item span{font-size:var(--fs-body,.93rem);color:var(--text-color);font-weight:500} .ls04-tag{margin-left:auto;font-size:var(--fs-xs,.7rem);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted,#94a3b8);background:var(--surface-color,#f8fafc);padding:.2rem .6rem;border-radius:3px} /* LS-05 Timeline */ .ls05-list{list-style:none;position:relative;padding-left:2rem} .ls05-list::before{content:'';position:absolute;left:.4rem;top:.5rem;bottom:.5rem;width:2px;background:#e2e8f0} .ls05-item{position:relative;padding-left:1.8rem;padding-bottom:2rem} .ls05-item:last-child{padding-bottom:0} .ls05-dot{position:absolute;left:-1.6rem;top:.2rem;width:16px;height:16px;border-radius:50%;background:#fcd703;border:3px solid #fff;box-shadow:0 0 0 2px #fcd703} .ls05-item h4{font-size:var(--fs-body,.98rem);font-weight:800;color:var(--text-strong,#0f172a);margin-bottom:.3rem} .ls05-item p{font-size:var(--fs-sm,.87rem);color:var(--text-muted,#64748b);line-height:1.65} .ls05-year{font-size:var(--fs-xs,.72rem);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted,#94a3b8);margin-bottom:.4rem} /* LS-06 Arrow list */ .ls06-list{list-style:none;display:flex;flex-direction:column;gap:.4rem} .ls06-item{display:flex;align-items:center;gap:.8rem;padding:.6rem 0;border-bottom:1px solid #f8fafc} .ls06-item:last-child{border-bottom:none} .ls06-arrow{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:transparent;display:flex;align-items:center;justify-content:center} .ls06-item span{font-size:var(--fs-body,.93rem);color:var(--text-color)} /* LS-07 3-col checklist */ .ls07-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem 2.5rem} .ls07-item{display:flex;align-items:center;gap:.7rem;font-size:var(--fs-body,.9rem);color:var(--text-color);padding:.5rem 0} .ls07-check{flex-shrink:0;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center} /* LS-08 Progress bar list */ .ls08-list{list-style:none;display:flex;flex-direction:column;gap:1.4rem} .ls08-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.45rem} .ls08-label{font-size:var(--fs-body,.9rem);font-weight:700;color:var(--text-strong,#0f172a)} .ls08-pct{font-size:var(--fs-sm,.85rem);font-weight:800;color:#fcd703} .ls08-track{height:6px;background:var(--surface-color,#f1f5f9);border-radius:50px;overflow:hidden} .ls08-fill{height:100%;border-radius:50px;background:linear-gradient(90deg,#fcd703,#f97316);transition:width 1s ease} /* LS-09 Image + list — uses .ls03-item */ .ls09-img{border-radius:4px;overflow:hidden;height:480px} .ls09-img img{width:100%;height:100%;object-fit:cover} /* LS-10 Badge list */ .ls10-list{list-style:none;display:flex;flex-direction:column;gap:.6rem} .ls10-item{display:flex;align-items:center;gap:1rem} .ls10-badge{flex-shrink:0;font-size:var(--fs-xs,.6rem) !important;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:.15rem .55rem;border-radius:50px;background:#fefce8;color:#92400e;white-space:nowrap;border:1px solid #fde68a} .ls10-item span{font-size:var(--fs-body,.93rem);color:var(--text-color)} /* LS-11 Accordion */ .ls11-item{border-bottom:1px solid #f1f5f9} .ls11-btn{width:100%;display:flex;align-items:center;justify-content:space-between;padding:1.2rem 0;background:none;border:none;cursor:pointer;text-align:left;gap:1rem} .ls11-btn-title{font-size:var(--fs-body,.98rem);font-weight:700;color:var(--text-strong,#0f172a)} .ls11-btn-icon{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--surface-color,#f8fafc);border:1px solid var(--card-border,#e2e8f0);display:flex;align-items:center;justify-content:center;transition:background .2s,transform .25s} .ls11-item.open .ls11-btn-icon{background:#fcd703;border-color:#fcd703;transform:rotate(45deg)} .ls11-body{display:none;padding-bottom:1.2rem} .ls11-item.open .ls11-body{display:block} .ls11-body p{font-size:var(--fs-body,.9rem);color:var(--text-muted,#64748b);line-height:1.75} /* LS-12 Two-tone split */ .ls12-wrap{display:grid;grid-template-columns:1fr 1fr;gap:0} .ls12-col{padding:3.5rem} .ls12-col:first-child{background:#0f172a;color:#f8fafc} .ls12-col:last-child{background:#fefce8} .ls12-col h3{font-size:1.2rem;font-weight:800;margin-bottom:1.5rem} .ls12-col:first-child h3{color:#fcd703} .ls12-col:last-child h3{color:var(--text-strong,#0f172a)} .ls12-list{list-style:none;display:flex;flex-direction:column;gap:.9rem} .ls12-item{display:flex;align-items:flex-start;gap:.8rem;font-size:var(--fs-body,.9rem);line-height:1.6} .ls12-col:first-child .ls12-item{color:#cbd5e1} .ls12-col:last-child .ls12-item{color:var(--text-color)} .ls12-dot{flex-shrink:0;width:6px;height:6px;border-radius:50%;margin-top:.55rem} .ls12-col:first-child .ls12-dot{background:#fcd703} .ls12-col:last-child .ls12-dot{background:#92400e} /* ────────────────────────────────────────────────────────────── §24 Responsive additions for §19–§23 (320px and up) ────────────────────────────────────────────────────────────── */ @media(max-width:768px){ .two-col,.three-col{grid-template-columns:1fr;gap:2.5rem} } @media(max-width:768px){ .ls12-wrap{grid-template-columns:1fr} } @media(max-width:640px){ .ls01-list{grid-template-columns:1fr} .ls07-grid{grid-template-columns:repeat(2,1fr)} .sec-inner{padding:3rem 1.5rem} .ls12-col{padding:2.5rem 1.5rem} /* CTA full-width on mobile */ .btn-white,.btn-pink,.btn-blue,.btn-grad,.btn-ghost,.btn-primary{ justify-content:center;width:100%;max-width:280px } /* Column col-wrap padding */ .col-wrap{padding:0 1rem} .offset-up{margin-top:0} .toc{padding:1.25rem 1rem;gap:.75rem} } @media(max-width:640px){ .ls07-grid{grid-template-columns:1fr} } @media(max-width:480px){ .bq05{flex-direction:column} .bq05-avatar{width:56px;height:56px} .bq07-content{padding:2rem 1.25rem} .bq10-bubble{max-width:280px;padding:1.25rem 1.5rem} /* GM overlays: stack on small screens */ .gm-overlay{position:static !important;width:100% !important;transform:none !important;border-radius:0} .stat-num{font-size:clamp(1.8rem,8vw,2.6rem)} } /* ────────────────────────────────────────────────────────────── §25 Tab Templates (TB-01 – TB-R2) ────────────────────────────────────────────────────────────── */ /* ── Shared tab image ── */ /* ── Tab panels: hide non-active ── */ [data-tab-panel] { display:none; } [data-tab-panel].active { display:block; } /* ── TB-01 / TB-03 · Dark pill tabs ── */ .tb-pill.active { background:var(--btn-p-bg,var(--text-strong)); color:var(--btn-p-text,#fff); border-color:var(--btn-p-bg,var(--text-strong)); } /* ── TB-03 · Gold pill tabs ── */ .tb-pill-gold.active { background:var(--btn-a-bg,var(--primary-color)); color:var(--btn-a-text,var(--text-strong)); border-color:var(--btn-a-bg,var(--primary-color)); } /* ── TB-04 / TB-R1 · Underline tabs ── */ .tb-ul.active { color:var(--text-strong); border-bottom-color:var(--text-strong); } /* ── TB-01 · Step items ── */ /* ── TB-08 · Vertical sidebar tabs ── */ .tb-vert svg { flex-shrink:0; } .tb-vert.active { background:var(--primary-color); color:var(--text-strong); } /* ── TB-X · Boxed icon tabs ── */ .tb-icon-btn svg { color:var(--text-muted); transition:color .2s; } .tb-icon-btn:hover svg { color:var(--primary-dark); } .tb-icon-btn.active { background:var(--primary-color); border-color:var(--primary-color); color:var(--text-strong); box-shadow:0 4px 12px rgba(252,215,3,.35); } .tb-icon-btn.active svg { color:var(--text-strong); } /* ── TB-R1 · Floating stat badge ── */ /* ── TB-R1 · Learn More button ── */ .learn-btn .arrow { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; border:1.5px solid var(--text-strong); font-size:1.1rem; transition:background .2s, color .2s; } .learn-btn:hover .arrow { background:var(--text-strong); color:#fff; } /* ── TB-R2 · Boxed border tabs ── */ .tb-box:first-child { border-radius:.3rem 0 0 .3rem; } .tb-box.active { background:var(--text-strong); color:#fff; border-color:var(--text-strong); } /* ── TB-R2 · Circular stamp badge ── */ .badge-stamp svg { width:100%; height:100%; } @keyframes rotateBadge { to { transform:rotate(360deg); } } @media (max-width:768px) { .stat-float { display:none; } .badge-stamp { width:80px; height:80px; bottom:-1rem; right:-1rem; } #tb08-btns { border-right:none; padding-right:0; border-bottom:1px solid #f1f5f9; padding-bottom:1rem; flex-direction:row; flex-wrap:wrap; } } /* -------------------------------------------------------------- §27 Price Tables (PT-01 - PT-10) -------------------------------------------------------------- */ .pt-wrap { padding:3.5rem 2rem; max-width:1200px; margin:0 auto; } .price-label { font-size:var(--fs-xs,.72rem); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:.25rem; } .price-big { font-size:2.6rem; font-weight:900; color:var(--text-strong); line-height:1; } .price-cur { font-size:1.2rem; font-weight:800; vertical-align:super; } .price-per { font-size:var(--fs-sm,.85rem); font-weight:600; color:var(--text-muted); } .badge-pop { display:inline-block; padding:.3rem .8rem; background:var(--primary-color); border-radius:99px; font-size:var(--fs-xs,.7rem); font-weight:800; color:var(--text-strong); } .feat-list { list-style:none; display:flex; flex-direction:column; gap:.7rem; margin:1.25rem 0; } .feat-item { display:flex; align-items:center; gap:.65rem; font-size:var(--fs-sm,.86rem); color:var(--text-strong); } .feat-item.off { color:var(--text-muted); } .feat-check { width:22px; height:22px; border-radius:50%; background:var(--primary-color); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .feat-cross { width:22px; height:22px; border-radius:50%; background:var(--surface-color,#f1f5f9); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .feat-check svg, .feat-cross svg { width:11px; height:11px; } .btn-gold { display:block; text-align:center; padding:.75rem 1.5rem; background:var(--primary-color); color:var(--text-strong); border-radius:99px; font-size:var(--fs-sm,.85rem); font-weight:800; text-decoration:none; border:none; cursor:pointer; transition:background .2s; } .btn-gold:hover { background:var(--primary-dark); } .btn-dark { display:block; text-align:center; padding:.75rem 1.5rem; background:var(--text-strong); color:#fff; border-radius:99px; font-size:var(--fs-sm,.85rem); font-weight:800; text-decoration:none; border:none; cursor:pointer; transition:background .2s; } .btn-dark:hover { background:#334155; } .pt01-grid { display:grid; grid-template-columns:repeat(3,minmax(0,340px)); gap:1.5rem; justify-content:center; align-items:start; } .pt01-card { background:var(--card-bg,#fff); border:1.5px solid var(--card-border,#e2e8f0); border-radius:var(--card-radius); padding:2rem; display:flex; flex-direction:column; transition:box-shadow .2s,transform .2s; } .pt01-card:hover { box-shadow:var(--card-shadow-hover); } .pt01-card.featured { background:#0f172a; border-color:var(--text-strong,#0f172a); box-shadow:0 16px 48px rgba(15,23,42,.28); transform:translateY(-12px); } .pt01-card.featured .price-label { color:var(--text-muted,#64748b); } .pt01-card.featured .price-big { color:#fcd703; } .pt01-card.featured .feat-item { color:#cbd5e1; } .pt01-card.featured .feat-item.off { color:var(--text-color,#475569); } .pt01-card.featured .feat-cross { background:#1e293b; } .pt01-card.featured .price-per { color:var(--text-muted,#64748b); } .toggle-wrap { display:flex; align-items:center; gap:.75rem; justify-content:center; margin-bottom:2.5rem; } .toggle-label { font-size:var(--fs-sm,.85rem); font-weight:700; color:var(--text-muted); } .toggle-label.active { color:var(--text-strong); } .toggle-switch { width:48px; height:26px; background:#e2e8f0; border-radius:99px; position:relative; cursor:pointer; transition:background .2s; } .toggle-switch.on { background:var(--primary-color); } .toggle-knob { width:20px; height:20px; border-radius:50%; background:var(--card-bg,#fff); position:absolute; top:3px; left:3px; transition:transform .2s; box-shadow:0 1px 4px rgba(0,0,0,.15); } .toggle-switch.on .toggle-knob { transform:translateX(22px); } .save-pill { padding:.3rem .85rem; background:#dcfce7; color:#15803d; border-radius:99px; font-size:var(--fs-xs,.72rem); font-weight:700; } .pt02-grid { display:grid; grid-template-columns:repeat(3,minmax(0,320px)); gap:1.5rem; justify-content:center; } .pt02-card { background:var(--card-bg,#fff); border:1.5px solid var(--card-border,#e2e8f0); border-radius:var(--card-radius); padding:2rem; display:flex; flex-direction:column; position:relative; transition:box-shadow .2s,transform .2s; } .pt02-card:hover { box-shadow:var(--card-shadow-hover); } .pt02-card.featured { border-color:var(--primary-color); box-shadow:0 0 0 2px var(--primary-color),0 16px 40px rgba(252,215,3,.18); transform:translateY(-10px); } .pt02-badge { position:absolute; top:-14px; left:50%; transform:translateX(-50%); } .pt02-price-y { display:none; } .pt02-price-y.show, .pt02-price-m.show { display:block; } .old-price { font-size:var(--fs-sm,.85rem); text-decoration:line-through; color:var(--text-muted); margin-bottom:.2rem; } .pt03-grid { display:grid; grid-template-columns:repeat(2,minmax(0,420px)); gap:1.5rem; justify-content:center; } .pt03-card { background:var(--card-bg,#fff); border:1.5px solid var(--card-border,#e2e8f0); border-radius:var(--card-radius); padding:2rem; display:flex; flex-direction:column; transition:box-shadow .2s; } .pt03-card.featured { background:#0f172a; border-color:var(--text-strong,#0f172a); } .pt03-card.featured .price-label { color:var(--text-muted,#64748b); } .pt03-card.featured .price-big { color:#fcd703; } .pt03-card.featured .feat-item { color:#cbd5e1; } .pt03-card.featured .feat-item.off { color:var(--text-color,#475569); } .pt03-perks { display:flex; flex-wrap:wrap; gap:.4rem; margin:1rem 0; } .pt03-perk { padding:.3rem .75rem; background:var(--surface-color,#f1f5f9); border-radius:99px; font-size:var(--fs-xs,.72rem); font-weight:700; color:var(--text-muted); } .pt03-card.featured .pt03-perk { background:#1e293b; color:var(--text-muted,#94a3b8); } .pt04-tabs { display:flex; justify-content:center; gap:.5rem; margin-bottom:2.5rem; flex-wrap:wrap; } .pt04-tab { padding:.6rem 1.4rem; border-radius:99px; border:1.5px solid var(--card-border,#e2e8f0); background:var(--card-bg,#fff); font-size:var(--fs-sm,.82rem); font-weight:700; color:var(--text-muted); cursor:pointer; transition:all .2s; display:flex; align-items:center; gap:.5rem; } .pt04-tab.active { background:var(--text-strong); color:#fff; border-color:var(--text-strong); } .pt04-save { padding:.2rem .6rem; background:#dcfce7; color:#15803d; border-radius:99px; font-size:var(--fs-xs,.68rem); font-weight:700; } .pt04-tab.active .pt04-save { background:#1e293b; color:#6ee7b7; } .pt04-panels > div { display:none; grid-template-columns:repeat(3,minmax(0,300px)); gap:1.5rem; justify-content:center; } .pt04-panels > div.active { display:grid; } .pt04-card { background:var(--card-bg,#fff); border:1.5px solid var(--card-border,#e2e8f0); border-radius:var(--card-radius); padding:2rem; display:flex; flex-direction:column; position:relative; transition:box-shadow .2s; } .pt04-card:hover { box-shadow:var(--card-shadow-hover); } .pt04-card.featured { border-color:var(--primary-color); box-shadow:0 0 0 2px var(--primary-color); } .pt04-tag { position:absolute; top:-14px; left:50%; transform:translateX(-50%); white-space:nowrap; } .intro-2col { display:flex; flex-wrap:wrap; gap:2.5rem; align-items:center; } .intro-2col > div { flex:1; min-width:260px; } .pt05-grid { display:flex; flex-direction:column; border-top:1px solid #f1f5f9; } .pt05-item { display:flex; align-items:center; gap:1.25rem; padding:1.25rem 0; border-bottom:1px solid #f1f5f9; transition:background .15s; } .pt05-item:hover { background:#fafafa; padding-left:.75rem; } .pt05-icon { width:40px; height:40px; border-radius:.5rem; background:#fefce8; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .pt05-body { flex:1; } .pt05-body h4 { font-size:var(--fs-body,.9rem); font-weight:800; color:var(--text-strong); margin:0 0 .2rem; } .pt05-body p { font-size:var(--fs-sm,.8rem); color:var(--text-muted); margin:0; } .pt05-price { font-size:1.1rem; font-weight:900; color:var(--text-strong); white-space:nowrap; } .pt05-price span { font-size:var(--fs-xs,.72rem); font-weight:600; color:var(--text-muted); display:block; } .pt06-grid { display:grid; grid-template-columns:repeat(3,minmax(0,320px)); gap:1.5rem; justify-content:center; align-items:start; } .pt06-card { border-radius:var(--card-radius); overflow:hidden; border:1.5px solid var(--card-border,#e2e8f0); display:flex; flex-direction:column; transition:box-shadow .2s; } .pt06-card:hover { box-shadow:var(--card-shadow-hover); } .pt06-card.featured { border-color:transparent; box-shadow:0 12px 40px rgba(15,23,42,.2); } .pt06-head { padding:2rem; background:var(--surface-color,#f8fafc); } .pt06-card.featured .pt06-head { background:#0f172a; } .pt06-card.featured .pt06-head .price-label { color:var(--text-muted,#64748b); } .pt06-card.featured .pt06-head .price-big { color:#fcd703; } .pt06-card.featured .pt06-head h3 { color:#fff; } .pt06-card.featured .pt06-head .price-per { color:var(--text-muted,#64748b); } .pt06-duration { font-size:var(--fs-xs,.75rem); color:var(--text-muted); margin-top:.35rem; } .pt06-card.featured .pt06-duration { color:var(--text-color,#475569); } .pt06-body { padding:1.5rem 2rem 2rem; background:var(--card-bg,#fff); flex:1; display:flex; flex-direction:column; } .pt07-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; max-width:960px; margin:0 auto; } .pt07-card { position:relative; overflow:hidden; aspect-ratio:3/4; } .pt07-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; } .pt07-card:hover img { transform:scale(1.06); } .pt07-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.1) 60%,transparent 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:1.25rem; gap:.4rem; } .pt07-tag { padding:.25rem .7rem; background:var(--primary-color); border-radius:99px; font-size:var(--fs-xs,.68rem); font-weight:800; color:var(--text-strong); width:fit-content; } .pt07-overlay h3 { font-size:var(--fs-body,.95rem); font-weight:900; color:#fff; margin:0; } .pt07-overlay p { font-size:var(--fs-sm,.78rem); color:rgba(255,255,255,.8); margin:0; line-height:1.5; } .pt07-price-row { display:flex; align-items:center; justify-content:space-between; margin-top:.4rem; } .pt07-prc { font-size:1.25rem; font-weight:900; color:#fcd703; } .pt07-btn { padding:.4rem 1rem; background:var(--primary-color); color:var(--text-strong); border-radius:99px; font-size:var(--fs-xs,.72rem); font-weight:800; text-decoration:none; transition:background .2s; } .pt07-btn:hover { background:var(--card-bg,#fff); } .pt08-cards { display:grid; grid-template-columns:repeat(3,minmax(0,340px)); gap:0; justify-content:center; } .sec-pad { padding:0 2rem; } .pt09-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 3rem; } .pt09-item { display:flex; align-items:flex-start; gap:1rem; padding:1.25rem 0; border-bottom:1px solid #f1f5f9; } .pt09-img { width:72px; height:56px; border-radius:.5rem; object-fit:cover; flex-shrink:0; } .pt09-body { flex:1; } .pt09-body h4 { font-size:var(--fs-body,.9rem); font-weight:800; color:var(--text-strong); margin:0 0 .2rem; display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; } .pt09-body p { font-size:var(--fs-sm,.8rem); color:var(--text-muted); margin:0; line-height:1.5; } .pt09-prc { font-size:1rem; font-weight:900; color:var(--text-strong); margin-top:.35rem; } .chef-badge { padding:.2rem .6rem; background:#fef9c3; border-radius:99px; font-size:var(--fs-xs,.65rem); font-weight:800; color:#92400e; } .pt10-table { width:100%; border-collapse:collapse; font-size:var(--fs-sm,.85rem); } .pt10-table th { padding:.9rem 1.1rem; font-weight:800; font-size:var(--fs-xs,.75rem); letter-spacing:.06em; text-transform:uppercase; background:#0f172a; color:var(--text-muted,#94a3b8); border-bottom:2px solid #1e293b; text-align:left; } .pt10-table th.hl { background:#1e3a5f; color:#fff; } .pt10-table td { padding:.8rem 1.1rem; border-bottom:1px solid #f1f5f9; color:var(--text-strong); vertical-align:middle; } .pt10-table td.hl { background:#fffbeb; } .pt10-table tr:hover td { background:#fafafa; } .pt10-table tr:hover td.hl { background:#fef3c7; } .feature-col { font-size:var(--fs-sm,.84rem); font-weight:600; color:var(--text-muted); } .tick-y { color:#15803d; font-weight:800; } .tick-n { color:#cbd5e1; } .tick-p { font-size:var(--fs-sm,.78rem); font-weight:700; color:#1d4ed8; } @media (max-width:768px) { .pt01-grid,.pt02-grid,.pt06-grid,.pt08-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } .pt01-card.featured,.pt02-card.featured { transform:none; } .pt03-grid { grid-template-columns:1fr; } .pt04-panels > div { grid-template-columns:repeat(2,minmax(0,1fr)); } .pt07-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:768px) { .pt09-grid { grid-template-columns:1fr; } .pt10-table { font-size:var(--fs-xs,.75rem); } .pt10-table th, .pt10-table td { padding:.6rem .75rem; } } @media (max-width:640px) { .pt01-grid,.pt02-grid,.pt04-panels > div,.pt06-grid,.pt07-grid,.pt08-cards { grid-template-columns:1fr; } } .pt-btn-outline { display:block; text-align:center; padding:.75rem 1.5rem; background:transparent; color:var(--text-strong); border-radius:99px; font-size:var(--fs-sm,.85rem); font-weight:800; text-decoration:none; border:1.5px solid var(--card-border,#e2e8f0); cursor:pointer; transition:border-color .2s, background .2s; } .pt-btn-outline:hover { border-color:var(--primary-color); background:#fefce8; } /* -------------------------------------------------------------- §28 Interactive Banners (IB-01 - IB-12) -------------------------------------------------------------- */ .pt-wrap.flush { padding:0; max-width:none; } .ib01-wrap { display:flex; height:520px; overflow:hidden; border-radius:var(--card-radius); } .ib01-panel { flex:1; position:relative; overflow:hidden; cursor:pointer; transition:flex .5s cubic-bezier(.4,0,.2,1); min-width:60px; } .ib01-panel.active { flex:5; } .ib01-panel img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s; } .ib01-panel.active img { transform:scale(1.04); } .ib01-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.75) 0%,rgba(0,0,0,.1) 60%,transparent 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:2rem; } .ib01-label { writing-mode:vertical-rl; text-orientation:mixed; font-size:var(--fs-xs,.75rem); font-weight:700; color:rgba(255,255,255,.8); letter-spacing:.1em; text-transform:uppercase; margin-bottom:auto; } .ib01-panel.active .ib01-label { display:none; } .ib01-title { font-size:1.6rem; font-weight:900; color:#fff; margin:0 0 .4rem; line-height:1.2; opacity:0; transform:translateY(12px); transition:opacity .4s .15s, transform .4s .15s; } .ib01-panel.active .ib01-title { opacity:1; transform:translateY(0); } .ib01-desc { font-size:var(--fs-body,.88rem); color:rgba(255,255,255,.85); line-height:1.65; margin:0 0 .75rem; opacity:0; transform:translateY(8px); transition:opacity .35s .25s, transform .35s .25s; } .ib01-panel.active .ib01-desc { opacity:1; transform:translateY(0); } .ib01-link { display:inline-flex; align-items:center; gap:.5rem; font-size:var(--fs-sm,.78rem); font-weight:800; color:var(--primary-color); text-decoration:none; opacity:0; transition:opacity .3s .3s; } .ib01-panel.active .ib01-link { opacity:1; } .ib01-link svg { width:16px; height:16px; flex-shrink:0; } .ib02-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1.5rem; } .ib02-card { position:relative; overflow:hidden; border-radius:var(--card-radius); aspect-ratio:3/4; } .ib02-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; } .ib02-card:hover img { transform:scale(1.07); } .ib02-base { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 60%); display:flex; flex-direction:column; justify-content:flex-end; padding:1.25rem; } .ib02-base h3,.ib02-base h4 { font-size:var(--fs-body,1.05rem); font-weight:900; color:#fff; margin:0; } .ib02-base span { font-size:var(--fs-xs,.75rem); color:rgba(255,255,255,.7); font-weight:600; } .ib02-overlay { position:absolute; inset:0; background:rgba(252,215,3,.92); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1.5rem; gap:1rem; text-align:center; opacity:0; transform:translateY(8px); transition:opacity .3s, transform .3s; } .ib02-card:hover .ib02-overlay { opacity:1; transform:translateY(0); } .ib02-icon { display:none; } .ib02-overlay h3 { font-size:var(--fs-body,1.05rem); font-weight:900; color:var(--text-strong); margin:0; } .ib02-overlay p { font-size:var(--fs-sm,.82rem); color:var(--text-strong); opacity:.8; line-height:1.6; margin:0; flex:1; } .ib02-btn { padding:.55rem 1.3rem; background:var(--text-strong); color:#fff; border-radius:99px; font-size:var(--fs-sm,.78rem); font-weight:800; text-decoration:none; } .ib03-grid { display:grid; grid-template-columns:repeat(3,minmax(0,380px)); gap:1.5rem; justify-content:center; } .ib03-card { position:relative; overflow:hidden; border-radius:var(--card-radius); aspect-ratio:4/3; cursor:pointer; } .ib03-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; } .ib03-card:hover img { transform:scale(1.06); } .ib03-tint { position:absolute; inset:0; background:rgba(0,0,0,.45); transition:background .3s; } .ib03-card:hover .ib03-tint { background:rgba(0,0,0,.6); } .ib03-num { position:absolute; top:1.25rem; left:1.25rem; font-size:3.5rem; font-weight:900; color:rgba(255,255,255,.18); line-height:1; } .ib03-content { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:1.5rem; gap:.3rem; } .ib03-cat { font-size:var(--fs-xs,.68rem); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--primary-color); } .ib03-content h3 { font-size:1.05rem; font-weight:900; color:#fff; margin:0 0 .35rem; } .ib03-body { overflow:hidden; max-height:0; opacity:0; transform:translateY(8px); transition:max-height .35s ease, opacity .3s .05s, transform .3s .05s; } .ib03-card:hover .ib03-body { max-height:160px; opacity:1; transform:translateY(0); } .ib03-body p { font-size:var(--fs-sm,.82rem); color:rgba(255,255,255,.8); line-height:1.6; margin:0; } .ib03-readmore { display:inline-flex; align-items:center; gap:.4rem; font-size:var(--fs-xs,.76rem); font-weight:800; color:var(--primary-color); text-decoration:none; margin-top:.4rem; } .ib03-readmore svg { width:14px; height:14px; flex-shrink:0; stroke:currentColor; fill:none; stroke-linecap:round; stroke-linejoin:round; } .ib04-grid { display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:1fr 1fr; gap:.75rem; height:520px; } .ib04-c1 { grid-column:1; grid-row:1/3; } .ib04-c2 { grid-column:2; grid-row:1; } .ib04-c3 { grid-column:2; grid-row:2; } .ib04-c4 { grid-column:3; grid-row:1/3; } .ib04-card { position:relative; overflow:hidden; border-radius:.5rem; cursor:pointer; } .ib04-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; } .ib04-card:hover img { transform:scale(1.06); } .ib04-tint { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.65) 0%,transparent 55%); } .ib04-base { position:absolute; bottom:0; left:0; right:0; padding:1.25rem; display:flex; flex-direction:column; gap:.3rem; transition:opacity .3s; } .ib04-base span { font-size:var(--fs-sm,.78rem); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.85); } .ib04-card:hover .ib04-base { opacity:0; } .ib04-content { position:absolute; inset:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; padding:1.25rem; gap:.3rem; opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s; } .ib04-card:hover .ib04-content { opacity:1; transform:translateY(0); } .ib04-content h3 { font-size:var(--fs-body,.95rem); font-weight:900; color:#fff; margin:0; } .ib04-content p { font-size:var(--fs-sm,.78rem); color:rgba(255,255,255,.8); margin:0; line-height:1.6; } .ib04-plus { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.2); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer; transition:background .2s; } .ib04-plus svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-linecap:round; } .ib04-card:hover .ib04-plus { background:var(--primary-color); color:var(--text-strong); } .ib05-wrap { display:flex; flex-direction:column; } .ib05-row { display:flex; flex-wrap:wrap; align-items:stretch; } .ib05-row.reverse { flex-direction:row-reverse; } .ib05-img { flex:1; min-width:300px; overflow:hidden; min-height:380px; } .ib05-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; } .ib05-row:hover .ib05-img img { transform:scale(1.04); } .ib05-body { flex:1; min-width:280px; padding:4rem 3.5rem; display:flex; flex-direction:column; justify-content:center; gap:1rem; background:var(--card-bg,#fff); } .ib05-row:nth-child(even) .ib05-body { background:#fafafa; } .ib05-tag { display:inline-block; padding:.3rem .85rem; background:#fefce8; border-radius:99px; font-size:var(--fs-xs,.7rem); font-weight:700; color:var(--primary-dark); width:fit-content; } .ib05-body h3 { font-size:1.5rem; font-weight:900; color:var(--text-strong); margin:0; line-height:1.25; } .ib05-body p { font-size:var(--fs-body,.9rem); color:var(--text-muted); line-height:1.8; margin:0; } .ib05-arrow { display:inline-flex; align-items:center; gap:.65rem; font-size:var(--fs-xs,.78rem); font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-strong); text-decoration:none; margin-top:.5rem; } .ib05-arrow svg { width:16px; height:16px; flex-shrink:0; stroke:currentColor; fill:none; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; } .ib05-arrow:hover svg { transform:translateX(4px); } .ib06-wrap { position:relative; overflow:hidden; border-radius:var(--card-radius); max-width:860px; margin:0 auto; user-select:none; } .ib06-before, .ib06-after { position:absolute; inset:0; } .ib06-before img, .ib06-after img { width:100%; height:100%; object-fit:cover; display:block; } .ib06-before { clip-path:inset(0 50% 0 0); } .ib06-handle { position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%); width:4px; background:var(--card-bg,#fff); cursor:ew-resize; display:flex; align-items:center; justify-content:center; z-index:3; } .ib06-knob { width:40px; height:40px; border-radius:50%; background:var(--card-bg,#fff); box-shadow:0 2px 12px rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center; gap:2px; pointer-events:none; flex-shrink:0; } .ib06-knob svg { width:8px; height:14px; stroke:var(--text-strong); fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; } .ib06-label { position:absolute; top:1rem; padding:.4rem 1rem; background:rgba(0,0,0,.5); backdrop-filter:blur(4px); border-radius:99px; font-size:var(--fs-xs,.75rem); font-weight:700; color:#fff; pointer-events:none; z-index:2; } .ib06-label.l { left:1rem; } .ib06-label.r { right:1rem; } .ib07-grid { display:grid; grid-template-columns:repeat(3,minmax(0,320px)); gap:1.5rem; justify-content:center; } .ib07-scene { perspective:800px; } .ib07-card { position:relative; overflow:hidden; border-radius:var(--card-radius); aspect-ratio:3/4; transform-style:preserve-3d; transition:transform .1s; cursor:pointer; } .ib07-card img { width:100%; height:100%; object-fit:cover; display:block; } .ib07-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 55%); display:flex; flex-direction:column; justify-content:flex-end; padding:1.25rem; gap:.3rem; } .ib07-badge { position:absolute; top:1rem; left:1rem; padding:.3rem .8rem; background:var(--primary-color); border-radius:99px; font-size:var(--fs-xs,.68rem); font-weight:800; color:var(--text-strong,#111); letter-spacing:.04em; } .ib07-price { font-size:1.15rem; font-weight:900; color:var(--primary-color); } .ib07-overlay h3 { font-size:var(--fs-btn,.92rem); font-weight:900; color:#fff; margin:0; } .ib07-overlay p { font-size:var(--fs-xs,.78rem); color:rgba(255,255,255,.8); margin:0; } .ib07-shine { position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,transparent 60%); pointer-events:none; opacity:0; transition:opacity .3s; } .ib07-card:hover .ib07-shine { opacity:1; } .ib08-wrap { position:relative; overflow:hidden; background:#0f172a; border-radius:var(--card-radius); padding:3rem 2rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; align-items:start; } .ib08-spotlight { position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle 400px at var(--mx,50%) var(--my,50%),rgba(252,215,3,.12) 0%,transparent 70%); } .ib08-cell { padding:2rem; border:1px solid rgba(255,255,255,.07); border-radius:var(--card-radius); background:rgba(255,255,255,.04); backdrop-filter:blur(4px); display:flex; flex-direction:column; gap:.75rem; transition:border-color .3s, background .3s; } .ib08-cell:hover { border-color:rgba(252,215,3,.3); background:rgba(252,215,3,.06); } .ib08-num { font-size:3rem; font-weight:900; color:rgba(252,215,3,.25); line-height:1; } .ib08-icon { width:44px; height:44px; } .ib08-cell h3 { font-size:var(--fs-btn,.92rem); font-weight:800; color:#f1f5f9; margin:0; } .ib08-cell p { font-size:var(--fs-sm,.83rem); color:var(--text-muted,#94a3b8); line-height:1.7; margin:0; } .ib08-cell a { display:inline-flex; align-items:center; gap:.4rem; font-size:var(--fs-sm,.78rem); font-weight:700; color:var(--primary-color); text-decoration:none; margin-top:auto; } .ib08-cell a svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } @keyframes marqueeScroll { from { transform:translateX(0); } to { transform:translateX(-50%); } } .ib09-wrap { overflow:hidden; padding:1.5rem 0; } .ib09-track { display:flex; gap:1.5rem; width:max-content; animation:marqueeScroll 30s linear infinite; } .ib09-track2 { display:flex; gap:1.5rem; width:max-content; animation:marqueeScroll 38s linear infinite reverse; margin-top:1.5rem; } .ib09-track:hover,.ib09-track2:hover { animation-play-state:paused; } .ib09-card { width:280px; flex-shrink:0; border-radius:var(--card-radius); overflow:hidden; position:relative; aspect-ratio:4/3; } .ib09-card img { width:100%; height:100%; object-fit:cover; display:block; } .ib09-card-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.65) 0%,transparent 55%); display:flex; flex-direction:column; justify-content:flex-end; padding:1rem; } .ib09-card-overlay span { font-size:var(--fs-xs,.68rem); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--primary-color); display:block; margin-bottom:.2rem; } .ib09-card-overlay h4 { font-size:var(--fs-body,.88rem); font-weight:800; color:#fff; margin:0; } .ib09-card-overlay p { font-size:var(--fs-xs,.75rem); color:rgba(255,255,255,.75); margin:.2rem 0 0; } .ib10-wrap { position:relative; overflow:hidden; min-height:580px; display:flex; align-items:center; } .ib10-bg { position:absolute; inset:-30%; background-size:cover; background-position:center; will-change:background-position; } .ib10-bg img { width:100%; height:100%; object-fit:cover; display:block; } .ib10-overlay { position:absolute; inset:0; background:rgba(0,0,0,.5); } .ib10-content { position:relative; z-index:1; max-width:620px; padding:3rem 4rem; display:flex; flex-direction:column; gap:1.25rem; } .ib10-tag { display:inline-block; padding:.35rem 1rem; background:var(--primary-color); border-radius:99px; font-size:var(--fs-xs,.7rem); font-weight:800; color:var(--text-strong); width:fit-content; } .ib10-content h2 { font-size:2.5rem; font-weight:900; color:#fff; margin:0; line-height:1.2; } .ib10-content p { font-size:var(--fs-body,.95rem); color:rgba(255,255,255,.85); line-height:1.8; margin:0; } .ib10-btns { display:flex; flex-wrap:wrap; gap:1rem; } .ib10-btn-p { padding:.75rem 1.75rem; background:var(--primary-color); color:var(--text-strong); border-radius:99px; font-size:var(--fs-sm,.85rem); font-weight:800; text-decoration:none; transition:background .2s; } .ib10-btn-p:hover { background:var(--card-bg,#fff); } .ib10-btn-s { padding:.75rem 1.75rem; background:rgba(255,255,255,.15); color:#fff; border:1.5px solid rgba(255,255,255,.4); border-radius:99px; font-size:var(--fs-sm,.85rem); font-weight:800; text-decoration:none; backdrop-filter:blur(4px); transition:background .2s; } .ib10-btn-s:hover { background:rgba(255,255,255,.25); } .ib10-stats { position:absolute; bottom:2rem; right:3rem; display:flex; gap:2.5rem; z-index:1; } .ib10-stat { text-align:center; } .ib10-stat strong { display:block; font-size:1.8rem; font-weight:900; color:#fff; } .ib10-stat span { display:block; font-size:var(--fs-xs,.72rem); color:rgba(255,255,255,.7); } .ib11-grid { display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:220px; gap:1rem; } .ib11-card { position:relative; overflow:hidden; border-radius:var(--card-radius); cursor:pointer; } .ib11-card:nth-child(1) { grid-column:1; grid-row:1/3; } .ib11-card:nth-child(2) { grid-column:2; grid-row:1; } .ib11-card:nth-child(3) { grid-column:3; grid-row:1; } .ib11-card:nth-child(4) { grid-column:2; grid-row:2; } .ib11-card:nth-child(5) { grid-column:3; grid-row:2; } .ib11-min-h { height:100%; overflow:hidden; } .ib11-card img { width:100%; height:100% !important; object-fit:cover; display:block; } .ib11-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; } .ib11-card:hover img { transform:scale(1.06); } .ib11-info { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 55%); display:flex; flex-direction:column; justify-content:flex-end; padding:1.25rem; opacity:0; transition:opacity .3s; } .ib11-card:hover .ib11-info { opacity:1; } .ib11-cat { font-size:var(--fs-xs,.68rem); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--primary-color); } .ib11-info h3,.ib11-info h4 { font-size:var(--fs-body,.95rem); font-weight:900; color:#fff; margin:.25rem 0; } .ib11-plus { position:absolute; bottom:1rem; left:1rem; z-index:2; width:32px; height:32px; border-radius:50%; background:var(--primary-color); display:flex; align-items:center; justify-content:center; color:var(--text-strong); } .ib11-plus svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-linecap:round; } .ib12-wrap { position:relative; overflow:hidden; border-radius:var(--card-radius); min-height:520px; display:flex; align-items:flex-end; } .ib12-wrap > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; } .ib12-wrap:hover > img { transform:scale(1.03); } .ib12-overlay { position:relative; z-index:1; width:100%; background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.1) 55%,transparent 100%); padding:2.5rem; display:flex; flex-direction:column; gap:.6rem; } .ib12-tag { width:fit-content; } .ib12-overlay h2 { font-size:2rem; font-weight:900; color:#fff; margin:0; line-height:1.2; } .ib12-overlay p { font-size:var(--fs-body,.9rem); color:rgba(255,255,255,.85); line-height:1.7; margin:0; max-width:560px; } .ib12-play { width:64px; height:64px; border-radius:50%; background:var(--primary-color); border:none; display:flex; align-items:center; justify-content:center; margin-top:1.25rem; cursor:pointer; transition:transform .2s, box-shadow .2s; } .ib12-play svg { width:24px; height:24px; flex-shrink:0; } .ib12-play:hover { transform:scale(1.08); box-shadow:0 0 0 8px rgba(252,215,3,.25); } @media (max-width:768px) { /* IB-01: vertical accordion stack on mobile */ .ib01-wrap { flex-direction:column; height:auto; } .ib01-panel { flex:none; min-width:unset; min-height:64px; height:64px; transition:height .45s cubic-bezier(.4,0,.2,1); } .ib01-panel.active { flex:none; height:300px; } .ib01-label { writing-mode:horizontal-tb; text-orientation:mixed; font-size:var(--fs-xs,.7rem); } .ib01-panel.active .ib01-label { display:none; } .ib01-overlay { padding:1rem 1.25rem; } /* IB-03: single column on mobile */ .ib03-grid { grid-template-columns:1fr; } /* IB-07: single column on mobile */ .ib07-grid { grid-template-columns:minmax(0,360px); justify-content:center; } /* IB-08: single column on mobile */ .ib08-wrap { grid-template-columns:1fr; padding:1.5rem 1rem; } .ib04-grid { grid-template-columns:1fr 1fr; height:auto; } .ib04-c1, .ib04-c4 { grid-column:1/3; grid-row:auto; } .ib04-c2, .ib04-c3 { grid-column:auto; grid-row:auto; } .ib05-row, .ib05-row.reverse { flex-direction:column; } .ib10-content { padding:2rem; } .ib10-stats { display:none; } .ib11-grid { grid-template-columns:1fr 1fr; grid-auto-rows:200px; } .ib11-card:nth-child(1) { grid-column:1/3; grid-row:1; } .ib11-card:nth-child(2),.ib11-card:nth-child(3),.ib11-card:nth-child(4),.ib11-card:nth-child(5) { grid-column:auto; grid-row:auto; } } /* -------------------------------------------------------------- §30 Icon + Text (IT-01 - IT-13) -------------------------------------------------------------- */ .it01-item h3 { font-size:var(--fs-btn,.92rem); font-weight:800; color:var(--text-strong); margin:0; } .it01-item p { font-size:var(--fs-sm,.84rem); color:var(--text-muted); line-height:1.7; margin:0; } .it02-item:hover { box-shadow:var(--card-shadow-hover); } .it02-body h3 { font-size:var(--fs-body,.9rem); font-weight:800; color:var(--text-strong); margin:0 0 .25rem; } .it02-body p { font-size:var(--fs-sm,.83rem); color:var(--text-muted); line-height:1.7; margin:0; } .it03-icon.c1 { background:#fefce8; } .it03-icon.c2 { background:#ecfdf5; } .it03-icon.c3 { background:#eff6ff; } .it03-icon.c4 { background:#fdf4ff; } .it03-card h3 { font-size:var(--fs-btn,.92rem); font-weight:800; color:var(--text-strong); margin:0; } .it03-card p { font-size:var(--fs-sm,.84rem); color:var(--text-muted); line-height:1.7; margin:0; flex:1; } .it04-item:hover { box-shadow:var(--card-shadow-hover); } .it04-item h3 { font-size:var(--fs-body,.9rem); font-weight:800; color:var(--text-strong); margin:0; } .it04-item p { font-size:var(--fs-sm,.82rem); color:var(--text-muted); line-height:1.7; margin:0; flex:1; } .it05-item:hover { background:#fafafa; } .it05-item h3 { font-size:var(--fs-body,.9rem); font-weight:800; color:var(--text-strong); margin:0; } .it05-item p { font-size:var(--fs-sm,.82rem); color:var(--text-muted); line-height:1.7; margin:0; } .it06-card.bg1 { background:linear-gradient(135deg,#fefce8,#fef9c3); } .it06-card.bg2 { background:linear-gradient(135deg,#ecfdf5,#d1fae5); } .it06-card.bg3 { background:linear-gradient(135deg,#eff6ff,#dbeafe); } .it06-card h3 { font-size:var(--fs-btn,.92rem); font-weight:800; color:var(--text-strong); margin:0; } .it06-card p { font-size:var(--fs-sm,.84rem); color:var(--text-strong); opacity:.7; line-height:1.7; margin:0; flex:1; } .it07-intro { flex:1; min-width:260px; } .it07-body h3 { font-size:var(--fs-body,.9rem); font-weight:800; color:var(--text-strong); margin:0 0 .25rem; } .it07-body p { font-size:var(--fs-sm,.83rem); color:var(--text-muted); line-height:1.7; margin:0; } .it08-card:hover { box-shadow:var(--card-shadow-hover); } .it08-card h3 { font-size:var(--fs-body,.9rem); font-weight:800; color:var(--text-strong); margin:0; } .it08-card p { font-size:var(--fs-sm,.83rem); color:var(--text-muted); line-height:1.7; margin:0; flex:1; } .it09-img img { width:100%; display:block; } .it09-item h4 { font-size:var(--fs-sm,.88rem); font-weight:800; color:var(--text-strong); margin:0 0 .2rem; } .it09-item p { font-size:var(--fs-sm,.82rem); color:var(--text-muted); line-height:1.6; margin:0; } .it10-row.rev { flex-direction:row-reverse; } .it10-row:nth-child(even) .it10-icon-panel { background:#f0fdf4; } .it10-icon-panel svg { width:72px; height:72px; } .it10-text h3 { font-size:1.3rem; font-weight:900; color:var(--text-strong); margin:0; line-height:1.3; } .it10-text p { font-size:var(--fs-sm,.88rem); color:var(--text-muted); line-height:1.8; margin:0; } .it11-intro { flex:1; min-width:260px; } .it11-check svg { width:12px; height:12px; } .it11-body h4 { font-size:var(--fs-sm,.88rem); font-weight:800; color:var(--text-strong); margin:0 0 .15rem; } .it11-body p { font-size:var(--fs-sm,.8rem); color:var(--text-muted); line-height:1.6; margin:0; } .it12-pill:hover { background:#fefce8; border-color:var(--primary-color); box-shadow:0 2px 12px rgba(252,215,3,.2); } .it12-pill:hover .it12-pill-icon { background:var(--primary-color); } .it13-img img { width:100%; display:block; } .it13-panel.open { border-color:var(--primary-color); } .it13-panel.open .it13-trigger { background:#fffbeb; } .it13-panel.open .it13-chevron { transform:rotate(180deg); } .it13-panel.open .it13-body { max-height:400px; } .it13-body > * { padding:.75rem 1.25rem 1.25rem; font-size:var(--fs-sm,.85rem); color:var(--text-muted); line-height:1.75; margin:0; } @media (max-width:768px) { .it07-split, .it09-split, .it11-cols, .it13-cols { flex-direction:column; } .it10-row, .it10-row.rev { flex-direction:column; } .it10-icon-panel { flex:none; width:100%; } .it11-list { grid-template-columns:1fr; } .it13-img { position:static; } } /* -------------------------------------------------------------- §31 Process Steps (PS-01 - PS-09) -------------------------------------------------------------- */ .ps-wrap { padding:3.5rem 2rem; max-width:1100px; margin:0 auto; } .ps01-row { display:flex; flex-wrap:wrap; gap:0; position:relative; } .ps01-step:not(:last-child)::after { content:''; position:absolute; top:2rem; left:calc(50% + 2rem); width:calc(100% - 4rem); height:2px; background:linear-gradient(90deg,var(--primary-color),#f0f0f0); } .ps01-step h3 { font-size:var(--fs-sm,.88rem); font-weight:800; color:var(--text-strong); margin:0; } .ps01-step p { font-size:var(--fs-xs,.78rem); color:var(--text-muted); line-height:1.65; margin:0; } .ps02-timeline { display:flex; flex-direction:column; gap:0; position:relative; padding-left:3rem; } .ps02-timeline::before { content:''; position:absolute; left:.75rem; top:0; bottom:0; width:2px; background:linear-gradient(180deg,var(--primary-color),#e2e8f0); } .ps02-item { position:relative; padding:0 0 2.5rem 1.5rem; } .ps02-date { font-size:var(--fs-xs,.7rem); font-weight:700; color:var(--text-muted); margin:0 0 .3rem; letter-spacing:.04em; text-transform:uppercase; } .ps02-item h3 { font-size:var(--fs-btn,.92rem); font-weight:800; color:var(--text-strong); margin:0 0 .3rem; } .ps02-item p { font-size:var(--fs-sm,.83rem); color:var(--text-muted); line-height:1.7; margin:0; } .ps03-grid { display:flex; flex-direction:column; gap:1.5rem; counter-reset:steps; } .ps03-item { display:flex; align-items:flex-start; gap:1.5rem; counter-increment:steps; } .ps03-num { width:52px; height:52px; border-radius:50%; border:2px solid var(--primary-color); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:1.1rem; color:var(--primary-dark); flex-shrink:0; } .ps03-body h3 { font-size:var(--fs-body,.95rem); font-weight:800; color:var(--text-strong); margin:0 0 .35rem; } .ps03-body p { font-size:var(--fs-sm,.85rem); color:var(--text-muted); line-height:1.75; margin:0; } .ps04-cards { display:flex; flex-wrap:wrap; gap:1rem; } .ps04-badge { position:absolute; top:-1px; right:1.25rem; background:var(--primary-color); color:var(--text-strong); font-size:var(--fs-xs,.65rem); font-weight:900; padding:.2rem .65rem; border-radius:0 0 .4rem .4rem; letter-spacing:.04em; } .ps04-card h3 { font-size:var(--fs-body,.9rem); font-weight:800; color:var(--text-strong); margin:0; } .ps04-card p { font-size:var(--fs-sm,.82rem); color:var(--text-muted); line-height:1.65; margin:0; flex:1; } .ps05-wrap { display:flex; flex-direction:column; gap:0; } .ps05-row { display:flex; align-items:stretch; gap:0; } .ps05-row:nth-child(even) { flex-direction:row-reverse; } .ps05-col { flex:1; } .ps05-content { padding:2.5rem; display:flex; flex-direction:column; gap:.75rem; justify-content:center; } .ps05-tag { display:inline-block; padding:.25rem .75rem; background:#fef9c3; border-radius:99px; font-size:var(--fs-xs,.68rem); font-weight:800; color:#92400e; width:fit-content; } .ps05-content h3 { font-size:1.1rem; font-weight:900; color:var(--text-strong); margin:0; line-height:1.35; } .ps05-content p { font-size:var(--fs-sm,.85rem); color:var(--text-muted); line-height:1.75; margin:0; } .ps05-visual { display:flex; align-items:center; justify-content:center; background:#fafafa; padding:2.5rem; } .ps05-visual img { width:100%; max-width:320px; border-radius:var(--card-radius); display:block; } .ps06-path { display:flex; flex-direction:column; gap:0; } .ps06-item { display:flex; gap:0; } .ps06-item:nth-child(even) { flex-direction:row-reverse; } .ps06-line { display:flex; flex-direction:column; align-items:center; width:3rem; flex-shrink:0; } .ps06-circle { width:3rem; height:3rem; border-radius:50%; background:var(--primary-color); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:1.05rem; color:var(--text-strong); flex-shrink:0; } .ps06-vline { flex:1; width:2px; background:linear-gradient(180deg,var(--primary-color),#e2e8f0); } .ps06-body { flex:1; padding:0 2rem 2.5rem; } .ps06-item:nth-child(even) .ps06-body { text-align:right; } .ps06-body h3 { font-size:var(--fs-body,.95rem); font-weight:800; color:var(--text-strong); margin:0 0 .35rem; } .ps06-body p { font-size:var(--fs-sm,.84rem); color:var(--text-muted); line-height:1.7; margin:0; } .ps07-cols { display:flex; flex-wrap:wrap; gap:2.5rem; } .ps07-col { flex:1; min-width:240px; display:flex; flex-direction:column; gap:1rem; } .ps07-col h3 { font-size:var(--fs-sm,.8rem); font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); padding-bottom:.75rem; border-bottom:2px solid #f1f5f9; margin:0; } .ps07-item { display:flex; align-items:flex-start; gap:.75rem; } .ps07-body p { font-size:var(--fs-sm,.85rem); color:var(--text-strong); font-weight:700; margin:0 0 .15rem; } .ps07-body span { font-size:var(--fs-xs,.78rem); color:var(--text-muted); } .ps08-num { font-size:2rem; font-weight:900; color:var(--primary-color); line-height:1; } .ps08-card h3 { font-size:var(--fs-sm,.85rem); font-weight:800; color:var(--text-strong); margin:0; } .ps08-card p { font-size:var(--fs-xs,.78rem); color:var(--text-muted); line-height:1.6; margin:0; flex:1; } .ps08-tag { display:inline-block; padding:.2rem .65rem; background:#fef9c3; border-radius:99px; font-size:var(--fs-xs,.66rem); font-weight:800; color:#92400e; } .ps09-split { display:flex; flex-wrap:wrap; gap:3rem; align-items:flex-start; } .ps09-intro { flex:1; min-width:260px; } .ps09-accordion { flex:1; min-width:280px; display:flex; flex-direction:column; gap:.5rem; } .ps09-item.open { border-color:var(--primary-color); } .ps09-trigger { display:flex; align-items:center; gap:.75rem; padding:1.1rem 1.25rem; cursor:pointer; background:transparent; border:none; width:100%; text-align:left; } .ps09-item.open .ps09-trigger { background:#fffbeb; } .ps09-step-num { width:28px; height:28px; border-radius:50%; background:var(--primary-color); display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs,.72rem); font-weight:900; color:var(--text-strong); flex-shrink:0; } .ps09-t-title { flex:1; font-size:var(--fs-sm,.88rem); font-weight:800; color:var(--text-strong); } .ps09-item.open .ps09-chevron { transform:rotate(180deg); } .ps09-item.open .ps09-body { max-height:300px; } .ps09-body > * { padding:.75rem 1.25rem 1.25rem; font-size:var(--fs-sm,.85rem); color:var(--text-muted); line-height:1.75; margin:0; } @media (max-width:768px) { .ps01-step:not(:last-child)::after { display:none; } .ps05-row, .ps05-row:nth-child(even) { flex-direction:column; } .ps06-item:nth-child(even) { flex-direction:row; } .ps06-item:nth-child(even) .ps06-body { text-align:left; } .ps09-split { flex-direction:column; } } /* -------------------------------------------------------------- §33 Parallax Scrolling (PX-01 - PX-08) -------------------------------------------------------------- */ .px-wrap { padding:3.5rem 2rem; max-width:1200px; margin:0 auto; } .px01-section { position:relative; height:420px; overflow:hidden; border-radius:var(--card-radius); } .px01-bg { position:absolute; inset:-60px 0; background-attachment:fixed; background-size:cover; background-position:center; } .px01-overlay { position:absolute; inset:0; background:rgba(0,0,0,.48); display:flex; align-items:center; justify-content:center; } .px01-content { text-align:center; color:#fff; padding:2rem; } .px01-content h2 { font-size:clamp(1.75rem,4vw,3rem); font-weight:900; margin:0 0 1rem; line-height:1.2; } .px01-content p { font-size:clamp(.88rem,2vw,1.05rem); color:rgba(255,255,255,.85); max-width:560px; margin:0 auto; line-height:1.75; } .px02-cards { display:flex; flex-wrap:wrap; gap:1.5rem; } .px02-card { flex:1; min-width:240px; height:300px; border-radius:var(--card-radius); overflow:hidden; position:relative; } .px02-card-bg { position:absolute; inset:-40px 0; background-size:cover; background-position:center; transition:transform .1s linear; } .px02-card-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.72),transparent 55%); } .px02-card-body { position:absolute; bottom:1.5rem; left:1.5rem; right:1.5rem; color:#fff; } .px02-card-body h3 { font-size:1rem; font-weight:900; margin:0 0 .35rem; } .px02-card-body p { font-size:var(--fs-sm,.82rem); color:rgba(255,255,255,.8); line-height:1.65; margin:0; } .px03-split { display:flex; flex-wrap:wrap; gap:3rem; align-items:center; } .px03-sticky { flex:1; min-width:280px; position:sticky; top:2rem; } .px03-sticky-img { width:100%; border-radius:var(--card-radius); display:block; } .px03-items { flex:1; min-width:280px; display:flex; flex-direction:column; gap:1.5rem; } .px03-item { padding:1.75rem; background:var(--card-bg,#fff); border-radius:var(--card-radius); box-shadow:var(--card-shadow); display:flex; flex-direction:column; gap:.6rem; } .px03-item h3 { font-size:var(--fs-body,.95rem); font-weight:800; color:var(--text-strong); margin:0; } .px03-item p { font-size:var(--fs-sm,.85rem); color:var(--text-muted); line-height:1.75; margin:0; } .px04-scene { position:relative; height:500px; overflow:hidden; border-radius:var(--card-radius); } .px04-layer { position:absolute; inset:0; background-size:cover; background-position:center; } .px04-layer-sky { z-index:1; } .px04-layer-mid { z-index:2; } .px04-layer-front { z-index:3; } .px04-content { position:absolute; inset:0; z-index:4; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; padding:2rem; } .px04-content h2 { font-size:clamp(1.75rem,4vw,3.5rem); font-weight:900; text-shadow:0 2px 16px rgba(0,0,0,.4); margin:0 0 1rem; } .px04-content p { font-size:clamp(.88rem,2vw,1.1rem); color:rgba(255,255,255,.85); max-width:520px; margin:0 auto; } .px05-strip { position:relative; height:340px; overflow:hidden; } .px05-bg { position:absolute; inset:-80px 0; background-size:cover; background-position:center; } .px05-strip-overlay { position:absolute; inset:0; display:flex; align-items:center; } .px05-stat-row { display:flex; flex-wrap:wrap; justify-content:center; gap:3rem; width:100%; padding:2rem; } .px05-stat { text-align:center; color:#fff; } .px05-stat-num { font-size:clamp(2rem,5vw,3.5rem); font-weight:900; display:block; line-height:1; } .px05-stat-lbl { font-size:var(--fs-sm,.82rem); font-weight:700; opacity:.8; letter-spacing:.06em; text-transform:uppercase; margin-top:.35rem; display:block; } .px06-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:0; } .px06-pane { position:relative; height:320px; overflow:hidden; } .px06-pane-bg { position:absolute; inset:-40px 0; background-size:cover; background-position:center; transition:transform .1s linear; } .px06-pane-overlay { position:absolute; inset:0; background:rgba(0,0,0,.48); display:flex; align-items:flex-end; } .px06-pane-body { padding:1.5rem; color:#fff; } .px06-pane-body h3 { font-size:var(--fs-btn,.92rem); font-weight:900; margin:0 0 .35rem; } .px06-pane-body p { font-size:var(--fs-sm,.8rem); color:rgba(255,255,255,.8); line-height:1.65; margin:0; } .px07-fullscreen { position:relative; height:100vh; max-height:680px; overflow:hidden; } .px07-bg { position:absolute; inset:-80px 0; background-size:cover; background-position:center; } .px07-overlay { position:absolute; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; } .px07-content { text-align:center; color:#fff; padding:2rem; max-width:680px; } .px07-content h2 { font-size:clamp(2rem,5vw,4rem); font-weight:900; margin:0 0 1.25rem; line-height:1.15; } .px07-content p { font-size:clamp(.9rem,2vw,1.1rem); color:rgba(255,255,255,.85); margin:0 0 2rem; line-height:1.8; } .px08-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.5rem; } .px08-card { padding:1.75rem; background:var(--card-bg,#fff); border-radius:var(--card-radius); box-shadow:var(--card-shadow); display:flex; flex-direction:column; gap:.65rem; opacity:0; transform:translateY(40px); transition:opacity .6s ease, transform .6s ease; } .px08-card.visible { opacity:1; transform:translateY(0); } .px08-card:nth-child(2) { transition-delay:.1s; } .px08-card:nth-child(3) { transition-delay:.2s; } .px08-card:nth-child(4) { transition-delay:.3s; } .px08-icon { width:44px; height:44px; border-radius:.5rem; background:#fefce8; display:flex; align-items:center; justify-content:center; } .px08-card h3 { font-size:var(--fs-btn,.92rem); font-weight:800; color:var(--text-strong); margin:0; } .px08-card p { font-size:var(--fs-sm,.84rem); color:var(--text-muted); line-height:1.7; margin:0; flex:1; } @media (max-width:768px) { .px03-split { flex-direction:column; } .px03-sticky { position:static; } } /* §TI-shimmer — sweep pseudo-element (needs ::after, not expressible in Tailwind) */ .ti-shimmer{position:relative;overflow:hidden} .ti-shimmer::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.18) 50%,transparent 60%);transform:translateX(-100%);animation:tiShimmer 2.8s linear infinite;pointer-events:none} @keyframes tiShimmer{to{transform:translateX(200%)}} /* §TI-expand — clickable/expandable image affordance for [data-action="vmodal-open"] triggers. Positioning/cursor only — the actual blinking icon uses the framework's existing .v-zoom-overlay/.v-zoom-btn markup (see "clickable image affordance" block, zoomRing keyframe), inserted as real child markup inside the wrapper so it always renders (not hover-only). */ .v-img-expand{position:relative;cursor:zoom-in} img.v-img-expand{cursor:zoom-in} @media (prefers-reduced-motion:reduce){.v-zoom-btn::before,.v-zoom-btn::after{animation:none}} /* §TI Card on/off — when --tiXX-card:0 is set, zero out all card styling via var cascade */ section[style*="--ti01-card:0"],section[style*="--ti01-card: 0"]{--ti01-img-r:0;--ti01-img-sh:none;--ti01-img-bw:0px} section[style*="--ti02-card:0"],section[style*="--ti02-card: 0"]{--ti02-img-r:0;--ti02-img-sh:none;--ti02-img-bw:0px} section[style*="--ti03-card:0"],section[style*="--ti03-card: 0"]{--ti03-img-r:0;--ti03-img-sh:none;--ti03-img-bw:0px} section[style*="--ti04-card:0"],section[style*="--ti04-card: 0"]{--ti04-img-r:0;--ti04-img-sh:none;--ti04-img-bw:0px} section[style*="--ti05-card:0"],section[style*="--ti05-card: 0"]{--ti05-img-r:0;--ti05-img-sh:none;--ti05-img-bw:0px} section[style*="--ti06-card:0"],section[style*="--ti06-card: 0"]{--ti06-img-r:0;--ti06-img-sh:none;--ti06-img-bw:0px} section[style*="--ti07-card:0"],section[style*="--ti07-card: 0"]{--ti07-img-r:0;--ti07-img-sh:none;--ti07-img-bw:0px} section[style*="--ti08-card:0"],section[style*="--ti08-card: 0"]{--ti08-img-r:0;--ti08-img-sh:none;--ti08-img-bw:0px} section[style*="--ti09-card:0"],section[style*="--ti09-card: 0"]{--ti09-img-r:0;--ti09-img-sh:none;--ti09-img-bw:0px} section[style*="--ti10-card:0"],section[style*="--ti10-card: 0"]{--ti10-img-r:0;--ti10-img-sh:none;--ti10-img-bw:0px} /* §TI Clickable image on/off — when --tiXX-clickable:0 is set, disable the vmodal-open trigger entirely via pointer-events AND hide the .v-zoom-overlay badge (otherwise the pulsing icon would still render even though clicking no longer does anything) */ section[style*="--ti01-clickable:0"] [data-action="vmodal-open"],section[style*="--ti01-clickable: 0"] [data-action="vmodal-open"]{pointer-events:none;cursor:default} section[style*="--ti02-clickable:0"] [data-action="vmodal-open"],section[style*="--ti02-clickable: 0"] [data-action="vmodal-open"]{pointer-events:none;cursor:default} section[style*="--ti03-clickable:0"] [data-action="vmodal-open"],section[style*="--ti03-clickable: 0"] [data-action="vmodal-open"]{pointer-events:none;cursor:default} section[style*="--ti04-clickable:0"] [data-action="vmodal-open"],section[style*="--ti04-clickable: 0"] [data-action="vmodal-open"]{pointer-events:none;cursor:default} section[style*="--ti05-clickable:0"] [data-action="vmodal-open"],section[style*="--ti05-clickable: 0"] [data-action="vmodal-open"]{pointer-events:none;cursor:default} section[style*="--ti06-clickable:0"] [data-action="vmodal-open"],section[style*="--ti06-clickable: 0"] [data-action="vmodal-open"]{pointer-events:none;cursor:default} section[style*="--ti07-clickable:0"] [data-action="vmodal-open"],section[style*="--ti07-clickable: 0"] [data-action="vmodal-open"]{pointer-events:none;cursor:default} section[style*="--ti08-clickable:0"] [data-action="vmodal-open"],section[style*="--ti08-clickable: 0"] [data-action="vmodal-open"]{pointer-events:none;cursor:default} section[style*="--ti09-clickable:0"] [data-action="vmodal-open"],section[style*="--ti09-clickable: 0"] [data-action="vmodal-open"]{pointer-events:none;cursor:default} section[style*="--ti10-clickable:0"] [data-action="vmodal-open"],section[style*="--ti10-clickable: 0"] [data-action="vmodal-open"]{pointer-events:none;cursor:default} section[style*="--ti01-clickable:0"] .v-zoom-overlay,section[style*="--ti01-clickable: 0"] .v-zoom-overlay, section[style*="--ti02-clickable:0"] .v-zoom-overlay,section[style*="--ti02-clickable: 0"] .v-zoom-overlay, section[style*="--ti03-clickable:0"] .v-zoom-overlay,section[style*="--ti03-clickable: 0"] .v-zoom-overlay, section[style*="--ti04-clickable:0"] .v-zoom-overlay,section[style*="--ti04-clickable: 0"] .v-zoom-overlay, section[style*="--ti05-clickable:0"] .v-zoom-overlay,section[style*="--ti05-clickable: 0"] .v-zoom-overlay, section[style*="--ti06-clickable:0"] .v-zoom-overlay,section[style*="--ti06-clickable: 0"] .v-zoom-overlay, section[style*="--ti07-clickable:0"] .v-zoom-overlay,section[style*="--ti07-clickable: 0"] .v-zoom-overlay, section[style*="--ti08-clickable:0"] .v-zoom-overlay,section[style*="--ti08-clickable: 0"] .v-zoom-overlay, section[style*="--ti09-clickable:0"] .v-zoom-overlay,section[style*="--ti09-clickable: 0"] .v-zoom-overlay, section[style*="--ti10-clickable:0"] .v-zoom-overlay,section[style*="--ti10-clickable: 0"] .v-zoom-overlay{display:none} /* §COL Clickable image on/off (COL-01/01b/09, CO-12/13) — same convention as §TI above: when --xNN-clickable:0 is set, disable the vmodal-open trigger via pointer-events AND hide the .v-zoom-overlay badge. MUST ship with every new clickable image, no exceptions — see feedback_clickable_image_thumbrule memory. */ section[style*="--col01-clickable:0"] [data-action="vmodal-open"],section[style*="--col01-clickable: 0"] [data-action="vmodal-open"]{pointer-events:none;cursor:default} section[style*="--col01b-clickable:0"] [data-action="vmodal-open"],section[style*="--col01b-clickable: 0"] [data-action="vmodal-open"]{pointer-events:none;cursor:default} section[style*="--col09-clickable:0"] [data-action="vmodal-open"],section[style*="--col09-clickable: 0"] [data-action="vmodal-open"]{pointer-events:none;cursor:default} section[style*="--co12-clickable:0"] [data-action="vmodal-open"],section[style*="--co12-clickable: 0"] [data-action="vmodal-open"]{pointer-events:none;cursor:default} section[style*="--co13-clickable:0"] [data-action="vmodal-open"],section[style*="--co13-clickable: 0"] [data-action="vmodal-open"]{pointer-events:none;cursor:default} section[style*="--col01-clickable:0"] .v-zoom-overlay,section[style*="--col01-clickable: 0"] .v-zoom-overlay, section[style*="--col01b-clickable:0"] .v-zoom-overlay,section[style*="--col01b-clickable: 0"] .v-zoom-overlay, section[style*="--col09-clickable:0"] .v-zoom-overlay,section[style*="--col09-clickable: 0"] .v-zoom-overlay, section[style*="--co12-clickable:0"] .v-zoom-overlay,section[style*="--co12-clickable: 0"] .v-zoom-overlay, section[style*="--co13-clickable:0"] .v-zoom-overlay,section[style*="--co13-clickable: 0"] .v-zoom-overlay{display:none} /* §CS Clickable image on/off (CardScroller CS-01/02/03/06/07/08/10 — CS-05's icons and CS-09's flip-card photo are intentionally excluded, see feedback_clickable_image_thumbrule) */ section[style*="--cs01-clickable:0"] [data-action="vmodal-open"],section[style*="--cs01-clickable: 0"] [data-action="vmodal-open"]{pointer-events:none;cursor:default} section[style*="--cs02-clickable:0"] [data-action="vmodal-open"],section[style*="--cs02-clickable: 0"] [data-action="vmodal-open"]{pointer-events:none;cursor:default} section[style*="--cs03-clickable:0"] [data-action="vmodal-open"],section[style*="--cs03-clickable: 0"] [data-action="vmodal-open"]{pointer-events:none;cursor:default} section[style*="--cs06-clickable:0"] [data-action="vmodal-open"],section[style*="--cs06-clickable: 0"] [data-action="vmodal-open"]{pointer-events:none;cursor:default} section[style*="--cs07-clickable:0"] [data-action="vmodal-open"],section[style*="--cs07-clickable: 0"] [data-action="vmodal-open"]{pointer-events:none;cursor:default} section[style*="--cs08-clickable:0"] [data-action="vmodal-open"],section[style*="--cs08-clickable: 0"] [data-action="vmodal-open"]{pointer-events:none;cursor:default} section[style*="--cs10-clickable:0"] [data-action="vmodal-open"],section[style*="--cs10-clickable: 0"] [data-action="vmodal-open"]{pointer-events:none;cursor:default} section[style*="--cs01-clickable:0"] .v-zoom-overlay,section[style*="--cs01-clickable: 0"] .v-zoom-overlay, section[style*="--cs02-clickable:0"] .v-zoom-overlay,section[style*="--cs02-clickable: 0"] .v-zoom-overlay, section[style*="--cs06-clickable:0"] .v-zoom-overlay,section[style*="--cs06-clickable: 0"] .v-zoom-overlay, section[style*="--cs07-clickable:0"] .v-zoom-overlay,section[style*="--cs07-clickable: 0"] .v-zoom-overlay, section[style*="--cs08-clickable:0"] .v-zoom-overlay,section[style*="--cs08-clickable: 0"] .v-zoom-overlay, section[style*="--cs10-clickable:0"] .v-zoom-overlay,section[style*="--cs10-clickable: 0"] .v-zoom-overlay{display:none} section[style*="--cs03-clickable:0"] .v-zoom-overlay_right_corner,section[style*="--cs03-clickable: 0"] .v-zoom-overlay_right_corner{display:none} /* §TI Responsive — Text+Image template mobile */ @media (max-width:1023px) { /* Clip absolute floating badge elements (overflow from negative positioning) */ .ti-grid > div.relative { overflow:hidden; } .il-img-col { overflow:hidden; } } @media (max-width:768px) { /* TL-02: giant drifting bg number has margin-bottom:-3rem which pushes content up — reduce on mobile */ .v-drift-l { margin-bottom:-1rem !important; font-size:clamp(4rem,18vw,8rem) !important; } /* TL-04 portrait: reduce circular portrait size so ring-orbit decorations stay contained */ .ring-orbit { width:200px !important; height:200px !important; top:50%; left:50%; transform:translate(-50%,-50%) !important; animation:none !important; } .ring-orbit-2 { width:240px !important; height:240px !important; } } @media (max-width:480px) { /* Reduce ring-orbit further on tiny screens */ .ring-orbit { width:160px !important; height:160px !important; } .ring-orbit-2 { width:195px !important; height:195px !important; } } /* -------------------------------------------------------------- §34 Media / Video (VP-01 - VP-08) -------------------------------------------------------------- */ .vp-wrap { padding:3.5rem 2rem; max-width:1200px; margin:0 auto; } .vp01-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.5rem; } .vp01-card { border-radius:var(--card-radius); overflow:hidden; background:#000; position:relative; cursor:pointer; } .vp01-thumb { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; transition:opacity .3s; } .vp01-card:hover .vp01-thumb { opacity:.75; } .vp01-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; } .vp01-play-btn { width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center; transition:transform .2s, background .2s; } .vp01-card:hover .vp01-play-btn { transform:scale(1.12); background:var(--card-bg,#fff); } .vp01-play-btn svg { width:22px; height:22px; color:var(--text-strong); margin-left:3px; } .vp01-meta { position:absolute; bottom:0; left:0; right:0; padding:1rem; background:linear-gradient(to top,rgba(0,0,0,.7),transparent); color:#fff; } .vp01-meta h3 { font-size:var(--fs-sm,.85rem); font-weight:800; margin:0 0 .2rem; } .vp01-meta span { font-size:var(--fs-xs,.72rem); opacity:.8; } #yt-modal { position:fixed; inset:0; background:rgba(0,0,0,.8); z-index:9999; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s; } #yt-modal.open { opacity:1; pointer-events:all; } .vp01-modal-inner { position:relative; width:90vw; max-width:900px; aspect-ratio:16/9; } .vp01-modal-inner iframe { width:100%; height:100%; border-radius:var(--card-radius); border:none; } .vp01-close { position:absolute; top:-2.5rem; right:0; background:transparent; border:none; color:#fff; cursor:pointer; font-size:1.5rem; font-weight:900; line-height:1; } .vp02-feature { display:flex; flex-wrap:wrap; gap:2.5rem; align-items:center; } .vp02-video { flex:3; min-width:300px; border-radius:var(--card-radius); overflow:hidden; position:relative; } .vp02-video iframe { width:100%; aspect-ratio:16/9; display:block; border:none; } .vp02-info { flex:2; min-width:240px; display:flex; flex-direction:column; gap:1rem; } .vp02-tag { display:inline-block; padding:.25rem .75rem; background:#fef9c3; border-radius:99px; font-size:var(--fs-xs,.68rem); font-weight:800; color:#92400e; width:fit-content; } .vp02-info h2 { font-size:clamp(1.2rem,2.5vw,1.6rem); font-weight:900; color:var(--text-strong); margin:0; line-height:1.3; } .vp02-info p { font-size:var(--fs-sm,.85rem); color:var(--text-muted); line-height:1.75; margin:0; } .vp02-meta { display:flex; gap:1.5rem; flex-wrap:wrap; } .vp02-meta-item { display:flex; flex-direction:column; gap:.15rem; } .vp02-meta-item span:first-child { font-size:var(--fs-xs,.68rem); font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; } .vp02-meta-item span:last-child { font-size:var(--fs-sm,.85rem); font-weight:800; color:var(--text-strong); } .vp03-playlist { display:flex; flex-wrap:wrap; gap:1.5rem; } .vp03-main { flex:3; min-width:280px; border-radius:var(--card-radius); overflow:hidden; } .vp03-main iframe { width:100%; aspect-ratio:16/9; display:block; border:none; } .vp03-list { flex:1; min-width:220px; display:flex; flex-direction:column; gap:.75rem; max-height:380px; overflow-y:auto; } .vp03-item { display:flex; align-items:flex-start; gap:.75rem; padding:.75rem; border-radius:.5rem; cursor:pointer; transition:background .2s; } .vp03-item:hover, .vp03-item.active { background:#fefce8; } .vp03-thumb { width:80px; aspect-ratio:16/9; object-fit:cover; border-radius:.35rem; flex-shrink:0; } .vp03-title { font-size:var(--fs-xs,.78rem); font-weight:700; color:var(--text-strong); line-height:1.45; } .vp03-dur { font-size:var(--fs-xs,.68rem); color:var(--text-muted); margin-top:.25rem; } .vp04-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.5rem; } .vp04-reel { border-radius:var(--card-radius); overflow:hidden; position:relative; } .vp04-reel video { width:100%; display:block; } .vp04-reel-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.55),transparent 50%); display:flex; align-items:flex-end; padding:1rem; pointer-events:none; } .vp04-reel-title { font-size:var(--fs-sm,.85rem); font-weight:800; color:#fff; } .vp05-wrap { position:relative; border-radius:var(--card-radius); overflow:hidden; } .vp05-wrap video { width:100%; display:block; } .vp05-caption { position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.65); color:#fff; padding:.5rem 1.25rem; border-radius:99px; font-size:var(--fs-sm,.8rem); font-weight:700; backdrop-filter:blur(6px); white-space:nowrap; } .vp06-split { display:flex; flex-wrap:wrap; gap:2.5rem; align-items:center; } .vp06-shot { flex:2; min-width:300px; border-radius:var(--card-radius); overflow:hidden; } .vp06-shot img { width:100%; display:block; border-radius:var(--card-radius); } .vp06-info { flex:3; min-width:260px; display:flex; flex-direction:column; gap:1rem; } .vp06-info h2 { font-size:clamp(1.2rem,2.5vw,1.6rem); font-weight:900; color:var(--text-strong); margin:0; line-height:1.3; } .vp06-info p { font-size:var(--fs-sm,.85rem); color:var(--text-muted); line-height:1.75; margin:0; } .vp07-stage img { width:100%; display:block; aspect-ratio:16/9; object-fit:cover; } .vp07-pills { display:flex; gap:.6rem; flex-wrap:wrap; } .vp07-pill { display:flex; align-items:center; gap:.5rem; padding:.5rem 1rem; border-radius:99px; background:var(--surface-color,#f1f5f9); border:1.5px solid transparent; cursor:pointer; transition:background .2s, border-color .2s; } .vp07-pill.active, .vp07-pill:hover { background:#fefce8; border-color:var(--primary-color); } .vp07-pill-thumb { width:32px; height:32px; border-radius:50%; object-fit:cover; } .vp07-pill-label { font-size:var(--fs-xs,.78rem); font-weight:700; color:var(--text-strong); } .vp08-player { position:relative; border-radius:var(--card-radius); overflow:hidden; } .vp08-player video { width:100%; display:block; } .vp08-controls { position:absolute; bottom:1rem; right:1rem; display:flex; gap:.5rem; } .vp08-btn:hover { background:rgba(0,0,0,.8); } .vp08-btn svg { width:18px; height:18px; color:#fff; } @media (max-width:768px) { .vp02-feature, .vp03-playlist, .vp06-split { flex-direction:column; } } /* ── §25 Accordion — AC-01 through AC-07 (config-driven via --acNN-* vars) ── */ /* Smooth expand/collapse — base collapsed state + transition only. The actual open-state max-height is set inline by initAccordion() in theme.js, measured from body.scrollHeight, so the animation is pixel- accurate regardless of answer length (a fixed CSS cap like 800px wastes most of the transition on invisible motion once real height is reached, which reads as a snap/bounce rather than a smooth expand/collapse). This CSS-only max-height:0 is just the pre-JS/no-JS fallback for closed items. */ [data-ac-item] [data-ac-body] { max-height:0; overflow:hidden; transition:max-height .32s cubic-bezier(.4,0,.2,1); } /* Icon indicator — collapsed (.ac-ic-c) / expanded (.ac-ic-e) glyph swap. Default = chevron; per-kind overrides matched by CSS var SUBSTRING on the section's inline style (e.g. --ac01-ic-c:plus). Rules are written once — the substring selector matches any --acNN-ic-c/-ic-e var regardless of which numbered template set it, same technique as the TextImage card on/off toggle. */ .ac-ic-wrap{position:relative;width:20px;height:20px;flex-shrink:0;display:inline-block} .ac-ic-c,.ac-ic-e{position:absolute;inset:0;width:100%;height:100%;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:70% 70%;mask-size:70% 70%;transition:opacity .2s ease;opacity:1;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E")} .ac-ic-e{opacity:0;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")} [data-ac-item].ac-open .ac-ic-c{opacity:0} [data-ac-item].ac-open .ac-ic-e{opacity:1} [style*="-ic-c:plus"] .ac-ic-c,[style*="-ic-c: plus"] .ac-ic-c{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")} [style*="-ic-c:arrow"] .ac-ic-c,[style*="-ic-c: arrow"] .ac-ic-c{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")} [style*="-ic-c:caret"] .ac-ic-c,[style*="-ic-c: caret"] .ac-ic-c{-webkit-mask-size:60% 60%;mask-size:60% 60%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='none'%3E%3Cpath d='M8 5l8 7-8 7z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='none'%3E%3Cpath d='M8 5l8 7-8 7z'/%3E%3C/svg%3E")} [style*="-ic-c:none"] .ac-ic-c,[style*="-ic-c: none"] .ac-ic-c{display:none} [style*="-ic-e:minus"] .ac-ic-e,[style*="-ic-e: minus"] .ac-ic-e{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")} [style*="-ic-e:cross"] .ac-ic-e,[style*="-ic-e: cross"] .ac-ic-e{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E")} [style*="-ic-e:arrow"] .ac-ic-e,[style*="-ic-e: arrow"] .ac-ic-e{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E")} [style*="-ic-e:caret"] .ac-ic-e,[style*="-ic-e: caret"] .ac-ic-e{-webkit-mask-size:60% 60%;mask-size:60% 60%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='none'%3E%3Cpath d='M5 8l7 8 7-8z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='none'%3E%3Cpath d='M5 8l7 8 7-8z'/%3E%3C/svg%3E")} [style*="-ic-e:none"] .ac-ic-e,[style*="-ic-e: none"] .ac-ic-e{display:none} /* Per-item topic icon (data-pageedit="svg") — small subtle glyph before the question text */ .ac-topic-ico{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.15em;height:1.15em;opacity:.8} .ac-topic-ico svg{width:100%;height:100%} /* AC-01 — Image + Accordion */ .ac01-img-wrap { position:relative; overflow:hidden; } .ac01-stat { position:absolute; bottom:1.5rem; right:1.5rem; background:var(--primary-color); padding:1rem 1.25rem; border-radius:var(--card-radius); text-align:center; } .ac01-stat-num { font-size:2rem; font-weight:900; color:var(--text-strong); line-height:1; } .ac01-stat-lbl { font-size:var(--fs-xs,.72rem); font-weight:700; color:var(--text-strong); margin-top:.25rem; line-height:1.4; } .ac01-eyebrow { font-size:var(--fs-xs,.68rem); font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); margin-bottom:.5rem; } .ac01-item { border-bottom:1px solid var(--card-border); padding:0 1rem; transition:background .2s; } .ac01-item.ac-open{ background:var(--ac01-active-bg,transparent); } .ac01-btn { width:100%; display:flex; align-items:center; gap:.65rem; padding:1rem 0; background:none; border:none; cursor:pointer; text-align:left; font-size:var(--fs-body,.93rem); font-weight:600; color:var(--ac01-header-color,var(--text-strong)); } .ac01-btn > .ac-q{ flex:1; } .ac01-item.ac-open .ac01-btn{ color:var(--ac01-active-text,var(--ac01-header-color,var(--text-strong))); } .ac01-body-inner { text-align:left; font-size:var(--fs-body,.93rem); color:var(--ac01-body-color,var(--text-color)); line-height:1.75; padding:.25rem 0 1rem 1.85rem; } /* AC-02 — Left Heading + Right FAQ */ .ac02-item { border-bottom:1px solid var(--card-border); padding:0 1rem; transition:background .2s; } .ac02-item.ac-open{ background:var(--ac02-active-bg,transparent); } .ac02-btn { width:100%; display:flex; align-items:center; gap:.65rem; padding:1.1rem 0; background:none; border:none; cursor:pointer; text-align:left; font-size:var(--fs-body,.93rem); font-weight:600; color:var(--ac02-header-color,var(--text-strong)); } .ac02-btn > .ac-q{ flex:1; } .ac02-item.ac-open .ac02-btn{ color:var(--ac02-active-text,var(--ac02-header-color,var(--text-strong))); } .ac02-body-inner { text-align:left; font-size:var(--fs-body,.93rem); color:var(--ac02-body-color,var(--text-color)); line-height:1.75; padding:.25rem 0 1rem 1.85rem; } /* AC-03 — Dark Hero + Accordion */ .ac03-eyebrow { font-size:var(--fs-xs,.65rem); font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--primary-color); margin-bottom:.75rem; } .ac03-item { border-bottom:1px solid rgba(255,255,255,.15); transition:background .2s; } .ac03-item.ac-open{ background:var(--ac03-active-bg,transparent); } .ac03-btn { width:100%; display:flex; align-items:center; gap:.65rem; padding:1rem 0; background:none; border:none; cursor:pointer; text-align:left; font-size:var(--fs-body,.9rem); font-weight:600; color:var(--ac03-header-color,rgba(255,255,255,.75)); } .ac03-btn > .ac-q{ flex:1; } .ac03-item.ac-open .ac03-btn { color:var(--ac03-active-text,#fff); } .ac03-body-inner { text-align:left; font-size:var(--fs-body,.93rem); color:var(--ac03-body-color,rgba(255,255,255,.7)); line-height:1.8; padding:.25rem 0 1rem 1.85rem; } .ac03-cta { display:inline-flex; align-items:center; padding:.65rem 1.75rem; background:var(--primary-color); color:var(--text-strong); border-radius:99px; font-size:var(--fs-sm,.85rem); font-weight:800; text-decoration:none; transition:opacity .2s; } .ac03-cta:hover { opacity:.85; } /* AC-04 — Numbered Accordion */ .ac04-item { display:flex; align-items:flex-start; gap:1.5rem; padding:1.25rem 1rem; border-bottom:1px solid var(--card-border); transition:background .2s; } .ac04-item.ac-open{ background:var(--ac04-active-bg,transparent); } .ac04-num { font-size:2rem; font-weight:900; color:var(--card-border); line-height:1; flex-shrink:0; width:2.5rem; text-align:right; transition:color .2s; } .ac04-item.ac-open .ac04-num { color:var(--primary-color); } .ac04-content { flex:1; } .ac04-btn { width:100%; display:flex; align-items:center; gap:.65rem; background:none; border:none; cursor:pointer; text-align:left; font-size:var(--fs-body,.95rem); font-weight:700; color:var(--ac04-header-color,var(--text-strong)); padding:0; } .ac04-btn > .ac-q{ flex:1; } .ac04-item.ac-open .ac04-btn{ color:var(--ac04-active-text,var(--ac04-header-color,var(--text-strong))); } .ac04-body-inner { text-align:left; font-size:var(--fs-body,.93rem); color:var(--ac04-body-color,var(--text-color)); line-height:1.75; padding:.75rem 0 .25rem 1.85rem; } /* AC-05 — Colored Active Row */ .ac05-item { border-radius:8px; transition:background .2s; } .ac05-item.ac-open { background:var(--ac05-active-bg,var(--primary-color)); } .ac05-btn { width:100%; display:flex; align-items:center; gap:.65rem; padding:.9rem 1rem; background:none; border:none; cursor:pointer; text-align:left; font-size:var(--fs-body,.93rem); font-weight:600; color:var(--ac05-header-color,var(--text-strong)); border-bottom:1px solid var(--card-border); } .ac05-btn > .ac-q{ flex:1; } .ac05-item.ac-open .ac05-btn { border-bottom-color:rgba(0,0,0,.08); color:var(--ac05-active-text,var(--ac05-header-color,var(--text-strong))); } .ac05-body-inner { text-align:left; font-size:var(--fs-body,.93rem); color:var(--ac05-body-color,var(--text-color)); line-height:1.75; padding:.5rem 1rem 1rem 2.7rem; } /* AC-06 — Icon Accordion */ .ac06-item { background:var(--ac06-inner-bg,#ffffff); border:var(--ac06-border-w,1px) solid var(--ac06-border-c,var(--card-border)); border-radius:var(--ac06-radius,var(--card-radius)); margin-bottom:.75rem; overflow:hidden; transition:box-shadow .2s,background .2s; } .ac06-item.ac-open { box-shadow:var(--ac06-shadow,var(--card-shadow)); background:var(--ac06-active-bg,transparent); } .ac06-btn { width:100%; display:flex; align-items:center; gap:1rem; padding:1rem 1.25rem; background:none; border:none; cursor:pointer; text-align:left; } .ac06-icon-box { flex-shrink:0; width:40px; height:40px; border-radius:8px; background:var(--surface-color,#f8fafc); display:flex; align-items:center; justify-content:center; color:var(--text-muted); transition:background .2s,color .2s; } .ac06-icon-box .ac-topic-ico{ width:20px; height:20px; opacity:1; } .ac06-label { flex:1; font-size:var(--fs-body,.93rem); font-weight:600; color:var(--ac06-header-color,var(--text-strong)); text-align:left; } .ac06-item.ac-open .ac06-label{ color:var(--ac06-active-text,var(--ac06-header-color,var(--text-strong))); } .ac06-body-inner { text-align:left; font-size:var(--fs-body,.93rem); color:var(--ac06-body-color,var(--text-color)); line-height:1.75; padding:.5rem 1.25rem 1.25rem 3.5rem; } /* AC-07 — Ported FAQ */ .ac07-item { border-bottom:1px solid var(--card-border); padding:0 .25rem; transition:background .2s; } .ac07-item.ac-open{ background:var(--ac07-active-bg,transparent); } .ac07-btn { width:100%; display:flex; align-items:center; gap:.65rem; padding:1.25rem 0; background:none; border:none; cursor:pointer; text-align:left; font-size:var(--fs-body,.95rem); font-weight:600; color:var(--ac07-header-color,var(--text-strong)); } .ac07-btn > .ac-q{ flex:1; } .ac07-item.ac-open .ac07-btn{ color:var(--ac07-active-text,var(--ac07-header-color,var(--text-strong))); } .ac07-body-inner { text-align:left; font-size:var(--fs-body,.93rem); color:var(--ac07-body-color,var(--text-color)); line-height:1.75; padding:.25rem 0 1.25rem 1.85rem; } /* §AC Card on/off — when --acNN-card:0 is set, zero out card styling via var cascade */ section[style*="--ac01-card:0"],section[style*="--ac01-card: 0"]{--ac01-radius:0;--ac01-shadow:none;--ac01-border-w:0px} section[style*="--ac02-card:0"],section[style*="--ac02-card: 0"]{--ac02-radius:0;--ac02-shadow:none;--ac02-border-w:0px} section[style*="--ac03-card:0"],section[style*="--ac03-card: 0"]{--ac03-radius:0;--ac03-shadow:none;--ac03-border-w:0px} section[style*="--ac04-card:0"],section[style*="--ac04-card: 0"]{--ac04-radius:0;--ac04-shadow:none;--ac04-border-w:0px} section[style*="--ac05-card:0"],section[style*="--ac05-card: 0"]{--ac05-radius:0;--ac05-shadow:none;--ac05-border-w:0px} section[style*="--ac06-card:0"],section[style*="--ac06-card: 0"]{--ac06-radius:0;--ac06-shadow:none;--ac06-border-w:0px} section[style*="--ac07-card:0"],section[style*="--ac07-card: 0"]{--ac07-radius:0;--ac07-shadow:none;--ac07-border-w:0px} /* §AC Clickable image on/off (AC-01) — when --ac01-clickable:0 is set, disable the vmodal-open trigger via pointer-events AND hide the .v-zoom-overlay badge */ section[style*="--ac01-clickable:0"] [data-action="vmodal-open"],section[style*="--ac01-clickable: 0"] [data-action="vmodal-open"]{pointer-events:none;cursor:default} section[style*="--ac01-clickable:0"] .v-zoom-overlay,section[style*="--ac01-clickable: 0"] .v-zoom-overlay{display:none} /* §BQ Clickable image on/off (BQ-03) — same pattern as AC-01 above. THUMB RULE: any template image wired with data-action="vmodal-open" MUST ship with a matching --tplNN-clickable style-config select (default "1") PLUS this pointer-events/display:none enforcement pair — never one without the other. */ section[style*="--bq03-clickable:0"] [data-action="vmodal-open"],section[style*="--bq03-clickable: 0"] [data-action="vmodal-open"]{pointer-events:none;cursor:default} section[style*="--bq03-clickable:0"] .v-zoom-overlay,section[style*="--bq03-clickable: 0"] .v-zoom-overlay{display:none} @media(max-width:640px){ .ac01-img-wrap { min-height:220px; } .ac04-item { gap:1rem; } .ac04-num { font-size:1.5rem; width:2rem; } .ac01-body-inner,.ac02-body-inner,.ac03-body-inner,.ac04-body-inner,.ac07-body-inner{ padding-left:1.35rem; } .ac05-body-inner{ padding-left:1rem; } .ac06-body-inner{ padding-left:1.25rem; } } /* ── §38 Clients — CL-01 through CL-10 ── */ /* cl-chip: brand icon + label */ .cl-chip { display:inline-flex; flex-direction:column; align-items:center; gap:.45rem; cursor:default; } .cl-chip img { width:40px; height:40px; object-fit:contain; filter:grayscale(1) opacity(.45); transition:filter .25s; } .cl-chip:hover img { filter:grayscale(0) opacity(1); } .cl-chip span { font-size:var(--fs-xs,.72rem); font-weight:700; color:var(--text-muted); } .cl-chip.sm img { width:28px; height:28px; } .cl-chip.sm span { font-size:var(--fs-xs,.65rem); } .cl-chip.lg img { width:56px; height:56px; } .cl-chip.lg span { font-size:var(--fs-sm,.82rem); } /* marquee */ @keyframes mqScroll { from { transform:translateX(0); } to { transform:translateX(-50%); } } .marquee-track { display:flex; align-items:center; gap:3rem; width:max-content; animation:mqScroll 28s linear infinite; padding:1rem 0; } .marquee-track.rev { animation-direction:reverse; } .marquee-track.slow { animation-duration:42s; } .marquee-wrap:hover .marquee-track { animation-play-state:paused; } .marquee-stack { display:flex; flex-direction:column; gap:1.5rem; } /* bordered logo grid */ .logo-grid { display:grid; grid-template-columns:repeat(5,1fr); background:var(--card-border); gap:1px; border:1px solid var(--card-border); } .logo-cell { background:var(--card-bg,#fff); display:flex; align-items:center; justify-content:center; padding:1.75rem 1rem; } /* logo carousel — CL-05 */ .lc-track-wrap { position:relative; display:flex; align-items:center; gap:.5rem; } .lc-track { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:1rem; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; flex:1; padding:.5rem 0; scrollbar-width:none; } .lc-track::-webkit-scrollbar { display:none; } .lc-item { scroll-snap-align:start; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:.75rem 1.5rem; background:var(--card-bg,#fff); border-radius:var(--card-radius); border:1px solid var(--card-border); } .lc-btn { width:36px; height:36px; border-radius:50%; border:1.5px solid var(--card-border); background:var(--card-bg,#fff); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; color:var(--text-strong); transition:background .2s,border-color .2s; } .lc-btn:hover { background:var(--primary-color); border-color:var(--primary-color); } /* testimonial cards — CL-06 */ .h-testi-card { background:var(--card-bg,#fff); border-radius:var(--card-radius); border:1px solid var(--card-border); padding:1.75rem; box-shadow:var(--card-shadow); display:flex; flex-direction:column; gap:1rem; } .quote-mark { font-size:3rem; line-height:.8; color:var(--primary-color); font-weight:900; } .star-row { display:flex; gap:.2rem; } .star { color:var(--primary-color); font-size:var(--fs-body,.95rem); } /* stats — CL-07 */ .cl-stat-num { font-size:clamp(1.8rem,4vw,2.8rem); font-weight:900; color:var(--text-strong); line-height:1; } .cl-stat-lbl { font-size:var(--fs-xs,.78rem); color:var(--text-muted); margin-top:.35rem; } /* partner tiers — CL-10 */ .tier-label { display:inline-flex; align-items:center; gap:.4rem; font-size:var(--fs-xs,.72rem); font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:.3rem .85rem; border-radius:99px; white-space:nowrap; } .tier-gold { background:#fefce8; color:#92400e; border:1px solid #fcd703; } .tier-silver { background:var(--surface-color,#f8fafc); color:var(--text-color,#475569); border:1px solid #cbd5e1; } .tier-bronze { background:#fff7ed; color:#92400e; border:1px solid #fed7aa; } @media(max-width:640px) { .logo-grid { grid-template-columns:repeat(3,1fr); } } @media(max-width:480px) { .logo-grid { grid-template-columns:repeat(2,1fr); } } /* ── §37 Banners — BN-01 through BN-10 ── */ /* Shared scaffold + utilities */ .pad { padding:2.5rem clamp(1rem,4vw,3rem); } .badge { display:inline-block; padding:.25rem .75rem; background:var(--primary-color); color:var(--text-strong); border-radius:99px; font-size:var(--fs-xs,.7rem); font-weight:800; letter-spacing:.06em; } .badge-dark { display:inline-block; padding:.2rem .65rem; background:var(--text-strong); color:#fff; border-radius:99px; font-size:var(--fs-xs,.68rem); font-weight:800; letter-spacing:.06em; } .arr-btn { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.2); backdrop-filter:blur(8px); border:1.5px solid rgba(255,255,255,.35); flex-shrink:0; transition:background .2s; } .arr-btn:hover { background:rgba(255,255,255,.35); } .arr-btn svg { width:16px; height:16px; stroke:#fff; stroke-width:2.5; fill:none; } /* BN-01 — image cards */ .bn01-wrap { max-width:1280px; margin:0 auto; } .bn01-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .bn01-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; } .bn01-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; } .bn01-card { position:relative; overflow:hidden; border-radius:var(--card-radius); aspect-ratio:4/3; } .bn01-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; } .bn01-card:hover img { transform:scale(1.04); } .bn01-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.65) 0%,transparent 55%); } .bn01-badge { position:absolute; top:.75rem; left:.75rem; } .bn01-body { position:absolute; bottom:0; left:0; right:0; padding:1rem 1.1rem; display:flex; align-items:flex-end; justify-content:space-between; gap:.5rem; } .bn01-title { font-size:1rem; font-weight:800; color:#fff; line-height:1.2; } .bn01-sub { font-size:var(--fs-xs,.78rem); color:rgba(255,255,255,.75); margin-top:.2rem; } /* BN-02 — product promo */ .bn02-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; } .bn02-card { position:relative; border-radius:var(--card-radius); overflow:hidden; background:linear-gradient(135deg,#f97316,#ef4444); display:flex; min-height:200px; } .bn02-card.b { background:linear-gradient(135deg,#3b82f6,#1d4ed8); } .bn02-ghost { position:absolute; right:-.5rem; top:50%; transform:translateY(-50%); font-size:6rem; font-weight:900; color:rgba(255,255,255,.08); line-height:1; pointer-events:none; user-select:none; } .bn02-left { flex:1; padding:1.75rem 1.5rem; display:flex; flex-direction:column; justify-content:space-between; z-index:1; } .bn02-kicker { font-size:var(--fs-xs,.7rem); font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.8); margin-bottom:.4rem; } .bn02-h { font-size:clamp(1.4rem,3vw,2.1rem); font-weight:900; color:#fff; line-height:1.1; } .bn02-btn { display:inline-flex; align-items:center; padding:.6rem 1.5rem; background:var(--card-bg,#fff); color:var(--text-strong); border-radius:var(--btn-p-radius,99px); font-size:var(--fs-sm,.875rem); font-weight:800; text-decoration:none; align-self:flex-start; transition:opacity .2s; } .bn02-btn:hover { opacity:.9; } .bn02-img { width:45%; position:relative; flex-shrink:0; } .bn02-img img { width:100%; height:100%; object-fit:cover; } .bn02-badge-round { position:absolute; top:1rem; right:1rem; width:64px; height:64px; border-radius:50%; background:var(--primary-color); display:flex; align-items:center; justify-content:center; text-align:center; font-size:var(--fs-xs,.65rem); font-weight:900; color:var(--text-strong); line-height:1.2; } /* BN-03 — editorial grid */ .bn03-grid { display:grid; grid-template-columns:repeat(3,1fr); min-height:480px; } .bn03-col { position:relative; overflow:hidden; } .bn03-col img { width:100%; height:100%; object-fit:cover; display:block; } .bn03-overlay-text { position:absolute; bottom:0; left:0; right:0; padding:2rem 1.75rem; background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 100%); } .bn03-tag { display:inline-block; font-size:var(--fs-xs,.65rem); font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--primary-color); margin-bottom:.6rem; } .bn03-h { font-size:clamp(1.2rem,2.5vw,1.8rem); font-weight:900; color:#fff; line-height:1.15; margin-bottom:1rem; } .bn03-view-btn { display:inline-flex; align-items:center; gap:.4rem; font-size:var(--fs-sm,.82rem); font-weight:700; color:#fff; text-decoration:none; } .bn03-view-btn svg { width:16px; height:16px; stroke:#fff; stroke-width:2.5; fill:none; } /* BN-04 — sale banner */ .bn04 { display:flex; border-radius:var(--card-radius); overflow:hidden; background:var(--text-strong); min-height:280px; } .bn04-img { width:45%; flex-shrink:0; } .bn04-img img { width:100%; height:100%; object-fit:cover; display:block; } .bn04-right { flex:1; padding:2.5rem 2rem; display:flex; flex-direction:column; justify-content:center; gap:.75rem; } .bn04-eyebrow { font-size:var(--fs-xs,.68rem); font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); } .bn04-pct { font-size:clamp(3rem,8vw,5rem); font-weight:900; color:#fff; line-height:1; } .bn04-pct span { color:var(--primary-color); } .bn04-tagline { font-size:var(--fs-body,.95rem); color:rgba(255,255,255,.75); } .bn04-code { display:inline-flex; align-items:center; gap:.6rem; font-size:var(--fs-sm,.82rem); color:rgba(255,255,255,.6); } .bn04-code strong { color:#fff; background:rgba(255,255,255,.1); padding:.2rem .75rem; border-radius:4px; letter-spacing:.06em; } .bn04-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.75rem; background:var(--btn-a-bg,var(--primary-color)); color:var(--btn-a-text,var(--text-strong)); border-radius:var(--btn-a-radius,99px); font-size:var(--fs-sm,.85rem); font-weight:800; text-decoration:none; align-self:flex-start; transition:opacity .2s; } .bn04-btn svg { width:16px; height:16px; stroke:currentColor; fill:none; } .bn04-btn:hover { opacity:.88; } /* BN-05 — large + 2 stacked */ .bn05-grid { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:1rem; min-height:480px; } .bn05-main { grid-row:span 2; position:relative; overflow:hidden; border-radius:var(--card-radius); } .bn05-main img { width:100%; height:100%; object-fit:cover; display:block; } .bn05-main-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.65) 0%,transparent 60%); } .bn05-main-body { position:absolute; bottom:0; left:0; right:0; padding:1.75rem; } .bn05-title-lg { font-size:clamp(1.4rem,2.5vw,2rem); font-weight:900; color:#fff; line-height:1.15; margin-bottom:.4rem; } .bn05-sub-lg { font-size:var(--fs-sm,.85rem); color:rgba(255,255,255,.75); margin-bottom:1rem; } .bn05-small { position:relative; overflow:hidden; border-radius:var(--card-radius); } .bn05-small img { width:100%; height:100%; object-fit:cover; display:block; } .bn05-small-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.6) 0%,transparent 65%); } .bn05-small-body { position:absolute; bottom:0; left:0; right:0; padding:1.25rem; display:flex; align-items:flex-end; justify-content:space-between; } .bn05-title-sm { font-size:1rem; font-weight:800; color:#fff; } .bn05-sub-sm { font-size:var(--fs-xs,.78rem); color:rgba(255,255,255,.7); margin-top:.15rem; } /* BN-06 — 4-col mini */ .bn06-wrap { max-width:1280px; margin:0 auto; } .bn06-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; } .bn06-card { position:relative; overflow:hidden; border-radius:var(--card-radius); aspect-ratio:3/4; cursor:pointer; } .bn06-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; } .bn06-card:hover img { transform:scale(1.05); } .bn06-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.6) 0%,transparent 60%); } .bn06-body { position:absolute; bottom:0; left:0; right:0; padding:1rem; } .bn06-cat { font-size:var(--fs-xs,.65rem); font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.65); margin-bottom:.25rem; } .bn06-h { font-size:1rem; font-weight:900; color:#fff; line-height:1.2; } /* BN-07 — billboard */ .bn07 { position:relative; border-radius:var(--card-radius); overflow:hidden; min-height:440px; } .bn07 > img { width:100%; height:100%; object-fit:cover; display:block; position:absolute; inset:0; } .bn07-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.65) 0%,transparent 70%); } .bn07-content { position:relative; z-index:1; padding:3.5rem 3rem; max-width:560px; display:flex; flex-direction:column; gap:1rem; min-height:440px; justify-content:center; } .bn07-eyebrow { font-size:var(--fs-xs,.65rem); font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.6); } .bn07-h { font-size:clamp(1.6rem,3.5vw,2.6rem); font-weight:900; color:#fff; line-height:1.1; } .bn07-p { font-size:var(--fs-body,.9rem); color:rgba(255,255,255,.75); line-height:1.7; max-width:440px; } .bn07-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 2rem; background:var(--btn-a-bg,var(--primary-color)); color:var(--btn-a-text,var(--text-strong)); border-radius:var(--btn-a-radius,99px); font-size:var(--fs-sm,.85rem); font-weight:800; text-decoration:none; align-self:flex-start; transition:opacity .2s; } .bn07-btn svg { width:16px; height:16px; stroke:currentColor; fill:none; } .bn07-btn:hover { opacity:.88; } /* BN-08 — strip banners */ .bn08-strip { display:grid; grid-template-columns:320px 1fr; overflow:hidden; border-radius:var(--card-radius); margin-bottom:1rem; } .bn08-strip:last-child { margin-bottom:0; } .bn08-img { overflow:hidden; } .bn08-img img { width:100%; height:100%; object-fit:cover; display:block; } .bn08-text { display:flex; align-items:center; justify-content:space-between; padding:1.5rem 2rem; gap:1.5rem; flex-wrap:wrap; } .bn08-body { flex:1; } .bn08-kicker { font-size:var(--fs-xs,.68rem); font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.3rem; } .bn08-h { font-size:clamp(1rem,2vw,1.3rem); font-weight:900; margin-bottom:.3rem; } .bn08-sub { font-size:var(--fs-sm,.82rem); line-height:1.55; } .bn08-action { flex-shrink:0; } .bn08-btn { display:inline-block; padding:.6rem 1.5rem; border-radius:var(--btn-p-radius,99px); font-size:var(--fs-sm,.82rem); font-weight:800; text-decoration:none; white-space:nowrap; transition:opacity .2s; } .bn08-btn:hover { opacity:.85; } /* BN-09 — announcement bars */ .bn09-bar { display:flex; align-items:center; justify-content:center; gap:.75rem; padding:.65rem 1.25rem; font-size:var(--fs-sm,.83rem); flex-wrap:wrap; } .bn09-bar-text { flex:1; text-align:center; } .bn09-bar-link { font-weight:700; text-decoration:none; } .bn09-close { background:none; border:none; cursor:pointer; font-size:1.2rem; line-height:1; padding:0 .25rem; margin-left:auto; flex-shrink:0; } /* BN-10 — countdown bar */ .bn10-bar { display:flex; align-items:center; justify-content:center; gap:1.5rem; padding:.75rem 1.5rem; flex-wrap:wrap; } .bn10-text-group { display:flex; flex-direction:column; gap:.1rem; } .bn10-label { font-size:var(--fs-xs,.65rem); font-weight:800; letter-spacing:.1em; text-transform:uppercase; } .bn10-title { font-size:var(--fs-body,.9rem); font-weight:800; } .bn10-divider { width:1px; height:2rem; background:currentColor; opacity:.2; } .bn10-clock { display:flex; align-items:center; gap:.4rem; } .bn10-unit { text-align:center; } .bn10-num { font-size:1.4rem; font-weight:900; font-variant-numeric:tabular-nums; display:block; min-width:2ch; } .bn10-lbl { font-size:var(--fs-xs,.58rem); font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-top:.1rem; } .bn10-colon { font-size:1.2rem; font-weight:900; line-height:1; align-self:center; margin-bottom:.8rem; } .bn10-cta { display:inline-flex; align-items:center; padding:.55rem 1.4rem; border-radius:99px; font-size:var(--fs-sm,.82rem); font-weight:800; text-decoration:none; white-space:nowrap; transition:opacity .2s; } .bn10-cta:hover { opacity:.88; } @media(max-width:768px){ .bn01-grid-4,.bn06-grid { grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .bn01-grid,.bn02-grid { grid-template-columns:1fr; } .bn01-grid-3 { grid-template-columns:1fr 1fr; } .bn03-grid { grid-template-columns:1fr; min-height:auto; } .bn04 { flex-direction:column; } .bn04-img { width:100%; height:200px; } .bn05-grid { grid-template-columns:1fr; grid-template-rows:auto; min-height:auto; } .bn05-main { grid-row:auto; min-height:280px; } .bn07-content { padding:2rem 1.5rem; min-height:320px; } .bn08-strip { grid-template-columns:1fr; } .bn08-img { height:160px; } .bn10-bar { gap:.75rem; } } @media(max-width:480px){ .bn01-grid-3 { grid-template-columns:1fr; } } /* ── §36 Demo scaffolding — page-level layout for helper preview files ── */ .demo-page{min-height:100vh;background:linear-gradient(160deg,#f0f9ff 0%,#f8fafc 60%)} .demo-nav{background:var(--bg-color,#fff);border-bottom:1px solid var(--card-border,#e2e8f0);padding:.85rem clamp(1rem,8vw,5rem);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem} .demo-nav .logo{font-weight:900;font-size:1.1rem;color:var(--text-strong,#0f172a);letter-spacing:-.02em} .demo-nav .links{display:flex;gap:1.2rem;flex-wrap:wrap} .demo-nav .links a{font-size:var(--fs-sm,.82rem);color:var(--text-color,#475569);text-decoration:none;font-weight:500} .demo-hero{padding:4rem clamp(1rem,8vw,5rem) 3rem;max-width:700px} .demo-hero p{font-size:var(--fs-xs,.72rem);font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#6366f1;margin-bottom:.7rem} .demo-hero h1{font-size:clamp(1.8rem,5vw,3.5rem);font-weight:900;color:var(--text-strong,#0f172a);line-height:1.05;letter-spacing:-.03em;margin-bottom:1.1rem} .demo-hero .sub{font-size:1rem;color:var(--text-muted,#64748b);line-height:1.65;max-width:520px} .demo-content{padding:2.5rem clamp(1rem,8vw,5rem);display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;max-width:1200px} .demo-card{background:var(--bg-color,#fff);border-radius:14px;padding:1.4rem;border:1px solid var(--card-border,#e2e8f0);box-shadow:0 1px 6px rgba(0,0,0,.04)} .demo-card h3{font-size:var(--fs-body,.95rem);font-weight:700;color:var(--text-strong,#0f172a);margin-bottom:.4rem} .demo-card p{font-size:var(--fs-sm,.8rem);color:var(--text-muted,#64748b);line-height:1.6} @media(max-width:480px){.demo-nav .links{display:none}} /* ── §35 Testimonial extras (testi-right panel, OrganicVertical) ── */ @media(max-width:768px) { .h-testi-new-wrap { grid-template-columns:1fr; } .h-testi-right { display:none; } } /* ── §43 Feature Bars (FB-01–FB-15) ── */ /* Section label */ .section-label{background:#0f172a;color:#fcd703;font-size:var(--fs-xs,.65rem);font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:.55rem 1.1rem;display:flex;align-items:center;gap:.75rem} .section-label span{color:var(--text-color,#475569);font-weight:600;letter-spacing:.05em;text-transform:none} /* CSS-only particles */ .cp{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0} .cp s{position:absolute;left:var(--x,50%);top:var(--y,50%);width:var(--sz,4px);height:var(--sz,4px);border-radius:50%;background:var(--c,rgba(252,215,3,.2));opacity:0;animation:var(--a,cpFloat) var(--dur,6s) ease-in-out var(--d,0s) infinite} .cp s.rg{border-radius:50%} .cp s.sq{border-radius:0;transform:rotate(var(--rot,45deg))} .cp s.cr{border-radius:2px;width:var(--sz,4px);height:calc(var(--sz,4px)*3);transform:rotate(var(--rot,45deg))} @keyframes cpFloat{0%{opacity:var(--olo,.06);transform:translate(0,0)}50%{opacity:var(--ohi,.2);transform:translate(var(--dx,0px),var(--dy,-12px))}100%{opacity:var(--olo,.06);transform:translate(0,0)}} @keyframes cpRise{0%{opacity:0;transform:translate(0,0)}30%{opacity:var(--ohi,.3)}100%{opacity:0;transform:translate(var(--rx,0px),var(--ry,-60px))}} @keyframes cpDrift{0%{opacity:0;transform:translate(0,0) rotate(var(--rot,45deg))}40%{opacity:var(--ohi,.2)}100%{opacity:0;transform:translate(var(--dx,10px),var(--dy,-8px)) rotate(calc(var(--rot,45deg) + 90deg))}} @keyframes cpPop{0%{opacity:0;transform:scale(.5) rotate(var(--rot,45deg))}30%{opacity:var(--ohi,.25);transform:scale(1.4)}100%{opacity:0;transform:scale(.8) rotate(calc(var(--rot,45deg)+90deg))}} /* Feature bar text defaults — body size + color token, no hardcoding */ [id^="fb"] p { font-size:var(--fs-body,.93rem); } [id^="fb"] p:not([style*="color"]) { color:var(--text-color); } /* Particle wrapper */ .ptcl-wrap{position:absolute;inset:0;pointer-events:none;z-index:0} /* Shimmer sweep on badge circles */ .ptcl-shimmer-bar{position:absolute;top:0;left:-70%;width:50%;height:100%;background:linear-gradient(to right,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-15deg);animation:fbShimmer var(--dur,3.5s) ease-in-out var(--delay,0s) infinite} @keyframes fbShimmer{0%{left:-70%;opacity:0}20%{opacity:1}60%{left:130%;opacity:1}100%{left:130%;opacity:0}} /* Icon pulse rings — filled expanding circles, matches static page pattern. No scale animation on the element itself — avoids overriding transform:translate() on absolutely-centred play buttons. Rings alone are the visual signal. */ .icon-pulse{position:relative} .icon-pulse::before,.icon-pulse::after{content:'';position:absolute;inset:0;border-radius:inherit;background:color-mix(in srgb,var(--primary-color,#fcd703) 38%,transparent);animation:fbRingExpand 2.1s ease-out infinite;pointer-events:none} .icon-pulse::after{animation-delay:.7s} @keyframes fbRingExpand{0%{transform:scale(1);opacity:.85}100%{transform:scale(2.4);opacity:0}} /* Stat number glow (no-op class, present for targeting) */ .num-glow{display:block} /* Accent underline bar under stat numbers */ .num-underline{display:block;height:3px;border-radius:99px;background:var(--primary-color,#fcd703);transform-origin:left;animation:fbBarGrow .7s cubic-bezier(.22,.68,0,1.2) var(--delay,.2s) both} @keyframes fbBarGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* Marquee tracks */ .marquee-wrap{overflow:hidden;width:100%} .marquee-l{display:flex;width:max-content;animation:fbScrollLeft var(--speed,28s) linear infinite} .marquee-r{display:flex;width:max-content;animation:fbScrollRight var(--speed,18s) linear infinite} .marquee-wrap:hover .marquee-l,.marquee-wrap:hover .marquee-r{animation-play-state:paused} @keyframes fbScrollLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes fbScrollRight{from{transform:translateX(-50%)}to{transform:translateX(0)}} /* Dot grid for dark sections */ .dot-grid-light{background-image:radial-gradient(circle,rgba(255,255,255,.06) 1px,transparent 1px);background-size:24px 24px} /* Ghost number (FB-13) */ .ghost-num{font-size:clamp(2.5rem,6vw,4.5rem);font-weight:900;line-height:1;color:transparent;-webkit-text-stroke:1.5px #e2e8f0;text-stroke:1.5px #e2e8f0;display:block;letter-spacing:-.02em} /* Rating pill (FB-14) */ .rating-pill{display:inline-flex;align-items:center;background:var(--primary-color,#fcd703);color:var(--text-strong,#111827);font-size:var(--fs-body,.9rem);font-weight:800;padding:.4rem 1rem;border-radius:99px;letter-spacing:.06em;white-space:nowrap} /* ═══════════════════════════════════════════════════════════════════ §44 IMAGE GALLERY (IG-01 to IG-06) IG-01 Masonry · IG-02 Filter · IG-03 Asymmetric · IG-04 Caption IG-05 HScroll · IG-06 Magazine ═══════════════════════════════════════════════════════════════════ */ /* ── Lightbox ──────────────────────────────────────────────────── */ #gl-lb{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.92);opacity:0;pointer-events:none;transition:opacity .25s} #gl-lb.lb-open{opacity:1;pointer-events:auto} #gl-lb-img{max-width:90vw;max-height:88vh;object-fit:contain;border-radius:4px;display:block;transition:opacity .15s} .lb-close{position:absolute;top:1rem;right:1.25rem;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:1.4rem;line-height:40px;text-align:center;cursor:pointer;transition:background .2s} .lb-close:hover{background:rgba(255,255,255,.25)} .lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:2rem;line-height:48px;text-align:center;cursor:pointer;transition:background .2s;user-select:none} .lb-nav:hover{background:rgba(255,255,255,.25)} #lb-prev{left:1.25rem} #lb-next{right:1.25rem} #lb-counter{position:absolute;bottom:1.25rem;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.6);font-size:var(--fs-sm,.85rem);font-weight:600} /* ── Base gallery item ─────────────────────────────────────────── */ .gl-item{position:relative;overflow:hidden;cursor:pointer;border-radius:var(--card-radius,12px);display:block} .gl-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease} .gl-item:hover img{transform:scale(1.05)} /* ── Hover overlay + zoom icon ─────────────────────────────────── */ .gl-overlay{position:absolute;inset:0;background:rgba(0,0,0,.38);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s} .gl-item:hover .gl-overlay{opacity:1} .gl-zoom{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.15);border:1.5px solid rgba(255,255,255,.5);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;color:#fff;transition:transform .25s} .gl-zoom:hover{transform:scale(1.1)} /* ── Slide-up caption (IG-04) ──────────────────────────────────── */ .gl-caption{position:absolute;bottom:0;left:0;right:0;padding:.75rem 1rem;background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 100%);transform:translateY(100%);transition:transform .35s ease} .gl-item:hover .gl-caption{transform:translateY(0)} .gl-zi{transition:opacity .3s} .gl-item:hover .gl-zi{opacity:1 !important} /* ── Always-on bottom caption (IG-05) ─────────────────────────── */ .gl-caption-always{position:absolute;bottom:0;left:0;right:0;padding:.75rem 1rem;background:linear-gradient(to top,rgba(0,0,0,.65) 0%,transparent 100%);pointer-events:none} /* ── IG-01 Masonry ─────────────────────────────────────────────── */ .masonry-wrap{columns:3;column-gap:10px} .masonry-item{break-inside:avoid;margin-bottom:10px} .masonry-item img{width:100%;height:100%;object-fit:cover;display:block} /* ── IG-02 Filterable grid ─────────────────────────────────────── */ .gl-tab{padding:.45rem 1.1rem;border-radius:99px;border:1.5px solid var(--card-border,#e5e7eb);background:var(--card-bg,#fff);color:var(--text-strong,#111827);font-size:var(--fs-sm,.82rem);font-weight:600;cursor:pointer;transition:all .2s} .gl-tab:hover{border-color:var(--primary-color,#fcd703);background:var(--primary-color,#fcd703)} .gl-tab.active{background:var(--primary-color,#fcd703);border-color:var(--primary-color,#fcd703);color:var(--text-strong,#111827)} .gl-filter-item{transition:opacity .3s,transform .3s} .gl-filter-item.gl-hidden{display:none} /* ── IG-05 Horizontal scroll strip ────────────────────────────── */ .hstrip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth} .hstrip::-webkit-scrollbar{display:none} .hstrip-item{flex:0 0 260px;scroll-snap-align:start;border-radius:var(--card-radius,12px);overflow:hidden} .hs-btn{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;z-index:4;background:rgba(255,255,255,.9);border:1.5px solid var(--card-border,#e5e7eb);box-shadow:0 2px 8px rgba(0,0,0,.12);font-size:1.4rem;line-height:38px;text-align:center;cursor:pointer;transition:all .2s;color:var(--text-strong,#111827)} .hs-btn:hover{background:var(--card-bg,#fff);box-shadow:0 4px 16px rgba(0,0,0,.18)} .hs-btn:disabled{opacity:.3;cursor:default} .hs-btn-prev{left:.5rem} .hs-btn-next{right:.5rem} /* ── Gap between templates ─────────────────────────────────────── */ @media(max-width:768px){ .masonry-wrap{columns:2} .hstrip-item{flex:0 0 200px} /* IG-03 top row: single column on tablet */ .ig03-top{grid-template-columns:1fr !important} .ig03-top>.gl-item:first-child{grid-row:auto !important;height:280px !important} .ig03-top>.gl-item:not(:first-child){height:200px !important} /* IG-03 bottom row: 2-col on tablet */ .ig03-bot{grid-template-columns:1fr 1fr !important} /* IG-06: 2-col, auto row heights */ .ig06-grid{grid-template-columns:1fr 1fr !important;grid-template-rows:auto !important} .ig06-grid>.gl-item:nth-child(2){grid-row:auto !important;height:220px} .ig06-grid>.gl-item{height:180px} } @media(max-width:480px){ .masonry-wrap{columns:1} /* IG-03 bottom row: single column on mobile */ .ig03-bot{grid-template-columns:1fr !important} /* IG-06: single column on mobile */ .ig06-grid{grid-template-columns:1fr !important} } /* ═══════════════════════════════════════════════════════════════════ §45 GOOGLE MAP (GM-01 to GM-08) ═══════════════════════════════════════════════════════════════════ */ /* ── Shared map iframe ─────────────────────────────────────────── */ .gm-iframe{width:100%;height:100%;border:none;display:block} /* ── Custom animated pin ────────────────────────────────────────── */ .gm-pin{ position:absolute;left:50%;top:50%; transform:translate(-50%,-50%); z-index:2;display:flex;flex-direction:column;align-items:center; width:56px;pointer-events:none; } .gm-pin-sm{ position:absolute;left:50%;top:50%; transform:translate(-50%,-50%); z-index:2;display:flex;flex-direction:column;align-items:center; width:40px;pointer-events:none; } @keyframes gmPulse{ 0%{transform:translate(-50%,-50%) scale(.4);opacity:.85} 70%{transform:translate(-50%,-50%) scale(1.8);opacity:0} 100%{transform:translate(-50%,-50%) scale(1.8);opacity:0} } /* ── White overlay card ─────────────────────────────────────────── */ .gm-overlay{ position:absolute;z-index:3; background:var(--card-bg,#fff); border-radius:var(--card-radius,12px); box-shadow:0 8px 32px rgba(0,0,0,.18); } /* ── Contact form inputs (GM-01) ────────────────────────────────── */ .gm-field{ width:100%;padding:.65rem .85rem; border:1.5px solid var(--card-border,#e5e7eb); border-radius:8px; font-size:var(--fs-sm,.85rem);color:var(--text-strong,#111827); background:var(--card-bg,#fff);outline:none;box-sizing:border-box; transition:border-color .2s;font-family:inherit; } .gm-field:focus{border-color:var(--primary-color,#fcd703)} /* ── Submit button ──────────────────────────────────────────────── */ .gm-submit{ width:100%;padding:.7rem; background:var(--primary-color,#fcd703); color:var(--text-strong,#111827); font-size:var(--fs-sm,.88rem);font-weight:800; border:none;border-radius:8px;cursor:pointer; transition:filter .2s; } .gm-submit:hover{filter:brightness(.92)} /* ── Location info row (used in GM-02/04) ───────────────────────── */ .loc-row{display:flex;align-items:flex-start;gap:.75rem} .loc-icon{ width:36px;height:36px;border-radius:50%; display:flex;align-items:center;justify-content:center;flex-shrink:0; } /* ── GM-06 tab buttons ──────────────────────────────────────────── */ .gm-tab{ padding:.4rem 1rem;border-radius:99px; border:1.5px solid var(--card-border,#e5e7eb); background:var(--card-bg,#fff);color:var(--text-strong,#111827); font-size:var(--fs-sm,.82rem);font-weight:600;cursor:pointer; transition:all .2s;white-space:nowrap; } .gm-tab:hover{border-color:var(--primary-color,#fcd703);background:var(--primary-color,#fcd703)} .gm-tab.active{background:var(--text-strong,#111827);border-color:var(--text-strong,#111827);color:#fff} @media(max-width:640px){ .gm-overlay{position:static !important;transform:none !important;width:100% !important;border-radius:0 !important;box-shadow:none !important} } /* ── GM responsive wrapper classes (replace inline layout styles) ── */ .gm01-wrap,.gm02-wrap,.gm05-wrap{position:relative} .gm01-bg{position:relative;height:520px;overflow:hidden} .gm02-bg{position:relative;height:480px;overflow:hidden} .gm05-bg{position:relative;height:480px;overflow:hidden} .gm01-card{left:2.5rem;top:50%;transform:translateY(-50%);width:320px;padding:2rem} .gm02-card{right:2.5rem;top:50%;transform:translateY(-50%);width:300px;padding:0;overflow:hidden} .gm05-card{left:50%;top:50%;transform:translate(-50%,-50%);width:320px;padding:0;overflow:hidden} .gm04-split{display:flex;min-height:520px;box-shadow:var(--card-shadow);border-radius:var(--card-radius);overflow:hidden;margin:0 1rem} .gm04-panel{flex:0 0 380px;background:#1e2535;padding:3rem;display:flex;flex-direction:column;justify-content:center} .gm04-map-pane{flex:1;position:relative} .gm06-body{display:flex} .gm06-sidebar{flex:0 0 260px;padding:1.75rem;border-right:1px solid var(--card-border);display:flex;flex-direction:column;gap:.85rem} .gm06-map-pane{flex:1;height:380px;position:relative} @media(max-width:640px){ .gm01-bg,.gm02-bg,.gm05-bg{height:300px} .gm04-split{flex-direction:column;min-height:auto;margin:0;border-radius:0} .gm04-panel{flex:none;padding:2rem 1.25rem} .gm04-map-pane{height:280px} .gm06-body{flex-direction:column} .gm06-sidebar{flex:none;border-right:none;border-bottom:1px solid var(--card-border)} .gm06-map-pane{height:280px} } /* ═══════════════════════════════════════════════════════════════════ §46 HERO SECTIONS (22.1 TypeCentred · 22.3 TypeSplit · 22.4 TypeKinetic 22.6 TypeMinimal · 22.7 TypeDark · 22.8 TypeBrand 22.9 TypeGradient · 22.10 TypeWithProduct) ═══════════════════════════════════════════════════════════════════ */ /* ── Section spacing ───────────────────────────────────────────── */ .section-gap{height:4rem} /* ── 22.4 TypeKinetic: outlined word ───────────────────────────── */ .outlined-word{ font-size:var(--fs-h1,clamp(2.4rem,6vw,5rem)); font-weight:900; line-height:1; letter-spacing:-.04em; font-family:var(--heading-font,inherit); color:transparent; -webkit-text-stroke:2px rgba(255,255,255,.55); text-stroke:2px rgba(255,255,255,.55); } /* ── 22.7 TypeDark: stats bar ──────────────────────────────────── */ .stats-bar{display:flex;flex-wrap:wrap} /* ── 22.8 TypeBrand: gradient border lines ─────────────────────── */ .brand-line-top,.brand-line-btm{ height:3px; background:linear-gradient(90deg,transparent,var(--primary-color,#fcd703),transparent); } /* ── 22.9 TypeGradient: glass fact card ────────────────────────── */ .glass-card{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-radius:var(--card-radius,12px); padding:1.5rem; } /* ── Layout grid helpers ───────────────────────────────────────── */ .split-grid,.gradient-grid,.product-grid{width:100%} /* ── 22.10 TypeWithProduct: image col overflow guard ───────────── */ .product-img-col{overflow:visible} /* ── Responsive: stack 2-col layouts below lg ─────────────────── */ @media(max-width:1024px){ .split-grid.grid,.gradient-grid.grid,.product-grid.grid{grid-template-columns:1fr !important} .product-img-col .absolute{display:none} } /* ═══════════════════════════════════════════════════════════════════ §47 HORIZONTAL LIST (HL-01 → HL-10) ═══════════════════════════════════════════════════════════════════ */ /* ── TOC nav ───────────────────────────────────────────────────── */ .toc strong{font-size:var(--fs-xs,.7rem);font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-right:.5rem} .toc a{font-size:var(--fs-xs,.75rem);font-weight:600;color:rgba(255,255,255,.55);text-decoration:none;transition:color .15s} .toc a:hover{color:#fcd703} /* ── Section backgrounds ───────────────────────────────────────── */ .sec{margin:0} .sec.charcoal{background:#1e2535} .sec.charcoal .sec-label{color:rgba(255,255,255,.2);border-bottom-color:rgba(255,255,255,.06)} /* ── Shared inner wrapper ──────────────────────────────────────── */ .hl-wrap{max-width:900px;margin:0 auto;padding:3rem clamp(1.25rem,4vw,2.5rem)} /* ── SVG defaults for icon SVGs ────────────────────────────────── */ .hl01-icon svg,.hl03-arrow svg,.hl01-link svg{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .hl04-icon svg,.hl06-check svg,.hl10-icon svg,.hl10-chevron{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .hl06-check svg{stroke:#22c55e} .hl09-label svg{fill:none;stroke:currentColor;stroke-width:2} /* ══════════════════ HL-01 Icon list ══════════════════ */ .hl01-list{display:flex;flex-direction:column;gap:0} .hl01-item{display:flex;gap:1.25rem;padding:1.5rem 0;border-bottom:1px solid #f1f5f9} .hl01-item:last-child{border-bottom:none} .hl01-icon{flex-shrink:0;width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center} .hl01-icon svg{width:22px;height:22px} .hl01-title{font-size:1rem;font-weight:700;color:var(--text-strong,#111827);margin-bottom:.35rem} .hl01-desc{font-size:var(--fs-sm,.85rem);color:var(--text-muted,#6b7280);line-height:1.65;margin-bottom:.75rem} .hl01-link{display:inline-flex;align-items:center;gap:.25rem;font-size:var(--fs-sm,.8rem);font-weight:700;color:var(--primary-dark,#b8940a);text-decoration:none} .hl01-link svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5} .hl01-link:hover{text-decoration:underline} /* ══════════════════ HL-02 Bold number ══════════════════ */ .hl02-list{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem} .hl02-item{display:flex;flex-direction:column;gap:.75rem} .hl02-num{font-size:2.5rem;font-weight:900;line-height:1;letter-spacing:-.04em} .hl02-line{height:2px;width:100%;background:#e5e7eb;border-radius:2px} .hl02-tag{font-size:var(--fs-xs,.65rem);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted,#6b7280)} .hl02-title{font-size:var(--fs-body,.95rem);font-weight:700;color:var(--text-strong,#111827);line-height:1.4;margin-top:.2rem} .hl02-desc{font-size:var(--fs-sm,.82rem);color:var(--text-muted,#6b7280);line-height:1.65;margin-top:.35rem} /* ══════════════════ HL-03 Thumbnail list ══════════════════ */ .hl03-list{display:flex;flex-direction:column;gap:0} .hl03-item{display:flex;align-items:center;gap:1.25rem;padding:1.1rem 0;border-bottom:1px solid #f1f5f9;cursor:pointer;transition:background .15s} .hl03-item:last-child{border-bottom:none} .hl03-item:hover{background:#fafafa} .hl03-thumb{flex-shrink:0;width:100px;height:66px;border-radius:8px;overflow:hidden} .hl03-thumb img{width:100%;height:100%;object-fit:cover;display:block} .hl03-cat{font-size:var(--fs-xs,.65rem);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--primary-dark,#b8940a);margin-bottom:.3rem} .hl03-title{font-size:var(--fs-sm,.88rem);font-weight:600;color:var(--text-strong,#111827);line-height:1.45} .hl03-meta{display:flex;gap:.5rem;font-size:var(--fs-xs,.75rem);color:var(--text-muted,#9ca3af);margin-top:.3rem} .hl03-arrow{flex-shrink:0;margin-left:auto;width:32px;height:32px;border-radius:50%;background:var(--surface-color,#f1f5f9);display:flex;align-items:center;justify-content:center;transition:background .2s} .hl03-item:hover .hl03-arrow{background:#e5e7eb} .hl03-arrow svg{width:16px;height:16px;stroke:#6b7280;fill:none;stroke-width:2.5;stroke-linecap:round} /* ══════════════════ HL-04 Coloured icon box ══════════════════ */ .hl04-list{display:flex;flex-direction:column;gap:0} .hl04-item{display:flex;align-items:flex-start;gap:1.1rem;padding:1.25rem 0;border-bottom:1px solid var(--card-border,#e2e8f0)} .hl04-item:last-child{border-bottom:none} .hl04-icon{flex-shrink:0;width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center} .hl04-icon svg{width:20px;height:20px} .hl04-title{font-size:var(--fs-btn,.92rem);font-weight:700;color:var(--text-strong,#111827);margin-bottom:.3rem} .hl04-desc{font-size:var(--fs-sm,.82rem);color:var(--text-muted,#6b7280);line-height:1.6} .hl04-badge{flex-shrink:0;margin-left:auto;align-self:flex-start;font-size:var(--fs-xs,.68rem);font-weight:700;letter-spacing:.06em;padding:.28rem .7rem;border-radius:99px} /* ══════════════════ HL-05 Step process ══════════════════ */ .hl05-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative} .hl05-step{position:relative;padding-top:1rem;padding-right:1.5rem} .hl05-num-wrap{position:relative;margin-bottom:1.25rem} .hl05-num-wrap::after{content:'';position:absolute;left:calc(44px + .75rem);top:50%;width:calc(100% - 44px - .75rem);height:2px;background:#e5e7eb;transform:translateY(-50%)} .hl05-step:last-child .hl05-num-wrap::after{display:none} .hl05-num{width:44px;height:44px;border-radius:50%;background:var(--text-strong,#111827);color:#fff;font-size:var(--fs-sm,.82rem);font-weight:800;display:flex;align-items:center;justify-content:center;position:relative;z-index:1} .hl05-title{font-size:var(--fs-btn,.92rem);font-weight:700;color:var(--text-strong,#111827);margin-bottom:.4rem} .hl05-desc{font-size:var(--fs-sm,.8rem);color:var(--text-muted,#6b7280);line-height:1.6} /* ══════════════════ HL-06 Split feature ══════════════════ */ .hl06-grid{display:grid;grid-template-columns:1fr 1fr} .hl06-col{display:flex;flex-direction:column} .hl06-row{display:flex;gap:1rem;padding:1.25rem 1.5rem;border-bottom:1px solid var(--card-border,#e2e8f0);align-items:flex-start} .hl06-col:first-child .hl06-row{border-right:1px solid var(--card-border,#e2e8f0)} .hl06-check{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:#f0fdf4;display:flex;align-items:center;justify-content:center;margin-top:.1rem} .hl06-check svg{width:14px;height:14px} .hl06-title{font-size:var(--fs-sm,.88rem);font-weight:700;color:var(--text-strong,#111827);margin-bottom:.25rem} .hl06-desc{font-size:var(--fs-sm,.8rem);color:var(--text-muted,#6b7280);line-height:1.6} /* ══════════════════ HL-07 Dark number card ══════════════════ */ .hl07-list{display:flex;flex-direction:column;gap:0} .hl07-item{display:flex;align-items:flex-start;gap:1.25rem;padding:1.25rem 0;border-bottom:1px solid rgba(255,255,255,.06)} .hl07-item:last-child{border-bottom:none} .hl07-num{flex-shrink:0;font-size:2rem;font-weight:900;line-height:1;letter-spacing:-.04em;min-width:2.5rem} .hl07-title{font-size:var(--fs-body,.95rem);font-weight:700;color:#fff;margin-bottom:.35rem} .hl07-desc{font-size:var(--fs-sm,.83rem);color:rgba(255,255,255,.5);line-height:1.65} .hl07-pill{flex-shrink:0;margin-left:auto;align-self:flex-start;font-size:var(--fs-xs,.68rem);font-weight:700;letter-spacing:.06em;padding:.3rem .8rem;border-radius:99px;white-space:nowrap} /* ══════════════════ HL-08 Timeline ══════════════════ */ .hl08-timeline{display:flex;flex-direction:column;gap:0;position:relative;padding-left:1rem} .hl08-timeline::before{content:'';position:absolute;left:5.5rem;top:0;bottom:0;width:2px;background:#e5e7eb} .hl08-item{display:flex;gap:1.5rem;padding:1rem 0 1.5rem;position:relative} .hl08-date{flex-shrink:0;width:4.5rem;text-align:right;padding-top:.25rem} .hl08-yr{font-size:1rem;font-weight:900;color:var(--text-strong,#111827);line-height:1} .hl08-mo{font-size:var(--fs-xs,.72rem);font-weight:600;color:var(--text-muted,#9ca3af);text-transform:uppercase;letter-spacing:.08em;margin-top:.1rem} .hl08-content{position:relative;padding-left:1.5rem} .hl08-content::before{content:'';position:absolute;left:-1px;top:.4rem;width:12px;height:12px;border-radius:50%;background:var(--primary-color,#fcd703);border:2px solid #fff;box-shadow:0 0 0 2px #e5e7eb} .hl08-tag{font-size:var(--fs-xs,.65rem);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--primary-dark,#b8940a);margin-bottom:.3rem} .hl08-title{font-size:var(--fs-body,.95rem);font-weight:700;color:var(--text-strong,#111827);margin-bottom:.4rem} .hl08-desc{font-size:var(--fs-sm,.82rem);color:var(--text-muted,#6b7280);line-height:1.65} /* ══════════════════ HL-09 Skill bars ══════════════════ */ .hl09-list{display:flex;flex-direction:column;gap:1.1rem} .hl09-item{display:flex;align-items:center;gap:1rem} .hl09-label{display:flex;align-items:center;gap:.5rem;min-width:180px;font-size:var(--fs-sm,.85rem);font-weight:600;color:var(--text-color,#374151)} .hl09-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} .hl09-bar-track{flex:1;height:8px;background:#e5e7eb;border-radius:99px;overflow:hidden} .hl09-bar-fill{height:100%;border-radius:99px;width:0;transition:width 1.2s cubic-bezier(.4,0,.2,1)} .hl09-pct{font-size:var(--fs-sm,.8rem);font-weight:700;color:var(--text-color,#374151);min-width:2.5rem;text-align:right} /* ══════════════════ HL-10 Dark accordion ══════════════════ */ .hl10-list{display:flex;flex-direction:column;gap:.5rem} .hl10-item{border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);overflow:hidden;transition:background .2s} .hl10-item.open{background:rgba(255,255,255,.07)} .hl10-header{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;cursor:pointer;user-select:none} .hl10-left{display:flex;align-items:center;gap:.85rem;flex:1;min-width:0} .hl10-icon{flex-shrink:0;width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center} .hl10-icon svg{width:18px;height:18px} .hl10-htitle{font-size:var(--fs-body,.9rem);font-weight:700;color:#fff} .hl10-hsub{font-size:var(--fs-xs,.75rem);color:rgba(255,255,255,.38);margin-top:.1rem} .hl10-tag{flex-shrink:0;font-size:var(--fs-xs,.65rem);font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .65rem;border-radius:99px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.4)} .hl10-chevron{flex-shrink:0;width:18px;height:18px;stroke:rgba(255,255,255,.3);transition:transform .25s;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round} .hl10-item.open .hl10-chevron{transform:rotate(180deg)} .hl10-body{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .25s} .hl10-item.open .hl10-body{max-height:300px;padding:0 1.25rem 1.25rem} .hl10-point{font-size:var(--fs-sm,.83rem);color:rgba(255,255,255,.55);padding:.4rem 0 .4rem 1.1rem;position:relative;line-height:1.55} .hl10-point::before{content:'';position:absolute;left:0;top:.75rem;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.2)} /* ── HL responsive ───────────────────────────────────────────── */ @media(max-width:768px){ .hl02-list{grid-template-columns:1fr 1fr} .hl05-steps{grid-template-columns:1fr 1fr} .hl05-step:nth-child(2) .hl05-num-wrap::after{display:none} .hl06-grid{grid-template-columns:1fr} .hl06-col:first-child .hl06-row{border-right:none} } @media(max-width:480px){ .hl02-list{grid-template-columns:1fr} .hl05-steps{grid-template-columns:1fr} .hl05-num-wrap::after{display:none !important} .hl09-label{min-width:130px} } /* ═══════════════════════════════════════════════════════════════════ §48 ICON WITH TEXT (IT-01 → IT-13) ═══════════════════════════════════════════════════════════════════ */ /* ── Shared ────────────────────────────────────────────────────── */ .it-wrap{max-width:1100px;margin:0 auto;padding:3.5rem clamp(1.25rem,4vw,2.5rem)} .sec.dark{background:#0f172a} .sec.dark .sec-label{color:rgba(255,255,255,.2);border-bottom-color:rgba(255,255,255,.06)} /* Global SVG reset for all IT icons */ .it-svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;display:block} /* Shared text primitives */ .eyebrow{font-size:var(--fs-xs,.68rem);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--primary-dark,#b8940a);margin-bottom:.75rem} .sec-h{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:900;color:var(--text-strong,#111827);line-height:1.15;margin-bottom:.75rem} .sec-sub{font-size:var(--fs-body,.95rem);color:var(--text-muted,#6b7280);line-height:1.7;margin-bottom:2.5rem} .intro-center{text-align:center;margin-bottom:2.75rem} .intro-center .sec-h{margin-bottom:.5rem} /* ── IT-01 · 3-Col Icon Top ────────────────────────────────────── */ .it01-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem} .it01-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.75rem} .it01-icon{width:52px;height:52px;border-radius:14px;background:var(--surface-color,#f8fafc);border:1px solid var(--card-border,#e5e7eb);display:flex;align-items:center;justify-content:center;color:var(--text-strong,#111827);flex-shrink:0} .it01-icon svg{width:22px;height:22px} .it01-item h3{font-size:var(--fs-body,.95rem);font-weight:700;color:var(--text-strong,#111827)} .it01-item p{font-size:var(--fs-sm,.83rem);color:var(--text-muted,#6b7280);line-height:1.65} /* ── IT-02 · Icon Left List ────────────────────────────────────── */ .it02-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.25rem 2.5rem} .it02-item{display:flex;gap:1rem;padding:.85rem .85rem;border-bottom:1px solid #f1f5f9;align-items:flex-start} .it02-icon{flex-shrink:0;width:52px;height:52px;border-radius:10px;background:var(--surface-color,#f8fafc);border:1px solid var(--card-border,#e5e7eb);display:flex;align-items:center;justify-content:center;color:var(--text-strong,#111827);padding:13px;box-sizing:border-box} .it02-icon svg{width:100%;height:100%} .it02-body h3{font-size:var(--fs-body,.9rem);font-weight:700;color:var(--text-strong,#111827);margin-bottom:.2rem} .it02-body p{font-size:var(--fs-sm,.82rem);color:var(--text-muted,#6b7280);line-height:1.6} /* ── IT-03 · 4-Col Colored Box Cards ──────────────────────────── */ .it03-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem} .it03-card{background:var(--card-bg,#fff);border:1px solid var(--card-border,#e5e7eb);border-radius:14px;padding:1.5rem;display:flex;flex-direction:column;gap:.6rem;transition:box-shadow .2s,transform .2s} .it03-card:hover{box-shadow:0 8px 32px rgba(0,0,0,.09);transform:translateY(-3px)} .it03-icon{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:.25rem} .it03-icon svg{width:20px;height:20px;stroke:#fff} .it03-icon.c1{background:#2563eb} .it03-icon.c2{background:#9333ea} .it03-icon.c3{background:#0891b2} .it03-icon.c4{background:#f59e0b} .it03-card h3{font-size:var(--fs-btn,.92rem);font-weight:700;color:var(--text-strong,#111827)} .it03-card p{font-size:var(--fs-sm,.82rem);color:var(--text-muted,#6b7280);line-height:1.6;flex:1} .it03-link{display:inline-flex;align-items:center;gap:.3rem;font-size:var(--fs-xs,.78rem);font-weight:700;color:var(--primary-dark,#b8940a);text-decoration:none;margin-top:.25rem} .it03-link svg{width:14px;height:14px} .it03-link:hover{text-decoration:underline} /* ── IT-04 · Dark Background ───────────────────────────────────── */ .it04-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem} .it04-item{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:2rem;display:flex;flex-direction:column;gap:.75rem;position:relative} .it04-badge{position:absolute;top:1.25rem;right:1.25rem;font-size:var(--fs-xs,.62rem);font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.22rem .6rem;border-radius:99px;background:rgba(252,215,3,.15);color:#fcd703} .it04-icon{width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7)} .it04-icon svg{width:22px;height:22px} .it04-item h3{font-size:1rem;font-weight:700;color:#fff} .it04-item p{font-size:var(--fs-sm,.83rem);color:rgba(255,255,255,.5);line-height:1.65} /* ── IT-05 · Numbered Steps ────────────────────────────────────── */ .it05-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;position:relative} .it05-grid::before{content:'';position:absolute;top:1.5rem;left:2rem;right:2rem;height:2px;background:linear-gradient(to right,var(--primary-color,#fcd703),#e5e7eb)} .it05-item{display:flex;flex-direction:column;gap:.6rem;padding-top:.5rem} .it05-num{width:48px;height:48px;border-radius:50%;background:var(--primary-color,#fcd703);color:var(--text-strong,#111827);font-size:var(--fs-sm,.82rem);font-weight:900;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;margin-bottom:.5rem;box-shadow:0 0 0 4px #fff,0 0 0 6px #e5e7eb} .it05-item h3{font-size:var(--fs-btn,.92rem);font-weight:700;color:var(--text-strong,#111827)} .it05-item p{font-size:var(--fs-sm,.82rem);color:var(--text-muted,#6b7280);line-height:1.6} /* ── IT-06 · Large Icon Bold Cards ────────────────────────────── */ .it06-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem} .it06-card{border-radius:18px;padding:2.25rem 2rem;position:relative;overflow:hidden;min-height:280px;display:flex;flex-direction:column;gap:.75rem} .it06-card.bg1{background:linear-gradient(135deg,#1e3a5f,#2563eb)} .it06-card.bg2{background:linear-gradient(135deg,#1a1a2e,#6d28d9)} .it06-card.bg3{background:linear-gradient(135deg,#064e3b,#059669)} .it06-bg-icon{position:absolute;right:-1rem;bottom:-1rem;opacity:.08;color:#fff;pointer-events:none} .it06-bg-icon svg{width:160px;height:160px} .it06-tag{font-size:var(--fs-xs,.62rem);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:.25rem} .it06-icon-wrap{width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;color:#fff} .it06-icon-wrap svg{width:24px;height:24px} .it06-card h3{font-size:1.05rem;font-weight:800;color:#fff;line-height:1.3} .it06-card p{font-size:var(--fs-sm,.83rem);color:rgba(255,255,255,.6);line-height:1.65;flex:1} /* ── IT-07 · Minimal Line Split ────────────────────────────────── */ .it07-split{display:grid;grid-template-columns:1fr 1.4fr;gap:4rem;align-items:center} .it07-intro h2{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:900;color:var(--text-strong,#111827);line-height:1.15;margin-bottom:1rem} .it07-intro p{font-size:var(--fs-sm,.88rem);color:var(--text-muted,#6b7280);line-height:1.7;margin-bottom:1.5rem} .it07-cta{display:inline-flex;align-items:center;gap:.35rem;font-size:var(--fs-sm,.85rem);font-weight:700;color:var(--text-strong,#111827);text-decoration:none} .it07-cta svg{width:16px;height:16px} .it07-cta:hover{color:var(--primary-dark,#b8940a)} .it07-list{display:flex;flex-direction:column;gap:0} .it07-item{display:flex;gap:1.1rem;padding:1.25rem 0;border-bottom:1px solid #f1f5f9;align-items:flex-start} .it07-item:last-child{border-bottom:none} .it07-icon{flex-shrink:0;width:40px;height:40px;border-radius:10px;background:var(--surface-color,#f8fafc);border:1px solid var(--card-border,#e5e7eb);display:flex;align-items:center;justify-content:center;color:var(--text-strong,#111827)} .it07-icon svg{width:18px;height:18px} .it07-body h3{font-size:var(--fs-body,.9rem);font-weight:700;color:var(--text-strong,#111827);margin-bottom:.25rem} .it07-body p{font-size:var(--fs-sm,.82rem);color:var(--text-muted,#6b7280);line-height:1.6} /* ── IT-08 · Bordered Offset Number ───────────────────────────── */ .it08-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem} .it08-card{background:var(--card-bg,#fff);border:1px solid var(--card-border,#e5e7eb);border-radius:14px;padding:1.75rem 1.5rem 1.5rem;position:relative} .it08-num{position:absolute;top:1rem;right:1.25rem;font-size:2rem;font-weight:900;color:#f1f5f9;line-height:1;letter-spacing:-.04em} .it08-icon{width:44px;height:44px;border-radius:11px;background:var(--text-strong,#111827);display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:1rem} .it08-icon svg{width:20px;height:20px} .it08-card h3{font-size:var(--fs-btn,.92rem);font-weight:700;color:var(--text-strong,#111827);margin-bottom:.4rem} .it08-card p{font-size:var(--fs-sm,.82rem);color:var(--text-muted,#6b7280);line-height:1.6} /* ── IT-09 · Split Image + Grid ────────────────────────────────── */ .it09-split{display:grid;grid-template-columns:1fr 1fr;min-height:500px} .it09-img{overflow:hidden} .it09-img img{width:100%;height:100%;object-fit:cover;display:block} .it09-body{padding:3.5rem clamp(2rem,4vw,3rem);display:flex;flex-direction:column;justify-content:center} .it09-body h2{font-size:clamp(1.4rem,2.5vw,1.9rem);font-weight:900;color:var(--text-strong,#111827);margin:.5rem 0} .it09-body>p{font-size:var(--fs-sm,.88rem);color:var(--text-muted,#6b7280);line-height:1.65;margin-bottom:1.75rem} .it09-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem 1.5rem} .it09-item{display:flex;gap:.75rem;align-items:flex-start} .it09-dot{flex-shrink:0;width:32px;height:32px;border-radius:8px;background:color-mix(in srgb,var(--primary-color,#fcd703) 14%,transparent);display:flex;align-items:center;justify-content:center;color:var(--primary-dark,#b8940a)} .it09-dot svg{width:15px;height:15px} .it09-item h4{font-size:var(--fs-sm,.84rem);font-weight:700;color:var(--text-strong,#111827);margin-bottom:.15rem} .it09-item p{font-size:var(--fs-xs,.78rem);color:var(--text-muted,#6b7280);line-height:1.55} /* ── IT-10 · Alternating Rows ──────────────────────────────────── */ .it10-row{display:flex;align-items:center;background:var(--card-bg,#fff);gap:0} .it10-row.rev{flex-direction:row-reverse;background:var(--surface-color,#f8fafc)} .it10-icon-panel{flex:0 0 280px;display:flex;align-items:center;justify-content:center;padding:3rem;color:var(--text-strong,#111827);background:inherit;min-height:220px} .it10-text{flex:1;padding:3rem clamp(1.5rem,4vw,3rem)} .it10-text .eyebrow{margin-bottom:.5rem} .it10-text h3{font-size:clamp(1.15rem,2.5vw,1.6rem);font-weight:800;color:var(--text-strong,#111827);line-height:1.25;margin-bottom:.75rem} .it10-text p{font-size:var(--fs-sm,.88rem);color:var(--text-muted,#6b7280);line-height:1.7;margin-bottom:1.1rem} .it10-link{display:inline-flex;align-items:center;gap:.35rem;font-size:var(--fs-sm,.82rem);font-weight:700;color:var(--text-strong,#111827);text-decoration:none} .it10-link svg{width:16px;height:16px} .it10-link:hover{color:var(--primary-dark,#b8940a)} /* ── IT-11 · Checklist Split ───────────────────────────────────── */ .it11-cols{display:grid;grid-template-columns:1fr 1.5fr;gap:4rem;align-items:start} .it11-intro h2{font-size:clamp(1.4rem,2.5vw,1.9rem);font-weight:900;color:var(--text-strong,#111827);line-height:1.2;margin-bottom:.75rem} .it11-intro p{font-size:var(--fs-sm,.88rem);color:var(--text-muted,#6b7280);line-height:1.7} .it11-list{display:flex;flex-direction:column;gap:.25rem} .it11-item{display:flex;gap:.85rem;padding:.85rem 0;border-bottom:1px solid #f1f5f9;align-items:flex-start} .it11-item:last-child{border-bottom:none} .it11-check{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:color-mix(in srgb,var(--primary-color,#fcd703) 18%,transparent);display:flex;align-items:center;justify-content:center;color:var(--primary-dark,#b8940a);margin-top:.1rem} .it11-check svg{width:11px;height:11px} .it11-body h4{font-size:var(--fs-sm,.88rem);font-weight:700;color:var(--text-strong,#111827);margin-bottom:.2rem} .it11-body p{font-size:var(--fs-sm,.8rem);color:var(--text-muted,#6b7280);line-height:1.6} /* ── IT-12 · Pill Tag SaaS ─────────────────────────────────────── */ .it12-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem} .it12-item{background:var(--card-bg,#fff);border:1px solid var(--card-border,#e5e7eb);border-radius:14px;padding:1.5rem;display:flex;flex-direction:column;gap:.6rem;transition:box-shadow .2s} .it12-item:hover{box-shadow:0 6px 24px rgba(0,0,0,.07)} .it12-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.28rem .7rem .28rem .3rem;border-radius:99px;background:var(--surface-color,#f8fafc);border:1px solid var(--card-border,#e5e7eb);width:fit-content;margin-bottom:.25rem} .it12-pill-icon{width:22px;height:22px;border-radius:50%;background:var(--text-strong,#111827);display:flex;align-items:center;justify-content:center;color:#fff} .it12-pill-icon svg{width:11px;height:11px} .it12-pill-label{font-size:var(--fs-xs,.68rem);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted,#6b7280)} .it12-item h3{font-size:var(--fs-btn,.92rem);font-weight:700;color:var(--text-strong,#111827)} .it12-item p{font-size:var(--fs-sm,.82rem);color:var(--text-muted,#6b7280);line-height:1.6;flex:1} /* ── IT-13 · Accordion + Image ─────────────────────────────────── */ .it13-cols{display:grid;grid-template-columns:1fr 1.2fr;gap:3.5rem;align-items:start} .it13-img{border-radius:16px;overflow:hidden;position:sticky;top:5rem} .it13-img img{width:100%;height:100%;object-fit:cover;display:block} .it13-accordion{display:flex;flex-direction:column;gap:.25rem} .it13-panel{border-bottom:1px solid #f1f5f9} .it13-panel:last-child{border-bottom:none} .it13-trigger{width:100%;display:flex;align-items:center;gap:.85rem;padding:.9rem .5rem .9rem .75rem;background:none;border:none;cursor:pointer;text-align:left} .it13-t-icon{flex-shrink:0;width:36px;height:36px;border-radius:9px;background:var(--surface-color,#f8fafc);border:1px solid var(--card-border,#e5e7eb);display:flex;align-items:center;justify-content:center;color:var(--text-strong,#111827);transition:background .2s,border-color .2s} .it13-t-icon svg{width:16px;height:16px} .it13-panel.open .it13-t-icon{background:var(--primary-color,#fcd703);border-color:var(--primary-color,#fcd703)} .it13-t-title{flex:1;font-size:var(--fs-btn,.92rem);font-weight:700;color:var(--text-strong,#111827)} .it13-chevron{flex-shrink:0;color:var(--text-muted,#94a3b8);transition:transform .25s} .it13-chevron svg{width:16px;height:16px;stroke:#94a3b8;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:2} .it13-panel.open .it13-chevron{transform:rotate(180deg)} .it13-body{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .25s} .it13-panel.open .it13-body{max-height:200px;padding:0 0 1rem 3.3rem} /* -------------------------------------------------------------- §49 Marquee Templates (MQ-01 – MQ-07) -------------------------------------------------------------- */ /* ── Shared marquee primitives ──────────────────────────────── */ @keyframes mqLeft { from{transform:translateX(0)} to{transform:translateX(-50%)} } @keyframes mqRight { from{transform:translateX(-50%)} to{transform:translateX(0)} } .mq-overflow { overflow:hidden; width:100%; } .mq-track { display:flex; align-items:center; width:max-content; white-space:nowrap; } .mq-track.left { animation:mqLeft var(--dur,30s) linear infinite; } .mq-track.right { animation:mqRight var(--dur,30s) linear infinite; } .mq-track:hover { animation-play-state:paused; } .mq-fade { -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%); mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%); } .mq-chip { display:inline-flex; align-items:center; gap:.5rem; padding:.45rem 1rem; background:var(--surface-color,#f8fafc); border:1px solid var(--card-border,#e5e7eb); border-radius:99px; font-size:var(--fs-sm,.82rem); font-weight:600; color:var(--text-strong,#111); margin:0 .4rem; white-space:nowrap; } .mq-chip svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; } /* ── MQ-01 · Hero Image + Centered Scroller ────────────────── */ #mq01 { position:relative; min-height:75vh; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; } .mq01-bg { position:absolute; inset:0; background:#0f172a; } .mq01-bg img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:opacity 1.8s ease; } .mq01-bg::after { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(to bottom,rgba(0,0,0,.05) 0%,rgba(0,0,0,.45) 55%,rgba(0,0,0,.85) 100%); } /* scroller above text */ .mq01-scroller { order:0; position:relative; z-index:2; padding:1.75rem 0 1.25rem; } .mq01-scroller .mq-fade { -webkit-mask-image:none; mask-image:none; } /* no edge fade */ .mq01-top { order:1; position:relative; z-index:2; padding:1rem 3.5rem 3rem; max-width:820px; display:flex; flex-direction:column; gap:1rem; } .mq01-eyebrow { display:inline-flex; align-items:center; gap:.65rem; font-size:var(--fs-xs,.7rem); font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--primary-color,#fcd703); } .mq01-eyebrow::before { content:''; display:block; width:30px; height:2px; background:var(--primary-color,#fcd703); border-radius:2px; flex-shrink:0; } .mq01-sub { font-size:clamp(1rem,1.6vw,1.2rem); color:rgba(255,255,255,.78); line-height:1.75; margin:0; max-width:560px; font-weight:400; } .mq01-btns { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:.25rem; } .mq01-btn-p { padding:.72rem 1.9rem; background:var(--primary-color,#fcd703); color:var(--text-strong,#111); border-radius:99px; font-size:var(--fs-sm,.88rem); font-weight:800; text-decoration:none; } .mq01-btn-s { padding:.72rem 1.9rem; background:rgba(255,255,255,.1); color:#fff; border:1.5px solid rgba(255,255,255,.28); border-radius:99px; font-size:var(--fs-sm,.88rem); font-weight:600; text-decoration:none; } .mq01-item { font-size:clamp(3.2rem,7vw,6.5rem); font-weight:900; color:#fff; text-transform:lowercase; padding:0 1.5rem; letter-spacing:-.03em; line-height:1; } .mq01-dot { font-size:clamp(2.5rem,5.5vw,5rem); color:var(--primary-color,#fcd703); font-weight:900; padding:0 .2rem; } @media(max-width:768px){ #mq01 { min-height:80vh; } .mq01-top { padding:1rem 1.5rem 2.5rem; } .mq01-item { font-size:clamp(2.4rem,10vw,4rem); } } /* ── MQ-02 · Feature Chip Rows ─────────────────────────────── */ #mq02 { padding:4rem 0; } .mq02-head { text-align:center; padding:0 1.5rem 2.5rem; } .mq02-head h2 { font-size:clamp(1.6rem,3vw,2.4rem); font-weight:900; color:var(--text-strong,#111); margin:0 0 .5rem; } .mq02-head p { font-size:var(--fs-body,.9rem); color:var(--text-muted,#6b7280); margin:0; } .mq02-rows { display:flex; flex-direction:column; gap:1rem; } /* ── MQ-03 · Dark Dual-Row ──────────────────────────────────── */ #mq03 { background:#0f172a; padding:3rem 0; overflow:hidden; } .mq03-row { padding:.5rem 0; } .mq03-item { font-size:clamp(2.5rem,6vw,5rem); font-weight:600; color:rgba(255,255,255,.85); text-transform:lowercase; padding:0 1.5rem; letter-spacing:-.02em; } .mq03-item .period { color:var(--primary-color,#fcd703); } /* ── MQ-04 · Outlined Text ──────────────────────────────────── */ #mq04 { padding:4rem 0; overflow:hidden; } .mq04-label { text-align:center; font-size:var(--fs-xs,.72rem); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted,#6b7280); margin-bottom:1.5rem; } .mq04-row { padding:.3rem 0; } .mq04-item { font-size:clamp(3rem,7vw,6rem); font-weight:900; color:transparent; -webkit-text-stroke:2px #111; text-transform:uppercase; padding:0 1.5rem; line-height:1.1; } .mq04-item.light-outline { -webkit-text-stroke:2px #d1d5db; } .mq04-sep { display:inline-block; width:12px; height:12px; border-radius:50%; background:#111; vertical-align:middle; margin:0 .5rem; } .mq04-item.light-outline ~ .mq04-sep,.mq04-row:last-child .mq04-sep { background:#d1d5db; } /* ── MQ-04a · Solid Light Color ─────────────────────────────── */ #mq04a { padding:4rem 0; overflow:hidden; } .mq04a-label { text-align:center; font-size:var(--fs-xs,.72rem); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted,#6b7280); margin-bottom:1.5rem; } .mq04a-row { padding:.3rem 0; } .mq04a-item { font-size:clamp(3rem,7vw,6rem); font-weight:900; color:#c8d0db; text-transform:uppercase; padding:0 1.5rem; line-height:1.1; } .mq04a-item.light { color:#e2e8f0; } .mq04a-sep { display:inline-block; width:12px; height:12px; border-radius:50%; background:#c8d0db; vertical-align:middle; margin:0 .5rem; } .mq04a-sep.light { background:#e2e8f0; } /* ── MQ-04b · Outlined Text — Primary Color Stroke ──────────── */ #mq04b { padding:4rem 0; overflow:hidden; } .mq04b-label { text-align:center; font-size:var(--fs-xs,.72rem); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted,#6b7280); margin-bottom:1.5rem; } .mq04b-row { padding:.3rem 0; overflow:hidden; } .mq04b-item { font-size:var(--mq-size,clamp(3rem,7vw,6rem)); font-weight:900; color:transparent; -webkit-text-stroke:var(--mq-stroke-width,2px) var(--mq-stroke,var(--primary-color,#fcd703)); text-transform:uppercase; padding:0 1.5rem; line-height:1.1; } .mq04b-item.muted { -webkit-text-stroke:var(--mq-stroke-width,2px) color-mix(in srgb, var(--mq-stroke,var(--primary-color,#fcd703)) 35%, transparent); } .mq04b-sep { display:inline-block; width:12px; height:12px; border-radius:50%; background:var(--mq-sep,var(--primary-color,#fcd703)); vertical-align:middle; margin:0 .5rem; } .mq04b-sep.muted { background:color-mix(in srgb, var(--mq-sep,var(--primary-color,#fcd703)) 35%, transparent); } /* ── MQ-05 · Dark Scrolling-BG + Foreground Card ───────────── */ #mq05 { position:relative; background:#0f172a; overflow:hidden; min-height:480px; display:flex; align-items:center; justify-content:center; padding:5rem 1.5rem; } .mq05-bg { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-around; pointer-events:none; } .mq05-bg-row { padding:.4rem 0; } .mq05-bg-item { font-size:clamp(2rem,5vw,4rem); font-weight:900; color:rgba(255,255,255,.06); text-transform:uppercase; padding:0 1.5rem; letter-spacing:.05em; } .mq05-fg { position:relative; z-index:1; background:rgba(255,255,255,.05); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.12); border-radius:1.5rem; padding:3rem 3.5rem; max-width:560px; text-align:center; display:flex; flex-direction:column; gap:1rem; align-items:center; } .mq05-badge { padding:.3rem .9rem; background:var(--primary-color,#fcd703); border-radius:99px; font-size:var(--fs-xs,.68rem); font-weight:800; color:#111; text-transform:uppercase; letter-spacing:.08em; } .mq05-heading { font-size:clamp(1.8rem,4vw,3rem); font-weight:900; color:#fff; margin:0; line-height:1.15; } .mq05-sub { font-size:var(--fs-body,.9rem); color:rgba(255,255,255,.65); line-height:1.7; margin:0; } .mq05-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.75rem; background:var(--primary-color,#fcd703); color:#111; border-radius:99px; font-size:var(--fs-sm,.82rem); font-weight:800; text-decoration:none; } .mq05-btn svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* ── MQ-06 · Light Scrolling-BG + Foreground Card ──────────── */ #mq06 { position:relative; background:var(--surface-color,#f8fafc); overflow:hidden; min-height:480px; display:flex; align-items:center; justify-content:center; padding:5rem 1.5rem; } .mq06-bg { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-around; pointer-events:none; } .mq06-bg-row { padding:.4rem 0; } .mq06-bg-item { font-size:clamp(2rem,5vw,4rem); font-weight:900; color:rgba(100,116,139,.08); text-transform:uppercase; padding:0 1.5rem; letter-spacing:.05em; } .mq06-fg { position:relative; z-index:1; background:var(--card-bg,#fff); border:1px solid var(--card-border,#e5e7eb); border-radius:1.5rem; padding:3rem 3.5rem; max-width:560px; text-align:center; display:flex; flex-direction:column; gap:1rem; align-items:center; box-shadow:0 8px 32px rgba(0,0,0,.08); } .mq06-badge { padding:.3rem .9rem; background:#fefce8; border-radius:99px; font-size:var(--fs-xs,.68rem); font-weight:800; color:var(--primary-dark,#b8940a); text-transform:uppercase; letter-spacing:.08em; } .mq06-heading { font-size:clamp(1.8rem,4vw,3rem); font-weight:900; color:var(--text-strong,#111); margin:0; line-height:1.15; } .mq06-sub { font-size:var(--fs-body,.9rem); color:var(--text-muted,#6b7280); line-height:1.7; margin:0; } .mq06-btns { display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; } .mq06-btn-p { padding:.65rem 1.5rem; background:var(--primary-color,#fcd703); color:#111; border-radius:99px; font-size:var(--fs-sm,.82rem); font-weight:800; text-decoration:none; } .mq06-btn-s { padding:.65rem 1.5rem; background:var(--surface-color,#f1f5f9); color:var(--text-strong,#111); border-radius:99px; font-size:var(--fs-sm,.82rem); font-weight:700; text-decoration:none; } /* ── MQ-07 · No-Image Hero Dark ────────────────────────────── */ #mq07 { background:#0f172a; overflow:hidden; display:flex; flex-direction:column; } .mq07-top { padding:5rem 3rem 3rem; max-width:700px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:1.25rem; } .mq07-eyebrow { font-size:var(--fs-xs,.72rem); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--primary-color,#fcd703); } .mq07-sub { font-size:var(--fs-body,1rem); color:rgba(255,255,255,.7); line-height:1.75; margin:0; } .mq07-btns { display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; } .mq07-btn-p { padding:.65rem 1.6rem; background:var(--primary-color,#fcd703); color:#111; border-radius:99px; font-size:var(--fs-sm,.82rem); font-weight:800; text-decoration:none; } .mq07-btn-s { padding:.65rem 1.6rem; background:rgba(255,255,255,.1); color:#fff; border:1.5px solid rgba(255,255,255,.2); border-radius:99px; font-size:var(--fs-sm,.82rem); font-weight:700; text-decoration:none; } .mq07-scroller { padding:2rem 0 4rem; border-top:1px solid rgba(255,255,255,.08); } .mq07-item { font-size:clamp(2.5rem,6vw,5rem); font-weight:800; color:#fff; text-transform:lowercase; padding:0 1.5rem; } .mq07-dot { font-size:clamp(2rem,5vw,4rem); color:var(--primary-color,#fcd703); padding:0 .3rem; } @media(max-width:768px){ .mq01-top,.mq07-top { padding:3rem 1.5rem 2rem; } .mq05-fg,.mq06-fg { padding:2rem 1.5rem; } } .it13-body p{font-size:var(--fs-sm,.83rem);color:var(--text-muted,#6b7280);line-height:1.7} /* ── IT responsive ─────────────────────────────────────────────── */ @media(max-width:1024px){ .it07-split,.it11-cols,.it13-cols{grid-template-columns:1fr} .it13-img{position:static;max-height:280px} .it09-split{grid-template-columns:1fr} .it09-img{max-height:300px} } @media(max-width:768px){ .it01-grid{grid-template-columns:repeat(2,1fr)} .it02-grid,.it03-grid,.it05-grid,.it06-grid,.it08-grid,.it12-grid{grid-template-columns:repeat(2,1fr)} .it04-grid{grid-template-columns:1fr} .it05-grid::before{display:none} .it10-row,.it10-row.rev{flex-direction:column} .it10-icon-panel{flex:none;width:100%;min-height:120px;padding:2rem} } @media(max-width:480px){ .it01-grid,.it02-grid,.it03-grid,.it05-grid,.it06-grid,.it08-grid,.it09-grid,.it12-grid{grid-template-columns:1fr} } /* ══════════════════════════════════════════════════════════════════ §50 Media / Video Templates — VP-01 through VP-08 ══════════════════════════════════════════════════════════════════ */ /* shared */ .mv-wrap { max-width:1100px; margin:0 auto; padding:0 1.5rem; } .sec.black { background:#0a0a0a; } /* play triangle */ .play-tri { display:block; width:0; height:0; border-top:9px solid transparent; border-bottom:9px solid transparent; border-left:16px solid currentColor; margin-left:3px; } @keyframes playPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(255,255,255,.55); } 50%{ box-shadow:0 0 0 14px rgba(255,255,255,0); } } @keyframes playPulseGold { 0%,100%{ box-shadow:0 0 0 0 rgba(252,215,3,.6); } 50%{ box-shadow:0 0 0 14px rgba(252,215,3,0); } } .vp01-btn,.vp05-playbtn,.vp07-circle,.vp03-inner { animation:playPulse 2s ease-in-out infinite; } .vp02-playbtn,.vp06-play-circle { animation:playPulseGold 2s ease-in-out infinite; } /* modal */ .yt-modal { display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.88); align-items:center; justify-content:center; } .yt-modal.open { display:flex; } .yt-modal-inner { position:relative; width:min(92vw,960px); aspect-ratio:16/9; background:#000; border-radius:4px; overflow:hidden; } .yt-modal-inner iframe { width:100%; height:100%; border:none; } .yt-close { position:absolute; top:-2.5rem; right:0; background:none; border:none; color:#fff; font-size:1.4rem; cursor:pointer; line-height:1; padding:.25rem .5rem; } /* VP-01 */ .vp01-outer { position:relative; border-radius:12px; overflow:hidden; cursor:pointer; } .vp01-outer:hover .vp01-btn { transform:translate(-50%,-50%) scale(1.1); } .vp01-img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; } .vp01-btn { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:72px; height:72px; border-radius:50%; background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center; color:#111; transition:transform .2s,background .2s; box-shadow:0 4px 24px rgba(0,0,0,.25); } .vp01-btn:hover { background:var(--card-bg,#fff); } /* VP-02 */ .vp02-frame-wrap { background:#1a1a1a; border-radius:16px; padding:2.5rem; max-width:800px; margin:0 auto; box-shadow:0 20px 60px rgba(0,0,0,.5); } .vp02-dots { display:flex; gap:.5rem; margin-bottom:1rem; } .vp02-dots span { width:10px; height:10px; border-radius:50%; background:#333; } .vp02-dots span:first-child { background:#ff5f56; } .vp02-dots span:nth-child(2) { background:#ffbd2e; } .vp02-dots span:nth-child(3) { background:#27c93f; } .vp02-screen { position:relative; border-radius:8px; overflow:hidden; cursor:pointer; } .vp02-screen img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; } .vp02-playbtn { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:50%; background:var(--primary-color,#fcd703); display:flex; align-items:center; justify-content:center; color:#111; transition:transform .2s; box-shadow:0 4px 20px rgba(0,0,0,.4); } .vp02-screen:hover .vp02-playbtn { transform:translate(-50%,-50%) scale(1.1); } /* VP-03 */ .vp03-outer { position:relative; overflow:hidden; cursor:pointer; } .vp03-outer img { width:100%; aspect-ratio:21/7; object-fit:cover; display:block; filter:grayscale(1); transition:filter .4s; } .vp03-outer:hover img { filter:grayscale(.3); } .vp03-badge-wrap { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:160px; height:160px; display:flex; align-items:center; justify-content:center; cursor:pointer; } .vp03-ring { position:absolute; inset:0; animation:rotBadge 10s linear infinite; } .vp03-ring svg { width:100%; height:100%; fill:none; } .vp03-ring text { fill:#fff; font-size:13px; font-weight:700; letter-spacing:1px; } @keyframes rotBadge { to { transform:rotate(360deg); } } .vp03-inner { position:relative; width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center; color:#111; } /* VP-04 */ .vp04-outer { position:relative; border-radius:12px; overflow:hidden; aspect-ratio:16/7; } .vp04-iframe-wrap { position:absolute; inset:-10%; pointer-events:none; } .vp04-iframe-wrap iframe { width:100%; height:100%; border:none; } .vp04-overlay { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:3rem; background:linear-gradient(to right,rgba(0,0,0,.75) 0%,rgba(0,0,0,.4) 60%,transparent 100%); } .vp04-overlay h2 { font-size:clamp(1.6rem,4vw,3rem); font-weight:900; color:#fff; margin:.5rem 0 1rem; line-height:1.15; } .vp04-overlay p { font-size:var(--fs-body,.9rem); color:rgba(255,255,255,.8); max-width:460px; line-height:1.7; } .vp04-tag { display:inline-block; padding:.3rem .9rem; background:var(--primary-color,#fcd703); border-radius:99px; font-size:var(--fs-xs,.7rem); font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#111; margin-bottom:.5rem; } .vp04-note { margin-top:.75rem; font-size:var(--fs-xs,.72rem); color:var(--text-muted,#94a3b8); text-align:center; } .vp04-note code { background:var(--surface-color,#f1f5f9); padding:.1rem .4rem; border-radius:4px; } /* VP-05 */ .vp05-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; } .vp05-text { display:flex; flex-direction:column; gap:1.25rem; } .vp05-text h2 { font-size:clamp(1.6rem,3vw,2.6rem); font-weight:900; color:#fff; margin:0; line-height:1.2; } .vp05-text p { font-size:var(--fs-body,.9rem); color:rgba(255,255,255,.7); line-height:1.7; margin:0; } .vp05-stat-row { display:flex; gap:2rem; } .vp05-stat strong { display:block; font-size:1.6rem; font-weight:900; color:#fff; } .vp05-stat span { display:block; font-size:var(--fs-xs,.72rem); color:rgba(255,255,255,.5); font-weight:600; } .vp05-watch { display:inline-flex; align-items:center; gap:.75rem; color:var(--primary-color,#fcd703); font-weight:800; font-size:var(--fs-sm,.88rem); text-decoration:none; } .vp05-watch .play-tri { border-left-color:var(--primary-color,#fcd703); } .vp05-video { position:relative; border-radius:12px; overflow:hidden; cursor:pointer; } .vp05-video img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; transition:transform .4s; } .vp05-video:hover img { transform:scale(1.04); } .vp05-playbtn { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; color:#111; } .vp05-duration { position:absolute; bottom:.75rem; right:.75rem; background:rgba(0,0,0,.7); color:#fff; font-size:var(--fs-xs,.68rem); font-weight:700; padding:.2rem .55rem; border-radius:4px; } /* VP-06 */ .vp06-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; } .vp06-card { border-radius:12px; overflow:hidden; background:var(--card-bg,#fff); box-shadow:0 2px 12px rgba(0,0,0,.08); cursor:pointer; transition:box-shadow .2s,transform .2s; } .vp06-card:hover { box-shadow:0 8px 32px rgba(0,0,0,.14); transform:translateY(-3px); } .vp06-thumb { position:relative; overflow:hidden; } .vp06-thumb img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; transition:transform .35s; } .vp06-card:hover .vp06-thumb img { transform:scale(1.06); } .vp06-chip { position:absolute; top:.75rem; left:.75rem; background:var(--primary-color,#fcd703); color:#111; font-size:var(--fs-xs,.65rem); font-weight:800; padding:.25rem .65rem; border-radius:99px; letter-spacing:.05em; text-transform:uppercase; } .vp06-dur { position:absolute; bottom:.65rem; right:.65rem; background:rgba(0,0,0,.72); color:#fff; font-size:var(--fs-xs,.65rem); font-weight:700; padding:.2rem .5rem; border-radius:4px; } .vp06-play-circle { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.8); opacity:0; width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; color:#111; transition:opacity .2s,transform .2s; } .vp06-card:hover .vp06-play-circle { opacity:1; transform:translate(-50%,-50%) scale(1); } .vp06-body { padding:1rem 1.1rem 1.2rem; } .vp06-cat { font-size:var(--fs-xs,.68rem); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--primary-color,#b8940a); margin-bottom:.4rem; } .vp06-body h3 { font-size:var(--fs-body,.95rem); font-weight:800; color:#111; margin:0 0 .75rem; line-height:1.35; } .vp06-meta { display:flex; align-items:center; gap:.65rem; font-size:var(--fs-xs,.72rem); color:var(--text-muted,#94a3b8); } .vp06-avatar { width:28px; height:28px; border-radius:50%; overflow:hidden; flex-shrink:0; } .vp06-avatar img { width:100%; height:100%; object-fit:cover; } /* VP-07 */ .vp07-outer { display:flex; flex-direction:column; align-items:center; gap:1.5rem; } .vp07-eyebrow { font-size:var(--fs-xs,.72rem); font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--primary-color,#fcd703); } .vp07-outer h2 { font-size:clamp(1.5rem,3vw,2.4rem); font-weight:900; color:#111; margin:0; text-align:center; } .vp07-stage { position:relative; width:100%; border-radius:14px; overflow:hidden; cursor:pointer; } .vp07-stage img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; } .vp07-overlay { position:absolute; inset:0; background:rgba(0,0,0,.25); transition:background .2s; } .vp07-stage:hover .vp07-overlay { background:rgba(0,0,0,.4); } .vp07-playbtn { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:.75rem; color:#fff; } .vp07-playbtn span { font-size:var(--fs-sm,.8rem); font-weight:700; letter-spacing:.06em; text-transform:uppercase; } .vp07-circle { width:72px; height:72px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; color:#111; transition:transform .2s; } .vp07-stage:hover .vp07-circle { transform:scale(1.08); } .vp07-reel { display:flex; gap:1rem; overflow-x:auto; width:100%; padding-bottom:.5rem; scrollbar-width:thin; } .vp07-thumb-pill { border-radius:10px; overflow:hidden; flex-shrink:0; width:160px; cursor:pointer; border:3px solid transparent; transition:border-color .2s; opacity:.65; transition:opacity .2s,border-color .2s; } .vp07-thumb-pill.active { border-color:var(--primary-color,#fcd703); opacity:1; } .vp07-thumb-pill img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; } /* VP-08 */ .vp08-outer { position:relative; height:90vh; min-height:500px; overflow:hidden; } .vp08-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .vp08-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.35) 60%,rgba(0,0,0,.1) 100%); } .vp08-content { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:4rem 3rem; } .vp08-content h1 { font-size:clamp(2rem,5vw,4rem); font-weight:900; color:#fff; margin:.5rem 0 1rem; line-height:1.1; } .vp08-content p { font-size:var(--fs-btn,.92rem); color:rgba(255,255,255,.75); max-width:560px; line-height:1.7; margin-bottom:1.5rem; } .vp08-btn { display:inline-block; padding:.75rem 2rem; background:var(--primary-color,#fcd703); color:#111; font-weight:800; border-radius:99px; text-decoration:none; font-size:var(--fs-sm,.88rem); } .vp08-mute-btn { display:none; } .vp08-note { font-size:var(--fs-xs,.72rem); color:var(--text-muted,#64748b); } .vp08-note code { background:var(--surface-color,#f1f5f9); padding:.1rem .4rem; border-radius:4px; } /* §50 responsive */ @media(max-width:768px){ .vp05-grid { grid-template-columns:1fr; gap:2rem; } .vp06-grid { grid-template-columns:repeat(2,1fr); } .vp03-badge-wrap { right:5%; width:120px; height:120px; } .vp08-content { padding:2.5rem 1.5rem; } } @media(max-width:480px){ .vp06-grid { grid-template-columns:1fr; } .vp07-thumb-pill { width:120px; } } /* ══════════════════════════════════════════════════════════════════ §51 Parallax Scrolling — PX-01…PX-06 ══════════════════════════════════════════════════════════════════ */ /* ── Shared primitives ── */ .pxs-half { position:relative; min-height:460px; overflow:hidden; } .pxs-full { position:relative; height:96vh; min-height:560px; overflow:hidden; } .pxs-img .pxs-bg { position:absolute; inset:0; background-attachment:fixed; background-size:cover; background-position:center; } .pxs-grad { background:var(--px-grad,linear-gradient(135deg,#1e3a5f,#7c3aed)); } .pxs-overlay { position:absolute; inset:0; background:rgba(0,0,0,.45); pointer-events:none; } .pxs-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2rem; color:#fff; z-index:2; } .pxs-grad .pxs-center { position:relative; inset:auto; min-height:inherit; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:4rem 2rem; } .pxs-center .eyebrow { color:var(--primary-color,#fcd703); } .pxs-center h1,.pxs-center h2 { font-size:clamp(1.8rem,5vw,4rem); font-weight:900; margin:.5rem 0 1.25rem; line-height:1.1; color:#fff; } .pxs-center p { font-size:var(--fs-body,.95rem); color:rgba(255,255,255,.82); line-height:1.8; max-width:540px; margin-bottom:2rem; } .pxs-btn { display:inline-block; padding:.75rem 2.25rem; background:rgba(255,255,255,.15); color:#fff; font-weight:800; border-radius:99px; text-decoration:none; font-size:var(--fs-sm,.88rem); border:2px solid rgba(255,255,255,.5); backdrop-filter:blur(4px); transition:background .2s; } .pxs-btn:hover { background:rgba(255,255,255,.28); } /* PX-05 multi-section fixed backgrounds */ .pxm-section { position:relative; height:96vh; min-height:560px; overflow:hidden; display:flex; align-items:center; justify-content:center; } .pxm-section::before { content:''; position:absolute; inset:0; background-image:var(--pxm-img); background-attachment:fixed; background-size:cover; background-position:center; } .pxm-overlay { position:absolute; inset:0; background:rgba(0,0,0,.52); } .pxm-text { position:relative; z-index:2; text-align:center; color:#fff; max-width:720px; padding:0 2rem; } .pxm-num { font-size:6rem; font-weight:900; color:var(--primary-color,#fcd703); line-height:1; margin-bottom:.1rem; opacity:.9; } .pxm-text h2 { font-size:clamp(2rem,5vw,4rem); font-weight:900; margin:0 0 1.25rem; line-height:1.1; } .pxm-text p { font-size:var(--fs-body,.95rem); color:rgba(255,255,255,.82); line-height:1.8; max-width:520px; margin:0 auto; } .pxm-scroll-hint { position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:.45rem; color:rgba(255,255,255,.7); font-size:var(--fs-xs,.65rem); font-weight:700; letter-spacing:.12em; text-transform:uppercase; } .pxm-mouse { width:22px; height:34px; border:2px solid rgba(255,255,255,.5); border-radius:11px; display:flex; justify-content:center; padding-top:5px; } .pxm-wheel { width:3px; height:7px; background:var(--card-bg,#fff); border-radius:2px; animation:wheelDrop 1.6s ease-in-out infinite; } @keyframes wheelDrop { 0%,100%{transform:translateY(0);opacity:1} 65%{transform:translateY(10px);opacity:0} } /* PX-06 Ken Burns scale zoom */ .pxz-outer { position:relative; height:96vh; min-height:560px; overflow:hidden; display:flex; align-items:center; justify-content:center; } .pxz-bg { position:absolute; inset:-8%; transform-origin:center; animation:kenBurns 9s ease-in-out infinite alternate; } .pxz-bg img { width:100%; height:100%; object-fit:cover; display:block; } @keyframes kenBurns { 0%{ transform:scale(1) translate(0,0); } 100%{ transform:scale(1.35) translate(-2%,2%); } } .pxz-overlay { position:absolute; inset:0; background:linear-gradient(to bottom,rgba(0,0,0,.25) 0%,rgba(0,0,0,.65) 100%); } .pxz-content { position:relative; z-index:2; text-align:center; color:#fff; padding:2rem; max-width:760px; animation:pxzRise 1.2s ease both; } @keyframes pxzRise { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} } .pxz-content .eyebrow { color:var(--primary-color,#fcd703); } .pxz-content h1 { font-size:clamp(2.2rem,6vw,5rem); font-weight:900; margin:.5rem 0 1.25rem; line-height:1.05; letter-spacing:-.02em; } .pxz-content p { font-size:var(--fs-body,.95rem); color:rgba(255,255,255,.82); line-height:1.8; max-width:540px; margin:0 auto 2rem; } /* §PX Responsive — iOS Safari background-attachment:fixed fix + mobile sizing */ @media (max-width:768px) { /* iOS Safari ignores background-attachment:fixed — switch to scroll so image shows */ .pxs-img .pxs-bg { background-attachment:scroll; background-size:cover; } .pxm-section::before { background-attachment:scroll; background-size:cover; } /* Reduce tall sections on small viewports */ .pxs-full { height:70vh; min-height:420px; } .pxm-section { height:70vh; min-height:420px; } .pxz-outer { height:70vh; min-height:420px; } /* Clamp stat numbers in pxm */ .pxm-num { font-size:4rem; } } @media (max-width:480px) { .pxs-center h1,.pxs-center h2 { font-size:clamp(1.5rem,7vw,2.5rem); } .pxs-center p { font-size:var(--fs-sm,.85rem); margin-bottom:1.5rem; } .pxm-text h2 { font-size:clamp(1.6rem,7vw,2.8rem); } .pxm-text p { font-size:var(--fs-sm,.85rem); } .pxm-num { font-size:3.2rem; } .pxm-scroll-hint { display:none; } .px05-stat-row { gap:1.5rem; } } /* -------------------------------------------------------------- §52 Process Steps (PS-01 – PS-12) -------------------------------------------------------------- */ /* ── PS-01 Icon + Connector horizontal ── */ .ps01-track { display:flex; flex-wrap:wrap; gap:0; position:relative; } .ps01-step { flex:1; min-width:160px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.75rem; position:relative; padding:1.5rem 1rem; } .ps01-step:not(:last-child)::after { content:''; position:absolute; top:2.1rem; left:calc(50% + 2.2rem); width:calc(100% - 4.4rem); height:2px; background:linear-gradient(90deg,var(--primary-color,#fcd703),#e2e8f0); } .ps01-icon { position:relative; width:68px; height:68px; border-radius:50%; border:2.5px solid var(--primary-color,#fcd703); display:flex; align-items:center; justify-content:center; background:#fffbeb; } .ps01-icon svg { width:26px; height:26px; stroke:var(--text-strong,#0f172a); stroke-width:1.8; fill:none; } .ps01-num { position:absolute; top:-8px; right:-8px; width:22px; height:22px; border-radius:50%; background:var(--primary-color,#fcd703); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:var(--fs-xs,.62rem); color:var(--text-strong,#0f172a); line-height:1; } .ps01-step h3 { font-size:var(--fs-sm,.88rem); font-weight:800; color:var(--text-strong,#0f172a); margin:0; } .ps01-step p { font-size:var(--fs-xs,.78rem); color:var(--text-muted,#64748b); line-height:1.65; margin:0; } /* ── PS-02 Vertical Timeline ── */ .ps02-track { display:flex; flex-direction:column; gap:0; position:relative; padding-left:3rem; } .ps02-track::before { content:''; position:absolute; left:1.15rem; top:.75rem; bottom:.75rem; width:2px; background:linear-gradient(180deg,var(--primary-color,#fcd703),#e2e8f0); } .ps02-step { display:flex; gap:1.5rem; position:relative; padding-bottom:2.5rem; } .ps02-step:last-child { padding-bottom:0; } .ps02-dot { position:absolute; left:-2.7rem; top:.15rem; width:2rem; height:2rem; border-radius:50%; background:var(--primary-color,#fcd703); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:var(--fs-xs,.65rem); color:var(--text-inverse,#fff); border:3px solid var(--bg-color,#fff); box-shadow:0 0 0 3px var(--primary-color,#fcd703); flex-shrink:0; } .ps02-body { flex:1; } .ps02-tag { display:inline-block; padding:.2rem .65rem; background:color-mix(in srgb,var(--primary-color,#fcd703) 18%,var(--bg-color,#fff)); border-radius:99px; font-size:var(--fs-xs,.68rem); font-weight:800; color:var(--text-color,#374151); margin-bottom:.4rem; } .ps02-body h3 { font-size:var(--fs-body,.93rem); font-weight:800; color:var(--text-strong,#0f172a); margin:0 0 .3rem; } .ps02-body p { font-size:var(--fs-sm,.83rem); color:var(--text-muted,#64748b); line-height:1.7; margin:0; } /* ── PS-03 Zigzag / Alternating Timeline ── */ .ps03-track { display:flex; flex-direction:column; gap:0; } .ps03-step { display:grid; grid-template-columns:1fr 60px 1fr; align-items:center; gap:1.5rem; padding:2rem 0; } .ps03-step:not(:last-child) { border-bottom:1px solid #f1f5f9; } .ps03-left, .ps03-right { padding:1rem; } .ps03-left { text-align:right; } .ps03-right { text-align:left; } .ps03-node { width:60px; height:60px; border-radius:50%; background:var(--primary-color,#fcd703); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 4px 16px rgba(252,215,3,.35); } .ps03-node svg { width:26px; height:26px; stroke:var(--text-strong,#0f172a); stroke-width:1.8; fill:none; } .ps03-year { display:inline-block; font-size:var(--fs-xs,.7rem); font-weight:900; letter-spacing:.06em; color:var(--primary-color,#fcd703); margin-bottom:.4rem; text-transform:uppercase; } .ps03-left h3, .ps03-right h3 { font-size:var(--fs-body,.95rem); font-weight:800; color:var(--text-strong,#0f172a); margin:0 0 .35rem; } .ps03-left p, .ps03-right p { font-size:var(--fs-sm,.82rem); color:var(--text-muted,#64748b); line-height:1.7; margin:0; } /* ── PS-04 Cards with Background Number ── */ .ps04-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1.5rem; } .ps04-card { position:relative; padding:1.75rem; background:var(--card-bg,#fff); border-radius:var(--card-radius,12px); box-shadow:var(--card-shadow,0 2px 12px rgba(15,23,42,.08)); display:flex; flex-direction:column; gap:.6rem; overflow:hidden; border-top:4px solid var(--primary-color,#fcd703); transition:box-shadow .2s,transform .2s; } .ps04-card:hover { box-shadow:var(--card-shadow-hover,0 8px 32px rgba(15,23,42,.15)); transform:translateY(-3px); } .ps04-bg-num { position:absolute; right:-.25rem; bottom:-.75rem; font-size:7rem; font-weight:900; line-height:1; color:rgba(252,215,3,.12); pointer-events:none; user-select:none; } .ps04-num { font-size:var(--fs-xs,.7rem); font-weight:900; letter-spacing:.1em; color:var(--primary-color,#fcd703); text-transform:uppercase; } .ps04-icon { width:40px; height:40px; border-radius:.5rem; background:#fefce8; display:flex; align-items:center; justify-content:center; } .ps04-icon svg { width:20px; height:20px; stroke:var(--text-strong,#0f172a); stroke-width:1.8; fill:none; } .ps04-card h3 { font-size:var(--fs-body,.9rem); font-weight:800; color:var(--text-strong,#0f172a); margin:0; } .ps04-card p { font-size:var(--fs-sm,.82rem); color:var(--text-muted,#64748b); line-height:1.65; margin:0; flex:1; } /* ── PS-05 Dark 5-column strip ── */ .ps05-track { display:flex; flex-wrap:wrap; background:#0f172a; } .ps05-step { flex:1; min-width:160px; padding:2.5rem 1.5rem; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.85rem; border-bottom:3px solid transparent; transition:border-color .2s,background .2s; } .ps05-step:hover { background:#1e293b; border-bottom-color:var(--primary-color,#fcd703); } .ps05-step:not(:last-child) { border-right:1px solid rgba(255,255,255,.07); } .ps05-n { font-size:2rem; font-weight:900; color:var(--primary-color,#fcd703); line-height:1; } .ps05-icon-wrap { width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; } .ps05-icon-wrap svg { width:24px; height:24px; stroke:rgba(255,255,255,.7); stroke-width:1.8; fill:none; } .ps05-step h3 { font-size:var(--fs-sm,.88rem); font-weight:800; color:#fff; margin:0; } .ps05-step p { font-size:var(--fs-xs,.78rem); color:rgba(255,255,255,.55); line-height:1.65; margin:0; } /* ── PS-06 Dark Ribbon Strip (redesigned) ── */ .ps06-track { display:flex; flex-wrap:wrap; border-radius:var(--card-radius,12px); overflow:hidden; background:#0f172a; } .ps06-step { flex:1; min-width:150px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.5rem; padding:2.5rem 2rem; position:relative; border-right:1px solid rgba(255,255,255,.06); } .ps06-step:last-child { border-right:none; } .ps06-step:hover { background:rgba(255,255,255,.04); } .ps06-num { font-size:2.8rem; font-weight:900; color:var(--primary-color,#fcd703); line-height:1; letter-spacing:-.04em; } .ps06-body h3 { font-size:var(--fs-sm,.88rem); font-weight:800; color:#fff; margin:0 0 .3rem; } .ps06-body p { font-size:var(--fs-xs,.77rem); color:rgba(255,255,255,.5); line-height:1.6; margin:0; } .ps06-arrow { position:absolute; right:-12px; top:50%; transform:translateY(-50%); width:24px; height:24px; border-radius:50%; background:var(--primary-color,#fcd703); display:flex; align-items:center; justify-content:center; z-index:3; } .ps06-step:last-child .ps06-arrow { display:none; } .ps06-arrow svg { width:14px; height:14px; stroke:#0f172a; stroke-width:2.5; fill:none; } /* ── PS-07 Split Image + Dark Step List ── */ .ps07-wrap { display:flex; flex-wrap:wrap; min-height:560px; } .ps07-img { flex:1; min-width:280px; overflow:hidden; } .ps07-img img { width:100%; height:100%; object-fit:cover; display:block; } .ps07-content { flex:1; min-width:280px; background:#0f172a; padding:3.5rem 3rem; display:flex; flex-direction:column; gap:1.25rem; justify-content:center; } .ps07-eyebrow { font-size:var(--fs-xs,.7rem); font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:var(--primary-color,#fcd703); } .ps07-content h2 { font-size:clamp(1.4rem,2.5vw,2rem); font-weight:900; color:#fff; margin:0; line-height:1.25; } .ps07-step { display:flex; gap:1.25rem; align-items:flex-start; } .ps07-dot { width:36px; height:36px; border-radius:50%; background:var(--primary-color,#fcd703); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:var(--fs-xs,.7rem); color:var(--text-strong,#0f172a); flex-shrink:0; margin-top:.15rem; } .ps07-body { flex:1; } .ps07-body h3 { font-size:var(--fs-sm,.88rem); font-weight:800; color:#fff; margin:0 0 .3rem; } .ps07-body p { font-size:var(--fs-sm,.8rem); color:rgba(255,255,255,.55); line-height:1.7; margin:0; } /* ── PS-08 Gradient Tint Cards ── */ .ps08-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1.25rem; } .ps08-card { padding:1.75rem 1.5rem; background:linear-gradient(135deg,#fffbeb 0%,#fff 60%); border-radius:var(--card-radius,12px); box-shadow:var(--card-shadow,0 2px 12px rgba(15,23,42,.08)); display:flex; flex-direction:column; gap:.5rem; position:relative; transition:box-shadow .2s,transform .2s; border-left:4px solid var(--primary-color,#fcd703); } .ps08-card:hover { box-shadow:var(--card-shadow-hover,0 8px 32px rgba(15,23,42,.15)); transform:translateY(-4px); } .ps08-step-num { font-size:2.2rem; font-weight:900; color:var(--primary-color,#fcd703); line-height:1; } .ps08-icon { width:44px; height:44px; border-radius:50%; background:var(--card-bg,#fff); display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(15,23,42,.1); } .ps08-icon svg { width:20px; height:20px; stroke:var(--text-strong,#0f172a); stroke-width:1.8; fill:none; } .ps08-card h3 { font-size:var(--fs-sm,.88rem); font-weight:800; color:var(--text-strong,#0f172a); margin:0; } .ps08-card p { font-size:var(--fs-sm,.8rem); color:var(--text-muted,#64748b); line-height:1.65; margin:0; flex:1; } /* ── PS-09 Accordion Steps ── */ .ps09-list { display:flex; flex-direction:column; gap:.5rem; max-width:760px; margin:0 auto; } .ps09-item { border:1.5px solid var(--card-border,#e2e8f0); border-radius:var(--card-radius,12px); overflow:hidden; background:var(--card-bg,#fff); transition:border-color .2s,box-shadow .2s; } .ps09-item.open { border-color:var(--primary-color,#fcd703); box-shadow:0 4px 20px rgba(252,215,3,.18); } .ps09-btn { display:flex; align-items:center; gap:1rem; padding:1.1rem 1.25rem; cursor:pointer; background:transparent; border:none; width:100%; text-align:left; } .ps09-item.open .ps09-btn { background:#fffbeb; } .ps09-n { width:30px; height:30px; border-radius:50%; background:var(--primary-color,#fcd703); display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs,.72rem); font-weight:900; color:var(--text-strong,#0f172a); flex-shrink:0; } .ps09-title { flex:1; font-size:var(--fs-body,.9rem); font-weight:800; color:var(--text-strong,#0f172a); } .ps09-chevron { width:20px; height:20px; stroke:var(--text-muted,#64748b); stroke-width:2; fill:none; transition:transform .3s; flex-shrink:0; } .ps09-item.open .ps09-chevron { transform:rotate(180deg); } .ps09-body { max-height:0; overflow:hidden; transition:max-height .35s cubic-bezier(.4,0,.2,1); } .ps09-item.open .ps09-body { max-height:400px; } .ps09-inner { padding:.75rem 1.25rem 1.25rem; font-size:var(--fs-sm,.85rem); color:var(--text-muted,#64748b); line-height:1.8; } /* ── PS-10 Connector Dots ── */ .ps10-track { display:flex; flex-wrap:wrap; position:relative; gap:0; } .ps10-track::before { content:''; position:absolute; top:1.5rem; left:10%; right:10%; height:2px; background:linear-gradient(90deg,var(--primary-color,#fcd703),#e2e8f0,var(--primary-color,#fcd703)); } .ps10-step { flex:1; min-width:140px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.6rem; padding:0 .75rem 1.5rem; position:relative; } .ps10-circle { width:48px; height:48px; border-radius:50%; background:var(--primary-color,#fcd703); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(252,215,3,.4); position:relative; z-index:1; } .ps10-circle svg { width:22px; height:22px; stroke:var(--text-strong,#0f172a); stroke-width:1.8; fill:none; } .ps10-badge { display:inline-block; padding:.15rem .6rem; background:#fef9c3; border-radius:99px; font-size:var(--fs-xs,.65rem); font-weight:800; color:#92400e; } .ps10-step h3 { font-size:var(--fs-sm,.85rem); font-weight:800; color:var(--text-strong,#0f172a); margin:0; } .ps10-step p { font-size:var(--fs-xs,.77rem); color:var(--text-muted,#64748b); line-height:1.65; margin:0; } /* ── PS-11 Bold Two-Column ── */ .ps11-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2.5rem 3rem; } .ps11-step { display:flex; gap:1.5rem; align-items:flex-start; } .ps11-num { font-size:3.5rem; font-weight:900; line-height:1; color:var(--primary-color,#fcd703); flex-shrink:0; width:3rem; text-align:right; } .ps11-body { flex:1; padding-top:.35rem; } .ps11-body h3 { font-size:var(--fs-body,.95rem); font-weight:800; color:var(--text-strong,#0f172a); margin:0 0 .4rem; } .ps11-body p { font-size:var(--fs-sm,.83rem); color:var(--text-muted,#64748b); line-height:1.75; margin:0 0 .75rem; } .ps11-link { display:inline-flex; align-items:center; gap:.35rem; font-size:var(--fs-xs,.78rem); font-weight:700; color:var(--primary-color,#fcd703); text-decoration:none; } .ps11-link svg { width:16px; height:16px; stroke:currentColor; stroke-width:2; fill:none; transition:transform .2s; } .ps11-link:hover svg { transform:translateX(4px); } /* ── PS-12 Circular Center Timeline ── */ .ps12-track { display:flex; flex-direction:column; max-width:860px; margin:0 auto; } .ps12-step { display:grid; grid-template-columns:1fr 64px 1fr; align-items:stretch; min-height:120px; } .ps12-left { text-align:right; padding:.75rem 1.5rem; display:flex; align-items:center; justify-content:flex-end; } .ps12-right { text-align:left; padding:.75rem 1.5rem; display:flex; align-items:center; } .ps12-node-wrap { display:flex; flex-direction:column; align-items:center; } .ps12-line { flex:1; width:2px; background:linear-gradient(180deg,var(--primary-color,#fcd703),#e2e8f0); min-height:24px; } .ps12-node { width:40px; height:40px; border-radius:50%; background:var(--primary-color,#fcd703); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:var(--fs-sm,.8rem); color:var(--text-strong,#0f172a); flex-shrink:0; box-shadow:0 4px 12px rgba(252,215,3,.4); } .ps12-step-inner h3 { font-size:var(--fs-body,.9rem); font-weight:800; color:var(--text-strong,#0f172a); margin:0 0 .3rem; } .ps12-step-inner p { font-size:var(--fs-sm,.8rem); color:var(--text-muted,#64748b); line-height:1.7; margin:0; } /* ── §52 responsive ── */ @media (max-width:768px) { .ps11-grid { grid-template-columns:1fr; } .ps12-step { grid-template-columns:0 64px 1fr; } .ps12-left { display:none; } .ps12-right { text-align:left; } .ps03-step { grid-template-columns:0 60px 1fr; } .ps03-left { display:none; } .ps03-right { text-align:left; } } @media (max-width:640px) { .ps01-step:not(:last-child)::after { display:none; } .ps05-track { flex-direction:column; } .ps05-step { border-right:none !important; border-bottom:1px solid rgba(255,255,255,.07); } .ps06-step { min-width:100%; } .ps10-track::before { display:none; } } /* §T — Alternating Vertical Timeline (about_us / composed pages) */ .tl-wrap{position:relative} .tl-line{position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--card-border,#e5e7eb);transform:translateX(-50%);z-index:0} .tl-grid{display:grid;grid-template-columns:1fr 44px 1fr;align-items:center;gap:0;margin-bottom:3rem;position:relative;z-index:1} .tl-grid:last-child{margin-bottom:0} .tl-dot{justify-self:center} .tl-left{text-align:right;padding-right:2.5rem} .tl-right{padding-left:2.5rem} .story-img{position:relative;padding-bottom:1.5rem} @media(max-width:640px){ .tl-grid{grid-template-columns:40px 1fr;gap:0 .75rem} .tl-left{grid-column:2;grid-row:1;text-align:left!important;padding-right:0!important} .tl-dot{grid-column:1;grid-row:1;justify-self:center} .tl-right{grid-column:2;padding-left:0} .tl-empty{display:none!important} .tl-line{display:none} .story-img{padding-bottom:2.5rem} } /* -------------------------------------------------------------- §53 Banner Slider (slider.html) -------------------------------------------------------------- */ /* gap between sliders */ .slider-gap { height:5rem; background:#f5f5f5; } /* pdx-bg — parallax background layer */ .pdx-bg { position:absolute; inset:-10%; width:120%; height:120%; overflow:hidden; } .pdx-bg img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } /* hide empty-src images so broken-image placeholders never overlay content */ img[src=""] { display: none !important; } /* snav — shared nav button */ .snav { position:absolute; top:50%; transform:translateY(-50%); z-index:30; width:44px; height:44px; border-radius:50%; background:var(--snav-bg,rgba(255,255,255,.13)); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid var(--snav-border,rgba(255,255,255,.18)); color:var(--snav-color,rgba(255,255,255,.9)); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s,transform .2s,color .2s; } .snav:hover { background:var(--snav-hover,rgba(255,255,255,.24)); color:var(--snav-hover-color,currentColor); transform:translateY(-50%) scale(1.08); } .snav-l { left:1.25rem; } .snav-r { right:1.25rem; } .snav.snav-swiper-disabled { opacity:.35; } .snav-dk { background:rgba(255,255,255,.88); border-color:rgba(0,0,0,.08); } .snav-dk:hover { background:var(--card-bg,#fff); } .snav-lg { width:60px; height:60px; } /* pl-snav — Paushtik Life split-slider inline nav button Brand primary from settings. Normal flow (never absolute). Visible on mobile. */ .pl-snav{width:40px;height:40px;border-radius:50%;background:var(--primary-dark,var(--primary-color));border:1px solid var(--primary-dark,var(--primary-color));cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s,transform .2s,border-color .2s;flex-shrink:0;color:var(--text-inverse,#fff);transform:scale(1.1)} .pl-snav:hover{background:var(--text-inverse,#fff);color:var(--primary-dark,var(--primary-color));border-color:var(--primary-dark,var(--primary-color));transform:scale(1.2);opacity:1} /* PrismSlide ghost text + slide number */ .prism-ghost { position:absolute; top:50%; left:35%; transform:translate(-50%,-52%); font-size:clamp(8rem,18vw,17rem); font-weight:900; color:rgba(255,255,255,.035); letter-spacing:-.06em; white-space:nowrap; pointer-events:none; user-select:none; z-index:1; line-height:1; } .prism-num { position:absolute; bottom:2rem; right:2.5rem; font-size:var(--fs-xs,.68rem); font-weight:800; letter-spacing:.18em; color:rgba(255,255,255,.2); z-index:5; } /* Ken Burns slide image — must fill slide fully */ .kb-img { position:absolute; inset:-4%; width:108%; height:108%; object-fit:cover; transform-origin:center center; display:block; } /* kbTxt: full-overlay, centered slides */ .kb-txt-area, .kb-txt-area .swiper, .kb-txt-area .swiper-wrapper { height:100% !important; background:transparent !important; } .kb-txt-area .swiper-slide { height:100% !important; } .kb-slide-text { max-width:600px; } .kb-slide-text h2 { text-shadow:0 2px 20px rgba(0,0,0,.7); } .kb-slide-text p { text-shadow:0 1px 10px rgba(0,0,0,.6); } .kb-slide-btns { display:flex; flex-direction:row; gap:1rem; justify-content:center; align-items:center; flex-wrap:wrap; } .kb-centered-slide { pointer-events:auto; } @keyframes kbPan { 0%{ transform:scale(1.12); } 100%{ transform:scale(1); } } .kb-img.kb-active { animation:kbPan 6s ease-out forwards; } /* CoverFlow — fixed card dimensions */ .cf-slider .swiper-slide { width:260px; height:360px; border-radius:14px; overflow:hidden; flex-shrink:0; transition:box-shadow .3s; } .cf-slider .swiper-slide img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s; } .cf-slider .swiper-slide-active { box-shadow:0 24px 60px rgba(0,0,0,.35); } .cf-slider .swiper-slide-active img { transform:scale(1.05); } /* FullBleed progress bar override */ .fb-slider .swiper-pagination-progressbar { height:3px; background:rgba(255,255,255,.12); } .fb-slider .swiper-pagination-progressbar-fill { background:#e8b84b; } /* Swiper pagination — force center on all custom pag containers */ .swiper-pagination { text-align:center !important; } .swiper-pagination-bullets.swiper-pagination-horizontal, .hc-pag, .sr-pag, .tp-pag, .oc-pag, .od-pag, .oe-pag, .cd-pag, .kb-pag, .pd-pag, .cube-pag, .prism-pag, .cs-pag, .cf-pag, .fb-pag, .at-pag { left:50% !important; right:auto !important; width:auto !important; transform:translateX(-50%) !important; } /* Global bullets — neutral gray (safe on both light and dark without extra classes) */ .swiper-pagination-bullet { background:#c8cdd6; opacity:1; } .swiper-pagination-bullet-active { background:var(--primary-color,#e8b84b); } /* All custom inline pagination strips — override Swiper's absolute positioning */ [id$="Pag"] { position:static !important; display:flex !important; align-items:center; gap:.5rem; width:auto !important; transform:none !important; bottom:auto !important; margin:0 !important; } [id$="Pag"] .swiper-pagination-bullet { opacity:1; width:8px; height:8px; flex-shrink:0; background:#c8cdd6; } [id$="Pag"].dark-pag .swiper-pagination-bullet { background:rgba(255,255,255,.25); } [id$="Pag"] .swiper-pagination-bullet-active { background:var(--primary-color,#e8b84b) !important; width:20px; border-radius:4px; } /* All custom prev/next nav buttons — Swiper adds swiper-button-prev/next classes with position:absolute; override */ [id$="Prev"], [id$="Next"] { position:static !important; top:auto !important; margin-top:0 !important; transform:none !important; } /* Swiper hides buttons it thinks are disabled — keep them visible */ [id$="Prev"].swiper-button-disabled, [id$="Next"].swiper-button-disabled { opacity:.35; pointer-events:none; } /* ═══════════════════════════════════════════════════════════════════ §54 STACK SECTIONS — ST-01 … ST-05 ═══════════════════════════════════════════════════════════════════ */ /* ── ST-01 Light Card Stack ─────────────────────────────────── */ .st01-wrap { position:relative; } .st01-card { position:sticky; top:0; min-height:100vh; display:flex; align-items:center; padding:5rem 0; } .st01-card[data-color="white"] { background:var(--card-bg,#fff); } .st01-card[data-color="slate"] { background:var(--surface-color,#f8fafc); } .st01-card[data-color="cream"] { background:#fefce8; } .st01-card[data-color="blue"] { background:#eff6ff; } .st01-inner { max-width:1200px; margin:0 auto; padding:0 2.5rem; width:100%; display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; } .st01-left { display:flex; flex-direction:column; gap:1.25rem; } .st01-num { font-size:3.5rem; font-weight:900; color:var(--primary-color,#fcd703); line-height:1; letter-spacing:-.04em; } .st01-tag { display:inline-block; font-size:var(--fs-xs,.65rem); font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--primary-color,#fcd703); background:color-mix(in srgb,var(--primary-color,#fcd703) 12%,transparent); padding:.3rem .9rem; border-radius:99px; } .st01-h { font-size:clamp(1.6rem,2.8vw,2.4rem); font-weight:800; color:var(--text-strong,#0f172a); line-height:1.15; letter-spacing:-.03em; margin:0; } .st01-body { font-size:var(--fs-body,.97rem); color:var(--text-color,#475569); line-height:1.7; max-width:440px; margin:0; } .st01-cta { display:inline-flex; align-items:center; gap:.5rem; font-size:var(--fs-sm,.85rem); font-weight:700; color:var(--text-strong,#0f172a); text-decoration:none; } .st01-cta:hover { color:var(--primary-color,#fcd703); } .st01-cta svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; transition:transform .2s; } .st01-cta:hover svg { transform:translateX(4px); } .st01-right { position:relative; } .st01-img-wrap { border-radius:16px; overflow:hidden; aspect-ratio:4/3; } .st01-img-wrap img { width:100%; height:100%; object-fit:cover; display:block; } .st01-float-badge { position:absolute; bottom:-1.5rem; left:-1.5rem; background:var(--card-bg,#fff); border-radius:12px; padding:1rem 1.25rem; display:flex; align-items:center; gap:.85rem; box-shadow:0 8px 30px rgba(0,0,0,.12); min-width:190px; } .st01-badge-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .st01-badge-icon svg { width:20px; height:20px; stroke:#fff; fill:none; stroke-width:2; } .st01-badge-text { font-size:var(--fs-sm,.85rem); font-weight:800; color:var(--text-strong,#0f172a); } .st01-badge-sub { font-size:var(--fs-xs,.68rem); color:var(--text-muted,#94a3b8); margin-top:.1rem; } /* ── ST-02 Full-Screen Image Stack ──────────────────────────── */ .st02-wrap { position:relative; } .st02-card { position:sticky; top:0; height:100vh; overflow:hidden; } .st02-bg { position:absolute; inset:0; } .st02-bg img { width:100%; height:100%; object-fit:cover; display:block; } .st02-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.25) 60%,transparent 100%); } .st02-content { position:absolute; bottom:0; left:0; z-index:2; padding:3.5rem 4rem; max-width:700px; color:#fff; } .st02-num { font-size:var(--fs-xs,.7rem); font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:.85rem; } .st02-h { font-size:clamp(2rem,4.5vw,3.5rem); font-weight:900; line-height:1.06; letter-spacing:-.04em; margin:0 0 1rem; } .st02-sub { font-size:var(--fs-body,.97rem); color:rgba(255,255,255,.65); line-height:1.65; max-width:480px; margin:0 0 1.75rem; } .st02-cta { display:inline-flex; align-items:center; gap:.5rem; font-size:var(--fs-sm,.88rem); font-weight:700; color:#fff; text-decoration:none; border:2px solid rgba(255,255,255,.35); padding:.7rem 1.5rem; border-radius:99px; transition:background .2s,border-color .2s; } .st02-cta:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.7); } .st02-cta svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; } /* ── ST-03 Dark Numbered Process Stack ──────────────────────── */ .st03-wrap { position:relative; background:#0f172a; } .st03-card { position:sticky; top:0; min-height:100vh; display:flex; align-items:center; background:#0f172a; } .st03-inner { max-width:1200px; margin:0 auto; padding:5rem 2.5rem; width:100%; display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; } .st03-left { position:relative; display:flex; flex-direction:column; gap:1.5rem; } .st03-ghost-num { position:absolute; top:-1rem; left:-1rem; font-size:clamp(6rem,10vw,9rem); font-weight:900; color:rgba(255,255,255,.04); line-height:1; pointer-events:none; user-select:none; letter-spacing:-.06em; } .st03-label { font-size:var(--fs-xs,.65rem); font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--accent,#0ea5e9); } .st03-h { font-size:clamp(1.8rem,3vw,2.6rem); font-weight:800; color:#fff; line-height:1.12; letter-spacing:-.03em; margin:0; } .st03-body { font-size:var(--fs-body,.97rem); color:var(--text-muted,#94a3b8); line-height:1.7; max-width:400px; margin:0; } .st03-cta { display:inline-flex; align-items:center; gap:.5rem; font-size:var(--fs-sm,.85rem); font-weight:700; color:var(--accent,#0ea5e9); text-decoration:none; } .st03-cta svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; transition:transform .2s; } .st03-cta:hover svg { transform:translateX(4px); } .st03-right { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; } .st03-feat { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:12px; padding:1.5rem; display:flex; flex-direction:column; gap:.75rem; transition:background .2s; } .st03-feat:hover { background:rgba(255,255,255,.07); } .st03-feat-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .st03-feat-icon svg { width:22px; height:22px; fill:none; stroke-width:1.75; } .st03-feat-title { font-size:var(--fs-sm,.87rem); font-weight:700; color:#fff; } .st03-feat-text { font-size:var(--fs-sm,.8rem); color:var(--text-muted,#64748b); line-height:1.55; } /* ── ST-04 Portfolio Case Study Stack ───────────────────────── */ .st04-wrap { position:relative; } .st04-card { position:sticky; top:0; min-height:100vh; display:flex; align-items:stretch; background:var(--card-bg,#fff); transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .4s; transform-origin:center top; } .st04-card.st-buried { transform:scale(.96); opacity:.82; } .st04-img-col { position:relative; flex:0 0 48%; overflow:hidden; } .st04-img-col img { width:100%; height:100%; object-fit:cover; display:block; } .st04-img-num { position:absolute; bottom:2rem; left:2rem; font-size:var(--fs-xs,.7rem); font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.45); padding:.4rem 1rem; border-radius:99px; backdrop-filter:blur(6px); } .st04-text-col { flex:1; padding:5rem 4rem 5rem 5rem; display:flex; flex-direction:column; justify-content:center; gap:1.25rem; } .st04-cat { font-size:var(--fs-xs,.68rem); font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--primary-color,#fcd703); } .st04-h { font-size:clamp(1.6rem,2.6vw,2.4rem); font-weight:800; color:var(--text-strong,#0f172a); line-height:1.15; letter-spacing:-.03em; margin:0; } .st04-body { font-size:var(--fs-body,.97rem); color:var(--text-color,#475569); line-height:1.7; margin:0; max-width:460px; } .st04-tags { display:flex; flex-wrap:wrap; gap:.5rem; } .st04-tag { font-size:var(--fs-xs,.72rem); font-weight:700; color:var(--text-color,#475569); background:var(--surface-color,#f1f5f9); padding:.3rem .85rem; border-radius:99px; } .st04-link { display:inline-flex; align-items:center; gap:.5rem; font-size:var(--fs-body,.9rem); font-weight:700; color:var(--text-strong,#0f172a); text-decoration:none; margin-top:.5rem; } .st04-link svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; transition:transform .2s; } .st04-link:hover svg { transform:translateX(4px); } /* ── ST-05 Split Color Panel Stack ──────────────────────────── */ .st05-wrap { position:relative; } .st05-card { position:sticky; top:0; min-height:100vh; display:flex; transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .4s; transform-origin:center top; } .st05-card.st-buried { transform:scale(.96); opacity:.82; } .st05-left { flex:0 0 50%; display:flex; flex-direction:column; justify-content:center; gap:1.5rem; padding:5rem 4rem 5rem 5rem; background:var(--card-bg,#fff); } .st05-right { flex:1; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; } .st05-right-img { position:absolute; inset:0; } .st05-right-img img { width:100%; height:100%; object-fit:cover; display:block; } .st05-right-overlay { position:absolute; inset:0; opacity:.88; } .st05-right-content { position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center; gap:.75rem; } .big-word { font-size:clamp(4rem,9vw,8rem); font-weight:900; color:#fff; letter-spacing:-.05em; line-height:1; } .big-label { font-size:var(--fs-sm,.8rem); font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.65); } .st05-step { font-size:var(--fs-xs,.68rem); font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--primary-color,#fcd703); } .st05-h { font-size:clamp(1.5rem,2.4vw,2.1rem); font-weight:800; color:var(--text-strong,#0f172a); line-height:1.18; letter-spacing:-.03em; margin:0; max-width:400px; } .st05-body { font-size:var(--fs-body,.97rem); color:var(--text-color,#475569); line-height:1.7; margin:0; max-width:400px; } .st05-stats { display:flex; gap:2.5rem; } .st05-stat-num { font-size:1.8rem; font-weight:900; color:var(--text-strong,#0f172a); line-height:1.1; } .st05-stat-lbl { font-size:var(--fs-xs,.72rem); color:var(--text-muted,#94a3b8); font-weight:600; margin-top:.2rem; } .st05-btn { display:inline-flex; align-items:center; gap:.5rem; font-size:var(--fs-sm,.88rem); font-weight:700; color:var(--text-strong,#0f172a); text-decoration:none; background:rgba(15,23,42,.07); padding:.7rem 1.5rem; border-radius:99px; transition:background .2s; margin-top:.25rem; width:fit-content; } .st05-btn:hover { background:rgba(15,23,42,.13); } .st05-btn svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; transition:transform .2s; } .st05-btn:hover svg { transform:translateX(4px); } /* §54 responsive */ @media(max-width:768px){ .st01-inner,.st03-inner { grid-template-columns:1fr; gap:2.5rem; } .st01-float-badge { display:none; } .st03-right { grid-template-columns:1fr; } .st02-content { padding:2.5rem 1.5rem; } .st04-card { flex-direction:column; } .st04-img-col { flex:0 0 40vh; } .st04-text-col { padding:2.5rem 1.5rem; } .st05-card { flex-direction:column; } .st05-left { flex:0 0 auto; padding:3rem 1.5rem; } .st05-right { flex:0 0 45vh; } } /* ═══════════════════════════════════════════════════════════════════ §55 STICKY COLUMNS — SC-01 … SC-06 ═══════════════════════════════════════════════════════════════════ */ /* ── Shared scroll-panel animation ──────────────────────────────── */ @keyframes scPanelIn { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} } /* ── SC-01 / SC-02 — Full-screen images + sticky text overlay ───── */ .sc01-wrap { position:relative; } /* Image stack — 4 natural 100vh blocks = 400vh scroll height */ .sc01-img { height:100vh; position:relative; overflow:hidden; } /* Ghost: blurred full-cover bg layer */ .img-ghost { position:absolute; inset:-5%; width:110%; height:110%; object-fit:cover; filter:blur(40px) brightness(.3); z-index:0; transition:filter .6s; } /* Main: crisp full-cover image */ .img-main { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; transform:scale(1.06); transition:transform .8s ease; } .sc01-img.active .img-main { transform:scale(1); } /* SC-02 single bare img (no ghost/main classes) — contained product shot */ .sc01-img > img:not(.img-ghost):not(.img-main) { position:absolute; max-width:65%; max-height:82vh; object-fit:contain; top:50%; left:58%; transform:translate(-50%,-50%); z-index:1; display:block; } .sc01-counter { position:absolute; bottom:1.75rem; right:2rem; z-index:10; font-size:var(--fs-xs,.62rem); font-weight:800; letter-spacing:.18em; color:rgba(255,255,255,.4); text-transform:uppercase; } /* Text overlay — absolute outer, sticky inner */ .sc01-text-col { position:absolute; top:0; left:0; width:100%; height:100%; z-index:20; pointer-events:none; } .sc01-text-sticky { position:sticky; top:0; height:100vh; display:flex; align-items:center; gap:1.25rem; padding:0 4% 0 5%; pointer-events:none; } .sc01-dots { display:flex; flex-direction:column; gap:.65rem; flex-shrink:0; pointer-events:auto; } .sc01-dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.28); cursor:pointer; transition:background .3s,transform .3s; } .sc01-dot.active { background:var(--card-bg,#fff); transform:scale(1.5); } .sc01-textbox { pointer-events:auto; } .sc01-panels { display:grid; } .sc01-panel { grid-area:1/1; display:flex; flex-direction:column; gap:1rem; width:clamp(280px,32vw,360px); background:rgba(0,0,0,.54); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:2rem 1.75rem; opacity:0; transform:translateY(14px); transition:opacity .5s ease,transform .5s ease; pointer-events:none; } .sc01-panel.active { opacity:1; transform:translateY(0); pointer-events:auto; } .sc01-tag { font-size:clamp(.62rem,.8vw,.72rem); font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#e8b84b; } .sc01-num { font-size:clamp(2.6rem,5vw,3.8rem); font-weight:900; color:#fff; line-height:1; letter-spacing:-.04em; } .sc01-heading { font-size:clamp(2rem,3.5vw,3rem); font-weight:900; color:#fff; line-height:1.05; letter-spacing:-.03em; margin:0; } .sc01-body { font-size:clamp(.9rem,1.1vw,1rem); color:rgba(255,255,255,.65); line-height:1.7; margin:0; } .sc01-btn { display:inline-flex; align-items:center; gap:.5rem; font-size:clamp(.82rem,1vw,.92rem); font-weight:800; color:var(--text-strong,#0f172a); background:#e8b84b; text-decoration:none; padding:.7rem 1.5rem; border-radius:99px; transition:background .2s,transform .15s; width:fit-content; } .sc01-btn:hover { background:#fcd703; transform:translateY(-2px); } .sc01-btn svg { width:14px; height:14px; flex-shrink:0; transition:transform .2s; } .sc01-btn:hover svg { transform:translateX(3px); } /* ── SC-03 / SC-04 — Split layout: sticky left text + right image ─ */ .v-tint { background:#0d2a21; } .sc-wrap { display:grid; grid-template-columns:42% 1fr; min-height:400vh; position:relative; } .sc-left { position:sticky; top:0; height:100vh; align-self:start; display:flex; flex-direction:column; justify-content:center; gap:1.5rem; padding:4rem 3.5rem; overflow:hidden; } .sc-dots { display:flex; gap:.6rem; margin-bottom:.25rem; } .sc-dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.22); cursor:pointer; transition:background .3s,transform .3s; } .sc-dot.active { background:#e8b84b; transform:scale(1.5); } .sc-text-panels { position:relative; } .sc-text-panel { display:none; flex-direction:column; gap:.85rem; } .sc-text-panel.active { display:flex; animation:scPanelIn .4s ease both; } .scs-tag { font-size:var(--fs-xs,.72rem); font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#86efac; } .sc-num { font-size:clamp(3.5rem,6vw,6rem); font-weight:900; color:#fff; line-height:1; letter-spacing:-.04em; } .sc-heading { font-size:clamp(2.8rem,5vw,5.5rem); font-weight:900; color:#fff; line-height:1.02; letter-spacing:-.03em; margin:0; } .sc-body { font-size:clamp(1rem,1.3vw,1.15rem); color:rgba(255,255,255,.58); line-height:1.7; margin:0; max-width:380px; } .scs-btn { display:inline-flex; align-items:center; gap:.45rem; font-size:var(--fs-sm,.88rem); font-weight:700; color:#e8b84b; text-decoration:none; padding:.5rem 0; border-bottom:1px solid rgba(232,184,75,.3); width:fit-content; } .scs-btn svg { width:14px; height:14px; transition:transform .2s; } .scs-btn:hover svg { transform:translateX(4px); } /* SC-03 right: sticky image panel with fade */ .sc-right { position:sticky; top:0; height:100vh; align-self:start; overflow:hidden; } .sc-img-panel { position:absolute; inset:0; opacity:0; transition:opacity .7s ease; display:flex; align-items:center; justify-content:center; } .sc-img-panel.active { opacity:1; } .sc-bg { max-width:none; max-height:none; object-fit:contain; display:block; position:relative; z-index:2; } .sc-counter { position:absolute; bottom:1.75rem; right:2rem; font-size:var(--fs-xs,.62rem); font-weight:800; letter-spacing:.18em; color:rgba(255,255,255,.35); z-index:10; } /* SC-04 right: sticky viewer + spacers for scroll height */ .sc04-right { position:relative; overflow:hidden; } .sc04-viewer { position:sticky; top:0; height:100vh; overflow:hidden; } .sc04-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .65s cubic-bezier(.4,0,.2,1); will-change:transform; } .sc04-tint { position:absolute; inset:0; background:linear-gradient(to right,rgba(13,42,33,.75) 0%,transparent 40%); z-index:2; pointer-events:none; } .sc04-counter { position:absolute; bottom:1.75rem; right:2rem; z-index:10; font-size:var(--fs-xs,.62rem); font-weight:800; letter-spacing:.18em; color:rgba(255,255,255,.4); } .sc04-sp { height:100vh; } /* ── SC-05 — Full-screen fade + 3D rotate text ──────────────────── */ #sc05 { position:relative; } .sc05-sticky { position:sticky; top:0; height:100vh; overflow:hidden; } .sc05-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .8s ease; } .sc05-bg.active { opacity:1; } .sc05-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.28) 60%,rgba(0,0,0,.12) 100%); z-index:2; } .sc05-content { position:absolute; inset:0; z-index:10; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2rem; gap:1.5rem; } .sc05-panels { perspective:1200px; } .sc05-panel { display:none; } .sc05-panel.active { display:block; animation:sc05Flip .5s cubic-bezier(.4,0,.2,1) both; } @keyframes sc05Flip { from{opacity:0;transform:rotateX(-38deg) translateY(28px)} to{opacity:1;transform:none} } .sc05-heading { font-size:clamp(2.8rem,7vw,6rem); font-weight:900; color:#fff; line-height:1.0; letter-spacing:-.04em; margin:0; text-shadow:0 4px 28px rgba(0,0,0,.5); } .sc05-sub { font-size:1rem; color:rgba(255,255,255,.68); line-height:1.7; max-width:520px; text-shadow:0 2px 10px rgba(0,0,0,.4); margin:0; } .sc05-btns { display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; } .sc05-btn-p { display:inline-flex; align-items:center; background:#e8b84b; color:var(--text-strong,#0f172a); font-weight:800; font-size:var(--fs-sm,.88rem); padding:.8rem 2rem; border-radius:99px; text-decoration:none; transition:background .2s; } .sc05-btn-p:hover { background:#fcd703; } .sc05-btn-s { display:inline-flex; align-items:center; color:#fff; font-weight:700; font-size:var(--fs-sm,.88rem); padding:.8rem 2rem; border-radius:99px; text-decoration:none; border:2px solid rgba(255,255,255,.38); transition:border-color .2s; } .sc05-btn-s:hover { border-color:rgba(255,255,255,.8); } .sc05-dots { position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%); display:flex; gap:.7rem; z-index:20; } .sc05-dot { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.28); cursor:pointer; transition:background .3s,transform .3s; } .sc05-dot.active { background:var(--card-bg,#fff); transform:scale(1.4); } .sc05-sp { height:100vh; } /* SC-05 responsive */ @media(max-width:768px){ .sc05-heading { font-size:clamp(2rem,9vw,3.5rem); } .sc05-sub { font-size:var(--fs-body,.9rem); max-width:88vw; } .sc05-content { padding:1.5rem 1.25rem; gap:1.25rem; } } @media(max-width:480px){ .sc05-btns { flex-direction:column; align-items:center; } .sc05-btn-p,.sc05-btn-s { width:100%; max-width:260px; justify-content:center; } } @media(max-height:500px){ .sc05-content { gap:.75rem; padding:1rem; } .sc05-heading { font-size:clamp(1.8rem,6vw,2.8rem); } .sc05-sub { display:none; } .sc05-dots { bottom:1rem; } } /* ── SC-06 — Scale fade + word slot ─────────────────────────────── */ #sc06 { position:relative; } .sc06-sticky { position:sticky; top:0; height:100vh; overflow:hidden; } .sc06-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; clip-path:circle(0% at 50% 50%); transition:opacity .8s ease,clip-path .85s cubic-bezier(.4,0,.2,1); } .sc06-bg.active { opacity:1; clip-path:circle(150% at 50% 50%); } .sc06-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.65) 0%,rgba(0,0,0,.22) 60%,rgba(0,0,0,.08) 100%); z-index:2; } /* SC-06 content: title top, sub+btns bottom */ .sc06-content { position:absolute; inset:0; z-index:10; display:flex; flex-direction:column; align-items:center; justify-content:space-between; text-align:center; padding:clamp(2.5rem,6vh,4.5rem) 2rem clamp(2.5rem,6vh,4rem); } .sc06-heading { font-size:clamp(2.8rem,7vw,6rem); font-weight:900; color:#fff; line-height:1; letter-spacing:-.04em; margin:0; text-shadow:0 4px 28px rgba(0,0,0,.5); border-bottom:3px solid rgba(255,255,255,.55); padding-bottom:.3rem; display:inline-block; } .sc06-foot { display:flex; flex-direction:column; align-items:center; gap:.75rem; } .sc06-sub { font-size:1rem; color:rgba(255,255,255,.68); line-height:1.7; max-width:520px; text-shadow:0 2px 10px rgba(0,0,0,.4); margin:0; } .sc06-btns { display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; } .sc06-btn-p { display:inline-flex; align-items:center; background:#e8b84b; color:var(--text-strong,#0f172a); font-weight:800; font-size:var(--fs-sm,.88rem); padding:.8rem 2rem; border-radius:99px; text-decoration:none; transition:background .2s; } .sc06-btn-p:hover { background:#fcd703; } .sc06-btn-s { display:inline-flex; align-items:center; color:#fff; font-weight:700; font-size:var(--fs-sm,.88rem); padding:.8rem 2rem; border-radius:99px; text-decoration:none; border:2px solid rgba(255,255,255,.38); transition:border-color .2s; } .sc06-btn-s:hover { border-color:rgba(255,255,255,.8); } /* SC-06 progress: starts below title, ends above buttons */ .sc06-progress { position:absolute; left:50%; transform:translate(-50%,calc(22% + 10px)); top:clamp(5.5rem,12vh,8rem); bottom:clamp(36vh,46vh,50vh); height:auto; z-index:20; overflow:visible; } .sc06-prog-track { position:absolute; left:50%; transform:translateX(-50%); top:0; bottom:0; width:3px; background:rgba(255,255,255,.15); border-radius:2px; } .sc06-prog-fill { width:100%; background:#fcd703; height:0%; transition:height .3s ease; border-radius:2px; } .sc06-prog-dot { position:absolute; left:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:.4rem; } .sc06-prog-pdot { width:13px; height:13px; border-radius:50%; background:transparent; transition:background .3s,transform .3s,box-shadow .3s; flex-shrink:0; } .sc06-prog-dot.active .sc06-prog-pdot { background:#fcd703; transform:scale(2); box-shadow:0 0 0 5px rgba(252,215,3,.2); animation:sc06Blink .9s ease-in-out infinite; } /* labels: hidden by default, only active shows, large gold */ .sc06-prog-dot span { display:none; font-size:clamp(2.8rem,7vw,6rem); font-weight:900; color:#fcd703; letter-spacing:-.04em; text-shadow:0 4px 28px rgba(0,0,0,.5); white-space:nowrap; line-height:1; } .sc06-prog-dot.active span { display:block; } @keyframes sc06Blink { 0%,100% { box-shadow:0 0 0 5px rgba(252,215,3,.2); } 50% { box-shadow:0 0 0 12px rgba(252,215,3,0); } } .sc06-sp { height:100vh; } /* SC-06 responsive */ @media(max-width:1024px){ .sc06-content { padding:clamp(1.5rem,5vh,3rem) 1.25rem clamp(1.5rem,4vh,2.5rem); } .sc06-heading { font-size:clamp(2rem,9vw,3.5rem); } .sc06-progress { top:clamp(3rem,10vh,5rem); bottom:clamp(28vh,40vh,46vh); transform:translate(-50%,calc(14%+8px)); } .sc06-prog-dot span { font-size:clamp(2rem,9vw,3.5rem); } .sc06-sub { font-size:var(--fs-body,.9rem); max-width:88vw; } } @media(max-width:640px){ .sc06-btns { flex-direction:column; align-items:center; } .sc06-btn-p,.sc06-btn-s { width:100%; max-width:280px; justify-content:center; } } @media(max-height:500px){ /* landscape phone — hide progress, centre heading only */ .sc06-progress { display:none; } .sc06-content { justify-content:center; gap:1rem; } .sc06-foot { gap:.5rem; } } /* ── SC-02: Full-screen teal overlay, scroll-driven bottom→top image flow ── */ .sc02-wrap { position:relative; min-height:500vh; } .sc02-sticky { position:sticky; top:0; height:100vh; overflow:hidden; background:#afe5d7; } /* Images — stacked absolutely, JS drives translateY + opacity + blur */ .sc02-imgs { position:absolute; inset:0; } .sc02-img { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; will-change:transform,opacity,filter; } .sc02-img img { max-width:none; max-height:80vh; object-fit:contain; display:block; } /* Text overlay — shifted left of far-right edge */ .sc02-overlay { position:absolute; inset:0; z-index:10; pointer-events:none; display:flex; align-items:center; justify-content:flex-start; padding:0 4% 0 52%; } .sc02-panels { position:relative; width:100%; max-width:480px; } .sc02-panel { display:flex; flex-direction:column; gap:.75rem; opacity:0; transform:translateY(10px); transition:opacity .45s ease,transform .45s ease; pointer-events:none; position:absolute; top:50%; transform:translateY(calc(-50% + 10px)); width:100%; } .sc02-panel.active { opacity:1; transform:translateY(-50%); pointer-events:auto; } .sc02-tag { font-size:clamp(.68rem,.9vw,.78rem); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#0d5c3d; } .sc02-num { font-size:clamp(3.5rem,7vw,6rem); font-weight:900; line-height:1; color:#0d2a21; } .sc02-heading { font-size:clamp(2.4rem,5vw,4.4rem); font-weight:900; line-height:1.02; color:#0d2a21; } .sc02-body { font-size:clamp(.95rem,1.3vw,1.08rem); color:rgba(13,42,33,.68); line-height:1.65; max-width:34ch; } .sc02-list { list-style:none; padding:0; margin:.25rem 0 .5rem; display:flex; flex-direction:column; gap:.55rem; } .sc02-list li { font-size:clamp(.82rem,1.1vw,.92rem); color:rgba(13,42,33,.68); padding-left:1.2rem; position:relative; line-height:1.5; } .sc02-list li::before { content:''; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:#0d5c3d; } .sc02-btn { display:inline-flex; align-items:center; gap:.45rem; background:#0d2a21; color:#afe5d7; font-size:clamp(.8rem,.95vw,.88rem); font-weight:700; padding:.75rem 1.75rem; border-radius:99px; text-decoration:none; align-self:flex-start; margin-top:.5rem; transition:background .2s,transform .15s; } .sc02-btn:hover { background:#16503c; transform:translateY(-2px); } .sc02-btn svg { width:16px; height:16px; flex-shrink:0; } /* Dots */ .sc02-dots { position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%); display:flex; gap:.55rem; z-index:20; } .sc02-dot { width:7px; height:7px; border-radius:50%; background:rgba(13,42,33,.22); transition:background .3s,transform .3s; } .sc02-dot.active { background:#0d2a21; transform:scale(1.45); } /* Scroll indicator */ .sc02-scroll-hint { position:absolute; right:2rem; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; gap:.75rem; z-index:20; } .sc02-scroll-hint span { font-size:var(--fs-xs,.58rem); font-weight:800; letter-spacing:.15em; writing-mode:vertical-rl; color:rgba(13,42,33,.32); } .sc02-scroll-line { width:1px; height:56px; background:rgba(13,42,33,.15); position:relative; overflow:hidden; } .sc02-scroll-line::after { content:''; position:absolute; inset:0; height:50%; background:#0d2a21; animation:sc02Scroll 1.5s ease-in-out infinite; } @keyframes sc02Scroll { 0% { transform:translateY(-100%); } 100% { transform:translateY(200%); } } /* §55 responsive — mobile/tablet ≤1024px */ @media(max-width:1024px){ /* SC-02: image top 55vh, text bottom 45vh — stacked column */ .sc02-sticky { display:flex; flex-direction:column; } /* image area — relative so absolute children use it as reference */ .sc02-imgs { position:relative; flex:0 0 55vh; height:55vh; overflow:hidden; } /* image items stay absolute inside .sc02-imgs — JS drives translateX */ .sc02-img { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; } .sc02-img img { max-width:100% !important; max-height:none !important; width:100%; object-fit:cover; } /* text area — below image, fills remaining height */ .sc02-overlay { position:relative; flex:1; padding:0; overflow:hidden; align-items:flex-start; justify-content:flex-start; } .sc02-panels { position:relative; width:100%; max-width:none; height:100%; } /* panels fill the text area — crossfade in place */ .sc02-panel { position:absolute; inset:0; top:0; transform:none !important; display:flex; flex-direction:column; gap:.5rem; padding:1.5rem 1.25rem 1rem; overflow:hidden; } .sc02-panel.active { opacity:1; transform:none !important; } .sc02-num { font-size:clamp(2.2rem,9vw,3rem); } .sc02-heading { font-size:clamp(1.6rem,7vw,2.6rem); } .sc02-body { font-size:var(--fs-sm,.88rem); max-width:none; } .sc02-list { display:none; } .sc02-scroll-hint { display:none; } /* dots sit between image and text */ .sc02-dots { position:absolute; bottom:auto; top:calc(55vh - 1.5rem); left:50%; transform:translateX(-50%); } /* SC-01 */ .sc01-panel { width:90%; max-width:340px; } .sc01-text-sticky { padding:0 3%; } /* SC-03: image top 45vh, text bottom 55vh — stacked sticky */ .sc-wrap { display:flex; flex-direction:column; min-height:400vh; } /* image column: sticky at top 45vh */ .sc-right { display:block; position:sticky; top:0; height:45vh; width:100%; align-self:auto; flex-shrink:0; order:1; overflow:hidden; } /* make each image panel fill the 45vh box */ .sc-right .sc-img-panel { position:absolute; inset:0; width:100%; height:100%; } .sc-right .sc-bg { width:100%; height:100%; object-fit:cover; max-width:none; max-height:none; display:block; } .sc-counter { bottom:.6rem; right:1rem; } /* text column: sticky just below image */ .sc-left { position:sticky; top:45vh; height:55vh; width:100%; flex-shrink:0; order:2; align-self:auto; justify-content:flex-start; gap:.4rem; padding:.75rem 1.25rem .75rem; overflow:clip; background:#0d2a21; } .sc-text-panel { gap:.35rem; } .sc-num { font-size:clamp(1.4rem,6vw,2rem); line-height:1; } .sc-heading { font-size:clamp(1.3rem,5.5vw,1.8rem); } .sc-body { font-size:var(--fs-sm,.83rem); max-width:100%; line-height:1.55; } .scs-tag { font-size:var(--fs-xs,.62rem); } .scs-btn { background:#e8b84b; color:var(--text-strong,#0f172a); padding:.55rem 1.5rem; border-radius:99px; border-bottom:none; font-size:var(--fs-sm,.82rem); } .sc-dots { margin-bottom:0; } .sc04-right { display:none; } } @media(max-height:500px){ /* SC-01 landscape phone — compact the glass panel */ .sc01-panel { padding:1rem 1.25rem; gap:.5rem; } .sc01-num { font-size:2rem; } .sc01-heading { font-size:1.6rem; } .sc01-body { font-size:var(--fs-sm,.82rem); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } } /* ═══════════════════════════════════════════════════════════════ §56 TAB LAYOUTS — TB-01 … TB-R2 (tabtable.html) ═══════════════════════════════════════════════════════════════ */ /* Panels: hidden by default, active shown */ [data-tab-panel] { display:none; } [data-tab-panel].active { display:block; } /* Tab button rows — scroll horizontally when buttons overflow */ [id$="-btns"] { flex-wrap:nowrap !important; justify-content:flex-start !important; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-left:.25rem; padding-right:.25rem; } [id$="-btns"]::-webkit-scrollbar { display:none; } .tb-ul-wrap::-webkit-scrollbar { display:none; } /* Full-cover image inside a sized container */ .tab-img { width:100%; height:100%; object-fit:cover; display:block; } /* Section gap */ .gap-section { height:3rem; } /* ── Step items (TB-01) ── */ .step-item { display:flex; align-items:flex-start; gap:.75rem; } .step-num { width:32px; height:32px; border-radius:50%; background:var(--primary-color); color:var(--text-strong,#0f172a); font-size:var(--fs-xs,.78rem); font-weight:900; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:.05rem; } /* ── Pill tabs — dark (TB-01) ── */ .tb-pill { padding:.55rem 1.4rem; border-radius:99px; border:1.5px solid var(--card-border,#e2e8f0); background:var(--card-bg,#fff); font-size:var(--fs-sm,.82rem); font-weight:700; color:var(--text-muted); cursor:pointer; transition:all .18s; } .tb-pill:hover { border-color:#cbd5e1; color:var(--text-strong); } .tb-pill.active { background:#0f172a; color:#fff; border-color:var(--text-strong,#0f172a); } /* ── Pill tabs — gold (TB-03) ── */ .tb-pill-gold { padding:.55rem 1.4rem; border-radius:99px; border:1.5px solid var(--card-border,#e2e8f0); background:var(--card-bg,#fff); font-size:var(--fs-sm,.82rem); font-weight:700; color:var(--text-muted); cursor:pointer; transition:all .18s; } .tb-pill-gold:hover { border-color:var(--primary-color); color:var(--text-strong); } .tb-pill-gold.active { background:var(--primary-color); color:var(--text-strong,#0f172a); border-color:var(--primary-color); font-weight:800; } /* ── Underline tabs (TB-04, TB-R1) ── */ .tb-ul-wrap { display:flex; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; justify-content:flex-start; gap:.5rem; border-bottom:2px solid var(--card-border,#e2e8f0); padding-bottom:2px; } .tb-ul { padding:.55rem 1.25rem; background:var(--surface-color,#f1f5f9); border:1.5px solid var(--card-border,#e2e8f0); border-bottom:2px solid transparent; border-radius:0; margin-bottom:-3px; font-size:var(--fs-sm,.85rem); font-weight:600; color:var(--text-muted); cursor:pointer; transition:all .18s; } .tb-ul:hover { background:#e8edf5; border-color:#cbd5e1; color:var(--text-strong); } .tb-ul.active { background:#0f172a; color:#fff; border-color:var(--text-strong,#0f172a); border-bottom-color:var(--text-strong,#0f172a); font-weight:800; } /* ── Vertical sidebar tabs (TB-08) ── */ .tb-vert { display:flex; align-items:center; gap:.6rem; padding:.65rem 1rem; border-radius:.5rem; border:none; background:transparent; font-size:var(--fs-sm,.85rem); font-weight:600; color:var(--text-muted); cursor:pointer; transition:all .18s; text-align:left; width:100%; } .tb-vert:hover { background:var(--surface-color,#f8fafc); color:var(--text-strong); } .tb-vert.active { background:var(--primary-color); color:var(--text-strong,#0f172a); font-weight:800; } .tb-vert svg { flex-shrink:0; } /* ── Prevent any tab button from shrinking or wrapping text ── */ [id$="-btns"] > * { flex-shrink:0; white-space:nowrap; } /* ── Center tab buttons on large screens (flex-start only needed for mobile scroll) ── */ @media (min-width:768px) { [id$="-btns"]:not(.tb-ul-wrap) { justify-content:center !important; } } /* ── TB-08 mobile: sidebar switches to horizontal scroll row ── */ @media (max-width:768px) { #tb08-btns { flex-direction:row !important; flex-wrap:nowrap !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch; scrollbar-width:none; border-right:none !important; border-bottom:1px solid #f1f5f9; padding-right:0 !important; padding-bottom:.5rem; min-width:0 !important; width:100%; margin-bottom:.75rem; } #tb08-btns::-webkit-scrollbar { display:none; } #tb08-btns .tb-vert { width:auto !important; white-space:nowrap; } } /* ── Icon boxed tabs (TB-X) ── */ .tb-icon-btn { display:flex; align-items:center; gap:.5rem; padding:.65rem 1.25rem; border:1.5px solid var(--card-border,#e2e8f0); border-radius:.75rem; background:var(--card-bg,#fff); font-size:var(--fs-sm,.82rem); font-weight:600; color:var(--text-muted); cursor:pointer; transition:all .18s; } .tb-icon-btn:hover { border-color:var(--primary-color); color:var(--text-strong); } .tb-icon-btn.active { border-color:var(--primary-color); background:var(--primary-color); color:var(--text-strong,#0f172a); font-weight:800; } /* ── Boxed border tabs (TB-R2) ── */ .tb-box-wrap { display:flex; flex-wrap:nowrap; border-top:1px solid var(--card-border,#e2e8f0); border-bottom:1px solid var(--card-border,#e2e8f0); } .tb-box { padding:1rem; border:1.5px solid var(--card-border,#e2e8f0); border-right:none; background:var(--card-bg,#fff); font-size:var(--fs-sm,.82rem); font-weight:600; color:var(--text-muted); cursor:pointer; transition:all .18s; min-width:150px; } .tb-box:last-child { border-right:1.5px solid var(--card-border,#e2e8f0); } .tb-box:hover { background:var(--surface-color,#f8fafc); color:var(--text-strong); } .tb-box.active { background:#0f172a; color:#fff; border-color:var(--text-strong,#0f172a); font-weight:800; } /* ── Floating stat badge (TB-R1) ── */ .stat-float { position:absolute; bottom:-1.25rem; right:1.5rem; background:var(--card-bg,#fff); border-radius:.75rem; padding:.85rem 1.1rem; box-shadow:0 8px 32px rgba(0,0,0,.12); display:flex; align-items:center; gap:.75rem; min-width:140px; } /* ── Circular stamp badge (TB-R2) ── */ .badge-stamp { position:absolute; bottom:-1.5rem; right:1.5rem; width:100px; height:100px; animation:badgeSpin 18s linear infinite; } @keyframes badgeSpin { to { transform:rotate(360deg); } } /* ── Learn More button (TB-R1) ── */ .learn-btn { display:inline-flex; align-items:center; gap:.85rem; font-size:var(--fs-xs,.78rem); font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--text-strong); text-decoration:none; transition:gap .2s; } .learn-btn:hover { gap:1.2rem; } .arrow { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; border:1.5px solid var(--text-strong); font-style:normal; transition:background .2s,color .2s; } .learn-btn:hover .arrow { background:var(--text-strong); color:#fff; } /* ═══════════════════════════════════════════════════════════════ §57 TESTIMONIAL LAYOUTS — Testimonial.html ═══════════════════════════════════════════════════════════════ */ /* ── Shared ── */ .svg-fill-gold { fill:var(--primary-color,#e8b84b); } .dark-pag .swiper-pagination-bullet { background:rgba(255,255,255,.25); } .dark-pag .swiper-pagination-bullet-active { background:var(--primary-color,#e8b84b); } /* ── Shared TS nav buttons ───────────────────────────────── */ .ts-prev,.ts-next { width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .18s,color .18s,border-color .18s,transform .18s;transform:scale(1.1); } .ts-prev { border:1px solid var(--primary-dark,var(--primary-color));background:transparent;color:var(--primary-dark,var(--primary-color)); } .ts-prev:hover { background:var(--primary-dark,var(--primary-color));color:var(--text-inverse,#fff);transform:scale(1.2); } .ts-next { border:1px solid var(--primary-dark,var(--primary-color));background:var(--primary-dark,var(--primary-color));color:var(--text-inverse,#fff); } .ts-next:hover { background:var(--text-inverse,#fff);color:var(--primary-dark,var(--primary-color));border-color:var(--primary-dark,var(--primary-color));transform:scale(1.2); } /* Dark-bg variant */ .ts-prev.dk { border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.06);color:#fff; } .ts-prev.dk:hover { background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.7); } /* ── TS-03 TVFadeClassic custom dots ─────────────────────── */ .tv-dot { width:8px;height:8px;padding:0;border-radius:99px;border:none;cursor:pointer;background:rgba(255,255,255,.2);transition:width .3s,background .3s; } .tv-dot.is-active { width:24px;background:var(--primary-color,#e8b84b); } /* ── 01 QuoteSpotlight (qs-) ── */ .qs-slide-inner { display:flex; min-height:320px; } .qs-panel-left { width:42%; flex-shrink:0; padding:2.5rem 2rem; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; } .qs-panel-right { flex:1; background:var(--card-bg,#fff); padding:3rem 2.5rem 2.5rem; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; } .qs-qmark { position:absolute; top:-1rem; left:1.5rem; font-size:10rem; font-weight:900; line-height:1; opacity:.12; font-family:Georgia,serif; pointer-events:none; } .qs-quote-txt { font-size:1.05rem; line-height:1.8; font-style:italic; font-family:Georgia,serif; flex:1; display:flex; align-items:center; margin:3rem 0 1.5rem; } .qs-counter-wrap { font-size:var(--fs-xs,.78rem); font-weight:700; letter-spacing:.08em; text-align:right; } .qs-slide-num { position:absolute; bottom:.5rem; right:1.5rem; font-size:5rem; font-weight:900; opacity:.08; line-height:1; font-family:var(--heading-font,sans-serif); pointer-events:none; color:#fff; } @keyframes qsBarFill { from { width:0 } to { width:100% } } /* ── 02 TestiCards (tc-) ── */ .tc-card { transition:box-shadow .2s; } .tc-card:hover { box-shadow:0 12px 40px rgba(0,0,0,.08); } /* ── 03 TVFadeClassic (tv-) ── */ .tv-wrap { position:relative; min-height:420px; } .tv-slide { display:none; } .tv-slide.is-active { display:flex; flex-wrap:wrap; } .tv-photo { flex:0 0 42%; min-width:260px; position:relative; overflow:hidden; min-height:420px; } .tv-photo img { width:100%; height:100%; object-fit:cover; display:block; } .tv-photo-overlay { position:absolute; inset:0; background:linear-gradient(to right,transparent 60%,#0a0a0a); } .tv-photo-info { position:absolute; bottom:1.75rem; left:1.75rem; } .tv-quote-panel { flex:1; min-width:260px; background:#111; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; } .tv-content { padding:3rem 3rem 2rem; flex:1; } .tv-progress-bar { height:3px; background:var(--primary-color,#e8b84b); position:absolute; bottom:0; left:0; } @keyframes tvProg { from { width:0 } to { width:100% } } @keyframes tvSlideUp { from { opacity:0; transform:translateY(24px) } to { opacity:1; transform:translateY(0) } } /* ── 11 OrganicVertical (testi-) ── */ .h-testi-new-wrap { display:flex; gap:2.5rem; align-items:stretch; } .h-testi-left { flex:1; min-width:0; display:flex; flex-direction:column; gap:1rem; } .h-testi-swiper { height:340px; } .h-testi-v-card { display:flex !important; align-items:flex-start; gap:1rem; padding:1.25rem; border-radius:1rem; background:var(--surface-color,#f8fafc); border:1px solid var(--border-color,#e5e7eb); height:auto; box-sizing:border-box; } .h-testi-v-card img { width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0; } .h-testi-v-body { flex:1; min-width:0; } .h-testi-v-stars { color:var(--primary-color,#e8b84b); font-size:var(--fs-sm,.8rem); margin-bottom:.4rem; } .h-testi-v-quote { font-size:var(--fs-sm,.88rem); line-height:1.65; color:var(--text-muted,#6b7280); margin:0 0 .5rem; font-style:italic; } .h-testi-v-name { font-size:var(--fs-sm,.82rem); font-weight:700; color:var(--text-color,#111); } .h-testi-v-loc { font-weight:400; color:var(--text-muted,#6b7280); font-size:var(--fs-sm,.78rem); } .h-testi-nav-wrap { display:flex; gap:.5rem; margin-top:.75rem; } .h-testi-nav-btn { width:38px; height:38px; border-radius:50%; border:1.5px solid var(--border-color,#e5e7eb); background:var(--card-bg,#fff); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .18s; color:var(--text-color,#111); } .h-testi-nav-btn:hover { background:var(--primary-color,#e8b84b); border-color:var(--primary-color,#e8b84b); color:#000; } .h-testi-right { flex:0 0 380px; position:relative; border-radius:1.25rem; overflow:hidden; min-height:380px; } .h-testi-right-img { width:100%; height:100%; object-fit:cover; display:block; } .h-testi-right-stat { position:absolute; top:1.5rem; left:1.5rem; right:1.5rem; background:rgba(0,0,0,.55); backdrop-filter:blur(8px); border-radius:.875rem; padding:1.25rem 1.5rem; color:#fff; text-align:center; } .h-testi-right-num { font-size:3rem; font-weight:900; line-height:1; color:var(--primary-color,#e8b84b); margin-bottom:.25rem; } .h-testi-right-stars { font-size:1rem; color:var(--primary-color,#e8b84b); margin-bottom:.5rem; } .h-testi-right-lbl { font-size:var(--fs-sm,.78rem); color:rgba(255,255,255,.65); line-height:1.4; } /* ── 18 PillSlider (pill-) ── */ .pill-card { display:flex; align-items:center; background:var(--card-bg,#fff); border:1px solid var(--border-color,#e5e7eb); border-radius:99px; padding:1.25rem 1.5rem; box-shadow:0 4px 24px rgba(0,0,0,.06); gap:0; } /* ── Masonry wall ── */ .msry-wall { columns:2; column-gap:1rem; } .msry-item { break-inside:avoid; margin-bottom:1rem; } @media (min-width:640px) { .msry-wall { columns:3; } } @media (min-width:1024px) { .msry-wall { columns:4; } } /* ── Responsive: stack panels on mobile ── */ @media (max-width:768px) { .qs-slide-inner { flex-direction:column; } .qs-panel-left { width:100%; min-height:180px; } .tv-slide.is-active { flex-direction:column; } .tv-photo { flex:none; width:100%; min-height:220px; } .tv-photo-overlay { background:linear-gradient(to bottom,transparent 50%,#0a0a0a); } .h-testi-new-wrap { flex-direction:column; } .h-testi-right { flex:none; width:100%; min-height:220px; } .pill-card { flex-wrap:wrap; border-radius:1.5rem; } } /* ── PillSlider mobile (≤639px): plain card layout ── */ @media (max-width:640px) { .pill-card { flex-direction:column; align-items:stretch; border-radius:1rem; padding:1.5rem; gap:1.25rem; } /* Force swiper container to correct width so Swiper can re-measure */ .pill-slider { width:100% !important; max-width:100% !important; overflow:hidden !important; flex:none !important; } .pill-nav-sep { display:none !important; } .pill-nav-btns { justify-content:center !important; width:100%; gap:.75rem; } /* slide row: stack vertically, full-width text */ .pill-slide-row { flex-direction:column !important; align-items:stretch !important; gap:.875rem; } .pill-slide-row > .relative { align-self:flex-start; margin-right:0 !important; } .pill-h-div { display:none !important; } .pill-name { min-width:0 !important; } } /* ═══════════════════════════════════════════════════════════════════ §58 SLIDER SECTIONS — MOBILE RESPONSIVE (≤767px) Stacks side-by-side grid/absolute layouts for 02, 02b, 02c, 02d, 03 CrossDrift, 07 PrismSlide; 08 CoverFlow → 1-card view. ═══════════════════════════════════════════════════════════════════ */ @media (max-width:768px) { /* ── 02 SplitReveal (image-left text-right → image top, text bottom) ── */ #srSwiper .swiper-slide > div { grid-template-columns:1fr !important; min-height:auto !important; } #srSwiper .swiper-slide > div > div:first-child { min-height:260px; } #srSwiper, #srSwiper .swiper-wrapper { height:auto !important; } #srSwiper .swiper-slide { height:auto !important; } /* ── 02b TextPane (section grid → flex column: image 260px top, swiper 300px below) ── */ /* Switch to flex column so the second child has a real pixel height for Swiper to measure */ section:has(#tpSwiper) { display:flex !important; flex-direction:column !important; min-height:auto !important; } section:has(#tpSwiper) > div:first-child { height:260px !important; flex-shrink:0 !important; overflow:hidden !important; } section:has(#tpSwiper) > div:last-child { flex:1 !important; min-height:300px !important; height:300px !important; } #tpSwiper { height:100% !important; min-height:300px !important; } #tpSwiper .swiper-wrapper { height:100% !important; } #tpSwiper .swiper-slide { height:100% !important; } /* ── 02c SplitReveal-R (text-left image-right → text top, image bottom) ── */ #ocSwiper .swiper-slide > div { grid-template-columns:1fr !important; min-height:auto !important; } #ocSwiper .swiper-slide > div > div:last-child { min-height:260px; } #ocSwiper, #ocSwiper .swiper-wrapper { height:auto !important; } #ocSwiper .swiper-slide { height:auto !important; } /* ── 02d SplitReveal-Fade (text-left image-right → text top, image bottom) ── */ #odSwiper .swiper-slide > div { grid-template-columns:1fr !important; min-height:auto !important; } #odSwiper .swiper-slide > div > div:last-child { min-height:260px; position:relative !important; } #odSwiper, #odSwiper .swiper-wrapper { height:auto !important; } #odSwiper .swiper-slide { height:auto !important; } /* ── 02e SplitReveal-Fade-L (image-left text-right → image top, text bottom) ── */ #oeSwiper .swiper-slide > div { grid-template-columns:1fr !important; min-height:auto !important; } #oeSwiper .swiper-slide > div > div:first-child { min-height:260px; position:relative !important; } #oeSwiper, #oeSwiper .swiper-wrapper { height:auto !important; } #oeSwiper .swiper-slide { height:auto !important; } /* ── 03 CrossDrift (position:absolute overlay → flex column: image top, text bottom) ── */ section:has(#cdSwiper) { height:auto !important; min-height:auto !important; } #cdSwiper { height:520px !important; } #cdSwiper .swiper-wrapper { height:520px !important; } #cdSwiper .swiper-slide { display:flex !important; flex-direction:column !important; height:520px !important; overflow:hidden !important; } .cd-img-col { position:relative !important; inset:0 !important; left:0 !important; width:100% !important; height:260px !important; overflow:hidden !important; flex-shrink:0 !important; } .cd-txt-col { position:relative !important; left:0 !important; top:auto !important; right:auto !important; height:auto !important; flex:1 !important; width:100% !important; max-width:100% !important; padding:2rem 1.5rem !important; } /* ── 07 PrismSlide (position:absolute overlay → flex column: image top, text below) ── */ section:has(#prismSwiper) { height:auto !important; min-height:auto !important; } #prismSwiper { height:520px !important; } #prismSwiper .swiper-wrapper { height:520px !important; } #prismSwiper .swiper-slide { display:flex !important; flex-direction:column !important; height:520px !important; overflow:hidden !important; } .prism-img-col { position:relative !important; top:auto !important; bottom:auto !important; right:auto !important; width:100% !important; height:260px !important; flex-shrink:0 !important; overflow:hidden !important; } .prism-txt-col { position:relative !important; height:auto !important; flex:1 !important; max-width:100% !important; padding:2rem 1.5rem !important; } .prism-ghost { display:none !important; } .prism-num { display:none !important; } /* ── Hide prev/next overlay buttons on mobile — swipe handles navigation ── */ .snav { display:none !important; } /* ── NEW: class-based responsive rules for sp-section-library.html templates ── */ /* split-reveal-left (v-sr-swiper): image top, text bottom */ .v-sr-swiper,.v-sr-swiper .swiper-wrapper{height:auto!important} .v-sr-swiper .swiper-slide{height:auto!important} .v-sr-swiper .swiper-slide>div{grid-template-columns:1fr!important;min-height:auto!important} .v-sr-swiper .swiper-slide>div>div:first-child{min-height:260px} /* split-reveal-right (v-sr-swiper-r): text top, image bottom — override first-child */ .v-sr-swiper-r .swiper-slide>div>div:first-child{min-height:0!important} .v-sr-swiper-r .swiper-slide>div>div:last-child{min-height:260px} /* text-pane (v-tp-layout): section grid → flex column */ .v-tp-layout{display:flex!important;flex-direction:column!important;min-height:auto!important} .v-tp-layout>div:first-child{height:260px!important;flex-shrink:0!important;overflow:hidden!important} .v-tp-layout>div:nth-child(2){flex:1!important;min-height:300px!important;height:300px!important} .v-tp-swiper{height:100%!important;min-height:300px!important} .v-tp-swiper .swiper-wrapper,.v-tp-swiper .swiper-slide{height:100%!important} /* cross-drift (v-cd-swiper + cd-img-col + cd-txt-col): flex column stacking */ section:has(.v-cd-swiper){height:auto!important;min-height:auto!important} .v-cd-swiper{height:520px!important} .v-cd-swiper .swiper-wrapper{height:520px!important} .v-cd-swiper .swiper-slide{display:flex!important;flex-direction:column!important;height:520px!important;overflow:hidden!important} /* prism-slide (v-prism-swiper + .prism-img-col + .prism-txt-col already exist): flex column */ section:has(.v-prism-swiper){height:auto!important;min-height:auto!important} .v-prism-swiper{height:520px!important} .v-prism-swiper .swiper-wrapper{height:520px!important} .v-prism-swiper .swiper-slide{display:flex!important;flex-direction:column!important;height:520px!important;overflow:hidden!important} } /* ═══════════════════════════════════════════════════════════════════ §59 PROCESS STEP — RESPONSIVE ═══════════════════════════════════════════════════════════════════ */ /* ── TOC nav: always one scrollable row (wraps at any width) ── */ .toc { flex-wrap:nowrap !important; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .toc::-webkit-scrollbar { display:none; } .toc > * { flex-shrink:0 !important; white-space:nowrap; } /* ── PS-03 Zigzag + PS-12 Circular: fix broken 900px breakpoint. Original rule uses display:none on left + grid-template-columns:0 60/64px 1fr which auto-places remaining items into wrong (0px / 60px) columns. Fix: explicit grid placement so node → col1, content → col2. ── */ @media (max-width:768px) { /* PS-03 */ .ps03-step { grid-template-columns:56px 1fr !important; gap:.75rem 1rem !important; } .ps03-node { grid-column:1 !important; grid-row:1 !important; width:56px !important; height:56px !important; align-self:center; } .ps03-left { grid-column:2 !important; grid-row:1 !important; display:flex !important; text-align:left !important; justify-content:flex-start !important; align-items:center !important; padding:.75rem 0 !important; } .ps03-right { grid-column:2 !important; grid-row:1 !important; text-align:left !important; padding:.75rem 0 !important; align-items:center !important; } /* PS-12 */ .ps12-step { display:grid !important; grid-template-columns:56px 1fr !important; min-height:auto !important; gap:0 !important; } .ps12-node-wrap { grid-column:1 !important; grid-row:1 !important; } .ps12-left { grid-column:2 !important; grid-row:1 !important; display:flex !important; text-align:left !important; justify-content:flex-start !important; align-items:flex-start !important; padding:.75rem 1rem !important; } .ps12-right { grid-column:2 !important; grid-row:1 !important; padding:.75rem 1rem !important; align-items:flex-start !important; } .ps12-node { width:40px !important; height:40px !important; font-size:var(--fs-sm,.85rem) !important; } } /* ── §S — v-modal: unified image + video lightbox modal ───────────────────── data-action="vmodal-open" data-modal-type="img|yt" data-modal-src="..." data-modal-caption="..." data-modal-group="..." JS: initVModal() in theme.js — zero per-page code needed */ .v-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:1.5rem 3.5rem;background:rgba(8,6,4,.92);backdrop-filter:blur(18px);opacity:0;pointer-events:none;transition:opacity .3s ease} .v-modal.is-open{opacity:1;pointer-events:all} .v-modal__bg{position:absolute;inset:0;cursor:default} .v-modal__card{position:relative;z-index:1;width:min(90vw,960px);border-radius:14px;transform:scale(.85) translateY(24px);opacity:0;transition:transform .42s cubic-bezier(.34,1.56,.64,1),opacity .3s ease} .v-modal.is-open .v-modal__card{transform:scale(1) translateY(0);opacity:1} .v-modal__bar{display:none;align-items:center;justify-content:space-between;padding:.65rem 1rem;background:rgba(14,8,3,.97);gap:.6rem;border-radius:14px 14px 0 0} .v-modal--yt .v-modal__bar{display:flex} .v-modal__bar-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--primary-color,#c96c3a);flex-shrink:0} .v-modal__bar-title{color:rgba(255,255,255,.88);font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em;flex:1;min-width:0} .v-modal__bar-close{background:rgba(255,255,255,.1);border:none;color:rgba(255,255,255,.75);width:30px;height:30px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;flex-shrink:0} .v-modal__bar-close:hover{background:rgba(255,255,255,.22)} .v-modal__iframe-wrap{display:none;position:relative;padding-bottom:56.25%;overflow:hidden;background:#000;border-radius:0 0 14px 14px;max-height:75vh} .v-modal--yt .v-modal__iframe-wrap{display:block} .v-modal__iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none;display:block} .v-modal__img{display:none;width:100%;max-height:78vh;object-fit:contain;border-radius:14px;box-shadow:0 32px 80px rgba(0,0,0,.6);transition:opacity .18s ease} .v-modal--img .v-modal__img{display:block} .v-modal__footer{display:none;align-items:center;justify-content:space-between;margin-top:.75rem;padding:0 .2rem} .v-modal--img .v-modal__footer{display:flex} .v-modal__caption{color:rgba(255,255,255,.82);font-size:.85rem;font-weight:500;letter-spacing:.03em;flex:1} .v-modal__ctr{color:rgba(255,255,255,.38);font-size:.74rem;font-weight:700;letter-spacing:.1em;white-space:nowrap;margin-left:1rem;flex-shrink:0} .v-modal__ctr--bar{color:rgba(255,255,255,.36);font-size:.72rem;font-weight:700;letter-spacing:.1em;white-space:nowrap;flex-shrink:0} .v-modal__close{display:none;position:absolute;top:-14px;right:-14px;width:40px;height:40px;border-radius:50%;background:var(--primary-color,#c96c3a);border:none;cursor:pointer;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,0,0,.45);color:#fff;transition:opacity .2s,transform .2s;z-index:3} .v-modal--img .v-modal__close{display:flex} .v-modal__close:hover{opacity:.88;transform:scale(1.08)} .v-modal__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.2);color:#fff;width:52px;height:52px;border-radius:50%;cursor:pointer;display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px);transition:background .2s,transform .22s;flex-shrink:0} .v-modal__nav:hover{background:rgba(255,255,255,.22);transform:translateY(-50%) scale(1.08)} .v-modal__nav--prev{left:.5rem} .v-modal__nav--next{right:.5rem} .v-modal.has-nav .v-modal__nav{display:flex} @media(max-width:600px){.v-modal{padding:1rem .5rem}.v-modal__nav{width:40px;height:40px}.v-modal__nav--prev{left:.2rem}.v-modal__nav--next{right:.2rem}.v-modal__card{border-radius:10px}} /* ── §T — v-user-menu: auth-aware header user dropdown ────────────────────── Toggle via initUserMenu() in theme.js (data-action="user-menu-toggle") */ .v-user-menu{position:relative;display:inline-flex;align-items:center} .v-user-menu__trigger{display:inline-flex;align-items:center;gap:.4rem;background:color-mix(in srgb,var(--hdr-text,#fff) 8%,transparent);border:1px solid color-mix(in srgb,var(--hdr-text,#fff) 15%,transparent);color:var(--hdr-text,#fff);font-size:var(--fs-sm,.875rem);font-weight:600;font-family:var(--font-family,inherit);padding:.35rem .85rem;border-radius:var(--border-radius,6px);cursor:pointer;white-space:nowrap;transition:background .2s,border-color .2s} .v-user-menu__trigger:hover{background:color-mix(in srgb,var(--hdr-text,#fff) 14%,transparent)} .v-user-menu__trigger svg{flex-shrink:0;transition:transform .2s} .v-user-menu.open .v-user-menu__trigger svg.v-um-chevron{transform:rotate(180deg)} .v-hdr-icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:color-mix(in srgb,var(--primary-color,#c96c3a) 12%,transparent);color:var(--primary-dark,#a0472a);border:1.5px solid color-mix(in srgb,var(--primary-color,#c96c3a) 22%,transparent);cursor:pointer;text-decoration:none;flex-shrink:0;transition:background .2s,border-color .2s,transform .15s} .v-hdr-icon-btn:hover{background:color-mix(in srgb,var(--primary-color,#c96c3a) 20%,transparent);border-color:color-mix(in srgb,var(--primary-color,#c96c3a) 40%,transparent);transform:translateY(-1px)} .v-user-menu__dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:200px;background:var(--bg-color,#fff);border:1px solid var(--border-color,#e5e7eb);border-radius:var(--card-radius,8px);box-shadow:0 8px 32px rgba(0,0,0,.18);z-index:9999;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease} .v-user-menu.open .v-user-menu__dropdown{opacity:1;pointer-events:auto;transform:translateY(0)} .v-user-menu__dropdown>a{display:flex;align-items:center;gap:.6rem;padding:.65rem 1rem;color:var(--text-color,#374151);font-size:.875rem;font-weight:500;font-family:var(--font-family,inherit);text-decoration:none;transition:background .15s,color .15s} .v-user-menu__dropdown>a:first-child{border-radius:var(--card-radius,8px) var(--card-radius,8px) 0 0} .v-user-menu__dropdown>a:hover{background:color-mix(in srgb,var(--primary-color,#c96c3a) 8%,transparent);color:var(--primary-dark,var(--primary-color))} .v-user-menu__divider{height:1px;background:var(--border-color,#e5e7eb);margin:.25rem 0} .v-user-menu__signout{color:#dc2626 !important;font-weight:600 !important;border-radius:0 0 var(--card-radius,8px) var(--card-radius,8px)} .v-user-menu__signout:hover{background:color-mix(in srgb,#dc2626 8%,transparent) !important;color:#b91c1c !important} .v-hsc2-mob-welcome{display:flex;align-items:center;gap:.6rem;padding:.75rem 0 .5rem} .v-hsc2-mob-tp-links{display:flex;flex-wrap:wrap;gap:.4rem;padding:.5rem 0} .v-hsc2-mob-tp-links a{flex:1 1 calc(50% - .4rem);display:flex;align-items:center;justify-content:center;padding:.4rem .5rem;border-radius:999px;font-size:.75rem;font-weight:600;color:var(--primary-dark,#a0472a);background:transparent;border:1px solid color-mix(in srgb,var(--primary-color,#c96c3a) 35%,transparent);text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s} .v-hsc2-mob-tp-links a:hover{background:color-mix(in srgb,var(--primary-color,#c96c3a) 8%,transparent);border-color:color-mix(in srgb,var(--primary-color,#c96c3a) 55%,transparent)} .v-hsc2-mob-tp-auth{display:flex;gap:.5rem;padding:.5rem 0} .v-hsc2-mob-cart-top{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--primary-color,#c96c3a);color:#fff;flex-shrink:0;text-decoration:none;transition:background .15s} .v-hsc2-mob-cart-top:hover{background:var(--primary-dark,#a0472a)} .v-hsc2-mob-cart-badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;border-radius:8px;background:var(--primary-dark,#a0472a);color:#fff;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;border:1.5px solid #fff;padding:0 2px;line-height:1} .v-user-menu__header{display:flex;align-items:center;gap:.75rem;padding:.85rem 1rem .75rem} .v-user-menu__avatar{width:36px;height:36px;border-radius:50%;background:var(--primary-color,#c96c3a);color:#fff;font-size:.95rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;text-transform:uppercase} .v-user-menu__welcome{font-size:.7rem;color:var(--text-muted,#6b7280);font-weight:500;line-height:1.2;text-transform:uppercase;letter-spacing:.04em} .v-user-menu__uname{font-size:.875rem;font-weight:700;color:var(--text-strong,#111827);line-height:1.3} /* ── §CO-13 — Two-Column Portrait Feature · Flush / No Gap ─────────────────*/ .co13-section{padding:4rem 0} .co13-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:var(--co13-mw,60rem);margin:0 auto} .co13-col{display:flex;flex-direction:column} .co13-img-wrap{width:100%;overflow:hidden;border:1px solid var(--card-border,#e2e8f0) !important;border-bottom:none !important} .co13-col:first-child .co13-img-wrap{border-right:none !important} .co13-img{width:100%;height:100%;display:block;object-fit:cover} .co13-body{padding:1.75rem;flex:1;display:flex;flex-direction:column;gap:.75rem;border:1px solid var(--card-border,#e2e8f0);border-top:none} .co13-col:first-child .co13-body{border-right:none} .co13-eyebrow{font-size:var(--fs-xs,.72rem);font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--primary-color,#e53e3e);margin:0} .co13-title{font-size:var(--fs-h3,1.2rem);font-weight:800;color:var(--text-strong,#111827);margin:0;line-height:1.3} .co13-desc{line-height:1.8;color:var(--text-muted,#6b7280);margin:0;flex:1;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .co13-btn{display:inline-block;margin-top:auto;padding:.6rem 1.5rem;background:var(--snav-bg,var(--primary-color,#e53e3e));color:var(--snav-color,#fff);font-weight:700;text-decoration:none;border-radius:var(--card-radius,6px);transition:background .18s,color .18s;align-self:flex-start} .co13-btn:hover{background:var(--snav-hover,var(--primary-dark,#c53030));color:var(--snav-hover-color,#fff)} @media(max-width:600px){.co13-grid{grid-template-columns:1fr}.co13-col:first-child .co13-body{border-right:1px solid var(--card-border,#e2e8f0)}} /* ── §TM-01 — Portrait Card Scroller ───────────────────────────────────────*/ .tm1-track{gap:1.5rem} .tm1-card{flex:0 0 240px;display:flex;flex-direction:column;border-radius:var(--card-radius,10px);overflow:hidden;background:var(--card-bg,#fff);border:1px solid var(--card-border,#e5e7eb);box-shadow:var(--card-shadow,0 2px 6px rgba(0,0,0,.06));transition:transform .25s,box-shadow .25s} .tm1-card:hover{transform:translateY(-3px);box-shadow:0 4px 12px rgba(0,0,0,.08)} .tm1-img-wrap{width:100%;aspect-ratio:1/1;overflow:hidden;background:#f3f4f6} .tm1-img-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease} .tm1-card:hover .tm1-img-wrap img{transform:scale(1.04)} .tm1-body{padding:1.1rem 1.1rem 1.4rem;display:flex;flex-direction:column;gap:.45rem;flex:1} .tm1-tag{font-size:var(--fs-xs,.72rem);font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--primary-color,#e53e3e)} .tm1-name{font-size:var(--fs-h4,1.05rem);font-weight:800;color:var(--card-title,var(--text-strong,#111827));margin:0;line-height:1.3} .tm1-bio{font-size:var(--fs-sm,.82rem);line-height:1.65;color:var(--card-text,var(--text-muted,#6b7280));margin:0;flex:1} .tm1-social{display:flex;gap:.5rem;margin-top:.5rem} .tm1-social a{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--card-border,#e5e7eb);color:var(--text-muted,#6b7280);transition:background .18s,color .18s,border-color .18s} .tm1-social a:hover{background:var(--primary-color,#e53e3e);border-color:var(--primary-color,#e53e3e);color:#fff} .tm1-social svg{width:13px;height:13px} /* ── §TM-02 — Hover Image Swap Scroller (Author Photo → Book Cover) ────────*/ .tm2-track{gap:1.5rem} .tm2-card{flex:0 0 240px;border-radius:var(--card-radius,10px);overflow:hidden} .tm2-img-wrap{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:#111;border-radius:var(--card-radius,10px)} .tm2-photo,.tm2-book{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .45s ease,transform .45s ease} .tm2-book{opacity:0;transform:scale(1.05)} .tm2-card:hover .tm2-photo{opacity:0;transform:scale(1.05)} .tm2-card:hover .tm2-book{opacity:1;transform:scale(1)} .tm2-overlay{position:absolute;bottom:0;left:0;right:0;padding:1.25rem 1rem 1rem;background:linear-gradient(to top,rgba(0,0,0,.75) 0%,transparent 100%);z-index:2} .tm2-tag{display:block;font-size:var(--fs-xs,.7rem);font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--primary-color,#e53e3e);margin-bottom:.25rem} .tm2-name{font-size:var(--fs-h4,1rem);font-weight:800;color:#fff;margin:0;line-height:1.3} /* ── §TM-03 — Circle Avatar Scroller (Rating Badge + Bio + Social) ─────────*/ .tm3-track{gap:1.5rem} .tm3-card{flex:0 0 220px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.75rem 1.25rem 1.5rem;background:var(--card-bg,#fff);border:1px solid var(--card-border,#e5e7eb);border-radius:var(--card-radius,12px);box-shadow:var(--card-shadow,0 2px 6px rgba(0,0,0,.06));transition:transform .25s,box-shadow .25s} .tm3-card:hover{transform:translateY(-3px);box-shadow:0 4px 12px rgba(0,0,0,.08)} .tm3-avatar-wrap{position:relative;width:96px;height:96px;margin-bottom:1.25rem;flex-shrink:0} .tm3-avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;display:block;border:3px solid var(--card-border,#e5e7eb)} .tm3-badge{position:absolute;bottom:-4px;right:-4px;display:flex;align-items:center;gap:3px;background:var(--primary-color,#e53e3e);color:#fff;font-size:.68rem;font-weight:700;padding:3px 7px;border-radius:20px;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.18)} .tm3-badge svg{width:10px;height:10px;fill:#fff;flex-shrink:0} .tm3-name{font-size:var(--fs-h4,1.05rem);font-weight:800;color:var(--card-title,var(--text-strong,#111827));margin:0 0 .5rem} .tm3-bio{font-size:var(--fs-sm,.85rem);line-height:1.6;color:var(--card-text,var(--text-muted,#6b7280));margin:0 0 1rem;flex:1} .tm3-bio a{color:var(--primary-color,#e53e3e);text-decoration:underline;text-underline-offset:2px;font-weight:600} .tm3-social{display:flex;gap:.55rem;margin-top:auto} .tm3-social a{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--card-border,#e5e7eb);color:var(--text-muted,#9ca3af);transition:background .18s,color .18s,border-color .18s} .tm3-social a:hover{background:var(--primary-color,#e53e3e);border-color:var(--primary-color,#e53e3e);color:#fff} .tm3-social svg{width:14px;height:14px} @media(max-width:900px){.tm3-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px){.tm3-grid{grid-template-columns:1fr}} /* ── §TM-04 — Author Card Scroller (portrait · ghost number · CTA) ─────────*/ .tm4-track{gap:1.5rem} .tm4-card{flex:0 0 260px;display:flex;flex-direction:column;border-radius:var(--card-radius,10px);overflow:hidden;background:var(--tm4-tint,#fff);border:1px solid var(--card-border,#e5e7eb);box-shadow:var(--card-shadow,0 2px 8px rgba(0,0,0,.06));transition:transform .25s,box-shadow .25s} .tm4-card:hover{transform:translateY(-4px);box-shadow:var(--card-shadow-hover,0 4px 12px rgba(0,0,0,.08))} .tm4-img{width:100%;aspect-ratio:1/1;overflow:hidden;background:#f3f4f6} .tm4-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease} .tm4-card:hover .tm4-img img{transform:scale(1.06)} .tm4-body{position:relative;padding:1.25rem 1.25rem 1.5rem;display:flex;flex-direction:column;gap:.45rem;flex:1} .tm4-ghost{position:absolute;top:-1.6rem;right:1rem;font-size:4.5rem;font-weight:900;line-height:1;color:var(--tm4-accent,var(--primary-color,#e53e3e));opacity:.08;pointer-events:none;user-select:none} .tm4-tag{font-size:var(--fs-xs,.7rem);font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--tm4-accent,var(--primary-color,#e53e3e))} .tm4-name{font-size:var(--fs-h4,1.05rem);font-weight:800;color:var(--card-title,var(--text-strong,#111827));margin:0;line-height:1.3} .tm4-bio{font-size:var(--fs-sm,.82rem);line-height:1.65;color:var(--card-text,var(--text-muted,#6b7280));margin:0;flex:1} .tm4-btn{display:inline-block;margin-top:.75rem;padding:.45rem 1.1rem;background:var(--tm4-accent,var(--primary-color,#e53e3e));color:#fff;font-size:var(--fs-xs,.75rem);font-weight:700;border-radius:20px;text-decoration:none;transition:opacity .18s;align-self:flex-start} .tm4-btn:hover{opacity:.85} body.pg-top{background:var(--surface-color,#f1f5f9);padding:clamp(1.5rem,4vw,3rem) clamp(1rem,4vw,3rem);display:flex;flex-wrap:wrap;gap:2rem;align-items:flex-end}body.pg-lists{background:#f0f0f0;color:var(--text-strong,#1e293b)}body.pg-lists img{display:block;max-width:100%}body.pg-demo{background:#f3f4f6;font-family:system-ui,sans-serif;color:var(--text-color);margin:0} /* ══════════════════════════════════════════════════════════════════ §AE PB-06 — Icon Trio product card (3 circle buttons on hover) ══════════════════════════════════════════════════════════════════ */ .classic-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.25rem} .classic-card{background:#fff;border-radius:var(--card-radius,10px);box-shadow:0 2px 12px rgba(0,0,0,.07);overflow:hidden;transition:box-shadow .25s,transform .25s;position:relative;display:flex;flex-direction:column} .classic-card:hover{box-shadow:0 8px 28px rgba(0,0,0,.14);transform:translateY(-3px)} .classic-card-img-wrap{position:relative;overflow:hidden;background:#f5f5f5;aspect-ratio:1/1} .classic-card-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease} .classic-card:hover .classic-card-img{transform:scale(1.04)} .classic-card-icon-row{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:.6rem;padding:.75rem;background:rgba(255,255,255,.18);backdrop-filter:blur(2px);transform:translateY(100%);transition:transform .3s ease;z-index:2} .classic-card:hover .classic-card-icon-row{transform:translateY(0)} .classic-card-icon-btn{width:38px;height:38px;border-radius:50%;background:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.18);color:var(--text-strong,#111827);transition:background .2s,color .2s,transform .2s} .classic-card-icon-btn:hover{background:var(--primary-color,#fcd703);color:var(--text-inverse,#fff);transform:scale(1.1)} .classic-card-icon-btn svg{width:16px;height:16px;pointer-events:none} .classic-card-body{padding:.85rem 1rem 1rem;flex:1;display:flex;flex-direction:column} .classic-card-title{font-size:var(--fs-body,.9rem);font-weight:600;color:var(--text-strong,#111827);line-height:1.35;margin-bottom:.4rem} .classic-card-author{font-size:var(--fs-xs,.72rem);color:var(--text-color,#374151);margin-bottom:.35rem} .classic-card-price{font-size:var(--fs-sm,.82rem);font-weight:600;color:var(--text-strong,#111827);margin-top:auto;padding-top:.4rem} .classic-card-cart-btn{width:38px;height:38px;border-radius:50%;background:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.18);color:var(--text-strong,#111827);flex-shrink:0;overflow:hidden;position:relative;transition:width .4s cubic-bezier(.4,0,.2,1),border-radius .4s,background .3s,box-shadow .3s} .classic-card-cart-btn:hover{background:var(--primary-color,#fcd703);color:var(--text-inverse,#fff)} @keyframes classic-card-spin{to{transform:rotate(360deg)}} .classic-card-spin{animation:classic-card-spin .7s linear infinite} .classic-card-cart-icon{display:flex;align-items:center;justify-content:center;pointer-events:none;transition:opacity .15s .1s} .classic-card-spin-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .15s} .classic-card-cart-qty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.5rem;opacity:0;pointer-events:none;transition:opacity .2s .25s} .classic-card.classic-card-active .classic-card-icon-row{gap:0;background:var(--text-strong,#111827);transform:translateY(0)} .classic-card.classic-card-active .classic-card-icon-btn{opacity:0;width:0;overflow:hidden;pointer-events:none;transition:opacity .2s,width .3s .1s} .classic-card.classic-card-active .classic-card-cart-btn{width:100%;border-radius:0;background:var(--text-strong,#111827);color:#fff;box-shadow:none} .classic-card-done-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .15s} .classic-card-cart-btn.classic-card-loading .classic-card-cart-icon{opacity:0;transition:opacity .12s} .classic-card-cart-btn.classic-card-loading .classic-card-spin-wrap{opacity:1} .classic-card-cart-btn.classic-card-done .classic-card-cart-icon{opacity:0;transition:opacity .12s} .classic-card-cart-btn.classic-card-done .classic-card-done-wrap{opacity:1} .classic-card.classic-card-active .classic-card-cart-icon{opacity:0;pointer-events:none;transition:opacity .15s} .classic-card.classic-card-active .classic-card-cart-qty{opacity:1;pointer-events:all} .classic-card-qty-inner{display:flex;align-items:center;gap:0;width:120px;justify-content:space-between} .classic-card-q-btn{background:rgba(255,255,255,.15);border:none;color:#fff;width:36px;height:36px;border-radius:50%;font-size:1.1rem;font-weight:400;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;transition:background .15s} .classic-card-q-btn:hover{background:rgba(255,255,255,.28)} .classic-card-q-count{font-size:.95rem;font-weight:600;min-width:24px;text-align:center} .sc-track .classic-card{width:240px} /* classic-card extensions — out-of-stock badge + no-image placeholder */ .classic-card-oos-badge{display:inline-flex;align-items:center;align-self:flex-start;margin-top:.3rem;padding:.15rem .55rem;border-radius:999px;font-size:.68rem;font-weight:700;letter-spacing:.02em;background:color-mix(in srgb,var(--error-color,#ef4444) 12%,transparent);color:var(--error-color,#ef4444);border:1px solid color-mix(in srgb,var(--error-color,#ef4444) 30%,transparent)} .classic-card-noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--text-muted,#9ca3af) 8%,transparent);color:var(--text-muted,#9ca3af)} /* ── §AE — rn-* Static-page header (Rohini Nandan) ── */ #rn-navbar{font-family:var(--font-family,system-ui,sans-serif);position:sticky;top:0;z-index:50;background:var(--hdr-bg,#fff);box-shadow:var(--hdr-shadow,0 1px 3px rgba(0,0,0,.07))} #rn-ann{overflow:hidden;padding:.45rem 2.5rem .45rem 0;position:relative;font-family:var(--font-family,inherit);line-height:1.1} #rn-ann-track{display:inline-flex;align-items:center;white-space:nowrap;will-change:transform} .rn-ann-item{display:inline-flex;align-items:center;font-size:1rem;font-weight:var(--hdr-nav-fw,400);padding:0 1.5rem} .rn-ann-sep{display:inline-flex;align-items:center;font-size:var(--fs-sm,.875rem);flex-shrink:0} #rn-ann>button{position:absolute;right:0;top:0;height:100%;display:flex;align-items:center;padding:0 .9rem;background:rgba(0,0,0,.25);border:none;border-left:1px solid rgba(255,255,255,.2);cursor:pointer;color:inherit;font-size:1.1rem;font-weight:700;line-height:1;z-index:2} #rn-ann>button:hover{background:rgba(0,0,0,.45)} .rn-phone-pill{display:none}@media(min-width:768px){.rn-phone-pill{display:flex}} .rn-row-top{border-bottom:1px solid var(--hdr-border,#e5e7eb)} .rn-row-inner{display:flex;align-items:center;gap:.75rem;padding:.6rem 1.25rem;max-width:1280px;margin:0 auto} .rn-col-left{display:flex;align-items:center;gap:.6rem;flex-shrink:0} .rn-col-center{flex:1;display:flex;justify-content:start} .rn-col-right{display:flex;align-items:center;gap:.65rem;flex-shrink:0;position:relative} #rn-burger{display:none;flex-direction:column;gap:5px;align-items:flex-end;justify-content:center;width:38px;height:38px;background:transparent;border:none;cursor:pointer;padding:8px 7px;border-radius:8px} #rn-burger span{display:block;height:2px;background:var(--hdr-text,#111);border-radius:1px} #rn-burger span:nth-child(1){width:20px} #rn-burger span:nth-child(2){width:13px} #rn-burger span:nth-child(3){width:20px} .rn-search{position:relative;display:flex;align-items:center} .rn-search svg{position:absolute;left:.7rem;pointer-events:none;opacity:.45} .rn-search input{padding:.42rem .8rem .42rem 2rem;border:1px solid var(--hdr-border,#e5e7eb);border-radius:var(--border-radius,50px);font-size:.875rem;min-width:210px;background:transparent;color:var(--hdr-text,#111);font-family:inherit} .rn-search input:focus{outline:none;border-color:var(--primary-color,#8b1c1c)} .v-suggest{display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:100%;width:max-content;max-width:min(520px,90vw);background:var(--bg-color,#fff);border:1px solid var(--border-color,#e5e7eb);border-radius:min(var(--border-radius,8px),12px);box-shadow:0 8px 24px rgba(0,0,0,.1);z-index:9999;overflow:hidden} .v-suggest--open{display:block} .v-suggest__item{display:flex;align-items:center;gap:.9rem;width:100%;padding:.52rem 1rem;font-size:.875rem;color:var(--text-color,#111);background:none;border:none;border-bottom:1px solid color-mix(in srgb,var(--border-color,#e5e7eb) 60%,transparent);text-align:left;cursor:pointer;font-family:inherit;transition:background .12s} .v-suggest__item:last-child{border-bottom:none} .v-suggest__item:hover,.v-suggest__item--active{background:color-mix(in srgb,var(--primary-color,#8b1c1c) 7%,transparent)} .v-suggest__item:hover .v-suggest__text,.v-suggest__item--active .v-suggest__text{color:var(--primary-color,#8b1c1c)} .v-suggest__ico{flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--primary-color,#8b1c1c)} .v-suggest__ico svg{width:16px;height:16px} .v-suggest__text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem} .v-suggest__label{padding:.35rem 1rem .2rem;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--primary-color,#8b1c1c)} .v-suggest__empty{padding:.65rem 1rem;font-size:.85rem;color:color-mix(in srgb,var(--text-color) 50%,transparent)} .rn-search input{text-overflow:ellipsis} .rn-cta{display:inline-flex;align-items:center;padding:.42rem 1.3rem;background:var(--primary-color,#8b1c1c);color:var(--text-inverse,#fff);font-size:var(--hdr-nav-fs,.875rem);font-weight:700;border-radius:var(--border-radius,50px);white-space:nowrap;text-decoration:none;transition:background .2s} .rn-cta:hover{background:var(--primary-dark,#6b1515);color:var(--text-inverse,#fff)} .rn-cta-ghost{background:transparent;border:1px solid color-mix(in srgb,var(--hdr-text,#111) 30%,transparent);color:var(--hdr-text,#111)} .rn-cta-ghost:hover{background:color-mix(in srgb,var(--hdr-text,#111) 8%,transparent);color:var(--hdr-text,#111)} .rn-row-links{display:none;border-bottom:1px solid var(--hdr-border,#e5e7eb);background:var(--hdr-bg,#fff);position:relative} .rn-row-links-inner{display:flex;align-items:center;gap:.2rem;padding:.35rem 1.25rem;max-width:1280px;margin:0 auto;flex-wrap:wrap} .rn-link{display:inline-flex;align-items:center;gap:.35rem;padding:.5rem .85rem;color:var(--hdr-text,#111);font-size:var(--hdr-nav-fs,.875rem);font-weight:var(--hdr-nav-fw,600);text-decoration:none;border-radius:var(--border-radius,6px);transition:background .15s,color .15s;white-space:nowrap} .rn-link:hover,.rn-link.active{background:var(--primary-color,#465fff);color:var(--text-inverse,#fff)} .rn-drop{position:relative}.rn-drop.pl-drop-cat{position:static} .rn-drop-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.5rem .85rem;background:transparent;border:none;color:color-mix(in srgb,var(--hdr-text,#111) 75%,transparent);font-size:var(--hdr-nav-fs,.875rem);font-weight:var(--hdr-nav-fw,600);cursor:pointer;border-radius:var(--border-radius,6px);font-family:var(--heading-font,var(--font-family,system-ui,sans-serif));white-space:nowrap;transition:background .15s,color .15s} .rn-drop-btn:hover,.rn-drop:hover .rn-drop-btn,.rn-drop:focus-within .rn-drop-btn{background:color-mix(in srgb,var(--primary-color,#465fff) 10%,transparent);color:var(--primary-text,var(--primary-color,#465fff))} .pl-link{display:inline-flex;align-items:center;gap:.35rem;padding:.5rem .85rem;color:color-mix(in srgb,var(--hdr-text,#111) 75%,transparent);font-size:var(--hdr-nav-fs,.875rem);font-weight:var(--hdr-nav-fw,600);text-decoration:none;border-radius:0;position:relative;transition:color .15s;white-space:nowrap} .pl-link::after{content:'';position:absolute;bottom:4px;left:.85rem;right:.85rem;height:2px;background:var(--primary-color,#465fff);transform:scaleX(0);transform-origin:left;transition:transform .25s ease} .pl-link:hover{color:var(--primary-text,var(--primary-color,#465fff))} .pl-link.active{color:var(--primary-text,var(--primary-color,#465fff))} .pl-link:hover::after,.pl-link.active::after{transform:scaleX(1)} .pl-drop-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.5rem .85rem;background:transparent;border:none;color:color-mix(in srgb,var(--hdr-text,#111) 75%,transparent);font-size:var(--hdr-nav-fs,.875rem);font-weight:var(--hdr-nav-fw,600);cursor:pointer;border-radius:0;position:relative;font-family:var(--heading-font,var(--font-family,system-ui,sans-serif));white-space:nowrap;transition:color .15s} .pl-drop-btn::after{content:'';position:absolute;bottom:4px;left:.85rem;right:.85rem;height:2px;background:var(--primary-color,#465fff);transform:scaleX(0);transform-origin:left;transition:transform .25s ease} .pl-drop-btn:hover,.rn-drop:hover .pl-drop-btn,.rn-drop:focus-within .pl-drop-btn{background:transparent;color:var(--primary-text,var(--primary-color,#465fff))} .pl-drop-btn:hover::after,.rn-drop:hover .pl-drop-btn::after,.rn-drop:focus-within .pl-drop-btn::after{transform:scaleX(1)} .pl-link-inv{display:inline-flex;align-items:center;gap:.35rem;padding:.55rem .9rem;color:var(--hdr-text,#111);font-size:var(--hdr-nav-fs,.875rem);font-weight:var(--hdr-nav-fw,600);text-decoration:none;border-radius:var(--border-radius,6px);transition:background .15s,color .15s;white-space:nowrap} .pl-link-inv:hover,.pl-link-inv.active{background:var(--primary-color,#465fff);color:var(--primary-text,var(--text-inverse,#fff))} .pl-drop-btn-inv{display:inline-flex;align-items:center;gap:.35rem;padding:.55rem .9rem;border:none;color:var(--hdr-text,#111);font-weight:var(--hdr-nav-fw,600);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s} .pl-drop-btn-inv:hover,.pl-drop-btn-inv.active,.rn-drop:hover .pl-drop-btn-inv,.rn-drop:focus-within .pl-drop-btn-inv{background:var(--primary-color,#465fff);color:var(--primary-text,var(--text-inverse,#fff))} .rn-search-exp{position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:10;transition:width .35s ease} .rn-search-exp:focus-within{width:100% !important} .rn-search-exp:focus-within input{background:#fff;padding-top:.65rem;padding-bottom:.65rem;border-color:var(--primary-color)} .rn-col-right .rn-cta{transition:opacity .25s} .rn-col-right:has(.rn-search-exp:focus-within) .rn-cta{opacity:0;pointer-events:none} .rn-row-links .pl-link-inv,.rn-row-links .pl-drop-btn-inv{border-radius:0} .rn-drop .chev{transition:transform .2s} .rn-drop:hover .chev,.rn-drop:focus-within .chev{transform:rotate(180deg)} .rn-drop-menu{position:absolute;top:100%;left:0;min-width:200px;padding:.4rem;background:var(--bg-color,#fff);border:1px solid var(--border-color,#e5e7eb);border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.1);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility .15s;z-index:60} .rn-drop:hover .rn-drop-menu,.rn-drop:focus-within .rn-drop-menu{opacity:1;visibility:visible;transform:translateY(0)} .rn-drop-item{display:flex;align-items:center;gap:.5rem;padding:.5rem .65rem;color:var(--text-color,#374151);font-size:var(--hdr-nav-fs,.85rem);font-weight:var(--hdr-nav-fw,600);text-decoration:none;border-radius:6px} .rn-drop-item:hover,.rn-drop-item.active{background:color-mix(in srgb,var(--primary-color,#465fff) 8%,transparent);color:var(--primary-color,#465fff)} details.rn-drop>summary{list-style:none;cursor:pointer} details.rn-drop>summary::-webkit-details-marker{display:none} details.rn-drop[open]>.rn-drop-menu{opacity:1;visibility:visible;transform:translateY(0)} details.rn-drop[open] .chev{transform:rotate(180deg)} /* ── rn-cat-drop: store-category-panel ────────────────────────────────────── All panel visual styles (position, bg, border, grid, card sizes) are inline in the Go render functions (catpanel_mega/cols/1col.go). CSS here only: 1. show/hide via :hover / :focus-within 2. card hover states (need :hover pseudo-class) */ .rn-cat-drop{position:relative} /* button hidden while component is still loading (no rn-cat-panel in DOM yet) */ .rn-cat-drop:not(:has(.rn-cat-panel)) .nav-drop-btn{opacity:0;pointer-events:none} .rn-cat-drop:has(.rn-cat-panel) .nav-drop-btn{opacity:1;transition:opacity .25s} .nav-drop-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.5rem .85rem;background:transparent;border:none;color:color-mix(in srgb,var(--hdr-text,#111) 75%,transparent);font-size:var(--hdr-nav-fs,.875rem);font-weight:var(--hdr-nav-fw,600);cursor:pointer;border-radius:var(--border-radius,6px);font-family:var(--heading-font,var(--font-family,system-ui,sans-serif));white-space:nowrap;transition:background .15s,color .15s} .rn-cat-drop:hover .nav-drop-btn,.rn-cat-drop:focus-within .nav-drop-btn{background:color-mix(in srgb,var(--primary-color,#465fff) 10%,transparent);color:var(--primary-text,var(--primary-color,#465fff))} .rn-cat-drop .rn-cat-panel{opacity:0;visibility:hidden;transition:opacity .15s,visibility .15s} .rn-cat-drop:hover .rn-cat-panel,.rn-cat-drop:focus-within .rn-cat-panel{opacity:1;visibility:visible} /* non-mega panels slide down slightly */ .rn-cat-drop .rn-cat-panel:not(.rn-cat-panel--mega){transform:translateY(-4px);transition:opacity .15s,visibility .15s,transform .15s} .rn-cat-drop:hover .rn-cat-panel:not(.rn-cat-panel--mega),.rn-cat-drop:focus-within .rn-cat-panel:not(.rn-cat-panel--mega){transform:translateY(0)} /* ── Reusable rn-* keyframes (usable beyond cat panel) ───────────────────── rn-shimmer : light streak sweeps L→R rn-ripple : circle expands from center rn-bounce : springy upward lift */ @keyframes rn-shimmer{from{transform:translateX(-100%)}to{transform:translateX(220%)}} @keyframes rn-ripple{0%{width:0;height:0;opacity:.55}100%{width:260px;height:260px;opacity:0}} @keyframes rn-bounce{0%{transform:translateY(0)}45%{transform:translateY(-5px)}70%{transform:translateY(-2px)}85%{transform:translateY(-4px)}100%{transform:translateY(-3px)}} /* ── rn-cat-panel hover effects — driven by class on .rn-cat-panel ───────── Add class rn-cat-hover--X to the panel (via hover param in Dynamic Slots). Mega cards = .rn-cat-card--mega Cols cards = .rn-cat-card--cols 1-col = .rn-cat-item Animated effects (shimmer/ripple/bounce) use @keyframes rn-* defined above. */ /* lift (mega default): card rises + border tint + soft shadow */ .rn-cat-panel.rn-cat-hover--lift .rn-cat-card--mega:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.1);border-color:color-mix(in srgb,var(--primary-color,#8b1c1c) 35%,#e8e0d5) !important;background:color-mix(in srgb,var(--primary-color,#8b1c1c) 5%,#fff) !important} .rn-cat-panel.rn-cat-hover--lift .rn-cat-card--cols:hover{border-left-color:var(--primary-color,#8b1c1c) !important;background:color-mix(in srgb,var(--primary-color,#8b1c1c) 5%,#fff) !important} .rn-cat-panel.rn-cat-hover--lift .rn-cat-item:hover{background:color-mix(in srgb,var(--primary-color,#8b1c1c) 8%,#fff)} /* glow: primary color ring */ .rn-cat-panel.rn-cat-hover--glow .rn-cat-card--mega:hover{box-shadow:0 0 0 2px var(--primary-color,#8b1c1c),0 4px 16px color-mix(in srgb,var(--primary-color,#8b1c1c) 22%,transparent);border-color:var(--primary-color,#8b1c1c) !important} .rn-cat-panel.rn-cat-hover--glow .rn-cat-card--cols:hover{box-shadow:inset 0 0 0 1px var(--primary-color,#8b1c1c);border-left-color:var(--primary-color,#8b1c1c) !important} .rn-cat-panel.rn-cat-hover--glow .rn-cat-item:hover{box-shadow:inset 2px 0 0 var(--primary-color,#8b1c1c);background:color-mix(in srgb,var(--primary-color,#8b1c1c) 6%,#fff)} /* fill: primary color background + white text */ .rn-cat-panel.rn-cat-hover--fill .rn-cat-card--mega:hover,.rn-cat-panel.rn-cat-hover--fill .rn-cat-card--cols:hover{background:var(--primary-color,#8b1c1c) !important;color:#fff !important;border-color:var(--primary-color,#8b1c1c) !important} .rn-cat-panel.rn-cat-hover--fill .rn-cat-item:hover{background:var(--primary-color,#8b1c1c) !important;color:#fff !important} /* gradient: diagonal tint (mega) / tint fill (cols/1col) */ .rn-cat-panel.rn-cat-hover--gradient .rn-cat-card--mega:hover{background:linear-gradient(135deg,color-mix(in srgb,var(--primary-color,#8b1c1c) 14%,#fff) 0%,#fff 100%) !important;border-color:color-mix(in srgb,var(--primary-color,#8b1c1c) 40%,#e8e0d5) !important;transform:translateY(-1px)} .rn-cat-panel.rn-cat-hover--gradient .rn-cat-card--cols:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--primary-color,#8b1c1c) 10%,#fff) 0%,#fff 100%) !important;border-left-color:var(--primary-color,#8b1c1c) !important} .rn-cat-panel.rn-cat-hover--gradient .rn-cat-item:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--primary-color,#8b1c1c) 10%,#fff) 0%,#fff 100%)} /* scale: grows slightly */ .rn-cat-panel.rn-cat-hover--scale .rn-cat-card--mega:hover{transform:scale(1.04);box-shadow:0 4px 14px rgba(0,0,0,.1);border-color:color-mix(in srgb,var(--primary-color,#8b1c1c) 25%,#e8e0d5) !important} .rn-cat-panel.rn-cat-hover--scale .rn-cat-card--cols:hover,.rn-cat-panel.rn-cat-hover--scale .rn-cat-item:hover{background:color-mix(in srgb,var(--primary-color,#8b1c1c) 8%,#fff) !important} /* border: left-bar (cols default) / border tint (mega) / inset-left (1col) */ .rn-cat-panel.rn-cat-hover--border .rn-cat-card--mega:hover{border-color:var(--primary-color,#8b1c1c) !important;background:color-mix(in srgb,var(--primary-color,#8b1c1c) 4%,#fff) !important} .rn-cat-panel.rn-cat-hover--border .rn-cat-card--cols:hover{border-left-color:var(--primary-color,#8b1c1c) !important;background:color-mix(in srgb,var(--primary-color,#8b1c1c) 5%,#fff) !important} .rn-cat-panel.rn-cat-hover--border .rn-cat-item:hover{border-left:2px solid var(--primary-color,#8b1c1c);padding-left:calc(.75rem - 2px);background:color-mix(in srgb,var(--primary-color,#8b1c1c) 5%,#fff)} /* bg: subtle tint fill (1col default) */ .rn-cat-panel.rn-cat-hover--bg .rn-cat-card--mega:hover{background:color-mix(in srgb,var(--primary-color,#8b1c1c) 6%,#fff) !important;border-color:color-mix(in srgb,var(--primary-color,#8b1c1c) 20%,#e8e0d5) !important} .rn-cat-panel.rn-cat-hover--bg .rn-cat-card--cols:hover{background:color-mix(in srgb,var(--primary-color,#8b1c1c) 8%,#fff) !important;border-left-color:color-mix(in srgb,var(--primary-color,#8b1c1c) 50%,transparent) !important} .rn-cat-panel.rn-cat-hover--bg .rn-cat-item:hover{background:color-mix(in srgb,var(--primary-color,#8b1c1c) 8%,#fff)} /* ── Shared base: effects that use ::after pseudo-element ─────────────────── shimmer + ripple need overflow:hidden to clip the animation inside the card. arrow does NOT clip — the chevron slides in from outside, so no overflow:hidden. */ .rn-cat-hover--shimmer .rn-cat-card,.rn-cat-hover--shimmer .rn-cat-item, .rn-cat-hover--ripple .rn-cat-card,.rn-cat-hover--ripple .rn-cat-item{position:relative;overflow:hidden} .rn-cat-hover--arrow .rn-cat-card,.rn-cat-hover--arrow .rn-cat-item{position:relative} /* All ::after pseudo-elements must never intercept pointer events */ .rn-cat-hover--shimmer .rn-cat-card::after,.rn-cat-hover--shimmer .rn-cat-item::after, .rn-cat-hover--ripple .rn-cat-card::after,.rn-cat-hover--ripple .rn-cat-item::after, .rn-cat-hover--arrow .rn-cat-card::after,.rn-cat-hover--arrow .rn-cat-item::after{pointer-events:none} /* shimmer: light streak sweeps L→R (uses @keyframes rn-shimmer) */ .rn-cat-hover--shimmer .rn-cat-card::after,.rn-cat-hover--shimmer .rn-cat-item::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-100%)} .rn-cat-hover--shimmer .rn-cat-card:hover{border-color:color-mix(in srgb,var(--primary-color,#8b1c1c) 30%,#e8e0d5) !important;background:color-mix(in srgb,var(--primary-color,#8b1c1c) 4%,#fff) !important} .rn-cat-hover--shimmer .rn-cat-item:hover{background:color-mix(in srgb,var(--primary-color,#8b1c1c) 6%,#fff)} .rn-cat-hover--shimmer .rn-cat-card:hover::after,.rn-cat-hover--shimmer .rn-cat-item:hover::after{animation:rn-shimmer .45s ease-out forwards} /* ripple: circle expands from center (uses @keyframes rn-ripple) */ .rn-cat-hover--ripple .rn-cat-card::after,.rn-cat-hover--ripple .rn-cat-item::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:color-mix(in srgb,var(--primary-color,#8b1c1c) 22%,transparent);transform:translate(-50%,-50%)} .rn-cat-hover--ripple .rn-cat-card--cols:hover{border-left-color:var(--primary-color,#8b1c1c) !important} .rn-cat-hover--ripple .rn-cat-card:hover::after,.rn-cat-hover--ripple .rn-cat-item:hover::after{animation:rn-ripple .5s ease-out forwards} /* bounce: springy upward lift (uses @keyframes rn-bounce) */ .rn-cat-hover--bounce .rn-cat-card--mega:hover{animation:rn-bounce .35s ease forwards;box-shadow:0 8px 22px rgba(0,0,0,.12);border-color:color-mix(in srgb,var(--primary-color,#8b1c1c) 30%,#e8e0d5) !important} .rn-cat-hover--bounce .rn-cat-card--cols:hover{background:color-mix(in srgb,var(--primary-color,#8b1c1c) 6%,#fff) !important;border-left-color:var(--primary-color,#8b1c1c) !important} .rn-cat-hover--bounce .rn-cat-item:hover{animation:rn-bounce .35s ease forwards;background:color-mix(in srgb,var(--primary-color,#8b1c1c) 6%,#fff)} /* bdleft: inset left bar via box-shadow + text nudges right via translateX */ .rn-cat-panel.rn-cat-hover--bdleft .rn-cat-card--mega:hover{box-shadow:inset 3px 0 0 var(--primary-color,#8b1c1c),0 4px 14px rgba(0,0,0,.08);transform:translateX(3px);background:color-mix(in srgb,var(--primary-color,#8b1c1c) 4%,#fff) !important} .rn-cat-panel.rn-cat-hover--bdleft .rn-cat-card--cols:hover{box-shadow:inset 3px 0 0 var(--primary-color,#8b1c1c);background:color-mix(in srgb,var(--primary-color,#8b1c1c) 5%,#fff) !important} .rn-cat-panel.rn-cat-hover--bdleft .rn-cat-item:hover{box-shadow:inset 3px 0 0 var(--primary-color,#8b1c1c);transform:translateX(3px);background:color-mix(in srgb,var(--primary-color,#8b1c1c) 5%,#fff)} /* arrow: › chevron slides in at right edge on hover */ .rn-cat-hover--arrow .rn-cat-card::after,.rn-cat-hover--arrow .rn-cat-item::after{content:'›';position:absolute;right:.55rem;top:50%;transform:translateY(-50%) translateX(6px);opacity:0;color:var(--primary-color,#8b1c1c);font-size:1.05rem;font-weight:700;transition:opacity .15s,transform .15s} .rn-cat-hover--arrow .rn-cat-card:hover,.rn-cat-hover--arrow .rn-cat-item:hover{background:color-mix(in srgb,var(--primary-color,#8b1c1c) 5%,#fff) !important;padding-right:1.6rem !important} .rn-cat-hover--arrow .rn-cat-card:hover::after,.rn-cat-hover--arrow .rn-cat-item:hover::after{opacity:1;transform:translateY(-50%) translateX(0)} /* ── rn-cat-panel--tiles: gradient card hover ─────────────────────────────── --tile-grad is set per-card inline (unique colour per category via name hash). Normal state: plain border only. Hover: gradient fades in via the CSS var. */ .rn-cat-panel--tiles .rn-cat-card--tile:hover{background:var(--tile-grad) !important;border-color:color-mix(in srgb,var(--primary-color,#8b1c1c) 30%,#e8e0d5) !important;transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.1)} /* ── rn-cat-panel--strip: scrollbar hidden by default, appears on hover ───── */ .rn-cat-panel--strip{scrollbar-width:none} .rn-cat-panel--strip::-webkit-scrollbar{height:0} .rn-cat-panel--strip:hover{scrollbar-width:thin;scrollbar-color:var(--primary-color,#8b1c1c) transparent} .rn-cat-panel--strip:hover::-webkit-scrollbar{height:3px} .rn-cat-panel--strip:hover::-webkit-scrollbar-track{background:transparent} .rn-cat-panel--strip:hover::-webkit-scrollbar-thumb{background:var(--primary-color,#8b1c1c);border-radius:2px} /* nudge: whole card shifts right, border tint confirms hover */ .rn-cat-panel.rn-cat-hover--nudge .rn-cat-card--mega:hover{transform:translateX(4px);background:color-mix(in srgb,var(--primary-color,#8b1c1c) 5%,#fff) !important;border-color:color-mix(in srgb,var(--primary-color,#8b1c1c) 25%,#e8e0d5) !important} .rn-cat-panel.rn-cat-hover--nudge .rn-cat-card--cols:hover{transform:translateX(4px);background:color-mix(in srgb,var(--primary-color,#8b1c1c) 5%,#fff) !important;border-left-color:var(--primary-color,#8b1c1c) !important} .rn-cat-panel.rn-cat-hover--nudge .rn-cat-item:hover{transform:translateX(4px);background:color-mix(in srgb,var(--primary-color,#8b1c1c) 6%,#fff)} /* PL mega — manual button triggers pl-cat-panel; component's v-catpanel runs inside it */ .pl-drop-cat{position:static} /* panel: height:0 + overflow:hidden when closed = zero hit area; full viewport width */ .pl-cat-panel{position:absolute;top:100%;left:50%;transform:translateX(-50%);width:100vw;background:#fff;border-top:2px solid var(--primary-color,#8b1c1c);box-shadow:0 8px 32px rgba(0,0,0,.13);z-index:60;max-height:0;overflow:hidden;opacity:0;pointer-events:none;transition:max-height .38s cubic-bezier(.16,1,.3,1),opacity .22s ease} .rn-drop:hover .pl-cat-panel,.rn-drop:focus-within .pl-cat-panel{max-height:900px;opacity:1;pointer-events:auto} .pl-cat-panel .v-cat-trigger{display:none !important} /* v-nav__links: force visible/static for 2-col, 3-col designs inside pl-cat-panel */ .pl-cat-panel .v-nav__links{display:block !important;position:static !important;opacity:1 !important;visibility:visible !important;transform:none !important;max-width:none !important;min-width:0 !important;width:100% !important;background:transparent !important;box-shadow:none !important;border:none !important;border-radius:0 !important;padding:0 !important} .pl-cat-panel .v-nav__links>ul{display:block !important;list-style:none !important;padding:0 !important;margin:0 auto !important} .pl-cat-panel .v-nav__links>ul>li{position:static !important} /* [FIX 1] centered inner wrapper with proper side padding */ .pl-cat-inner{max-width:1200px;margin:0 auto;padding:18px 24px 20px;box-sizing:border-box} .pl-cat-panel .v-catpanel{position:static !important;opacity:1 !important;visibility:visible !important;transform:none !important;box-shadow:none !important;border:none !important;border-radius:0 !important;padding:0 !important;background:transparent !important;max-width:none !important;min-width:0 !important;width:100% !important;box-sizing:border-box !important} /* [FIX 3] column grids inside pl-cat-panel */ .pl-cat-panel .v-catpanel--mega{width:100% !important;grid-template-columns:repeat(var(--cat-cols,6),1fr) !important;gap:var(--cat-gap,5px) !important;align-content:start !important} .pl-cat-panel .v-catpanel--cols2{max-width:700px !important;margin:1rem auto !important;grid-template-columns:repeat(2,minmax(140px,1fr)) !important;gap:var(--cat-gap,6px) !important;align-content:start !important} .pl-cat-panel .v-catpanel--cols3{max-width:960px !important;margin:1rem auto !important;grid-template-columns:repeat(3,minmax(130px,1fr)) !important;gap:var(--cat-gap,6px) !important;align-content:start !important} /* each category as a card */ .pl-cat-panel .v-catpanel__group{position:relative;border:var(--cat-border,1px solid #e8e0d5);border-radius:var(--cat-rounded,10px);background:#fff;transition:border-color .22s,background .22s,box-shadow .28s,transform .22s;overflow:hidden;height:var(--cat-cardh,52px)} .pl-cat-panel .v-catpanel__group::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--primary-color,#8b1c1c);transform:scaleY(0);transform-origin:center;transition:transform .22s cubic-bezier(.16,1,.3,1);border-radius:var(--cat-rounded,10px) 0 0 var(--cat-rounded,10px)} .pl-cat-panel .v-catpanel__group:hover{border-color:color-mix(in srgb,var(--primary-color,#8b1c1c) 35%,#e8e0d5);background:linear-gradient(135deg,color-mix(in srgb,var(--primary-color,#8b1c1c) 5%,#fff) 0%,#fff 60%);box-shadow:var(--cat-shadow,0 6px 18px rgba(139,28,28,.12),0 2px 6px rgba(0,0,0,.06));transform:translateY(-2px)} .pl-cat-panel .v-catpanel__group:hover::before{transform:scaleY(1)} /* [FIX 2] link — title case, readable size, no uppercase */ .pl-cat-panel .v-catpanel__h{display:flex !important;align-items:center !important;gap:.5rem !important;width:100% !important;height:100% !important;color:var(--text-strong,#111827) !important;white-space:normal !important;transform:none !important;transition:color .18s !important;padding:.35rem .65rem .35rem .8rem !important;font-size:var(--hdr-nav-fs,.82rem) !important;font-weight:var(--hdr-nav-fw,400) !important;letter-spacing:.01em;text-transform:none;box-sizing:border-box !important;font-family:var(--heading-font,var(--font-family,system-ui,sans-serif)) !important} .pl-cat-panel .v-catpanel__h:hover{color:var(--primary-color,#465fff) !important;transform:none !important} /* name: 2-line clamp */ .pl-cat-panel .v-catpanel__meta{display:flex;flex-direction:column;flex:1;min-width:0} .pl-cat-panel .v-catpanel__txt{display:-webkit-box !important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal !important;line-height:1.25} .pl-cat-panel .v-catpanel__txt::after{display:none !important} /* [FIX 5] count as subtle hierarchy marker */ .pl-cat-panel .v-catpanel__cnt{display:block;font-size:.68rem;color:var(--text-muted,#9ca3af);font-weight:400;margin-top:.1rem} /* arrow: right-aligned, fades in on card hover */ .pl-cat-panel .v-catpanel__arr{display:inline-block !important;width:.55em !important;height:.55em !important;opacity:0 !important;flex-shrink:0 !important;margin-left:auto !important;padding-left:.15rem !important;transform:translateX(-6px) !important;transition:opacity .2s,transform .22s cubic-bezier(.16,1,.3,1) !important} .pl-cat-panel .v-catpanel__group:hover .v-catpanel__arr{opacity:.6 !important;transform:translateX(0) !important} /* hide L2, hide icon */ .pl-cat-panel .v-catpanel__l{display:none !important} .pl-cat-panel .pl-cat-icon{display:none !important} /* [FIX 4] View All — centered, full-width feel */ .pl-cat-viewall{border-top:1px solid #f0ebe5;margin-top:14px;padding:12px 0 0;display:flex;justify-content:center} .pl-cat-viewall__link{display:inline-flex;align-items:center;gap:.65rem;padding:.55rem 1.4rem;border:1px solid #e8e0d5;border-radius:24px;text-decoration:none;color:var(--text-strong,#111827);font-size:.8rem;font-weight:600;background:#fff;transition:border-color .18s,color .18s,background .18s,box-shadow .18s} .pl-cat-viewall__link:hover{border-color:var(--primary-color,#8b1c1c);color:var(--primary-color,#8b1c1c);background:color-mix(in srgb,var(--primary-color,#8b1c1c) 4%,#fff);box-shadow:0 3px 12px rgba(139,28,28,.12)} .pl-cat-viewall__link svg{color:var(--primary-color,#8b1c1c);flex-shrink:0} .pl-cat-viewall__sub{display:block;font-size:.68rem;font-weight:400;color:var(--text-muted,#9ca3af);margin-top:.05rem} .pl-cat-viewall__link .v-catpanel__arr{display:inline-block !important;opacity:.45 !important;margin-left:.2rem !important;transform:none !important;transition:none !important} html:has(#rn-mob:not([hidden])),body:has(#rn-mob:not([hidden])){overflow:hidden;height:100%} .rn-hdr-logo{display:none} @media(min-width:1024px){.rn-hdr-logo{display:flex;align-items:center;gap:.6rem;text-decoration:none}} .rn-hdr-logo-side{display:none} @media(min-width:640px) and (max-width:1023px){.rn-hdr-logo-side{display:flex;align-items:center;text-decoration:none}} #rn-mob{position:fixed;inset:0;background:transparent;overflow:visible;z-index:500;max-width:none;visibility:visible;transition:visibility 0s} #rn-mob[hidden]{display:block !important;visibility:hidden;pointer-events:none;transition:visibility 0s .32s} #rn-mob[hidden] .rn-mob-panel{transform:translateX(-110%)} #rn-mob[hidden] .rn-mob-bd{opacity:0;pointer-events:none} .rn-mob-panel{position:absolute;top:0;left:0;bottom:0;width:400px;max-width:100vw;overflow-y:auto;z-index:1;display:flex;flex-direction:column;background:var(--hdr-bg,#fff);color:var(--hdr-text,#1e1e1e);font-family:inherit;transform:translateX(0);transition:transform .32s cubic-bezier(.4,0,.2,1);will-change:transform} .rn-mob-bd{position:absolute;inset:0;background:rgba(0,0,0,.55);cursor:pointer;opacity:1;transition:opacity .32s ease} .rn-mob-panel .rn-mob-nav-item{display:flex;align-items:center;gap:.55rem;padding:.8rem 1.1rem;text-decoration:none;font-size:var(--hdr-nav-fs,var(--fs-sm,.875rem));font-weight:var(--hdr-nav-fw,600);border-bottom:1px solid var(--hdr-border,#e5e7eb);color:var(--hdr-text,#1e1e1e);width:100%;box-sizing:border-box} .rn-mob-panel .rn-mob-nav-item:hover{color:var(--primary-color)} .rn-mob-panel .rn-mob-acc-hd{width:100%;display:flex;align-items:center;justify-content:space-between;padding:.8rem 1.1rem;background:transparent;border:none;border-bottom:1px solid var(--hdr-border,#e5e7eb);cursor:pointer;font-size:var(--hdr-nav-fs,var(--fs-sm,.875rem));font-weight:var(--hdr-nav-fw,600);color:var(--hdr-text,#1e1e1e);font-family:var(--heading-font,var(--font-family,system-ui,sans-serif));text-align:left} .rn-mob-acc-hd[aria-expanded="true"] .v-accordion__chevron{transform:rotate(180deg)} .rn-mob-panel .rn-mob-acc-sub,.gahd-mob-panel .rn-mob-acc-sub{display:block;padding:.6rem 1.1rem .6rem 2.1rem;text-decoration:none;font-size:var(--hdr-nav-fs,var(--fs-sm,.875rem));font-weight:400;color:var(--hdr-text,#1e1e1e);border-bottom:1px solid var(--hdr-border,#e5e7eb);opacity:.8} .rn-mob-panel .rn-mob-acc-sub:hover,.gahd-mob-panel .rn-mob-acc-sub:hover{opacity:1;color:var(--primary-color)} .v-cat-mob-list{display:flex;flex-direction:column} .rn-mob-acc-sub--l2{padding-left:2.8rem !important;font-size:.82rem !important;opacity:.65} .rn-mob-nav-item:hover .v-catpanel__txt::after,.rn-mob-acc-hd:hover .v-catpanel__txt::after{width:100%} .rn-mob-nav-item:hover .v-catpanel__arr{opacity:1;transform:translateX(0)} .rn-mob-panel .v-accordion{border:none;border-radius:0;background:transparent;overflow:visible} .rn-mob-panel .v-accordion__item+.v-accordion__item{border-top:none} .rn-mob-panel .v-accordion__header:hover{background:transparent} .rn-mob-panel .v-accordion__panel{padding:0} .rn-mob-hd{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.25rem;border-bottom:1px solid var(--border-color,#e5e7eb)} .rn-mob-hd-acts{display:flex;align-items:center;gap:.65rem} .rn-mob-search{display:flex;align-items:center;gap:.5rem;padding:.7rem 1.25rem;border-bottom:1px solid var(--border-color,#e5e7eb)} .rn-mob-search input{flex:1;border:1px solid var(--border-color,#e5e7eb);border-radius:6px;padding:.5rem .75rem;font-size:.9rem;background:transparent;color:var(--text-color,#111)} .rn-mob-nav{padding:.4rem 0} .rn-mob-link{display:block;padding:.85rem 1.25rem;color:var(--text-color,#111);font-size:.95rem;font-weight:600;text-decoration:none;border-bottom:1px solid var(--border-color,#f3f4f6)} .rn-mob-link:hover{background:color-mix(in srgb,var(--primary-color,#8b1c1c) 6%,transparent);color:var(--primary-color,#8b1c1c)} .rn-mob-grp .v-accordion__header{padding:.85rem 1.25rem;font-size:.95rem;font-weight:600} .rn-mob-sub{display:block;padding:.6rem 1.25rem .6rem 2.25rem;color:var(--text-muted,#6b7280);font-size:.875rem;text-decoration:none;border-bottom:1px solid var(--border-color,#f3f4f6)} .rn-mob-sub:hover{background:color-mix(in srgb,var(--primary-color,#8b1c1c) 6%,transparent);color:var(--primary-color,#8b1c1c)} .rn-mob-auth{display:flex;gap:.75rem;padding:1rem 1.25rem;border-top:1px solid var(--border-color,#e5e7eb);margin-top:.5rem} .rn-close-btn{background:color-mix(in srgb,var(--text-color,#111) 10%,transparent);border:none;cursor:pointer;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text-color,#111)} .rn-close-btn:hover{background:var(--primary-color,#8b1c1c);color:var(--text-inverse,#fff)} @media(min-width:768px){.rn-row-links{display:flex}#rn-burger{display:none !important}} @media(max-width:767px){#rn-burger{display:flex}.rn-col-right .rn-search,.rn-col-right .rn-cta,.rn-col-right .rn-cta-ghost{display:none}} @media(max-width:1100px){.pl-break-1100 .pl-link-inv,.pl-break-1100 .pl-drop-btn-inv{padding:.4rem .55rem;font-size:var(--hdr-nav-fs,.82rem)}} @media(max-width:960px){.pl-break-960 .rn-row-links{display:none}.pl-break-960 #rn-burger{display:flex !important}.pl-break-960 .rn-row-inner{grid-template-columns:auto auto 1fr !important}.pl-break-960 .rn-col-center{justify-self:start !important}.pl-break-960 .rn-col-left a{display:none !important}.pl-break-960 .rn-col-right{justify-self:stretch !important;justify-content:space-between !important;gap:1rem}.pl-break-960 .rn-col-right>div{flex:1;min-width:0;justify-content:center}.pl-break-960 .rn-search-exp{position:relative !important;top:auto !important;left:auto !important;transform:none !important;width:clamp(180px,55%,360px) !important}.pl-break-960 .rn-search-exp:focus-within{width:clamp(180px,55%,360px) !important}.pl-break-960 .rn-search-exp input{width:100%}.pl-break-960 .rn-col-right:has(.rn-search-exp:focus-within) .rn-cta{opacity:1 !important;pointer-events:auto !important}} .pl-break-960 .rn-hdr-logo{display:flex !important;align-items:center;gap:.6rem;text-decoration:none} @media(max-width:767px){.pl-break-960 .rn-col-right .rn-search{display:flex !important}.pl-break-960 .rn-col-right .rn-cta{display:inline-flex !important}} @media(max-width:480px){.pl-break-960 .rn-col-right .rn-search{display:none !important}.pl-break-960 .rn-col-right .rn-cta{display:none !important}} .pl-break-1100 .rn-search input{padding:.5rem .8rem .5rem 2rem} .pl-cta-short{display:none} @media(max-width:960px){.pl-break-960 .pl-cta-full{display:none}.pl-break-960 .pl-cta-short{display:inline}} #rn-navbar[data-hide-brand-name] .rn-brand-name{display:none} .rn-auth-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--hdr-border,#e5e7eb);color:var(--hdr-text,#111);text-decoration:none;flex-shrink:0;transition:background .2s,border-color .2s,color .2s} .rn-auth-icon:hover{background:color-mix(in srgb,var(--primary-color,#465fff) 8%,transparent);border-color:var(--primary-color,#465fff);color:var(--primary-text,var(--primary-color,#465fff))} .rn-auth-drop{position:relative;display:flex;align-items:center;height:100%} .rn-auth-drop>summary{list-style:none;cursor:pointer} .rn-auth-drop>summary::-webkit-details-marker,.rn-auth-drop>summary::marker{display:none} .rn-auth-panel{position:absolute;top:100%;right:0;min-width:220px;background:var(--bg-color,#fff);border:1px solid var(--hdr-border,#e5e7eb);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.11);padding:.9rem;z-index:300} .rn-auth-greet{font-size:.75rem;font-weight:700;color:var(--text-muted,#6b7280);margin-bottom:.65rem;text-align:center;text-transform:uppercase;letter-spacing:.06em} .rn-auth-btns{display:flex;gap:.45rem;margin-bottom:.65rem} .rn-auth-sep{height:1px;background:var(--border-color,#e5e7eb);margin:.45rem 0} .rn-auth-link{display:flex;align-items:center;gap:.45rem;font-size:var(--hdr-nav-fs,.82rem);color:var(--text-color,#374151);text-decoration:none;padding:.32rem .35rem;border-radius:5px;transition:color .15s,background .15s;white-space:nowrap} .rn-auth-link:hover{color:var(--primary-color,#465fff);background:color-mix(in srgb,var(--primary-color,#465fff) 6%,transparent)} .rn-auth-link--sm{font-size:var(--hdr-nav-fs,.75rem);color:var(--text-muted,#9ca3af);padding:.22rem .35rem} .rn-auth-link--sm:hover{color:var(--primary-color,#465fff)} /* ── §AF — v-nav: generic 3-zone storefront header ────────────────────────── Shell: .v-nav → __zone --left/center/right → __logo / __search / __links (desktop ul tree) / __actions (__menu hamburger, __cart, buttons). Category mega-panel: .v-catpanel --cols2/3/mega with __group/__h/__l. Auth toggle: [data-show-when="logged-in/out"] + JS initAuthVisibility(). */ /* ── shell ── */ .v-nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:1rem;padding:.55rem 1.25rem;background:var(--hdr-bg,#fff);border-bottom:1px solid var(--border-color,#e5e7eb);box-shadow:0 1px 4px rgba(0,0,0,.06);font-family:var(--font-family,system-ui,sans-serif)} .v-nav__zone{display:flex;align-items:center;gap:.65rem} .v-nav__zone--left{flex-shrink:0;gap:0} .v-nav__zone--center{flex:1;justify-content:center} .v-nav__zone--right{flex-shrink:0;gap:.5rem} /* ── logo ── */ .v-nav__logo{display:inline-flex;align-items:center;text-decoration:none;flex-shrink:0} .v-nav__logo img{height:40px;width:auto;display:block;object-fit:contain} /* ── search box ── flex:0 1 320px + min-width:150px: search keeps a decent, PREDICTABLE size and only ever shrinks a little (never squeezed to near-nothing) — it no longer needs to compete with nav links for space at all (the desktop inline link list is gone below; every width now reaches links through the hamburger), so in practice it rarely needs to shrink past its 320px default at all. */ .v-nav__search{display:flex;align-items:center;gap:.3rem;background:var(--surface-color,#f3f4f6);border:1px solid var(--border-color,#e5e7eb);border-radius:var(--border-radius,999px);padding:.35rem .6rem .35rem .85rem;flex:0 1 320px;min-width:150px} .v-nav__search input{flex:1;border:none;background:transparent;font-size:.875rem;color:var(--text-color,#111);font-family:inherit;min-width:0} .v-nav__search input:focus{outline:none} .v-nav__search button{flex-shrink:0;background:none;border:none;cursor:pointer;font-size:1rem;line-height:1;padding:0 .2rem;color:var(--text-muted,#6b7280)} /* ── desktop nav link tree ── */ .v-nav__links>ul{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0} .v-nav__links>ul>li{position:relative} .v-nav__links>ul>li>a{display:inline-flex;align-items:center;padding:.45rem .8rem;font-size:.875rem;font-weight:600;color:var(--text-color,#374151);text-decoration:none;border-radius:var(--border-radius,6px);white-space:nowrap;transition:background .15s,color .15s} .v-nav__links>ul>li>a:hover,.v-nav__links>ul>li:hover>a{background:color-mix(in srgb,var(--primary-color,#6366f1) 9%,transparent);color:var(--primary-color,#6366f1)} /* sub-menu (L2) */ .v-nav__links ul ul{position:absolute;top:100%;left:0;min-width:180px;list-style:none;margin:0;padding:.35rem;background:var(--bg-color,#fff);border:1px solid var(--border-color,#e5e7eb);border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.1);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility .15s;z-index:200} .v-nav__links>ul>li:hover>ul,.v-nav__links>ul>li:focus-within>ul{opacity:1;visibility:visible;transform:translateY(0)} .v-nav__links ul ul li a{display:block;padding:.45rem .7rem;font-size:.85rem;color:var(--text-color,#374151);text-decoration:none;border-radius:6px;white-space:nowrap} .v-nav__links ul ul li a:hover{background:color-mix(in srgb,var(--primary-color,#6366f1) 8%,transparent);color:var(--primary-color,#6366f1)} /* L3 fly-out (right) */ .v-nav__links ul ul ul{top:0;left:100%;margin-top:0} /* ── category component sits inside .v-nav__zone--left via data-comp-include ── */ .v-nav__cat{display:contents} /* ── multi-column category panel (cols-2, cols-3, mega designs) ── */ .v-catpanel{position:absolute;top:100%;left:0;display:grid;gap:1.25rem 2rem;padding:1.1rem 1.4rem;background:var(--bg-color,#fff);border:1px solid var(--border-color,#e5e7eb);border-radius:8px;box-shadow:0 8px 28px rgba(0,0,0,.11);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility .15s;z-index:200;min-width:300px;max-width:min(96vw,900px)} .v-nav__links>ul>li:hover>.v-catpanel,.v-nav__links>ul>li:focus-within>.v-catpanel{opacity:1;visibility:visible;transform:translateY(0)} /* cols-2: 560px wide, 1px gradient line at midpoint (50%) between equal columns */ .v-catpanel--cols2{grid-template-columns:repeat(2,1fr);width:min(96vw,560px);background-image:linear-gradient(var(--border-color,#e5e7eb),var(--border-color,#e5e7eb));background-size:1px calc(100% - 1.8rem);background-position:50% 50%;background-repeat:no-repeat} /* cols-3: two lines at 33.5% and 66.5% */ .v-catpanel--cols3{grid-template-columns:repeat(3,1fr);width:min(96vw,780px);background-image:linear-gradient(var(--border-color,#e5e7eb),var(--border-color,#e5e7eb)),linear-gradient(var(--border-color,#e5e7eb),var(--border-color,#e5e7eb));background-size:1px calc(100% - 1.8rem),1px calc(100% - 1.8rem);background-position:33.5% 50%,66.5% 50%;background-repeat:no-repeat,no-repeat} .v-catpanel--mega{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));width:min(96vw,900px);min-height:220px} .v-catpanel__group{display:flex;flex-direction:column;gap:.25rem} /* links stretch full column width; arrow pushed to right edge via margin-left:auto */ .v-catpanel__h{display:flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-strong,#111827);text-decoration:none;padding:.15rem 0 .2rem;white-space:nowrap;transition:color .2s,transform .35s ease} .v-catpanel__h:hover{color:var(--primary-color,#465fff);transform:translateX(5px)} .v-catpanel__h--all{color:var(--primary-color,#465fff);letter-spacing:.04em} .v-catpanel__l{display:flex;align-items:center;gap:.3rem;font-size:.84rem;color:var(--text-muted,#6b7280);text-decoration:none;padding:.2rem 0;white-space:nowrap;transition:color .2s,transform .35s ease} .v-catpanel__l:hover{color:var(--primary-color,#465fff);transform:translateX(5px)} /* text span: underline animates left→right, stays within text width */ .v-catpanel__txt{position:relative;flex-shrink:1;min-width:0} .v-catpanel__txt::after{content:'';position:absolute;bottom:-1px;left:0;width:0;height:2px;background:var(--primary-color,#465fff);transition:width .3s ease} .v-catpanel__l .v-catpanel__txt::after{height:1px} .v-catpanel__h:hover .v-catpanel__txt::after,.v-catpanel__l:hover .v-catpanel__txt::after{width:100%} /* arrow: hidden until hover, pushed to right edge */ .v-catpanel__arr{width:.6em;height:.6em;flex-shrink:0;margin-left:auto;padding-left:.5rem;box-sizing:content-box;opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .3s ease} .v-catpanel__h:hover .v-catpanel__arr,.v-catpanel__l:hover .v-catpanel__arr{opacity:1;transform:translateX(0)} /* side-image panel beside category list */ .v-catpanel__wrap{display:flex;align-items:stretch;gap:0;width:100%} .v-catpanel__wrap .pl-cat-inner{flex:1 1 0%!important;min-width:0!important;max-width:100%!important;margin:0!important;padding-left:0!important;padding-right:0!important} .v-catpanel__wrap .v-catpanel{flex:1 1 0%!important;min-width:0!important;max-width:100%!important} .v-catpanel__img-side{flex:0 0 clamp(160px,20vw,320px);overflow:hidden} @media(max-width:1200px){.v-catpanel__img-side{display:none}} .v-catpanel__img{width:100%;height:100%;object-fit:cover;display:block;transform-origin:center;border-radius:0} .v-catpanel__img{flex:1;width:100%;object-fit:cover;display:block;border-radius:6px} /* letter-avatar thumbnail */ .v-catpanel__thumb{flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:50%;background:color-mix(in srgb,var(--primary-color,#465fff) 12%,var(--bg-color,#fff));color:var(--primary-color,#465fff);font-size:.6rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase;line-height:1} /* Categories nav button: chevron rotates on hover, loops a bob every 5s to catch attention */ .v-catpanel__chev{width:.8em;height:.8em;flex-shrink:0;margin-left:.2rem;transition:transform .35s ease;animation:vCatChevLoop 5s ease 1.5s infinite} .v-nav__links>ul>li:hover>a .v-catpanel__chev{transform:rotate(180deg);animation:none} @keyframes vCatChevLoop{0%,100%{transform:translateY(0)}6%{transform:translateY(4px)}12%{transform:translateY(-2.5px)}18%{transform:translateY(2px)}23%{transform:translateY(0)}} /* Categories button pulse glow — repeats every 4s */ .v-cat-trigger{animation:vCatBtnPulse 4s ease 2s infinite} .v-cat-trigger:hover{animation:none} @keyframes vCatBtnPulse{0%,40%,100%{box-shadow:none}20%{box-shadow:0 0 0 3px color-mix(in srgb,var(--primary-color,#465fff) 28%,transparent)}} /* ── action zone ── */ .v-nav__actions{display:flex;align-items:center;gap:.5rem} /* ── cart badge ── */ .v-nav__cart{position:relative;display:inline-flex;align-items:center;font-size:1.2rem;cursor:pointer;text-decoration:none;color:var(--text-color,#374151)} .v-nav__cart-count{position:absolute;top:-6px;right:-8px;min-width:16px;height:16px;border-radius:8px;background:var(--primary-color,#6366f1);color:#fff;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 3px;line-height:1;border:1.5px solid var(--bg-color,#fff)} /* ── hamburger:
── */ .v-nav__menu{position:relative} .v-nav__menu summary{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--border-radius,6px);background:color-mix(in srgb,var(--primary-color,#6366f1) 10%,transparent);color:var(--primary-color,#6366f1);cursor:pointer;font-size:1.1rem;list-style:none;user-select:none} .v-nav__menu summary::-webkit-details-marker{display:none} .v-nav__menu summary:hover{background:color-mix(in srgb,var(--primary-color,#6366f1) 18%,transparent)} .v-nav__panel{position:absolute;top:calc(100% + 6px);left:0;min-width:220px;background:var(--bg-color,#fff);border:1px solid var(--border-color,#e5e7eb);border-radius:8px;box-shadow:0 8px 28px rgba(0,0,0,.13);padding:.4rem;z-index:300} .v-nav__panel>a{display:block;padding:.55rem .8rem;font-size:.875rem;font-weight:600;color:var(--text-color,#374151);text-decoration:none;border-radius:6px} .v-nav__panel>a:hover{background:color-mix(in srgb,var(--primary-color,#6366f1) 8%,transparent);color:var(--primary-color,#6366f1)} .v-nav__sub{padding-left:1rem} .v-nav__sub>a{display:block;padding:.4rem .65rem;font-size:.84rem;color:var(--text-muted,#6b7280);text-decoration:none;border-radius:6px} .v-nav__sub>a:hover{color:var(--primary-color,#6366f1)} /* ── branch selector:
── */ .v-nav__branch{position:relative} .v-nav__branch>summary{display:inline-flex;align-items:center;gap:.35rem;padding:.5rem .85rem;border-radius:var(--border-radius,6px);background:color-mix(in srgb,var(--primary-color,#6366f1) 10%,transparent);color:var(--primary-color,#6366f1);cursor:pointer;font-size:.85rem;font-weight:600;list-style:none;user-select:none} .v-nav__branch>summary::-webkit-details-marker{display:none} .v-nav__branch>summary:hover{background:color-mix(in srgb,var(--primary-color,#6366f1) 18%,transparent)} .v-branch__panel{position:absolute;top:calc(100% + 6px);right:0;min-width:200px;background:var(--bg-color,#fff);border:1px solid var(--border-color,#e5e7eb);border-radius:8px;box-shadow:0 8px 28px rgba(0,0,0,.13);padding:.4rem;z-index:300} .v-branch__item{margin:0} .v-branch__item>button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.55rem .8rem;border:none;background:none;cursor:pointer;font-size:.875rem;font-weight:500;font-family:inherit;color:var(--text-color,#374151);text-align:left;border-radius:6px} .v-branch__item>button:hover{background:color-mix(in srgb,var(--primary-color,#6366f1) 8%,transparent);color:var(--primary-color,#6366f1)} .v-branch__check{opacity:0;color:var(--primary-color,#6366f1)} .v-branch__item.is-active>button{font-weight:700} .v-branch__item.is-active .v-branch__check{opacity:1} /* ── profile menu:
── */ .v-nav__profile{position:relative} .v-nav__profile>summary{display:inline-flex;align-items:center;padding:0;border-radius:999px;cursor:pointer;list-style:none;user-select:none} .v-nav__profile>summary::-webkit-details-marker{display:none} .v-nav__avatar{display:block;border-radius:50%} .v-nav__profile-panel{position:absolute;top:calc(100% + 6px);right:0;min-width:170px;background:var(--bg-color,#fff);border:1px solid var(--border-color,#e5e7eb);border-radius:8px;box-shadow:0 8px 28px rgba(0,0,0,.13);padding:.4rem;z-index:300;display:flex;flex-direction:column} .v-nav__profile-panel>a{padding:.55rem .8rem;border-radius:6px;font-size:.875rem;font-weight:500;color:var(--text-color,#374151);text-decoration:none} .v-nav__profile-panel>a:hover{background:color-mix(in srgb,var(--primary-color,#6366f1) 8%,transparent);color:var(--primary-color,#6366f1)} .v-nav__sub>.v-nav__sub{padding-left:1.25rem} /* ── auth toggle (data-show-when) ── */ [data-show-when="logged-in"]{display:none} [data-auth-state="in"] [data-show-when="logged-out"]{display:none} [data-auth-state="in"] [data-show-when="logged-in"]{display:inline} [data-auth-state="in"] section[data-show-when="logged-in"],[data-auth-state="in"] div[data-show-when="logged-in"]{display:block} /* ── responsive ── THIS is the block that actually governs the header at runtime — theme.css loads AFTER output.css (compiled from input.css) in every page, so at equal specificity theme.css's rules win regardless of what output.css says (input.css/embed/static/css/input.css has its own, mostly-inert parallel copy of these selectors — only its brand-new classes with no theme.css counterpart, .v-tabbar, actually take effect; .v-nav__mobile- search is neutralised below — search never needs its own row anymore). Design (v3 — search/profile ALWAYS pinned; nav links inline when there's room, folded to the hamburger only once space runs short): - .v-nav__links (the inline "Home Products Offers…" list) shows INLINE at >=1200px, where there's enough room for logo + links + fixed-width search + actions without anything fighting for space. Below 1200px it folds into .v-nav__menu (hamburger) instead of shrinking/wrapping/disappearing — this is the "if there is short of space, the menu can be folded until a point" requirement; the hamburger itself is only shown once folded (below 1200px), not at every width. - .v-nav__search and .v-nav__actions' cart + profile are ALWAYS visible, at every width down to the smallest phone — never hidden, never moved to a separate row/menu. This is the literal "search must always be at the top on every page" / "profile must always be at the top-right, always accessible" requirement. - The one exception: the branch-selector (multi-branch orgs only, lower priority than search/cart/profile) folds into the hamburger panel below 768px to keep the top bar from getting crowded on a phone — it's still reachable there (v-tabbar__panel already includes its own "branch-mobile" instance). - The fixed PWA-style bottom tab bar (.v-tabbar, input.css) still appears below 992px as a THUMB-REACH SHORTCUT row (Home/Categories/ Cart/Menu) — supplementary, not a replacement for the always-visible top bar (its old "Account" tab is gone; profile lives in the top bar now, so that slot became Categories instead — see _header.json). */ .v-nav__links{display:none} .v-nav__menu{display:block} @media(min-width:961px){ .v-nav__links{display:flex} .v-nav__menu{display:none} } @media(max-width:991px){ /* cart already lives in the bottom PWA tab bar on these widths — the top-bar copy is redundant and steals width the search box needs. */ .v-nav__actions>.v-nav__cart{display:none} } @media(max-width:767px){ .v-nav{padding:.4rem .85rem} .v-nav__actions .v-nav__branch{display:none} .v-nav__cart-count{top:-5px;right:-6px} .v-nav__menu summary{width:28px;height:28px;font-size:.95rem} } @media(max-width:479px){ /* Logo can be a wide wordmark (icon+text baked into one SVG) — cap its rendered height so it can't crowd the hamburger into the search box on the narrowest phones. */ .v-nav__logo img{height:26px} .v-nav{gap:.35rem;padding:.4rem .5rem} .v-nav__zone{gap:.3rem} .v-nav__search{min-width:150px;padding:.3rem .5rem .3rem .7rem} .v-nav__search button{font-size:.85rem;padding:0 .1rem} .v-nav__search input{font-size:.8rem} .v-nav__profile>summary svg,.v-nav__avatar{width:28px;height:28px} } /* Neutralise input.css's now-unused separate mobile search row — search lives permanently in the main .v-nav row at every width, so this extra row (a leftover from the previous design) must never render. */ .v-nav__mobile-search{display:none!important} /* ================================================================ §O — CTA Button Classes (settings-driven via --btn-p/s/a-*) .v-btn-p → Primary palette .v-btn-s → Secondary palette .v-btn-a → Accent palette Size modifiers: .v-btn-xs .v-btn-sm .v-btn-md .v-btn-lg .v-btn-xl Keep padding in the size modifier class — NOT inline style. No rounded-* in HTML — border-radius comes from --btn-p-radius. SVG inside must use stroke="currentColor". ================================================================ */ /* §O overlay engine: ::before is the hover layer. Go emits --btn-*-hover-tx/oi/ot/filter so every effect (slide-fill, lift, press, grow, shrink, darken, lighten, glow, border-grow) is fully settings-driven — no data attributes needed in HTML. isolation:isolate keeps z-index:-1 on ::before scoped to the button's stacking context. */ .v-btn-p,.v-btn-s,.v-btn-a{isolation:isolate;position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;cursor:pointer;text-decoration:none;font-weight:700;transition:color .25s ease,box-shadow .25s ease,transform .22s ease,filter .25s ease} /* Shared ::before overlay */ .v-btn-p::before,.v-btn-s::before,.v-btn-a::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;transition:transform .4s ease,opacity .3s ease} /* Primary */ .v-btn-p{background-color:var(--btn-p-bg,var(--primary-color,#4f46e5));color:var(--btn-p-text,#fff);border:var(--btn-p-border,none);border-radius:var(--btn-p-radius,6px);box-shadow:var(--btn-p-shadow,none);font-size:var(--btn-p-fs,var(--fs-btn,.95rem))} .v-btn-p::before{background-color:var(--btn-p-bg-hover,color-mix(in srgb,var(--btn-p-bg,var(--primary-color,#4f46e5)) 80%,#000));transform:translateX(var(--btn-p-hover-tx,0%));opacity:var(--btn-p-hover-oi,0)} .v-btn-p:hover{color:var(--btn-p-text-hover,var(--btn-p-text,#fff));box-shadow:var(--btn-p-shadow-hover,var(--btn-p-shadow,none));transform:var(--btn-p-transform,none);filter:var(--btn-p-hover-filter,none)} .v-btn-p:hover::before{transform:translateX(0);opacity:var(--btn-p-hover-ot,1)} /* Secondary */ .v-btn-s{background-color:var(--btn-s-bg,var(--secondary-color,#64748b));color:var(--btn-s-text,#fff);border:var(--btn-s-border,none);border-radius:var(--btn-s-radius,6px);box-shadow:var(--btn-s-shadow,none);font-size:var(--btn-s-fs,var(--fs-btn,.95rem))} .v-btn-s::before{background-color:var(--btn-s-bg-hover,color-mix(in srgb,var(--btn-s-bg,var(--secondary-color,#64748b)) 80%,#000));transform:translateX(var(--btn-s-hover-tx,0%));opacity:var(--btn-s-hover-oi,0)} .v-btn-s:hover{color:var(--btn-s-text-hover,var(--btn-s-text,#fff));box-shadow:var(--btn-s-shadow-hover,var(--btn-s-shadow,none));transform:var(--btn-s-transform,none);filter:var(--btn-s-hover-filter,none)} .v-btn-s:hover::before{transform:translateX(0);opacity:var(--btn-s-hover-ot,1)} /* Accent */ .v-btn-a{background-color:var(--btn-a-bg,var(--accent-color,#f59e0b));color:var(--btn-a-text,#fff);border:var(--btn-a-border,none);border-radius:var(--btn-a-radius,6px);box-shadow:var(--btn-a-shadow,none);font-size:var(--btn-a-fs,var(--fs-btn,.95rem))} .v-btn-a::before{background-color:var(--btn-a-bg-hover,color-mix(in srgb,var(--btn-a-bg,var(--accent-color,#f59e0b)) 80%,#000));transform:translateX(var(--btn-a-hover-tx,0%));opacity:var(--btn-a-hover-oi,0)} .v-btn-a:hover{color:var(--btn-a-text-hover,var(--btn-a-text,#fff));box-shadow:var(--btn-a-shadow-hover,var(--btn-a-shadow,none));transform:var(--btn-a-transform,none);filter:var(--btn-a-hover-filter,none)} .v-btn-a:hover::before{transform:translateX(0);opacity:var(--btn-a-hover-ot,1)} .v-btn-xs{padding:.35rem .85rem;font-size:var(--fs-xs,.72rem);white-space:nowrap;flex-shrink:0} .v-btn-sm{padding:.5rem 1.25rem;font-size:var(--fs-sm,.82rem);white-space:nowrap;flex-shrink:0} .v-btn-md{padding:.7rem 1.75rem;white-space:nowrap;flex-shrink:0} .v-btn-lg{padding:.85rem 2.25rem;white-space:nowrap;flex-shrink:0} .v-btn-xl{padding:1rem 2.75rem;font-size:clamp(1rem,1.5vw,1.15rem);white-space:nowrap;flex-shrink:0} /* ================================================================ §N — Back/Next Button Classes (settings-driven via --btn-p/s/a-*) .v-back-next → Primary palette (--btn-p-*) .v-back-next-sec → Secondary palette (--btn-s-*) .v-back-next-acc → Accent palette (--btn-a-*) ================================================================ */ .v-back-next,.v-back-next-sec,.v-back-next-acc{display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;transition:background-color .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease,transform .22s ease} .v-back-next{background-color:var(--btn-p-bg,var(--primary-color,#4f46e5));color:var(--btn-p-text,#fff);border:var(--btn-p-border,none);border-radius:var(--btn-p-radius,6px);box-shadow:var(--btn-p-shadow,none)} .v-back-next:hover{background-color:var(--btn-p-bg-hover,color-mix(in srgb,var(--btn-p-bg,var(--primary-color,#4f46e5)) 80%,#000));color:var(--btn-p-text-hover,var(--btn-p-text,#fff));box-shadow:var(--btn-p-shadow-hover,var(--btn-p-shadow,none));transform:var(--btn-p-transform,none)} .v-back-next-sec{background-color:var(--btn-s-bg,var(--secondary-color,#64748b));color:var(--btn-s-text,#fff);border:var(--btn-s-border,none);border-radius:var(--btn-s-radius,6px);box-shadow:var(--btn-s-shadow,none)} .v-back-next-sec:hover{background-color:var(--btn-s-bg-hover,color-mix(in srgb,var(--btn-s-bg,var(--secondary-color,#64748b)) 80%,#000));color:var(--btn-s-text-hover,var(--btn-s-text,#fff));box-shadow:var(--btn-s-shadow-hover,var(--btn-s-shadow,none));transform:var(--btn-s-transform,none)} .v-back-next-acc{background-color:var(--btn-a-bg,var(--accent-color,#f59e0b));color:var(--btn-a-text,#fff);border:var(--btn-a-border,none);border-radius:var(--btn-a-radius,6px);box-shadow:var(--btn-a-shadow,none)} .v-back-next-acc:hover{background-color:var(--btn-a-bg-hover,color-mix(in srgb,var(--btn-a-bg,var(--accent-color,#f59e0b)) 80%,#000));color:var(--btn-a-text-hover,var(--btn-a-text,#fff));box-shadow:var(--btn-a-shadow-hover,var(--btn-a-shadow,none));transform:var(--btn-a-transform,none)} /* Global circular prev/next nav buttons */ #tvPrev,#tvNext,.v-btn-prev,.v-btn-next,.v-nav-prev,.v-nav-next{display:inline-flex;align-items:center;justify-content:center;background:var(--primary-color);color:var(--text-inverse,#fff);border:none;border-radius:50%;width:40px;height:40px;cursor:pointer;flex-shrink:0;transition:background .2s,transform .15s;line-height:1} #tvPrev:hover,#tvNext:hover,.v-btn-prev:hover,.v-btn-next:hover,.v-nav-prev:hover,.v-nav-next:hover{background:var(--primary-dark,var(--primary-color));transform:scale(1.08)} /* ================================================================ §D — STORE CLASSIC 2-ROW HEADER COMPONENT (.v-hsc2) Used by dynpages/pageframe/header-store-classic-2-row.html ================================================================ */ .v-hsc2-wrap{position:relative;z-index:40;box-shadow:var(--hdr-shadow);backdrop-filter:var(--hdr-blur)} .v-hsc2-wrap.is-scrolled{box-shadow:var(--hdr-shadow-scroll);backdrop-filter:var(--hdr-blur-scroll)} .v-hsc2-wrap.is-scrolled .v-hsc2-main{background:var(--hdr-scrolled-bg)} @keyframes v-hsc2-fade{from{opacity:0}to{opacity:1}} @keyframes v-hsc2-slide-down{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}} .v-hsc2-anim-fade{animation:v-hsc2-fade .4s ease both} .v-hsc2-anim-slide-down{animation:v-hsc2-slide-down .4s ease both} .v-hsc2-ann{background:var(--hdr-ann-bg);color:var(--hdr-ann-text);font-family:var(--font-family,inherit);display:flex;align-items:center;overflow:hidden;padding:.45rem 0;position:relative} @keyframes v-hsc2-marquee{from{transform:translateX(0)}to{transform:translateX(var(--ann-shift,-100%))}} .v-hsc2-ann__track{display:flex;align-items:center;white-space:nowrap;will-change:transform;animation:v-hsc2-marquee linear infinite} .v-hsc2-ann__half{display:inline-flex;align-items:center;flex-shrink:0} .v-hsc2-ann__item{display:inline-flex;align-items:center;gap:1.5rem;font-size:var(--fs-body);line-height:var(--lh-tight,1.1);padding:0 1.5rem} .v-hsc2-ann__sep{flex-shrink:0} .v-hsc2-ann:hover .v-hsc2-ann__track{animation-play-state:paused} .v-hsc2-ann button{flex-shrink:0;background:none;border:none;cursor:pointer;color:inherit;font-size:var(--fs-body);line-height:1;padding:0 .75rem;opacity:.7;transition:opacity .2s;position:relative;z-index:2} .v-hsc2-ann button:hover{opacity:1} .v-hsc2-main{background:var(--hdr-bg);color:var(--hdr-text);transition:background .35s;position:relative} .v-hsc2-main::before{content:'';position:absolute;inset:0;background-image:var(--hdr-bg-image);background-size:cover;background-position:center;opacity:var(--hdr-bg-opacity);pointer-events:none;z-index:0} .v-hsc2-main>*{position:relative;z-index:1} .v-hsc2-top{border-bottom:1px solid var(--hdr-border)} .v-hsc2-top-inner{max-width:var(--max-hf-width);margin:0 auto;padding:0 1.5rem;min-height:var(--hdr-height,64px);height:var(--hdr-height,64px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem} .v-hsc2-left{display:flex;align-items:center;gap:.65rem} .v-hsc2-center{display:flex;justify-content:center;align-items:center} .v-hsc2-right{display:flex;align-items:center;gap:.65rem;justify-content:flex-end} .v-hsc2-phone{display:flex;align-items:center;gap:6px;background:var(--primary-color);color:var(--text-inverse,#fff);font-size:.875rem;font-weight:700;padding:.35rem 1rem;border-radius:var(--border-radius,6px);white-space:nowrap;text-decoration:none;transition:background .2s} .v-hsc2-phone:hover{background:var(--primary-dark,var(--primary-color))} .v-hsc2-brgr{display:none;flex-direction:column;gap:5px;align-items:flex-end;justify-content:center;width:38px;height:38px;background:transparent;border:none;cursor:pointer;padding:5px 6px;border-radius:var(--border-radius,6px);transition:background .2s} .v-hsc2-brgr:hover{background:var(--surface-color,#f5f5f5)} .v-hsc2-brgr span{display:block;height:2px;background:var(--hdr-text,var(--text-color,#111));border-radius:1px} .v-hsc2-brgr span:nth-child(1){width:20px} .v-hsc2-brgr span:nth-child(2){width:13px} .v-hsc2-brgr span:nth-child(3){width:20px} .v-hsc2-srch{display:flex;align-items:center;gap:.5rem;background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--border-radius,6px);padding:.38rem .85rem;transition:border-color .15s,box-shadow .15s} .v-hsc2-srch:focus-within{border-color:var(--primary-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary-color) 14%,transparent)} .v-hsc2-srch input{border:none;outline:none;background:transparent;font-size:.84rem;color:var(--text-color);width:240px;font-family:var(--font-family,inherit)} .v-hsc2-srch input::placeholder{color:var(--text-muted)} .v-hsc2-cta{display:inline-flex;align-items:center;padding:.4rem 1.2rem;background:var(--primary-color);color:var(--text-inverse,#fff);border:none;font-size:var(--fs-sm);font-weight:700;line-height:var(--lh-tight,1.1);font-family:var(--font-family,inherit);border-radius:var(--border-radius,6px);white-space:nowrap;text-decoration:none;transition:background .2s} .v-hsc2-cta:hover{background:var(--primary-dark,var(--primary-color));color:var(--text-inverse,#fff)} .v-hsc2-nav-row{border-bottom:1px solid var(--border-color);overflow-x:clip;display:none} .v-hsc2-nav-inner{padding:0 .75rem;display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;overflow-x:clip;font-family:var(--font-family,inherit)} .v-hsc2-nav-inner a,.v-hsc2-nav-inner button,.v-hsc2-nav-link{display:inline-flex;align-items:center;gap:.3rem;padding:.55rem .88rem;font-size:var(--hdr-nav-fs,var(--fs-sm));font-weight:var(--hdr-nav-fw,600);letter-spacing:var(--hdr-nav-ls,normal);line-height:var(--lh-tight,1.1);color:var(--hdr-text);text-decoration:none;border:none;background:none;cursor:pointer;white-space:nowrap;border-radius:var(--border-radius,6px);transition:background .16s,color .16s;font-family:var(--hdr-nav-font,var(--font-family,inherit))} .v-hsc2-nav-inner a:hover,.v-hsc2-nav-inner a.active,.v-hsc2-nav-inner button:hover,.v-hsc2-nav-link:hover{background:color-mix(in srgb,var(--primary-color) 10%,transparent);color:var(--primary-dark,var(--primary-color))} .v-hsc2-drop{position:relative} .v-hsc2-drop-btn{display:inline-flex;align-items:center;gap:.3rem;padding:.55rem .88rem;font-size:.875rem;font-weight:600;color:var(--hdr-text);text-decoration:none;border:none;background:none;cursor:pointer;white-space:nowrap;border-radius:var(--border-radius,6px);transition:background .16s,color .16s;font-family:var(--hdr-nav-font,var(--font-family,inherit))} .v-hsc2-drop-btn:hover,.v-hsc2-drop:hover .v-hsc2-drop-btn{background:color-mix(in srgb,var(--primary-color) 10%,transparent);color:var(--primary-dark,var(--primary-color))} .v-hsc2-chev{transition:transform .22s;flex-shrink:0;opacity:.55} .v-hsc2-drop:hover .v-hsc2-chev{transform:rotate(180deg)} .v-hsc2-drop-menu{display:none;position:absolute;top:100%;left:0;min-width:210px;background:var(--bg-color,#fff);border:1px solid var(--border-color);border-radius:12px;box-shadow:0 16px 48px color-mix(in srgb,var(--text-color) 12%,transparent);padding:.6rem .4rem .4rem;z-index:200} .v-hsc2-drop-menu.wide{min-width:260px} .v-hsc2-drop:hover .v-hsc2-drop-menu{display:block} .v-hsc2-drop-item{display:flex;align-items:center;justify-content:space-between;gap:.65rem;padding:.55rem .85rem;font-size:var(--fs-sm);color:var(--text-muted);text-decoration:none;border-radius:8px;font-weight:600;transition:background .15s,color .15s} .v-hsc2-drop-item:hover{background:color-mix(in srgb,var(--primary-color) 8%,transparent);color:var(--primary-dark,var(--primary-color))} .v-hsc2-drop-divider{height:1px;background:var(--border-color);margin:.3rem .4rem} .v-hsc2-di{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.65} .v-hsc2-mob-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1099;backdrop-filter:blur(2px)} .v-hsc2-mob-backdrop.is-open{display:block} .v-hsc2-mob{display:none;position:fixed;inset:0;background:var(--bg-color);z-index:1100;overflow-y:auto} .v-hsc2-mob.is-open{display:block} @media(min-width:641px){.v-hsc2-mob-backdrop.is-open{display:block}.v-hsc2-mob{inset:0 auto 0 0;max-width:420px;box-shadow:none;transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);display:block;pointer-events:none}.v-hsc2-mob.is-open{transform:translateX(0);pointer-events:auto;width:100%;box-shadow:4px 0 24px rgba(0,0,0,.18)}} .v-hsc2-mob-ann-bar{padding:.55rem 1.5rem;font-size:.78rem;font-weight:600;text-align:center;background:var(--hdr-ann-bg,var(--primary-color));color:var(--hdr-ann-text,var(--text-inverse,#fff));line-height:1.4} .v-hsc2-mob-top{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid var(--border-color);position:sticky;top:0;background:var(--bg-color);z-index:1} .v-hsc2-mob-acts{display:flex;align-items:center;gap:.65rem} .v-hsc2-mob-acts .v-hsc2-mob-phone,.v-hsc2-mob-acts .v-hsc2-cta{min-height:2.1rem;padding-top:.38rem;padding-bottom:.38rem;box-sizing:border-box} .v-hsc2-mob-hd{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.25rem;border-bottom:1px solid var(--border-color);position:sticky;top:0;background:var(--hdr-bg,var(--bg-color,#fff));z-index:2} .v-hsc2-mob-logo{display:flex;align-items:center;text-decoration:none} .v-hsc2-mob-btns{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:.85rem 1.25rem;border-bottom:1px solid var(--border-color)} .v-hsc2-mob-btns .v-hsc2-mob-phone,.v-hsc2-mob-btns .v-hsc2-mob-cta{flex:1;justify-content:center;min-height:2.4rem;font-size:.88rem;box-sizing:border-box;max-width:180px} @media(min-width:641px){.v-hsc2-mob-btns{display:none}} .v-hsc2-mob-phone{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .9rem;background:var(--primary-color);color:var(--text-inverse,#fff);font-size:.82rem;font-weight:700;border-radius:var(--border-radius,6px);text-decoration:none;white-space:nowrap;transition:background .2s} .v-hsc2-mob-phone:hover{background:var(--primary-dark,var(--primary-color))} .v-hsc2-mob-cta{padding:.5rem .9rem !important} .v-hsc2-mob-srch{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.5rem;border-bottom:1px solid var(--border-color)} .v-hsc2-mob-srch input{flex:1;border:none;outline:none;background:transparent;font-size:.94rem;color:var(--text-color);font-family:var(--font-family,inherit)} .v-hsc2-mob-srch input::placeholder{color:var(--text-muted)} .v-hsc2-mob-catblock{border-bottom:2px solid var(--border-color)} .v-hsc2-mob-cattoggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.25rem;background:none;border:none;cursor:pointer;font-family:var(--font-family,inherit)} .v-hsc2-mob-cattoggle-label{display:flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:700;color:var(--text-color)} .v-hsc2-mob-cattoggle:hover{background:color-mix(in srgb,var(--primary-color) 6%,transparent)} .v-hsc2-mob-catarrow{color:var(--text-muted);transition:transform .22s;flex-shrink:0} .v-hsc2-mob-catlist{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;padding:.75rem 1rem 1rem} .v-hsc2-mob-catitem{border:none} .v-hsc2-mob-catitem.has-sub{grid-column:1/-1} .v-hsc2-mob-catrow{display:flex;align-items:center;justify-content:space-between;padding:.48rem .4rem;cursor:pointer;background:none;border:none;border-radius:0;transition:color .15s} .v-hsc2-mob-catrow-chev{color:var(--text-muted);flex-shrink:0;transition:transform .2s} .v-hsc2-mob-catrow.is-open .v-hsc2-mob-catrow-chev{transform:rotate(180deg)} .v-hsc2-mob-catlink{flex:1;font-size:.8rem;font-weight:600;color:var(--text-color);text-decoration:none;line-height:1.3;display:flex;align-items:center;gap:.35rem} .v-hsc2-mob-catlink::before{content:'•';color:var(--primary-color);font-size:1.1rem;line-height:1;flex-shrink:0} .v-hsc2-mob-catrow:hover .v-hsc2-mob-catlink,.v-hsc2-mob-catrow.is-open .v-hsc2-mob-catlink{color:var(--primary-dark,var(--primary-color))} .v-hsc2-mob-catsub{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:.25rem;padding:.35rem 0 .5rem 1rem} .v-hsc2-mob-catsublink{display:flex;align-items:center;gap:.3rem;padding:.35rem .4rem;font-size:.76rem;font-weight:500;color:var(--text-muted);text-decoration:none;background:none;border:none;transition:color .14s} .v-hsc2-mob-catsublink::before{content:'–';color:var(--primary-color);opacity:.7;flex-shrink:0} .v-hsc2-mob-catsublink:hover{color:var(--primary-dark,var(--primary-color))} .v-hsc2-mob-nav{padding:0 1.25rem 4rem} .v-hsc2-mn-link,.v-hsc2-mn-grp-btn{display:flex;align-items:center;gap:.75rem;width:100%;padding:.9rem 1.25rem;font-size:1rem;font-weight:600;color:var(--hdr-text,var(--text-color));text-decoration:none;background:none;border:none;border-bottom:1px solid var(--border-color);border-left:3px solid transparent;cursor:pointer;transition:color .18s,background .15s,border-left-color .15s;text-align:left;box-sizing:border-box} .v-hsc2-mn-link:hover,.v-hsc2-mn-grp-btn:hover,.v-hsc2-mn-grp.is-open>.v-hsc2-mn-grp-btn{color:var(--primary-dark,var(--primary-color));background:color-mix(in srgb,var(--primary-color) 5%,transparent);border-left-color:var(--primary-color)} .v-hsc2-mn-ico{width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--primary-color) 12%,transparent);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--primary-color)} .v-hsc2-mn-label{flex:1} .v-hsc2-mn-arr{flex-shrink:0;opacity:.35;transition:opacity .18s} .v-hsc2-mn-link:hover .v-hsc2-mn-arr{opacity:.7} .v-hsc2-mn-chev{flex-shrink:0;opacity:.45;transition:transform .22s,opacity .18s} .v-hsc2-mn-grp.is-open>.v-hsc2-mn-grp-btn .v-hsc2-mn-chev{transform:rotate(180deg);opacity:.8} .v-hsc2-mn-sub{display:none;background:color-mix(in srgb,var(--primary-color) 4%,transparent)} .v-hsc2-mn-grp.is-open>.v-hsc2-mn-sub{display:block} .v-hsc2-mn-sublink{display:flex;align-items:center;gap:.6rem;padding:.7rem 1.25rem .7rem 4rem;font-size:.88rem;font-weight:500;color:var(--text-muted);text-decoration:none;border-bottom:1px solid var(--border-color);transition:color .15s,padding-left .15s;position:relative} .v-hsc2-mn-sublink::before{content:'';position:absolute;left:2.6rem;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:var(--primary-color);opacity:.55} .v-hsc2-mn-sublink:last-child{border-bottom:none} .v-hsc2-mn-sublink:hover{color:var(--primary-dark,var(--primary-color));padding-left:4.3rem} .v-hsc2-mn-sublink:hover::before{opacity:1} .v-hsc2-mn-div{height:6px;background:color-mix(in srgb,var(--border-color) 60%,transparent)} .v-hsc2-x{background:var(--surface-color);border:none;cursor:pointer;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-color);transition:background .2s,color .2s} .v-hsc2-x:hover{background:var(--primary-dark,var(--primary-color));color:var(--text-inverse,#fff)} .v-hsc2-tab-bar{display:none} .v-hsc2-tab-bar-inner{padding:0 1rem;display:flex;align-items:center;min-height:40px;gap:.5rem} .v-hsc2-tab-menu-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.38rem .9rem;font-size:.875rem;font-weight:700;color:var(--text-muted);background:none;border:1px solid var(--border-color);border-radius:var(--border-radius,6px);cursor:pointer;font-family:var(--font-family,inherit);transition:background .16s,color .16s,border-color .16s;white-space:nowrap} .v-hsc2-tab-menu-btn:hover{background:color-mix(in srgb,var(--primary-color) 10%,transparent);color:var(--primary-dark,var(--primary-color));border-color:var(--primary-color)} .v-hsc2-tab-call{display:none;align-items:center;gap:.3rem;padding:.35rem .7rem;background:var(--primary-color);color:var(--text-inverse,#fff);font-size:.78rem;font-weight:700;border-radius:var(--border-radius,6px);text-decoration:none;white-space:nowrap;transition:background .2s} .v-hsc2-tab-call:hover{background:var(--primary-dark,var(--primary-color))} .v-hsc2-cta-icon{display:none} .v-hsc2-cta-short{display:none} @media(min-width:1024px){.v-hsc2-nav-row{display:block}.v-hsc2-brgr{display:none !important}.v-hsc2-tab-bar{display:none !important}.v-hsc2-nav-inner{display:flex !important}.v-hsc2-tab-call{display:none !important}} @media(min-width:600px) and (max-width:1023px){.v-hsc2-top-inner{display:flex;gap:.5rem}.v-hsc2-center{order:1;flex:0 0 auto}.v-hsc2-left{order:4;flex:0 0 auto;display:flex}.v-hsc2-right{order:3;flex:1;justify-content:flex-end}.v-hsc2-brgr{display:flex !important}.v-hsc2-phone{display:none !important}.v-hsc2-srch{display:flex !important}.v-hsc2-srch input{width:180px}.v-hsc2-cta-txt{display:none !important}.v-hsc2-cta-icon{display:none !important}.v-hsc2-cta-short{display:inline !important}.v-hsc2-cta-d{padding:.35rem .7rem;font-size:.78rem;line-height:inherit}.v-hsc2-tab-call{display:inline-flex !important}.v-hsc2-nav-row{display:none !important}} @media(max-width:599px){.v-hsc2-top-inner{display:flex;gap:.4rem;height:56px;padding:0 .5rem 0 0}.v-hsc2-left{order:1;flex:0 0 auto;margin-right:.65rem}.v-hsc2-center{order:2;flex:0 0 auto}.v-hsc2-center img{height:28px !important}.v-hsc2-right{order:3;flex:1;justify-content:flex-end;padding-right:.25rem}.v-hsc2-brgr{display:flex}.v-hsc2-phone{display:none !important}.v-hsc2-srch{display:flex !important}.v-hsc2-srch{margin-left:auto;flex-shrink:1}.v-hsc2-srch input{width:100px;min-width:60px}.v-hsc2-cta-d{display:none !important}.v-hsc2-tab-call{display:none !important}.v-hsc2-tab-call span{display:none}.v-hsc2-nav-row{display:none !important}} .v-hsc2-catdrop{position:relative;flex-shrink:0} .v-hsc2-catdrop__btn{display:inline-flex;align-items:center;gap:.4rem;padding:.48rem 1rem;background:var(--primary-dark);color:var(--text-inverse,#fff);font-size:.875rem;font-weight:700;border:none;border-radius:var(--border-radius,6px);cursor:pointer;white-space:nowrap;font-family:var(--font-family,inherit);transition:background .18s,transform .18s cubic-bezier(.34,1.56,.64,1);letter-spacing:.01em} .v-hsc2-catdrop__btn:hover{background:var(--primary-color);transform:scale(1.03)} .v-hsc2-catdrop__chev{transition:transform .2s;flex-shrink:0;opacity:.8} .v-hsc2-catdrop:hover .v-hsc2-catdrop__chev,.v-hsc2-catdrop.is-open .v-hsc2-catdrop__chev{transform:rotate(180deg)} .v-hsc2-catdrop__menu{display:none;position:absolute;top:calc(100% + 2px);left:0;min-width:200px;width:max-content;max-width:calc(var(--hdr-cat-cols,1)*220px + .6rem);background:var(--bg-color,#fff);border:1px solid var(--border-color);border-radius:10px;box-shadow:0 10px 32px color-mix(in srgb,var(--text-color) 10%,transparent);z-index:500;padding:.3rem;list-style:none;gap:0} .v-hsc2-catdrop__menu::before{content:'';position:absolute;top:-10px;left:-8px;right:-8px;height:10px} .v-hsc2-catdrop:hover .v-hsc2-catdrop__menu,.v-hsc2-catdrop.is-open .v-hsc2-catdrop__menu{display:grid;grid-template-columns:repeat(var(--hdr-cat-cols,1),minmax(160px,1fr))} .v-hsc2-catdrop__thumb{width:1.75rem;height:1.75rem;border-radius:4px;object-fit:cover;flex-shrink:0;opacity:.85} .v-hsc2-catdrop__item{position:relative;width:100%} .v-hsc2-catdrop__link{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;padding:.5rem .8rem;border-radius:7px;font-size:.84rem;font-weight:600;color:var(--text-color);text-decoration:none;transition:background .14s,color .14s;box-sizing:border-box} .v-hsc2-catdrop__link:hover{background:color-mix(in srgb,var(--primary-color) 10%,transparent);color:var(--primary-dark)} .v-hsc2-catdrop__label{flex:1;text-align:left} .v-hsc2-catdrop__sub-arrow{flex-shrink:0;opacity:.4;transition:opacity .15s} .v-hsc2-catdrop__link:hover .v-hsc2-catdrop__sub-arrow{opacity:.7} .v-hsc2-catdrop__sub{display:none;position:absolute;top:0;left:100%;margin-left:.25rem;min-width:180px;width:max-content;max-width:220px;background:var(--bg-color,#fff);border:1px solid var(--border-color);border-radius:10px;box-shadow:0 10px 32px color-mix(in srgb,var(--text-color) 10%,transparent);z-index:501;padding:.3rem;flex-direction:column;gap:0} .v-hsc2-catdrop__sub::before{content:'';position:absolute;top:-8px;bottom:-8px;left:-10px;width:10px} .v-hsc2-catdrop__item--has-sub:hover>.v-hsc2-catdrop__sub,.v-hsc2-catdrop__item--has-sub:focus-within>.v-hsc2-catdrop__sub{display:flex} .v-hsc2-catdrop__sub .v-hsc2-catdrop__link{font-size:.82rem;font-weight:500} .v-hsc2-catdrop{margin-right:.35rem;padding-right:.5rem;border-right:1px solid var(--border-color)} .v-hsc2-nav-inner .v-menu{list-style:none;margin:0;padding:0;display:flex;gap:.1rem;flex-wrap:nowrap;align-items:center} .v-hsc2-nav-inner .v-menu__item{position:relative;width:100%} .v-hsc2-nav-inner .v-menu__link{display:inline-flex;align-items:center;gap:.3rem;padding:.55rem .88rem;font-size:.875rem;font-weight:600;color:var(--hdr-text,var(--text-color));text-decoration:none;border:none;background:none;cursor:pointer;white-space:nowrap;border-radius:var(--border-radius,6px);transition:background .16s,color .16s;font-family:var(--font-family,inherit)} .v-hsc2-nav-inner .v-menu__link:hover,.v-hsc2-nav-inner .v-menu__item:hover>.v-menu__link{background:color-mix(in srgb,var(--primary-color) 10%,transparent);color:var(--primary-dark,var(--primary-color))} .v-hsc2-nav-inner .v-menu__item:has(>.v-menu--sub)>.v-menu__link{padding-right:.6rem} .v-hsc2-nav-inner .v-menu__item:has(>.v-menu--sub)>.v-menu__link::after{content:'';display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;margin-left:.3rem;opacity:.55;transition:transform .2s;vertical-align:middle;flex-shrink:0} .v-hsc2-nav-inner .v-menu__item:has(>.v-menu--sub):hover>.v-menu__link::after{transform:rotate(180deg);opacity:.85} .v-hsc2-nav-inner .v-menu--sub{display:none;position:absolute;top:100%;left:0;min-width:168px;width:max-content;max-width:240px;flex-direction:column;gap:.25rem;padding:.45rem;background:var(--bg-color,#fff);border:1px solid var(--border-color);border-radius:10px;box-shadow:0 8px 28px color-mix(in srgb,var(--text-color) 10%,transparent);z-index:500;list-style:none} .v-hsc2-nav-inner .v-menu--sub::before{content:'';position:absolute;top:-10px;left:-8px;right:-8px;height:10px} .v-hsc2-nav-inner .v-menu__item:hover>.v-menu--sub,.v-hsc2-nav-inner .v-menu__item:focus-within>.v-menu--sub{display:flex} .v-hsc2-nav-inner .v-menu--sub .v-menu__link{width:100%;padding:.62rem 1rem;border-radius:7px;font-weight:600;font-size:.82rem;display:flex;align-items:center;gap:.5rem;text-align:left;box-sizing:border-box} .v-hsc2-nav-inner .v-menu--sub .v-menu__link .v-menu__label{flex:1;text-align:left} .v-hsc2-nav-inner .v-menu--sub .v-menu__link::after{content:'';display:inline-block;flex-shrink:0;width:5px;height:5px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg);opacity:.3;margin-left:auto;transition:opacity .15s,transform .18s ease} .v-hsc2-nav-inner .v-menu--sub .v-menu__link:hover::after{opacity:.7;transform:rotate(45deg) translateX(2px)} .v-hsc2-mob-nav .v-menu{list-style:none;margin:0;padding:0} .v-hsc2-mob-nav .v-menu__item{border-bottom:1px solid var(--border-color)} .v-hsc2-mob-nav .v-menu__item:last-child{border-bottom:none} .v-hsc2-mob-nav .v-menu__link{display:flex;align-items:center;gap:.6rem;padding:.8rem 0;font-size:clamp(0.8rem,2.5vw,1rem);font-weight:600;color:var(--text-color);text-decoration:none;transition:color .18s,padding-left .15s;width:100%} .v-hsc2-mob-nav .v-menu__icon{width:1.15rem;height:1.15rem;flex-shrink:0} .v-hsc2-mob-nav .v-menu__link:hover{color:var(--primary-dark,var(--primary-color));padding-left:.35rem} .v-hsc2-mob-nav .v-menu--sub{list-style:none;padding:.25rem 0 .25rem 1rem;display:block} .v-hsc2-mob-nav .v-menu--sub .v-menu__link{font-size:.9rem;color:var(--text-muted);padding:.55rem 0} .v-hsc2-mob-nav .v-menu--sub-2{list-style:none;padding:.2rem 0 .2rem 1rem;display:block} .v-hsc2-mob-nav .v-menu--sub-2 .v-menu__link{font-size:.84rem;color:var(--text-muted);padding:.45rem 0} .v-hsc2-mob-nav .v-menu__item>.v-menu--sub{display:none} .v-hsc2-mob-nav .v-menu__item.is-open>.v-menu--sub{display:block} .v-hsc2-mob-nav .v-menu__item>.v-menu--sub-2{display:none} .v-hsc2-mob-nav .v-menu__item.is-open>.v-menu--sub-2{display:block} .v-hsc2-mob-nav .v-menu__item:has(>.v-menu--sub)>.v-menu__link::after,.v-hsc2-mob-nav .v-menu__item:has(>.v-menu--sub-2)>.v-menu__link::after{content:'';display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;margin-left:auto;opacity:.45;transition:transform .2s;flex-shrink:0} .v-hsc2-mob-nav .v-menu__item.is-open:has(>.v-menu--sub)>.v-menu__link::after{transform:rotate(180deg);opacity:.8} /* ================================================================ §K — Store Classic Footer (v-fsc-*) Rich footer: logo + about / quick links / categories / contact. ================================================================ */ .v-fsc{background:var(--ftr-bg);border-top:2px solid var(--ftr-border);color:var(--ftr-text);font-family:var(--font-family,system-ui,sans-serif);width:100%;position:relative;box-shadow:var(--ftr-shadow)} .v-fsc::before{content:'';position:absolute;inset:0;background-image:var(--ftr-bg-image);background-size:cover;background-position:center;opacity:var(--ftr-bg-opacity);pointer-events:none;z-index:0} .v-fsc>*{position:relative;z-index:1} .v-fsc-inner{width:100%;font-family:var(--font-family,inherit)} .v-fsc-r1-inner,.v-fsc-r2-inner,.v-fsc-r3-inner{max-width:var(--max-hf-width);margin:0 auto;padding:0 1.5rem} .v-fsc-r1{border-bottom:1px solid var(--border-color)} .v-fsc-r1-inner{display:grid;grid-template-columns:220px 1fr;gap:3.5rem;align-items:start;padding:3rem 1.5rem 2.5rem} .v-fsc-brand{display:flex;flex-direction:column;gap:1.25rem} .v-fsc-tagline{display:flex;align-items:center;gap:6px;color:var(--primary-dark);font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase} .v-fsc-tagline-line{display:inline-block;width:20px;height:1.5px;background:var(--primary-dark)} .v-fsc-soc{display:flex;gap:.5rem;margin-top:.25rem} .v-fsc-soc a{width:34px;height:34px;background:var(--border-color);border-radius:var(--radius-md,6px);display:flex;align-items:center;justify-content:center;transition:background .25s;text-decoration:none} .v-fsc-soc a:hover{background:var(--ftr-soc-hover)} .v-fsc-soc a:hover svg{color:#fff} .v-fsc-soc svg{width:14px;height:14px;color:var(--ftr-soc)} .v-fsc-about{border-left:3px solid var(--primary-color);padding-left:2rem} .v-fsc-para{column-count:2;column-gap:2.5rem;font-size:var(--fs-body);color:var(--ftr-text);line-height:var(--lh-body,1.6);text-align:justify;orphans:3;widows:3} .v-fsc-r2{border-bottom:1px solid var(--ftr-border)} .v-fsc-r2-inner{display:grid;grid-template-columns:1fr 1fr 1fr;gap:3rem;padding:2.5rem 1.5rem} .v-fsc-col-hd{font-family:var(--heading-font,var(--font-family,inherit));font-size:var(--fs-h6);font-weight:800;line-height:var(--lh-heading,1.2);color:var(--ftr-heading);margin-bottom:1rem;letter-spacing:.02em;text-transform:uppercase} .v-fsc-contact-lbl{color:var(--primary-dark);font-size:var(--fs-xs);font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.2rem} .v-fsc-r2 .v-menu{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem} .v-fsc-r2 .v-menu__link{display:inline-flex;align-items:center;padding:.25rem .75rem;border-radius:999px;border:1px solid var(--ftr-border);background:var(--ftr-link-bg);color:var(--ftr-link);font-size:var(--fs-sm);font-family:var(--font-family,inherit);line-height:var(--lh-tight,1.1);text-decoration:none;white-space:nowrap;transition:background .18s,color .18s,border-color .18s} .v-fsc-r2 .v-menu__link:hover{background:var(--ftr-link-hover-bg);color:var(--ftr-link-hover);border-color:var(--ftr-link-hover-bg)} .v-fsc-r2 .v-menu--sub{display:none} .v-fsc-r3-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding:1.25rem 1.5rem} .v-fsc-copy{color:var(--ftr-copy);font-size:var(--fs-body);line-height:var(--lh-body,1.6)} .v-fsc-legal{display:flex;gap:1.5rem;flex-wrap:wrap} .v-fsc-legal a{color:var(--ftr-copy);font-size:var(--fs-body);line-height:var(--lh-tight,1.1);text-decoration:none} @keyframes v-fsc-fade-in{from{opacity:0}to{opacity:1}} @keyframes v-fsc-slide-up{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}} .v-fsc.v-fsc-anim-fade-in{animation:v-fsc-fade-in .6s ease both} .v-fsc.v-fsc-anim-slide-up{animation:v-fsc-slide-up .6s ease both} @media(max-width:1023px){.v-fsc-r1-inner{grid-template-columns:180px 1fr;gap:2rem}.v-fsc-r2-inner{grid-template-columns:1fr 1fr}.v-fsc-r2-inner>:last-child{grid-column:1/-1}} @media(max-width:767px){.v-fsc-r1-inner{grid-template-columns:1fr;gap:1.5rem;padding:2rem 1rem}.v-fsc-about{border-left:none;border-top:3px solid var(--primary-color,#fcd703);padding-left:0;padding-top:1.25rem;margin-top:.25rem}.v-fsc-para{column-count:1}.v-fsc-r2-inner{grid-template-columns:1fr;gap:2rem;padding:2rem 1rem}.v-fsc-r2-inner>:last-child{grid-column:auto}.v-fsc-r2 .v-menu{grid-template-columns:1fr 1fr}.v-fsc-r3-inner{padding:1.25rem 1rem}} /* ── §L — Menu icons ── */ .v-menu__icon{display:inline-flex;align-items:center;justify-content:center;width:1.1em;height:1.1em;vertical-align:middle;flex-shrink:0} .v-menu__icon svg{width:100%;height:100%} /* ================================================================ §I — Paushtik About Page (v-abt-*) ================================================================ */ .v-abt-hero{background-color:#14532d;color:#fff} .v-abt-eyebrow{color:#facc15;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;display:block} .v-abt-eyebrow-g{color:#16a34a;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;display:block} .v-abt-hero-sub{color:#bbf7d0} .v-abt-cream{background-color:#FAF7F2} .v-abt-mission{background-color:#166534;color:#fff} .v-abt-mission-ic{background-color:#15803d} .v-abt-vision{background-color:#facc15;color:#fff} .v-abt-vision-ic{background-color:#eab308} .v-abt-stats{background-color:#166534;color:#fff} .v-abt-stat-num{font-size:3rem;font-weight:700;color:#facc15;line-height:1} .v-abt-year{color:#15803d} .v-abt-year-alt{color:#ca8a04} .v-abt-badge{background-color:#facc15;color:#fff} .v-abt-tl-line{background-color:#bbf7d0} .v-abt-tl-dot{background-color:#166534} .v-abt-tl-dot-alt{background-color:#facc15} .v-abt-btn{background-color:#15803d;color:#fff;display:inline-flex;align-items:center;justify-content:center} .v-abt-btn:hover{background-color:#166534} .v-abt-btn-out{border:2px solid #15803d;color:#15803d;display:inline-flex;align-items:center;justify-content:center} .v-abt-btn-out:hover{background-color:#15803d;color:#fff} .v-abt-img-ph{background:linear-gradient(135deg,#bbf7d0 0%,#86efac 100%)} .v-serif{font-family:var(--heading-font,'Playfair Display',Georgia,serif)} .reveal{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s ease} .reveal.visible{opacity:1;transform:translateY(0)} .reveal-delay-1{transition-delay:.1s} .reveal-delay-2{transition-delay:.2s} .reveal-delay-3{transition-delay:.3s} /* ================================================================ §J — Paushtik Team Page (v-team-*) ================================================================ */ .v-team-hero{position:relative;min-height:680px;overflow:hidden;display:flex;align-items:center} .v-team-hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden} .v-team-hero-bg img{width:100%;height:115%;object-fit:cover;object-position:center 30%;display:block} .v-team-hero-ov{position:absolute;inset:0;background:linear-gradient(125deg,rgba(10,14,22,.55) 0%,rgba(10,14,22,.15) 100%);z-index:1} .v-team-hero-ghost{position:absolute;bottom:-2rem;right:-2rem;font-family:var(--heading-font);font-size:clamp(6rem,12vw,14rem);font-weight:800;color:rgba(255,255,255,.035);line-height:1;letter-spacing:.06em;pointer-events:none;user-select:none;z-index:2;white-space:nowrap} .v-team-hero-cnt{position:relative;z-index:10;width:100%;display:flex;align-items:center;padding:5rem 0 3rem} .v-particle{position:absolute;pointer-events:none;z-index:3;opacity:.55} @keyframes v-drift1{0%,100%{transform:translateY(0) rotate(0deg) scale(1)}40%{transform:translateY(-28px) rotate(14deg) scale(1.05)}70%{transform:translateY(-14px) rotate(-8deg) scale(.97)}} @keyframes v-drift2{0%,100%{transform:translateY(0) rotate(0deg) translateX(0)}35%{transform:translateY(-38px) rotate(18deg) translateX(10px)}70%{transform:translateY(-20px) rotate(-6deg) translateX(-6px)}} @keyframes v-drift3{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-44px) rotate(22deg)}} @keyframes v-drift4{0%,100%{transform:translateY(0) scale(1)}45%{transform:translateY(-22px) scale(1.08)}80%{transform:translateY(-10px) scale(.94)}} @keyframes v-drifts{0%,100%{transform:translateY(0) rotate(0deg) scale(1)}33%{transform:translateY(-60px) rotate(10deg) scale(1.03)}66%{transform:translateY(-30px) rotate(-5deg) scale(.98)}} .v-scroll-ind{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;color:rgba(255,255,255,.6);font-size:.65rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;z-index:10} .v-scroll-chev{animation:v-bounce 1.6s ease-in-out infinite} @keyframes v-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}} .v-sec-tag{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.875rem;color:var(--primary-dark)} .v-sec-tag-line{width:28px;height:2px;border-radius:2px;background:var(--primary-color,#fcd703);display:inline-block} .v-ghost-txt{position:absolute;font-family:var(--heading-font);font-size:clamp(6rem,10vw,11rem);font-weight:800;line-height:1;letter-spacing:.08em;pointer-events:none;user-select:none;white-space:nowrap;color:color-mix(in srgb,var(--text-strong) 4%,transparent)} .v-team-card{background:var(--bg-color);border-radius:20px;overflow:hidden;border:1px solid var(--border-gray);transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s;position:relative;cursor:default} .v-team-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary-color,#fcd703),var(--primary-dark,#b8940a));transform:scaleX(0);transform-origin:left;transition:transform .38s ease;z-index:2} .v-team-card:hover::before{transform:scaleX(1)} .v-team-card:hover{transform:translateY(-8px);box-shadow:0 24px 60px rgba(0,0,0,.11);border-color:color-mix(in srgb,var(--primary-color,#fcd703) 30%,transparent)} .v-team-card-img{width:100%;overflow:hidden;position:relative;background:var(--bg-light)} .v-team-card-img img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .5s ease;display:block} .v-team-card:hover .v-team-card-img img{transform:scale(1.04)} .v-team-card-body{padding:1.5rem 1.75rem 1.75rem} .v-team-role{display:inline-block;background:color-mix(in srgb,var(--primary-color,#fcd703) 12%,var(--bg-color,#fff));color:var(--primary-dark,#b8940a);font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:.25rem .75rem;border-radius:50px;border:1px solid color-mix(in srgb,var(--primary-color,#fcd703) 30%,transparent);margin-bottom:.625rem} .v-team-name{font-family:var(--heading-font);font-size:1.2rem;font-weight:800;color:var(--text-strong,#111827);margin-bottom:.625rem;line-height:1.25} .v-team-bio{color:var(--card-text,var(--text-color,#374151));font-size:.88rem;line-height:1.7} .v-founder-img{height:300px} .v-founder-body{padding:1.875rem 2rem 2.25rem} .v-founder-name{font-family:var(--heading-font);font-size:1.6rem;font-weight:800;color:var(--text-strong,#111827);margin-bottom:.75rem;line-height:1.25} .v-founder-bio{font-size:.95rem;color:var(--card-text,var(--text-color,#374151));line-height:1.8} .v-founder-badge{display:inline-flex;align-items:center;gap:6px;background:var(--text-strong,#111827);color:var(--primary-color,#fcd703);font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:.3rem .875rem;border-radius:50px;margin-bottom:.875rem} .v-core-img{height:220px} .v-ft-t1{display:grid;grid-template-columns:220px 1fr;gap:3.5rem;align-items:start;padding:3rem 0 2.5rem;border-bottom:1px solid var(--border-color)} .v-ft-t1-desc{border-left:3px solid var(--primary-color);padding-left:2rem} .v-ft-t1-para{column-count:2;column-gap:2.5rem;font-size:1rem;color:var(--text-color);line-height:1.85;text-align:justify;orphans:3;widows:3} .v-ft-t2{display:grid;grid-template-columns:1fr 1fr 1fr;gap:3rem;padding:2.5rem 0;border-bottom:1px solid var(--border-color)} .v-btt{position:fixed;bottom:1.75rem;right:1.75rem;width:46px;height:46px;border-radius:50%;background:var(--primary-color);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.15);opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s;z-index:900;pointer-events:none} .v-btt.is-vis{opacity:1;transform:translateY(0);pointer-events:auto} @media(max-width:1023px){.v-ft-t1{grid-template-columns:180px 1fr !important;gap:2rem !important}.v-ft-t2{grid-template-columns:1fr 1fr !important}.v-ft-t2>:last-child{grid-column:1/-1}} @media(max-width:767px){.v-team-hero{min-height:520px}.v-team-hero-ghost{display:none}.v-particle:nth-child(n+4){display:none}.v-founder-img{height:240px}.v-founder-body{padding:1.25rem 1.5rem 1.5rem}.v-founder-name{font-size:1.3rem}.v-ft-t1{grid-template-columns:1fr !important;gap:1.5rem !important;padding:2rem 0 !important}.v-ft-t1-desc{border-left:none !important;border-top:3px solid var(--primary-color,#fcd703);padding-left:0 !important;padding-top:1.25rem !important;margin-top:.25rem}.v-ft-t1-para{column-count:1 !important}.v-ft-t2{grid-template-columns:1fr !important;gap:2rem !important;padding:2rem 0 !important}.v-ft-t2>:last-child{grid-column:auto}.v-btt{width:40px;height:40px;bottom:1.25rem;right:1.25rem}} @media(max-width:479px){.v-team-hero{min-height:480px}.v-core-img{height:200px}.v-founder-img{height:200px}} /* ── §TS06 — Testimonial Grid float animation ───────────────────────────────*/ @keyframes ts06Float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} @keyframes ts06FloatAlt{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}} /* ── §AG — v-drawer: Author Bottom Sheet (mobile) + Right Panel (desktop) ──── */ .v-drawer-backdrop{position:fixed;inset:0;z-index:1040;background:rgba(0,0,0,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s ease} .v-drawer-backdrop.v-drawer-open{opacity:1;pointer-events:auto} .v-drawer{position:fixed;z-index:1050;background:var(--card-bg,#fff);overflow-y:auto;overscroll-behavior:contain;bottom:0;left:0;right:0;max-height:88vh;border-radius:20px 20px 0 0;transform:translateY(105%);transition:transform .38s cubic-bezier(.32,.72,0,1);padding:0 1.5rem 2rem} .v-drawer.v-drawer-open{transform:translateY(0)} @media(min-width:768px){.v-drawer{top:0;bottom:0;right:0;left:auto;width:440px;max-height:100vh;border-radius:0;transform:translateX(105%);padding:0 2rem 2rem}.v-drawer.v-drawer-open{transform:translateX(0)}} .v-drawer-handle{width:44px;height:4px;background:var(--card-border,#e5e7eb);border-radius:99px;margin:1rem auto 1.25rem;flex-shrink:0} @media(min-width:768px){.v-drawer-handle{display:none}} .v-drawer-close{position:sticky;top:1rem;float:right;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--card-border,#e5e7eb);background:var(--bg-color,#fff);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted,#6b7280);transition:all .2s;flex-shrink:0;z-index:2;margin-bottom:-34px} .v-drawer-close:hover{background:var(--primary-color);color:#fff;border-color:var(--primary-color)} .v-drawer-photo{width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid color-mix(in srgb,var(--primary-color,#fcd703) 25%,transparent);display:block;margin:0 auto 1rem;clear:both} @media(min-width:768px){.v-drawer-photo{width:120px;height:120px}} .v-drawer-genre{display:table;margin:0 auto .5rem;padding:.2rem .75rem;border-radius:99px;font-size:var(--fs-xs,.72rem);font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:color-mix(in srgb,var(--primary-color,#fcd703) 12%,transparent);color:var(--primary-color,#fcd703)} .v-drawer-name{font-size:var(--fs-body,1rem);font-weight:800;color:var(--text-strong,#111827);font-family:var(--heading-font);line-height:1.3;margin-bottom:.35rem;text-align:center} .v-drawer-books-line{font-size:var(--fs-sm,.82rem);color:var(--text-muted,#6b7280);margin-bottom:1.1rem;text-align:center} .v-drawer-divider{height:1px;background:var(--card-border,#e5e7eb);margin:1rem 0} .v-drawer-bio{font-size:var(--fs-body,1rem);color:var(--text-color,#374151);line-height:1.8} .v-drawer-social{display:flex;gap:.75rem;justify-content:center;margin-top:1.5rem} .v-drawer-social a{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--card-border,#e5e7eb);display:flex;align-items:center;justify-content:center;color:var(--text-muted,#6b7280);transition:all .2s} .v-drawer-social a:hover{border-color:var(--primary-color);color:var(--primary-color)} .v-drawer-social svg{width:16px;height:16px} /* ── §AH — TM-05 Author Grid ──────────────────────────────────────────────── */ .tm5-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem} @media(max-width:1023px){.tm5-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:599px){.tm5-grid{grid-template-columns:1fr}} .tm5-card{background:var(--card-bg,#fff);border:1px solid var(--card-border,#e5e7eb);border-radius:var(--card-radius,12px);overflow:hidden;cursor:pointer;transition:transform .25s,box-shadow .25s;position:relative;box-shadow:var(--card-shadow,0 2px 8px rgba(0,0,0,.07))} .tm5-card:hover{transform:translateY(-6px);box-shadow:var(--card-shadow-hover,0 16px 40px rgba(0,0,0,.13))} .tm5-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--primary-color,#fcd703);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;z-index:1} .tm5-card:hover::before{transform:scaleX(1)} .tm5-img{width:100%;height:240px;object-fit:cover;object-position:top;display:block;transition:transform .5s ease} .tm5-card:hover .tm5-img{transform:scale(1.04)} .tm5-body{padding:1.1rem 1.25rem 1.25rem} .tm5-genre{display:inline-block;padding:.2rem .65rem;border-radius:99px;font-size:var(--fs-xs,.72rem);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-color,#fcd703);background:color-mix(in srgb,var(--primary-color,#fcd703) 12%,transparent);margin-bottom:.45rem} .tm5-name{font-size:1.05rem;font-weight:800;color:var(--card-title,var(--text-strong,#111827));line-height:1.3;margin-bottom:.5rem} .tm5-excerpt{line-height:1.6;margin-bottom:.85rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .tm5-cta{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:700;color:var(--primary-color,#fcd703)} /* ── §AI — v-tabs: no-JS radio-input tab pattern ────────────────────────── Static Pages can't carry their own