/* * Vouchers page ([hotrod_vouchers]) — self-contained scoped styling. * Faithfully ported from the Claude Design "Vouchers.dc.html", rescoped to * .hotrod-vouchers to avoid collisions. Dark by default; light is driven by * the site-wide toggle on (html.theme-light .hotrod-vouchers overrides). * Site chrome (header/nav/footer/checker/theme-toggle) is intentionally NOT here * — the theme renders the global header/footer. */ .hotrod-vouchers *, .hotrod-vouchers *::before, .hotrod-vouchers *::after { box-sizing: border-box; } .hotrod-vouchers { --or:#FF6B00;--or-d:#E65F00;--jet:#0B0B0C;--asph:#141416;--asph2:#1B1B1F;--line:#2A2A2E;--on:#F4F2EF;--mut:#A8A29A; --fd:"Oswald","Arial Narrow",sans-serif;--fb:"Inter",system-ui,sans-serif;--ease:cubic-bezier(.23,1,.32,1); --bg:var(--jet);--surf:var(--asph);--surf2:var(--asph2);--bd:var(--line);--tx:var(--on);--mu:var(--mut);--hd:#fff; /* KEIN overflow-x:hidden hier — es würde den .vo-shop-100vw-Breakout clippen (frame.css gibt ihn frei). */ background:var(--bg);color:var(--tx);font-family:var(--fb);font-size:1.7rem;line-height:1.6;-webkit-font-smoothing:antialiased;position:relative; } html.theme-light .hotrod-vouchers { --bg:#fff;--surf:#fff;--surf2:#F5F5F5;--bd:#E2E2E2;--tx:#222;--mu:#555;--hd:#111; } .hotrod-vouchers h1, .hotrod-vouchers h2, .hotrod-vouchers h3 { font-family:var(--fd);margin:0;text-transform:uppercase;letter-spacing:-.01em;line-height:1;font-weight:700;color:var(--hd); } .hotrod-vouchers p { margin:0; } .hotrod-vouchers a { color:var(--or);text-decoration:none; } .hotrod-vouchers img { max-width:100%;display:block; } .hotrod-vouchers :focus-visible { outline:2px solid var(--or);outline-offset:2px; } .hotrod-vouchers .vo-wrap { width:100%;max-width:126rem;margin-inline:auto;padding-inline:clamp(2rem,1.2rem + 3vw,4.2rem); } /* hero */ .hotrod-vouchers .vo-hero { text-align:center;padding:clamp(5rem,4rem + 5vw,9rem) 0 clamp(3rem,2rem + 2vw,4.4rem); } .hotrod-vouchers .vo-eyebrow { display:inline-flex;align-items:center;gap:.9rem;font-family:var(--fd);font-weight:600;font-size:1.3rem;letter-spacing:.2em;text-transform:uppercase;color:var(--or);margin-bottom:1.6rem; } .hotrod-vouchers .vo-eyebrow::before, .hotrod-vouchers .vo-eyebrow::after { content:"";width:22px;height:2px;background:var(--or); } .hotrod-vouchers .vo-title { font-size:clamp(3.4rem,2rem + 5vw,6rem);max-width:22ch;margin-inline:auto;text-wrap:balance; } .hotrod-vouchers .vo-title span { color:var(--or); } .hotrod-vouchers .vo-sub { margin-top:1.8rem;font-size:clamp(1.7rem,1.5rem + .5vw,2rem);color:var(--mu);max-width:56ch;margin-inline:auto;line-height:1.5; } /* occasion cards */ .hotrod-vouchers .vo-occ { display:grid;grid-template-columns:1fr;gap:1.8rem;padding-bottom:clamp(3rem,2rem + 3vw,5rem); } @media(min-width:640px){ .hotrod-vouchers .vo-occ{ grid-template-columns:repeat(2,1fr); } } @media(min-width:980px){ .hotrod-vouchers .vo-occ{ grid-template-columns:repeat(4,1fr); } } .hotrod-vouchers .vo-occ-card { display:flex;flex-direction:column;align-items:center;text-align:center;gap:.8rem;background:var(--surf);border:1px solid var(--bd);padding:3rem 2rem;transition:border-color .18s,transform .18s var(--ease),box-shadow .18s var(--ease); } .hotrod-vouchers .vo-occ-card:hover { border-color:var(--or);transform:translateY(-4px);box-shadow:8px 8px 0 0 rgba(255,107,0,.22); } .hotrod-vouchers .vo-occ-ico { display:inline-flex;align-items:center;justify-content:center;width:6rem;height:6rem;background:rgba(255,107,0,.12);color:var(--or);margin-bottom:.6rem; } .hotrod-vouchers .vo-occ-ico svg { width:3rem;height:3rem; } .hotrod-vouchers .vo-occ-card h3 { font-size:2rem; } .hotrod-vouchers .vo-occ-card p { color:var(--mu);font-size:1.5rem;line-height:1.45; } /* voucher shop — full-bleed band (breakout past frame.css' 1340px box) */ .hotrod-vouchers .vo-shop { margin-inline:calc(50% - 50vw);width:100vw;background:var(--surf2);border-block:1px solid var(--bd);position:relative; } .hotrod-vouchers .vo-shop::before { content:"";position:absolute;top:0;left:0;right:0;height:6px;background:repeating-linear-gradient(115deg,var(--or) 0 14px,transparent 14px 26px); } .hotrod-vouchers .vo-shop-in { padding:clamp(4rem,3rem + 3vw,6.4rem) 0; } .hotrod-vouchers .vo-shead { text-align:center;margin-bottom:3.4rem; } .hotrod-vouchers .vo-shead h2 { font-size:clamp(2.8rem,2rem + 3vw,4rem); } .hotrod-vouchers .vo-shead .u { display:block;width:6rem;height:4px;background:var(--or);margin:1.4rem auto; } .hotrod-vouchers .vo-shead p { color:var(--mu);font-family:var(--fd);font-size:1.4rem;letter-spacing:.12em;text-transform:uppercase; } .hotrod-vouchers .vo-amounts { display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;max-width:78rem;margin-inline:auto; } @media(min-width:640px){ .hotrod-vouchers .vo-amounts{ grid-template-columns:repeat(4,1fr); } } .hotrod-vouchers .vo-amt { position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;background:var(--surf);border:1px solid var(--bd);padding:2.4rem 1rem;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s var(--ease);color:var(--hd);font-family:inherit; } .hotrod-vouchers .vo-amt:hover { border-color:var(--or);transform:translateY(-2px); } .hotrod-vouchers .vo-amt.sel { border-color:var(--or);background:rgba(255,107,0,.08);box-shadow:inset 0 0 0 1px var(--or); } .hotrod-vouchers .vo-amt b { font-family:var(--fd);font-weight:700;font-size:2.6rem;letter-spacing:-.02em; } .hotrod-vouchers .vo-amt span { font-family:var(--fd);font-size:1.05rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mu); } .hotrod-vouchers .vo-amounts-empty { grid-column:1 / -1;text-align:center;color:var(--mu);font-size:1.5rem;padding:2rem 0; } .hotrod-vouchers .vo-shop-note { text-align:center;color:var(--mu);font-size:1.4rem;margin-top:1.8rem; } /* checkout hand-off card */ .hotrod-vouchers .vo-checkout { max-width:78rem;margin:3.2rem auto 0;background:var(--surf);border:1px solid var(--bd);border-top:3px solid var(--or); } .hotrod-vouchers .vo-co-head { display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.6rem 1.4rem;padding:2rem 2.4rem;border-bottom:1px solid var(--bd); } .hotrod-vouchers .vo-co-head h3 { font-size:1.9rem;font-family:var(--fb);font-weight:700; } .hotrod-vouchers .vo-co-total { font-family:var(--fd);font-weight:700;font-size:2.4rem;color:var(--or); } .hotrod-vouchers .vo-co-body { padding:2.2rem 2.4rem 2.6rem;display:flex;flex-direction:column;gap:1.6rem; } .hotrod-vouchers .vo-pay { display:inline-flex;align-items:center;justify-content:center;gap:.9rem;font-family:var(--fb);font-weight:800;font-size:1.5rem;letter-spacing:.05em;text-transform:uppercase;color:var(--jet);background:var(--or);border:0;cursor:pointer;padding:1.7rem 2rem;clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);transition:background .15s,transform .15s var(--ease); } .hotrod-vouchers .vo-pay:hover:not(:disabled) { background:var(--or-d);transform:translateX(3px); } .hotrod-vouchers .vo-pay:disabled { background:#5a4632;color:#a98a6a;cursor:not-allowed; } .hotrod-vouchers .vo-pay svg { width:2rem;height:2rem; } .hotrod-vouchers .vo-secure { text-align:center;color:var(--mu);font-size:1.3rem; } /* contact */ .hotrod-vouchers .vo-contact { padding:clamp(4.5rem,3.5rem + 3vw,7rem) 0; } .hotrod-vouchers .vo-contact-grid { display:grid;grid-template-columns:1fr;gap:clamp(2.8rem,2rem + 3vw,5rem);align-items:start; } @media(min-width:900px){ .hotrod-vouchers .vo-contact-grid{ grid-template-columns:1fr 1fr; } } .hotrod-vouchers .vo-ci-eyebrow { font-family:var(--fd);font-weight:600;font-size:1.3rem;letter-spacing:.2em;text-transform:uppercase;color:var(--or); } .hotrod-vouchers .vo-ci h2 { font-size:clamp(3rem,2rem + 3vw,4.6rem);margin-top:1.2rem; } .hotrod-vouchers .vo-ci h2 span { color:var(--or); } .hotrod-vouchers .vo-ci-lead { color:var(--mu);font-size:1.7rem;line-height:1.6;margin-top:1.6rem;max-width:46ch; } .hotrod-vouchers .vo-addr { margin-top:2.4rem;display:flex;align-items:flex-start;gap:1.2rem; } .hotrod-vouchers .vo-addr svg { flex:none;width:2.4rem;height:2.4rem;color:var(--or);margin-top:.2rem; } .hotrod-vouchers .vo-addr .al { font-family:var(--fd);font-weight:600;font-size:1.3rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mu); } .hotrod-vouchers .vo-addr .av { font-size:1.7rem;color:var(--hd);font-weight:600; } .hotrod-vouchers .vo-actions { margin-top:2rem;display:flex;flex-wrap:wrap;gap:1rem; } .hotrod-vouchers .vo-act { display:inline-flex;align-items:center;gap:.8rem;font-family:var(--fd);font-weight:600;font-size:1.3rem;letter-spacing:.06em;text-transform:uppercase;color:var(--hd);background:var(--surf);border:1px solid var(--bd);padding:1.2rem 1.6rem;transition:border-color .15s,color .15s; } .hotrod-vouchers .vo-act:hover { border-color:var(--or);color:var(--or); } .hotrod-vouchers .vo-act svg { width:1.8rem;height:1.8rem;color:var(--or); } .hotrod-vouchers .vo-write { background:var(--surf);border:1px solid var(--bd);padding:clamp(2.2rem,1.6rem + 1.5vw,3.2rem); } .hotrod-vouchers .vo-write h3 { font-size:2.2rem;margin-bottom:.4rem; } .hotrod-vouchers .vo-write .ws { color:var(--mu);font-size:1.5rem;margin-bottom:2rem; } .hotrod-vouchers .vo-write-form { display:flex;flex-direction:column;gap:1.4rem; } .hotrod-vouchers .vo-field { display:flex;flex-direction:column;gap:.6rem; } .hotrod-vouchers .vo-field label { font-family:var(--fd);font-size:1.15rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mu); } .hotrod-vouchers .vo-field input, .hotrod-vouchers .vo-field textarea { background:var(--surf2);border:1px solid var(--bd);color:var(--hd);padding:1.2rem 1.4rem;font-family:var(--fb);font-size:1.5rem;border-radius:0; } .hotrod-vouchers .vo-field input:focus, .hotrod-vouchers .vo-field textarea:focus { border-color:var(--or);outline:none; } /* honeypot — visually removed, still fillable by naive bots */ .hotrod-vouchers .vo-hp { position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden; } .hotrod-vouchers .vo-write .vo-pay { clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%); } .hotrod-vouchers .vo-write-err { display:none;color:#ff8a5c;font-size:1.4rem; } .hotrod-vouchers .vo-write-err.on { display:block; } .hotrod-vouchers .vo-write-done { display:none;flex-direction:column;gap:.8rem;padding:2rem 0; } .hotrod-vouchers .vo-write-done.on { display:flex; } .hotrod-vouchers .vo-write-done .n { font-family:var(--fd);font-weight:700;font-size:2rem;text-transform:uppercase;color:var(--or); } .hotrod-vouchers .vo-write-done p { color:var(--mu);font-size:1.55rem; }