/* * 3D Druck Fieml — landing + legal styles. * System font stack for now; self-hosted subset webfont is a later polish step * (no Google Fonts / CDN per project rules). * * Theming: all colours are tokens. Light is the bare :root default. Dark is * defined once as a token swap and applied in two ways — * - system preference: @media (prefers-color-scheme: dark), unless the user * has explicitly forced light via ; * - explicit toggle: always wins. * The header toggle writes data-theme + localStorage; an inline script * applies it before first paint (see base.html.twig) so there is no flash. */ :root { --bg: #ffffff; --bg-alt: #f4f6f8; --surface: #ffffff; /* cards, inputs, chips — the raised paper */ --surface-2: #e9edf1; /* hover / pressed grey */ --ink: #1a1d21; --muted: #5c6670; --brand: #d35400; /* filament orange */ --brand-dark: #a84300; --brand-tint: #fff2e8; /* faint orange wash (dropzone hover/over) */ --border: #dce1e6; --shadow-ring: rgba(0, 0, 0, 0.2); /* swatch dot / progress halo edge */ /* Header (translucent, blurred) */ --header-bg: rgba(255, 255, 255, 0.92); /* Hero gradient top stop (bottom stop is --bg-alt) */ --hero-from: #ffffff; /* Text that sits on a brand or dark slab — stays light in both themes */ --on-brand: #ffffff; /* Inverted slab (CTA band + footer) — a dark surface in BOTH themes */ --invert-bg: #1a1d21; --invert-ink: #cfd6dd; --invert-muted: #8b96a0; /* Semantic state surfaces */ --notice-bg: #fff6e5; --notice-border: #f0d38a; --notice-ink: #7a4f00; --error-bg: #fdecec; --error-border: #f0a9a9; --error-ink: #9c1c1c; --ok-bg: #e9f7ee; --ok-border: #a9dcbc; --ok-ink: #1e7e45; --info-bg: #eaf2fb; --info-ink: #2b6cb0; --closed-bg: #f0f0f0; --closed-ink: #666666; --field-error: #b0413e; --radius: 10px; --maxw: 1080px; --font: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } /* Dark palette — one definition, applied to system-dark (unless forced light) and to the explicit toggle. Only the tokens change; every rule below inherits. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --bg: #14171a; --bg-alt: #1b1f24; --surface: #1f242b; --surface-2: #2a313a; --ink: #e6e8eb; --muted: #9aa4af; --brand: #f0691a; /* brighter so it reads on dark */ --brand-dark: #ff8a3d; /* links/accents — lighter = higher contrast on dark */ --brand-tint: #33230f; --border: #333b44; --shadow-ring: rgba(0, 0, 0, 0.6); --header-bg: rgba(20, 23, 26, 0.85); --hero-from: #1b1f24; --on-brand: #ffffff; --invert-bg: #0e1114; --invert-ink: #cfd6dd; --invert-muted: #8b96a0; --notice-bg: #332b14; --notice-border: #5c4a1e; --notice-ink: #f0d38a; --error-bg: #3a1e1e; --error-border: #6e3535; --error-ink: #f4a9a9; --ok-bg: #16301f; --ok-border: #2f5c3f; --ok-ink: #86e0a5; --info-bg: #16283a; --info-ink: #7fb6e6; --closed-bg: #2a2f35; --closed-ink: #9aa4af; --field-error: #e08483; } } /* Explicit toggle wins in both directions. */ :root[data-theme='dark'] { --bg: #14171a; --bg-alt: #1b1f24; --surface: #1f242b; --surface-2: #2a313a; --ink: #e6e8eb; --muted: #9aa4af; --brand: #f0691a; --brand-dark: #ff8a3d; --brand-tint: #33230f; --border: #333b44; --shadow-ring: rgba(0, 0, 0, 0.6); --header-bg: rgba(20, 23, 26, 0.85); --hero-from: #1b1f24; --on-brand: #ffffff; --invert-bg: #0e1114; --invert-ink: #cfd6dd; --invert-muted: #8b96a0; --notice-bg: #332b14; --notice-border: #5c4a1e; --notice-ink: #f0d38a; --error-bg: #3a1e1e; --error-border: #6e3535; --error-ink: #f4a9a9; --ok-bg: #16301f; --ok-border: #2f5c3f; --ok-ink: #86e0a5; --info-bg: #16283a; --info-ink: #7fb6e6; --closed-bg: #2a2f35; --closed-ink: #9aa4af; --field-error: #e08483; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.6; } h1, h2, h3 { line-height: 1.2; } h1 { font-size: clamp(2rem, 5vw, 3rem); } h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); margin-top: 0; } a { color: var(--brand-dark); } img { max-width: 100%; height: auto; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--bg); padding: 0.6rem 1rem; z-index: 10; } .skip-link:focus { left: 1rem; } /* Buttons */ .btn { display: inline-block; padding: 0.85rem 1.6rem; border: 1px solid transparent; /* same box whether or not a variant adds a border */ border-radius: var(--radius); font: inherit; font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease; } .btn-primary { background: var(--brand); color: var(--on-brand); } .btn-primary:hover, .btn-primary:focus { background: var(--brand-dark); color: var(--on-brand); } .btn-sm { padding: 0.55rem 1.1rem; } /* Header */ .site-header { position: sticky; top: 0; z-index: 5; background: var(--header-bg); backdrop-filter: saturate(1.4) blur(6px); border-bottom: 1px solid var(--border); } .header-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; } .brand { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--ink); font-weight: 700; } .brand-mark { font-size: 1.4rem; line-height: 1; display: inline-flex; align-items: center; } .brand-name { font-size: 1.05rem; line-height: 1; } .header-nav { display: flex; align-items: center; gap: 1rem; } .header-nav a:not(.btn) { text-decoration: none; color: var(--ink); font-weight: 600; } .header-nav a:not(.btn):hover { color: var(--brand-dark); } /* Theme toggle (sun/moon). Icon swap driven by [data-theme] + prefers-color-scheme. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0; transition: border-color 0.12s, color 0.12s, background 0.12s; } .theme-toggle:hover, .theme-toggle:focus-visible { border-color: var(--brand); color: var(--brand-dark); } .theme-toggle .icon-dark { display: none; } .theme-toggle .icon-light { display: inline; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .theme-toggle .icon-dark { display: inline; } :root:not([data-theme='light']) .theme-toggle .icon-light { display: none; } } :root[data-theme='dark'] .theme-toggle .icon-dark { display: inline; } :root[data-theme='dark'] .theme-toggle .icon-light { display: none; } :root[data-theme='light'] .theme-toggle .icon-dark { display: none; } :root[data-theme='light'] .theme-toggle .icon-light { display: inline; } @media (max-width: 400px) { .header-nav a:not(.btn) { display: none; } /* keep logo + CTA on very small screens */ } /* Hero */ .hero { position: relative; background: linear-gradient(160deg, var(--hero-from) 0%, var(--bg-alt) 100%); border-bottom: 1px solid var(--border); padding: clamp(3rem, 8vw, 6rem) 0; } /* Landing has no header bar, so the theme switch floats at the hero's top-right. */ .hero-theme-toggle { position: absolute; top: 1rem; right: 1rem; z-index: 2; } .hero .brand { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1.5rem; } .brand-logo { width: 48px; height: 48px; flex: 0 0 auto; border: 1px dashed var(--border); border-radius: var(--radius); } .hero .brand-name { font-size: 1.15rem; font-weight: 700; color: var(--brand-dark); } .eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; color: var(--brand-dark); font-weight: 700; margin: 0 0 0.5rem; } .hero h1 { margin: 0 0 1rem; } .lede { font-size: clamp(1.05rem, 2.5vw, 1.3rem); color: var(--muted); max-width: 40ch; margin: 0 0 2rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } .hero-actions-center { justify-content: center; } .hero-actions-hint { margin: 0.85rem 0 0; font-size: 0.9rem; max-width: 48ch; } .section-lede { margin: -0.25rem 0 1.75rem; max-width: 60ch; } /* Path chooser (Konfigurator vs. Sonderanfrage) */ .path-cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .path-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; display: flex; flex-direction: column; } .path-card-primary { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; } .path-card h3 { margin: 0 0 0.15rem; } .path-card-tag { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; font-weight: 700; color: var(--brand-dark); margin: 0 0 0.75rem; } .path-card > p { color: var(--muted); margin: 0 0 1rem; } .path-card-list { margin: 0 0 1rem; padding-left: 1.1rem; color: var(--muted); display: grid; gap: 0.3rem; } .path-card .btn-block { margin-top: auto; } /* Sections */ .section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; } .section-alt { background: var(--bg-alt); } .section-cta { background: var(--invert-bg); color: var(--on-brand); text-align: center; } .section-cta h2 { color: var(--on-brand); } /* Use-case cards */ .cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; } .card h3 { margin: 0.75rem 0 0.35rem; } .card p { margin: 0; color: var(--muted); } .card-media { aspect-ratio: 3 / 2; background: repeating-linear-gradient( 45deg, var(--surface-2), var(--surface-2) 12px, var(--bg-alt) 12px, var(--bg-alt) 24px ); border-radius: 6px; } /* Steps */ .steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: step; } .steps li { position: relative; padding-top: 0.5rem; } .steps h3 { margin: 0.5rem 0 0.35rem; } .steps p { margin: 0; color: var(--muted); } .step-num { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-weight: 700; } /* About me */ .about-text { max-width: 760px; } .about-text h2 { margin-top: 0; } .about-text p { margin: 0 0 0.85rem; } .about-text p:last-child { margin-bottom: 0; } /* FAQ accordion — native
, works without JS */ .faq { display: grid; gap: 0.75rem; max-width: 760px; } .faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .faq-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; cursor: pointer; font-weight: 600; list-style: none; /* hide default marker */ } .faq-item > summary::-webkit-details-marker { display: none; } .faq-item > summary:hover { color: var(--brand-dark); } .faq-item > summary:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: -2px; } .faq-icon { flex: 0 0 auto; width: 0.7rem; height: 0.7rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s ease; } .faq-item[open] .faq-icon { transform: rotate(-135deg); } .faq-a { padding: 0 1.25rem 1.15rem; color: var(--muted); } .faq-a p { margin: 0; } @media (prefers-reduced-motion: reduce) { .faq-icon { transition: none; } } /* Materials */ .materials { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .material { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; background: var(--surface); } .material-photo { width: 100%; height: 180px; object-fit: cover; border-radius: var(--radius); margin-bottom: 1rem; } .material-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } .material-head h3 { margin: 0; } .material-price { font-weight: 600; white-space: nowrap; color: var(--muted); } .material p { color: var(--muted); } .swatches { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .swatch { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; border: 1px solid var(--border); border-radius: 999px; padding: 0.25rem 0.6rem; } .swatch-dot { width: 0.9rem; height: 0.9rem; border-radius: 50%; border: 1px solid var(--shadow-ring); } .swatch-photo { width: 1.4rem; height: 1.4rem; border-radius: 50%; object-fit: cover; border: 1px solid var(--shadow-ring); } .swatch-out { opacity: 0.5; } /* Made-to-order colour: fully selectable, marked with a dashed ring. */ .swatch-order { border-style: dashed; border-color: var(--muted); } .swatch-status { color: var(--muted); font-style: italic; } .swatch-order .swatch-status { font-style: normal; } /* Terms + excluded */ .terms p { max-width: 60ch; } .excluded { /* Grid instead of CSS columns: multi-line items stayed intact per cell, columns split them across the gap (e.g. "… oder tragende Teile"). */ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16ch), 1fr)); gap: 0.4rem 2rem; max-width: 46ch; margin: 0; padding-left: 1.2rem; color: var(--muted); } .muted { color: var(--muted); } /* Footer */ .site-footer { background: var(--invert-bg); color: var(--invert-ink); padding: 2.5rem 0 1.5rem; margin-top: 0; } .site-footer a { color: var(--on-brand); } .footer-grid { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; } .footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; } .footer-note { font-size: 0.8rem; color: var(--invert-muted); margin: 1.5rem 0 0; } /* Legal / prose */ .prose { max-width: 70ch; } .prose h2 { font-size: 1.25rem; margin-top: 2rem; } .legal .notice { background: var(--notice-bg); border: 1px solid var(--notice-border); color: var(--notice-ink); padding: 0.75rem 1rem; border-radius: 8px; } /* Forms */ .form-narrow { max-width: 40rem; } .stack { display: grid; gap: 1.25rem; margin-top: 1.5rem; } .stack label { display: block; font-weight: 600; margin-bottom: 0.35rem; } .stack input[type='text'], .stack input[type='email'], .stack input[type='tel'], .stack input[type='file'], .stack textarea { width: 100%; padding: 0.7rem 0.8rem; border: 1px solid var(--border); border-radius: 8px; font: inherit; color: var(--ink); background: var(--surface); } .stack textarea { resize: vertical; } .stack .help-text, .stack small { color: var(--muted); font-weight: 400; } .stack ul { color: var(--field-error); margin: 0.35rem 0 0; padding-left: 1.1rem; font-size: 0.9rem; } .form-check { display: flex; gap: 0.6rem; align-items: flex-start; } .form-check label { font-weight: 400; margin: 0; } .form-check input { margin-top: 0.25rem; } /* Delivery choice — inline segmented pills, all on one line (wraps on narrow) */ .delivery > div { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.35rem; } .delivery > div input[type='radio'] { position: absolute; opacity: 0; width: 0; height: 0; } .delivery > div label { display: inline-block; margin: 0; padding: 0.6rem 1.15rem; border: 1px solid var(--border); border-radius: 999px; font-weight: 500; cursor: pointer; color: var(--ink); background: var(--surface); transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease; } .delivery > div input[type='radio']:checked + label { background: var(--brand); border-color: var(--brand); color: var(--on-brand); } .delivery > div input[type='radio']:focus-visible + label { outline: 2px solid var(--brand-dark); outline-offset: 2px; } /* Disabled submit (consent gate, JS on) */ .btn[disabled], .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Selected-file chips (JS enhancement of the file input) */ .file-chips { list-style: none; padding: 0; margin: 0.6rem 0 0; display: grid; gap: 0.4rem; } .file-chip { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.6rem 0.45rem 0.8rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); } .file-chip-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-chip-size { color: var(--muted); font-size: 0.85rem; margin-left: auto; white-space: nowrap; } .file-chip-remove { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border: 0; border-radius: 50%; background: var(--bg-alt); color: var(--ink); font-size: 1.1rem; line-height: 1; cursor: pointer; } .file-chip-remove:hover, .file-chip-remove:focus-visible { background: var(--brand); color: var(--on-brand); } /* Honeypot — visually and semantically removed for real users, still in the DOM. */ .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } @media (max-width: 480px) { .excluded { columns: 1; } .footer-grid { flex-direction: column; } } /* --- Model upload configurator (phase 2) --- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .small { font-size: 0.85rem; } .dropzone { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 160px; padding: 1.5rem; margin-top: 1rem; cursor: pointer; border: 2px dashed var(--border); border-radius: var(--radius); background: var(--bg-alt); color: var(--muted); transition: border-color 0.15s, background 0.15s; } .dropzone:hover, .dropzone:focus-visible { border-color: var(--brand); color: var(--ink); outline: none; } .dropzone-hint strong { color: var(--ink); } .dropzone--over { border-color: var(--brand); background: var(--brand-tint); color: var(--ink); } /* Bot gate: dropzone locked until Turnstile is solved. Non-interactive + dimmed. */ .turnstile-gate { margin-top: 1rem; } .turnstile-gate .cf-turnstile { margin-top: 0.5rem; } .dropzone--locked { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .upload-error { margin-top: 0.8rem; padding: 0.6rem 0.9rem; border-radius: 8px; background: var(--error-bg); border: 1px solid var(--error-border); color: var(--error-ink); } .upload-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.5rem; } .upload-item { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); } .upload-item-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .upload-item-meta { color: var(--muted); font-size: 0.85rem; white-space: nowrap; } .upload-item-status { font-size: 0.85rem; color: var(--muted); white-space: nowrap; } .upload-item-status--done { color: var(--ok-ink); } .upload-item-status--warning { color: var(--notice-ink); } .upload-item-status--error { color: var(--error-ink); } .upload-item-messages { grid-column: 1 / -1; list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; gap: 0.25rem; } /* "Send it via the contact form" hint on unusable files. Full-width in the grid row; also usable inside the global error banner (rendered as a block span). */ .upload-item-hint { display: block; grid-column: 1 / -1; margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--muted); } .upload-msg { font-size: 0.85rem; padding: 0.35rem 0.6rem; border-radius: 6px; } .upload-msg--warning { background: var(--notice-bg); border: 1px solid var(--notice-border); color: var(--notice-ink); } .upload-msg--error { background: var(--error-bg); border: 1px solid var(--error-border); color: var(--error-ink); } .upload-item-progress { width: 90px; height: 0.5rem; } .upload-item-remove { width: 1.9rem; height: 1.9rem; line-height: 1; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; font-size: 1.1rem; } .upload-item-remove:hover:not(:disabled), .upload-item-remove:focus-visible { background: var(--brand); color: var(--on-brand); border-color: var(--brand); } .upload-item-remove:disabled { opacity: 0.4; cursor: default; } .upload-actions { margin-top: 1.5rem; display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; } .notice { background: var(--notice-bg); border: 1px solid var(--notice-border); color: var(--notice-ink); padding: 0.75rem 1rem; border-radius: 8px; } /* ── Print Options configurator (phase 2) ───────────────────────────── */ /* The native hidden attribute must win over display:flex/inline-flex elements. */ [hidden] { display: none !important; } .btn-secondary { background: var(--bg-alt); color: var(--ink); border: 1px solid var(--border); } .btn-secondary:hover { background: var(--surface-2); } .opt-badge { display: inline-block; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--on-brand); background: var(--brand); border-radius: 999px; padding: 0.1rem 0.45rem; vertical-align: middle; } .opt-btn--oversize .opt-btn-desc { color: var(--brand-dark); } /* Material chips: name only, compact. The descriptions for every material live in one click-open info popover reached by the "Materialinformationen" link below the selection (see .info-popover--materials). */ .opt-buttons--material { gap: 0.5rem; } .opt-btn--compact { min-height: 2.9rem; justify-content: center; flex: 1 1 8rem; max-width: 15rem; } /* Grey text link that opens the material info popover. */ .material-info-link { display: inline-block; margin-top: 0.55rem; padding: 0.1rem 0; border: 0; background: none; font: inherit; font-size: 0.85rem; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .material-info-link:hover, .material-info-link:focus-visible { color: var(--brand-dark); outline: none; } /* Native popover info window (Popover API). Closed = UA display:none; open = top layer, so its position in the flow never shifts the layout. */ .info-popover { margin: auto; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--ink); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28); } .info-popover::backdrop { background: rgba(0, 0, 0, 0.35); } .info-popover { width: min(40rem, 94vw); max-height: min(80vh, 44rem); } /* Only lay out with flex when open — setting display on the base element would override the UA rule that keeps a closed popover hidden (display:none). */ .info-popover:popover-open { display: flex; flex-direction: column; } .info-popover-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); border-radius: var(--radius) var(--radius) 0 0; } .info-popover-head h3 { margin: 0; font-size: 1.15rem; } .info-popover-close { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; cursor: pointer; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--muted); transition: background 0.12s, border-color 0.12s, color 0.12s; } .info-popover-close:hover, .info-popover-close:focus-visible { background: var(--error-bg); border-color: var(--error-border); color: var(--error-ink); outline: none; } .info-popover-body { padding: 0.5rem 1.15rem 1.15rem; overflow-y: auto; } .material-info { padding: 0.9rem 0; border-bottom: 1px solid var(--border); } .material-info:last-child { border-bottom: 0; padding-bottom: 0; } .material-info h4 { margin: 0 0 0.35rem; font-size: 1rem; } .material-info p { margin: 0 0 0.3rem; color: var(--muted); } .material-info p:last-child { margin-bottom: 0; } .material-info-tag { display: inline-block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--error-ink); background: var(--error-bg); border: 1px solid var(--error-border); border-radius: 999px; padding: 0.05rem 0.45rem; vertical-align: middle; } /* Without the Popover API the div would render inline; hide it (the per-chip title tooltip still carries the description) so the compact layout is kept. */ @supports not (selector(:popover-open)) { .info-popover { display: none; } .material-info-link { display: none; } } .part { position: relative; display: grid; grid-template-columns: 220px 1fr; gap: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin: 0 0 1.25rem; background: var(--surface); } /* Delete-× in the card's top-right corner. */ .part-remove { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 1; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--muted); cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; } .part-remove svg { display: block; } .part-remove:hover, .part-remove:focus-visible { background: var(--error-bg); border-color: var(--error-border); color: var(--error-ink); outline: none; } /* Leave room so the × never sits on top of the options content. */ .part-options { padding-right: 2.25rem; } /* Advisory validation notes carried onto the card (warning state). */ .part-warnings { list-style: none; padding: 0; margin: 0 0 1.1rem; display: grid; gap: 0.3rem; } .part-preview { text-align: center; } .part-thumb { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius); background: var(--bg-alt); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; font-weight: 700; color: var(--muted); } .part-thumb--img { object-fit: contain; padding: 0.25rem; font-size: 0; } .part-name { margin-top: 0.6rem; font-weight: 600; word-break: break-word; } .part-dims { margin-top: 0.2rem; } .part-options { min-width: 0; } .opt-row { margin-bottom: 1.1rem; } .opt-label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.45rem; } .opt-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; } .opt-buttons--quality .opt-btn { min-width: 8rem; } .opt-btn { position: relative; display: flex; flex-direction: column; gap: 0.15rem; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.6rem 0.8rem; cursor: pointer; background: var(--surface); flex: 1 1 9rem; max-width: 16rem; transition: border-color 0.12s, box-shadow 0.12s; } .opt-btn input { position: absolute; opacity: 0; width: 0; height: 0; } .opt-btn:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); } .opt-btn:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; } .opt-btn-title { font-weight: 600; } .opt-btn-desc { font-size: 0.78rem; color: var(--muted); line-height: 1.3; } .opt-btn-price { font-size: 0.82rem; color: var(--brand-dark); font-weight: 600; } .opt-btn--disabled { opacity: 0.5; cursor: not-allowed; } .opt-btn--disabled:has(input:checked) { box-shadow: none; border-color: var(--border); } .opt-colours { display: flex; flex-wrap: wrap; gap: 0.5rem; } .opt-colour { position: relative; cursor: pointer; } .opt-colour input { position: absolute; opacity: 0; width: 0; height: 0; } .opt-colour:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); } .opt-colour.swatch-out { cursor: not-allowed; } .qty { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .qty-btn { border: 0; background: var(--bg-alt); color: var(--ink); width: 2.2rem; height: 2.4rem; font-size: 1.2rem; cursor: pointer; } .qty-btn:hover { background: var(--surface-2); } .qty-input { border: 0; width: 3.2rem; height: 2.4rem; text-align: center; font-size: 1rem; color: var(--ink); background: var(--surface); -moz-appearance: textfield; } .qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .opt-discount { display: inline-block; margin-left: 0.6rem; color: var(--brand-dark); } .part-summary { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: baseline; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); } .part-metric span:last-child { font-weight: 600; } .part-price span:last-child { font-size: 1.2rem; color: var(--brand-dark); } .part-fee-note { flex-basis: 100%; margin: 0.1rem 0 0; } .part-state { flex-basis: 100%; margin: 0; } .part-state.part-state--error { color: var(--error-ink); font-weight: 600; } .part-colour-note { flex-basis: 100%; margin: 0.25rem 0 0; color: var(--muted); } .order-bar { position: sticky; bottom: 1rem; margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.4rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); } .delivery-choice { flex: 1 1 auto; } .delivery { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.35rem; } .delivery-pill { position: relative; } .delivery-pill input { position: absolute; opacity: 0; width: 0; height: 0; } .delivery-pill span { display: inline-block; border: 1px solid var(--border); border-radius: 999px; padding: 0.45rem 1rem; cursor: pointer; color: var(--ink); background: var(--surface); } .delivery-pill:has(input:checked) span { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); } .delivery-pill:has(input:focus-visible) span { outline: 2px solid var(--brand); outline-offset: 2px; } .order-total { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 0.75rem; row-gap: 0.1rem; text-align: left; } .order-total-label { font-weight: 600; color: var(--ink); } .fee-info-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; margin-left: 0.3rem; padding: 0; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted-ink, var(--ink)); font-size: 0.72rem; font-style: italic; font-weight: 700; line-height: 1; cursor: pointer; vertical-align: middle; } .fee-info-btn:hover, .fee-info-btn:focus-visible { border-color: var(--brand); color: var(--brand); } .order-total strong { font-size: 1.75rem; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--brand); } .order-total-note { grid-column: 1 / -1; } .order-total-note:empty { display: none; } .order-actions { display: flex; gap: 0.6rem; margin-left: auto; } .order-actions .btn { padding-block: 0.7rem; padding-inline: 2rem; font-size: 1.05rem; } .summary-list { list-style: none; padding: 0; margin: 1.5rem 0; } .summary-item { padding: 0.75rem 0; border-bottom: 1px solid var(--border); } .summary-item-name { font-weight: 600; } .summary-totals { margin: 1.5rem 0; } .summary-totals > div { display: flex; justify-content: space-between; padding: 0.35rem 0; } .summary-subtotal { border-top: 1px solid var(--border); margin-top: 0.35rem; padding-top: 0.6rem !important; font-weight: 600; } .summary-total { border-top: 1px solid var(--border); margin-top: 0.35rem; padding-top: 0.6rem !important; font-size: 1.2rem; } .summary-total dt { font-weight: 700; } .summary-totals dt, .summary-totals dd { margin: 0; } /* Production progress stepper (portal) */ .progress-steps { list-style: none; padding: 0; margin: 1.5rem 0; } .progress-step { position: relative; padding: 0 0 1.15rem 1.9rem; color: var(--muted); } .progress-step:last-child { padding-bottom: 0; } .progress-dot { position: absolute; left: 0; top: 0.15rem; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); } .progress-step::before { content: ''; position: absolute; left: 0.47rem; top: 1.05rem; bottom: 0; width: 2px; background: var(--border); } .progress-step:last-child::before { display: none; } .progress-step.is-done { color: var(--ink); } .progress-step.is-done .progress-dot { background: var(--brand); border-color: var(--brand); } .progress-step.is-done::before { background: var(--brand); } .progress-step.is-current { color: var(--ink); font-weight: 700; } .progress-step.is-current .progress-dot { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(211, 84, 0, 0.2); } /* Print-progress photo + notify opt-in */ .progress-photo { margin: 1.5rem 0 0; } .progress-photo img { width: 100%; border-radius: var(--radius); border: 1px solid var(--border); } .notify-form .form-check { display: flex; gap: 0.5rem; align-items: flex-start; cursor: pointer; } /* Payment QR (bank transfer / PayPal) — QR keeps a white plate (scanner needs it) */ .payment-qr { margin: 1rem 0 0; max-width: 260px; } .payment-qr img { display: block; width: 180px; height: 180px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem; } .payment-qr figcaption { margin-top: 0.5rem; } /* Quote Request page + portal */ .summary-item--priced { display: flex; align-items: center; gap: 0.9rem; } .summary-item-main { flex: 1 1 auto; min-width: 0; } .summary-item-price { flex: 0 0 auto; text-align: right; } .summary-line { font-weight: 600; } .summary-thumb { flex: 0 0 auto; width: 64px; height: 64px; border-radius: var(--radius); background: var(--bg-alt); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; } .summary-thumb img { width: 100%; height: 100%; object-fit: contain; } .summary-thumb-letter { font-size: 1.6rem; font-weight: 700; color: var(--muted); } .notice-error { background: var(--error-bg); border-color: var(--error-border); color: var(--error-ink); } .request-form { margin-top: 1.5rem; } .request-form h2 { margin: 1.5rem 0 0.75rem; } .field { margin-bottom: 1rem; } .field label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.35rem; } .field input, .field textarea { width: 100%; padding: 0.6rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius); font: inherit; color: var(--ink); background: var(--surface); box-sizing: border-box; } .field input:focus, .field textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); } .checks { margin: 1.1rem 0; display: flex; flex-direction: column; gap: 0.6rem; } .check { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.95rem; } .check input { margin-top: 0.2rem; flex: 0 0 auto; } .status-badge { display: inline-block; font-size: 0.8rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--bg-alt); color: var(--muted); margin-bottom: 0.5rem; } .status-badge--pending { background: var(--info-bg); color: var(--info-ink); } .status-badge--closed { background: var(--closed-bg); color: var(--closed-ink); } .status-badge--ok { background: var(--ok-bg); color: var(--ok-ink); } .portal-block { margin: 2rem 0; } /* Portal flash + offer acceptance */ .notice-ok { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-ink); } .offer-accept { margin: 1.5rem 0 0.5rem; } .offer-accept .ack { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.9rem; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 0.85rem; margin-bottom: 1rem; } .offer-accept .ack input { margin-top: 0.2rem; flex: 0 0 auto; } /* WhatsApp contact block on the landing page — QR keeps a white plate */ .whatsapp-contact { text-align: center; } .whatsapp-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 1rem; } .whatsapp-qr { display: block; border: 1px solid var(--border); border-radius: 8px; background: #fff; padding: 0.4rem; } /* Address entry on the acceptance form */ .address-block { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.85rem 1rem 1rem; margin: 0 0 1rem; } .address-block legend { font-weight: 600; padding: 0 0.4rem; } .address-block .form-field { margin: 0.6rem 0 0; } .address-block .form-field:first-of-type { margin-top: 0.2rem; } .address-block label { display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.9rem; } .address-block input[type='text'] { width: 100%; padding: 0.6rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; font: inherit; color: var(--ink); background: var(--surface); } .form-row { display: flex; gap: 0.75rem; } .form-field--half { flex: 1; } .form-field.has-error input { border-color: var(--field-error); } .field-error { display: block; color: var(--field-error); font-size: 0.85rem; margin-top: 0.3rem; } .offer-accept .invoice-toggle { margin: 0 0 1rem; font-size: 0.9rem; } .btn-block { display: block; width: 100%; text-align: center; margin-top: 1rem; } .offer-decline { margin: 0.25rem 0 0; } .btn-link { background: none; border: none; padding: 0.4rem 0; text-decoration: underline; cursor: pointer; font: inherit; color: var(--brand-dark); } @media (max-width: 640px) { .part { grid-template-columns: 1fr; } .part-preview { display: flex; align-items: center; gap: 1rem; text-align: left; } .part-thumb { width: 80px; aspect-ratio: 1; font-size: 1.5rem; flex: 0 0 auto; } .order-bar { flex-direction: column; align-items: stretch; } .order-total { text-align: left; } .order-actions { flex-direction: column; } .order-actions .btn { width: 100%; } } /* ========================================================================= * Visual overhaul (style/visual-overhaul) — modern, function-first refresh. * Appended so later rules win; nothing above is deleted. Dark theme kept. * Theme: infill-inspired hexagon accents drawn with a single seamless hex * mask (self-hosted data URI — no CDN, CLAUDE.md rule 1), painted with theme * tokens so every accent follows light/dark. All motion is hover-only and * disabled under prefers-reduced-motion. * ===================================================================== */ :root { /* One seamless hexagon tile (Hero-Patterns "hexagons", 28x49), used as a MASK everywhere — the fill is irrelevant, only its alpha matters, so the colour comes from whatever we paint behind it (a theme token). */ --hex-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z' fill='%23000'/%3E%3C/svg%3E"); --pattern-ink: rgba(26, 29, 33, 0.025); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.1); --shadow-btn: 0 3px 10px rgba(211, 84, 0, 0.28); /* Hexagon clip for solid shapes (step numbers, brand mark). */ --hex-clip: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --pattern-ink: rgba(255, 255, 255, 0.022); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45); --shadow-btn: 0 3px 12px rgba(240, 105, 26, 0.35); } } :root[data-theme='dark'] { --pattern-ink: rgba(255, 255, 255, 0.022); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45); --shadow-btn: 0 3px 12px rgba(240, 105, 26, 0.35); } /* --- Subtle infill hexagon field behind the whole site ------------------ html carries the solid page colour; the fixed ::before paints the hex mask just above it and below all content (z-index:-1). Admin custom pages use a different base template, so they never get this. */ html { background-color: var(--bg); } body { background: transparent; position: relative; } body::before { content: ''; position: fixed; /* extend past the viewport so the parallax drift never exposes an edge */ inset: -15vh 0; z-index: -1; pointer-events: none; background-color: var(--pattern-ink); -webkit-mask: var(--hex-mask) 0 0 / 38px 66px repeat; mask: var(--hex-mask) 0 0 / 38px 66px repeat; /* deepest layer: drifts slowly with scroll (--sy set by app.js; 0 without JS) */ transform: translate3d(0, calc(var(--sy, 0) * 0.06px), 0); will-change: transform; } /* --- Buttons: soft lift ------------------------------------------------- */ .btn { box-shadow: var(--shadow-sm); transition: background-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease; } .btn:hover, .btn:focus-visible { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-primary:hover, .btn-primary:focus-visible { box-shadow: var(--shadow-btn); } /* --- Cards: hover lift + brand edge ------------------------------------- */ .card, .path-card, .material { transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .card:hover, .material:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--brand); } .path-card:hover { box-shadow: var(--shadow-md); } /* --- Hexagon step numbers + brand mark ---------------------------------- */ .step-num { width: 2.5rem; height: 2.75rem; border-radius: 0; clip-path: var(--hex-clip); box-shadow: var(--shadow-btn); } .brand-logo { border: 0; border-radius: 0; clip-path: var(--hex-clip); background: linear-gradient(150deg, var(--brand), var(--brand-dark)); } /* --- Section heading hex bullet (landing-style sections) ---------------- Inline flow marker (not absolute) so it hugs the text and stays attached whether the heading is left-aligned or centred. */ .section > .container > h2::before { content: ''; display: inline-block; vertical-align: middle; width: 0.9rem; height: 1rem; margin-right: 0.55rem; /* lift from x-height middle onto the caps optical centre */ transform: translateY(-0.09em); background: var(--brand); clip-path: var(--hex-clip); } .section-cta > .container > h2::before { display: none; } /* --- Hero: faint brand hex field behind the copy ------------------------ */ .hero { position: relative; overflow: hidden; } .hero::after { content: ''; position: absolute; inset: -20vh 0; z-index: 0; pointer-events: none; background-color: var(--brand); -webkit-mask: var(--hex-mask) 0 0 / 46px 80px repeat; mask: var(--hex-mask) 0 0 / 46px 80px repeat; opacity: 0.04; /* mid layer: lags the hero as it scrolls up, so it appears set back */ transform: translate3d(0, calc(var(--sy, 0) * 0.22px), 0); will-change: transform; } .hero .container { position: relative; z-index: 1; /* foreground: drifts up a touch faster than the page for a slight pop */ transform: translate3d(0, calc(var(--sy, 0) * -0.05px), 0); } /* --- CTA band: light hex field on the dark slab ------------------------- */ .section-cta { position: relative; overflow: hidden; } .section-cta::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-color: #ffffff; -webkit-mask: var(--hex-mask) 0 0 / 46px 80px repeat; mask: var(--hex-mask) 0 0 / 46px 80px repeat; opacity: 0.035; } .section-cta .container { position: relative; z-index: 1; } /* --- Use-case media box: hex infill instead of diagonal stripes --------- */ .card-media { background: var(--bg-alt); position: relative; overflow: hidden; } .card-media::after { content: ''; position: absolute; inset: 0; background-color: var(--brand); -webkit-mask: var(--hex-mask) center / 30px 52px repeat; mask: var(--hex-mask) center / 30px 52px repeat; opacity: 0.16; } /* --- Primary path card: brand-tinted top accent ------------------------- */ .path-card-primary { background: linear-gradient(180deg, var(--brand-tint), transparent 96px), var(--surface); } @media (prefers-reduced-motion: reduce) { .btn, .card, .path-card, .material { transition: none; } .btn:hover, .btn:focus-visible, .card:hover, .material:hover { transform: none; } /* No parallax under reduced motion (app.js also stops publishing --sy). */ body::before, .hero::after, .hero .container { transform: none; } }