/* ============================================================ piebuve.lv — theme.css The single stylesheet for the whole storefront. HOW THEMES WORK --------------- Every colour, radius and font in the components below comes from a CSS variable. The admin panel sets : warm-oak (default) — dark umber + raw spruce nordic — graphite + cool paper + steel blue brass — charcoal + warm gold Adding a theme later = one more [data-theme] block. No component ever names a colour directly. Components included now for later use: buttons, badges, cards, gallery, lightbox, forms, alerts, tabs, breadcrumbs, pagination, tables, modal, slider controls, sticky mobile bar, footer. ============================================================ */ /* ------------------------------------------------------------ 1. THEME TOKENS ------------------------------------------------------------ */ :root, [data-theme="warm-oak"]{ /* surfaces */ --bg: #f4efe5; /* page background — limewash */ --bg-alt: #ece4d4; /* alternate section */ --panel: #ffffff; /* cards */ --ink: #1d1710; /* darkest — stained timber */ --ink-2: #2a2118; --text: #33291e; --muted: #7d6f5d; --line: rgba(29, 23, 16, .14); /* brand */ --brand: #6f4f2f; /* oiled oak */ --brand-2: #8a653d; --spruce: #efe3ca; /* raw spruce — light accents on dark */ --accent: #b3814d; /* functional */ --wa: #1fab55; /* WhatsApp */ --wa-dark: #168a43; --ok: #4e8a5f; --warn: #b07f2c; --danger: #a8453a; /* type */ --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif; /* shape */ --radius: 14px; --radius-sm: 9px; --shadow: 0 10px 34px rgba(29,23,16,.10); --shadow-sm: 0 3px 12px rgba(29,23,16,.08); /* the slat motif (signature element) */ --slat-dark: rgba(29,23,16,.92); --slat-gap: transparent; } [data-theme="nordic"]{ --bg: #eef1f2; --bg-alt: #e2e8ea; --panel: #ffffff; --ink: #17222b; --ink-2: #22303b; --text: #263440; --muted: #64778a; --line: rgba(23, 34, 43, .14); --brand: #33566e; --brand-2: #427089; --spruce: #dfe8ee; --accent: #5a86a3; --slat-dark: rgba(23,34,43,.92); } [data-theme="brass"]{ --bg: #f2efe9; --bg-alt: #e9e4da; --panel: #ffffff; --ink: #201d18; --ink-2: #2c2820; --text: #322d24; --muted: #7c7263; --line: rgba(32, 29, 24, .15); --brand: #8a6a24; --brand-2: #a8842f; --spruce: #f0e6cd; --accent: #bf9a3f; --slat-dark: rgba(32,29,24,.93); } /* ------------------------------------------------------------ 2. RESET + BASE ------------------------------------------------------------ */ *, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *, *::before, *::after{ animation:none !important; transition:none !important; } } body{ background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } a{ color:inherit; } button{ font:inherit; cursor:pointer; } :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; } ::selection{ background:var(--spruce); color:var(--ink); } /* ------------------------------------------------------------ 3. TYPOGRAPHY ------------------------------------------------------------ */ h1,h2,h3,.display{ font-family:var(--font-display); font-weight:600; color:var(--ink); line-height:1.12; letter-spacing:-.01em; } h1{ font-size:clamp(2.5rem, 5.6vw, 4.5rem); } h2{ font-size:clamp(1.85rem, 3.6vw, 2.7rem); } h3{ font-size:1.22rem; font-family:var(--font-body); font-weight:800; letter-spacing:0; } .lead{ font-size:1.12rem; color:var(--muted); max-width:56ch; } /* eyebrow — small caps label above headings */ .eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:.74rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--brand); } .eyebrow::before{ content:""; width:26px; height:8px; background:repeating-linear-gradient(180deg, var(--brand) 0 2px, transparent 2px 4px); } .serif-i{ font-family:var(--font-display); font-style:italic; font-weight:400; } /* ------------------------------------------------------------ 4. LAYOUT ------------------------------------------------------------ */ .container{ width:min(1240px, 92vw); margin-inline:auto; } .container-wide{ width:min(1520px, 96vw); margin-inline:auto; } .section{ padding-block:clamp(56px, 9vw, 110px); } .section-alt{ background:var(--bg-alt); } .section-dark{ background:var(--ink); color:var(--spruce); } .section-dark h2{ color:var(--spruce); } .section-dark .lead{ color:color-mix(in srgb, var(--spruce) 70%, transparent); } .section-head{ max-width:640px; margin-bottom:clamp(28px, 4vw, 52px); } .section-head h2{ margin-top:10px; } .grid{ display:grid; gap:clamp(16px, 2.4vw, 28px); } .grid-2{ grid-template-columns:repeat(2, 1fr); } .grid-3{ grid-template-columns:repeat(3, 1fr); } .grid-4{ grid-template-columns:repeat(4, 1fr); } @media (max-width: 900px){ .grid-3, .grid-4{ grid-template-columns:repeat(2,1fr); } } @media (max-width: 620px){ .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; } } /* the slat band — signature texture, echoes the railings we build */ .slats{ height:14px; background:repeating-linear-gradient(180deg, var(--slat-dark) 0 3px, var(--slat-gap) 3px 7px); } /* ------------------------------------------------------------ 5. BUTTONS ------------------------------------------------------------ */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 26px; border-radius:var(--radius-sm); border:1.5px solid transparent; font-weight:800; font-size:.95rem; text-decoration:none; transition:transform .16s ease, box-shadow .16s ease, background .16s ease; white-space:nowrap; } .btn:hover{ transform:translateY(-1px); } .btn:active{ transform:translateY(0); } .btn-primary{ background:var(--ink); color:var(--spruce); } .btn-primary:hover{ background:var(--ink-2); box-shadow:var(--shadow-sm); } .btn-outline{ background:transparent; color:var(--ink); border-color:var(--ink); } .btn-outline:hover{ background:var(--ink); color:var(--spruce); } .btn-light{ background:var(--spruce); color:var(--ink); } .btn-light:hover{ box-shadow:var(--shadow-sm); } .btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); } .btn-ghost:hover{ border-color:var(--ink); } .btn-wa{ background:var(--wa); color:#fff; } .btn-wa:hover{ background:var(--wa-dark); box-shadow:0 6px 18px rgba(31,171,85,.35); } .btn-wa svg{ width:19px; height:19px; fill:currentColor; } .btn-sm{ padding:9px 16px; font-size:.85rem; } .btn-lg{ padding:17px 34px; font-size:1.02rem; } .btn-block{ width:100%; } .btn-icon{ width:44px; height:44px; padding:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; } /* ------------------------------------------------------------ 6. BADGES + CHIPS ------------------------------------------------------------ */ .badge{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:.76rem; font-weight:800; letter-spacing:.04em; background:var(--bg-alt); color:var(--ink); border:1px solid var(--line); } .badge-dark{ background:var(--ink); color:var(--spruce); border-color:transparent; } .badge-brand{ background:var(--brand); color:#fff; border-color:transparent; } .badge-ok{ background:var(--ok); color:#fff; border-color:transparent; } .chip{ /* filter pills for the gallery */ display:inline-block; padding:9px 18px; border-radius:999px; border:1.5px solid var(--line); background:transparent; color:var(--text); font-weight:700; font-size:.88rem; transition:all .15s ease; } .chip:hover{ border-color:var(--ink); } .chip.on{ background:var(--ink); color:var(--spruce); border-color:var(--ink); } /* ------------------------------------------------------------ 7. HEADER / NAV ------------------------------------------------------------ */ .topbar{ background:var(--ink); color:var(--spruce); font-size:.82rem; padding:7px 0; } .topbar .container{ display:flex; justify-content:space-between; gap:16px; align-items:center; } .topbar a{ color:inherit; text-decoration:none; font-weight:700; } .topbar a:hover{ text-decoration:underline; } @media (max-width:720px){ .topbar .hide-m{ display:none; } } .site-header{ position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .site-header .container{ display:flex; align-items:center; gap:28px; height:74px; } .logo{ display:flex; align-items:baseline; gap:2px; text-decoration:none; font-family:var(--font-display); font-size:1.7rem; font-weight:700; color:var(--ink); letter-spacing:-.02em; } .logo b{ font-weight:600; } .logo span{ color:var(--brand); } .logo em{ font-style:normal; font-size:.9rem; color:var(--muted); margin-left:2px; } .nav{ display:flex; gap:26px; margin-left:auto; } .nav a{ text-decoration:none; font-weight:700; font-size:.94rem; color:var(--text); padding:6px 0; border-bottom:2px solid transparent; } .nav a:hover, .nav a.on{ color:var(--ink); border-bottom-color:var(--brand); } .lang{ display:flex; gap:2px; border:1px solid var(--line); border-radius:999px; padding:3px; } .lang a{ text-decoration:none; font-size:.76rem; font-weight:800; padding:4px 9px; border-radius:999px; color:var(--muted); } .lang a.on{ background:var(--ink); color:var(--spruce); } .lang a:not(.on):hover{ color:var(--ink); } .burger{ display:none; background:none; border:none; width:42px; height:42px; } .burger span{ display:block; height:2px; background:var(--ink); margin:5px 8px; } @media (max-width:1020px){ .nav, .site-header .btn-wa{ display:none; } .burger{ display:block; margin-left:auto; } } /* mobile slide-down menu */ .mnav{ display:none; background:var(--panel); border-bottom:1px solid var(--line); } .mnav.open{ display:block; } .mnav a{ display:block; padding:15px 6vw; text-decoration:none; font-weight:700; border-top:1px solid var(--line); } /* ------------------------------------------------------------ 8. HERO ------------------------------------------------------------ */ .hero{ position:relative; min-height:min(88vh, 820px); display:flex; align-items:flex-end; color:#fff; isolation:isolate; } .hero-img{ position:absolute; inset:0; z-index:-2; } .hero-img img{ width:100%; height:100%; object-fit:cover; } .hero::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(12deg, rgba(20,15,10,.82) 0%, rgba(20,15,10,.35) 46%, rgba(20,15,10,.05) 75%); } .hero-inner{ padding-block:clamp(60px, 8vw, 110px); width:min(1240px,92vw); margin-inline:auto; } .hero h1{ color:#fff; max-width:15ch; text-wrap:balance; } .hero .eyebrow{ color:var(--spruce); } .hero .eyebrow::before{ background:repeating-linear-gradient(180deg, var(--spruce) 0 2px, transparent 2px 4px); } .hero p{ margin:18px 0 30px; max-width:52ch; font-size:1.08rem; color:rgba(255,255,255,.85); } .hero-cta{ display:flex; gap:14px; flex-wrap:wrap; } .hero .slats{ position:absolute; left:0; right:0; bottom:0; } .hero-stats{ display:flex; flex-wrap:wrap; gap:0; margin-top:clamp(28px,4vw,48px); border-top:1px solid rgba(255,255,255,.25); } .hero-stats div{ padding:16px 34px 2px 0; margin-right:34px; } .hero-stats b{ display:block; font-family:var(--font-display); font-size:1.85rem; font-weight:600; } .hero-stats span{ font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.65); } /* ------------------------------------------------------------ 9. CARDS ------------------------------------------------------------ */ .card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); } /* --- project card (gallery) --- */ .pcard{ position:relative; display:block; text-decoration:none; border-radius:var(--radius); overflow:hidden; background:var(--ink); box-shadow:var(--shadow-sm); } .pcard img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; transition:transform .5s ease, opacity .4s; } .pcard:hover img{ transform:scale(1.045); opacity:.85; } .pcard-tall img{ aspect-ratio:3/4.4; } .pcard-info{ position:absolute; left:0; right:0; bottom:0; padding:44px 20px 16px; background:linear-gradient(180deg, transparent, rgba(18,13,9,.86) 62%); color:#fff; } .pcard-info h3{ color:#fff; font-size:1.05rem; margin-bottom:2px; } .pcard-meta{ display:flex; gap:14px; font-size:.8rem; color:rgba(255,255,255,.75); font-weight:700; } .pcard-price{ position:absolute; top:14px; right:14px; background:var(--spruce); color:var(--ink); font-weight:800; font-size:.82rem; padding:6px 12px; border-radius:999px; } /* --- category card --- */ .ccard{ position:relative; display:flex; align-items:flex-end; min-height:390px; border-radius:var(--radius); overflow:hidden; text-decoration:none; color:#fff; isolation:isolate; } .ccard img{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; transition:transform .5s; } .ccard::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(200deg, transparent 30%, rgba(18,13,9,.84)); } .ccard:hover img{ transform:scale(1.05); } .ccard-body{ padding:24px; } .ccard-body h3{ color:#fff; font-family:var(--font-display); font-weight:500; font-size:1.5rem; } .ccard-body p{ font-size:.9rem; color:rgba(255,255,255,.8); margin:6px 0 12px; } .ccard-more{ font-weight:800; font-size:.85rem; letter-spacing:.05em; color:var(--spruce); } /* --- blog card --- */ .bcard{ display:flex; flex-direction:column; text-decoration:none; } .bcard img{ aspect-ratio:16/9; object-fit:cover; } .bcard-body{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:8px; flex:1; } .bcard-body time{ font-size:.76rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--brand); } .bcard-body h3{ line-height:1.35; } .bcard-body p{ color:var(--muted); font-size:.93rem; } .bcard:hover h3{ text-decoration:underline; text-underline-offset:3px; } /* --- step (process) --- */ .step{ position:relative; padding:26px 24px 24px; } .step b.num{ font-family:var(--font-display); font-weight:500; font-size:2.6rem; color:var(--brand); display:block; line-height:1; margin-bottom:10px; } .step h3{ margin-bottom:6px; } .step p{ color:var(--muted); font-size:.94rem; } /* ------------------------------------------------------------ 10. GALLERY GRID + LIGHTBOX ------------------------------------------------------------ */ .works{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:270px; gap:18px; } .works .pcard{ height:100%; } .works .pcard img{ height:100%; aspect-ratio:auto; } .works .tall{ grid-row:span 2; } .works .wide{ grid-column:span 2; } @media (max-width:980px){ .works{ grid-template-columns:repeat(2,1fr); grid-auto-rows:230px; } .works .wide{ grid-column:span 2; } } @media (max-width:620px){ .works{ grid-template-columns:1fr; grid-auto-rows:250px; } .works .wide{ grid-column:span 1; } .works .tall{ grid-row:span 1; } } .lightbox{ position:fixed; inset:0; z-index:100; background:rgba(15,11,8,.94); display:none; align-items:center; justify-content:center; padding:4vw; } .lightbox.open{ display:flex; } .lightbox img{ max-width:100%; max-height:88vh; border-radius:8px; } .lightbox-close{ position:absolute; top:18px; right:22px; background:none; border:none; color:#fff; font-size:2.2rem; line-height:1; } /* ------------------------------------------------------------ 11. FORMS ------------------------------------------------------------ */ .field{ margin-bottom:16px; } .field label{ display:block; font-size:.8rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; } .input, .select, .textarea{ width:100%; padding:13px 15px; border:1.5px solid var(--line); border-radius:var(--radius-sm); background:var(--panel); color:var(--text); font:inherit; transition:border-color .15s, box-shadow .15s; } .input:focus, .select:focus, .textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); } .textarea{ min-height:130px; resize:vertical; } .check{ display:flex; gap:10px; align-items:flex-start; font-size:.9rem; color:var(--muted); } .check input{ width:18px; height:18px; accent-color:var(--brand); margin-top:2px; } .field-error .input{ border-color:var(--danger); } .field-error small{ color:var(--danger); font-weight:700; } /* ------------------------------------------------------------ 12. ALERTS / TABS / BREADCRUMBS / PAGINATION / TABLE ------------------------------------------------------------ */ .alert{ padding:14px 18px; border-radius:var(--radius-sm); font-weight:600; font-size:.94rem; border:1px solid; } .alert-ok{ background:color-mix(in srgb, var(--ok) 10%, transparent); color:var(--ok); border-color:color-mix(in srgb, var(--ok) 30%, transparent); } .alert-warn{ background:color-mix(in srgb, var(--warn) 10%, transparent); color:var(--warn); border-color:color-mix(in srgb, var(--warn) 30%, transparent); } .alert-danger{ background:color-mix(in srgb, var(--danger) 10%, transparent); color:var(--danger); border-color:color-mix(in srgb, var(--danger) 30%, transparent); } .tabs{ display:flex; gap:4px; border-bottom:1.5px solid var(--line); } .tabs button{ background:none; border:none; padding:12px 18px; font-weight:800; color:var(--muted); border-bottom:2.5px solid transparent; margin-bottom:-1.5px; } .tabs button.on{ color:var(--ink); border-bottom-color:var(--brand); } .crumbs{ display:flex; flex-wrap:wrap; gap:8px; font-size:.84rem; color:var(--muted); } .crumbs a{ color:inherit; text-decoration:none; font-weight:700; } .crumbs a:hover{ color:var(--ink); } .crumbs li{ list-style:none; } .crumbs li + li::before{ content:"/"; margin-right:8px; opacity:.5; } .pager{ display:flex; gap:6px; justify-content:center; } .pager a, .pager span{ min-width:42px; height:42px; padding:0 8px; display:inline-flex; align-items:center; justify-content:center; border:1.5px solid var(--line); border-radius:var(--radius-sm); text-decoration:none; font-weight:800; font-size:.9rem; color:var(--text); } .pager a:hover{ border-color:var(--ink); } .pager .on{ background:var(--ink); color:var(--spruce); border-color:var(--ink); } .table{ width:100%; border-collapse:collapse; font-size:.94rem; } .table th{ text-align:left; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:10px 14px; border-bottom:1.5px solid var(--line); } .table td{ padding:12px 14px; border-bottom:1px solid var(--line); } .table tr:hover td{ background:var(--bg-alt); } /* ------------------------------------------------------------ 13. MODAL ------------------------------------------------------------ */ .modal-back{ position:fixed; inset:0; z-index:90; background:rgba(15,11,8,.6); display:none; align-items:center; justify-content:center; padding:20px; } .modal-back.open{ display:flex; } .modal{ background:var(--panel); border-radius:var(--radius); max-width:560px; width:100%; box-shadow:var(--shadow); overflow:hidden; } .modal-head{ display:flex; justify-content:space-between; align-items:center; padding:18px 24px; background:var(--ink); color:var(--spruce); } .modal-head h3{ color:var(--spruce); } .modal-body{ padding:24px; } .modal-foot{ padding:16px 24px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px; } /* ------------------------------------------------------------ 14. SLIDER CONTROLS (shared by future sliders) ------------------------------------------------------------ */ .sl-dots{ display:flex; gap:8px; justify-content:center; } .sl-dot{ width:9px; height:9px; border-radius:50%; border:none; background:var(--line); } .sl-dot.on{ background:var(--brand); transform:scale(1.25); } .sl-arrow{ width:44px; height:44px; border-radius:50%; border:none; background:rgba(18,13,9,.45); color:#fff; display:inline-flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); } .sl-arrow:hover{ background:rgba(18,13,9,.7); } /* ------------------------------------------------------------ 15. CTA BAND ------------------------------------------------------------ */ .cta-band{ background:var(--ink); color:var(--spruce); position:relative; overflow:hidden; } .cta-band .container{ display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; padding-block:clamp(44px,6vw,72px); } .cta-band h2{ color:var(--spruce); max-width:20ch; } .cta-band p{ color:color-mix(in srgb, var(--spruce) 65%, transparent); margin-top:8px; max-width:44ch; } .cta-band::after{ content:""; position:absolute; top:0; bottom:0; right:-40px; width:200px; background:repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 4px, transparent 4px 14px); transform:skewX(-14deg); } /* ------------------------------------------------------------ 16. FOOTER ------------------------------------------------------------ */ .footer{ background:var(--ink); color:color-mix(in srgb, var(--spruce) 72%, transparent); font-size:.93rem; } .footer-main{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:36px; padding-block:clamp(44px,6vw,72px); } @media (max-width:900px){ .footer-main{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .footer-main{ grid-template-columns:1fr; } } .footer h4{ color:var(--spruce); font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:14px; } .footer a{ color:inherit; text-decoration:none; } .footer a:hover{ color:var(--spruce); } .footer li{ list-style:none; margin-bottom:9px; } .footer .logo{ color:var(--spruce); margin-bottom:12px; } .footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-block:18px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.8rem; } /* ------------------------------------------------------------ 17. STICKY MOBILE CONTACT BAR ------------------------------------------------------------ */ .mbar{ position:fixed; left:0; right:0; bottom:0; z-index:70; display:none; grid-template-columns:1fr 1fr; background:var(--ink); padding:10px 12px calc(10px + env(safe-area-inset-bottom)); gap:10px; } .mbar .btn{ padding:12px 10px; font-size:.9rem; } @media (max-width:760px){ .mbar{ display:grid; } body{ padding-bottom:74px; } } /* ------------------------------------------------------------ 18. UTILITIES ------------------------------------------------------------ */ .mt-1{margin-top:8px} .mt-2{margin-top:16px} .mt-3{margin-top:28px} .mt-4{margin-top:44px} .mb-1{margin-bottom:8px} .mb-2{margin-bottom:16px} .mb-3{margin-bottom:28px} .tac{text-align:center} .muted{color:var(--muted)} .flex{display:flex; gap:14px; align-items:center; flex-wrap:wrap} .between{justify-content:space-between} .hide{display:none} /* soft reveal on scroll (JS adds .in) */ .rv{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; } .rv.in{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ .rv{ opacity:1; transform:none; } } /* ------------------------------------------------------------ 19. THEME SWITCHER (design-preview only; admin does this later) ------------------------------------------------------------ */ .theme-demo{ position:fixed; right:16px; bottom:90px; z-index:80; background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:8px 10px; display:flex; gap:8px; align-items:center; box-shadow:var(--shadow-sm); } .theme-demo span{ font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .theme-dot{ width:22px; height:22px; border-radius:50%; border:2px solid var(--line); } .theme-dot.on{ border-color:var(--ink); transform:scale(1.12); } .dot-oak{ background:linear-gradient(135deg,#6f4f2f,#1d1710); } .dot-nordic{ background:linear-gradient(135deg,#33566e,#17222b); } .dot-brass{ background:linear-gradient(135deg,#a8842f,#201d18); } @media (max-width:760px){ .theme-demo{ bottom:150px; } } /* ------------------------------------------------------------ 20. PRODUCT PAGE CONTENT (rich text from the editor) ------------------------------------------------------------ */ .product-content p{ margin-bottom:14px; } .product-content h2, .product-content h3{ margin:26px 0 10px; } .product-content ul, .product-content ol{ margin:0 0 14px 22px; } .product-content li{ margin-bottom:6px; } .product-content img{ border-radius:var(--radius-sm); margin:14px 0; } .product-content a{ color:var(--brand); } .product-content table{ width:100%; border-collapse:collapse; margin:14px 0; } .product-content td, .product-content th{ border:1px solid var(--line); padding:8px 12px; } /* card without an image yet — a quiet slat panel, never a broken box */ .pcard-noimg{ display:block; width:100%; aspect-ratio:4/3; background: repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 3px, transparent 3px 9px), var(--ink-2); } .works .pcard-noimg{ height:100%; aspect-ratio:auto; } .ccard-noimg{ position:absolute; inset:0; z-index:-2; background: repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 3px, transparent 3px 9px), var(--ink-2); } /* ------------------------------------------------------------ 21. CATEGORY BANNER ------------------------------------------------------------ */ .cat-hero{ position:relative; display:block; /* not flex - slides are absolutely placed */ width:100%; aspect-ratio:21/9; min-height:340px; max-height:520px; overflow:hidden; background:var(--ink-2); /* shows while the first image loads */ } /* stacking, all positive so nothing can fall behind the section: 1 slides · 2 gradient · 3 click layer · 4 text · 5 controls */ .cat-hero .ch-slide{ position:absolute; inset:0; z-index:1; opacity:0; transition:opacity .7s ease; } .cat-hero .ch-slide.on{ opacity:1; } .cat-hero .ch-slide img{ position:absolute; inset:0; z-index:auto; width:100%; height:100%; object-fit:cover; object-position:center; display:block; } .cat-hero::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(10deg, rgba(20,15,10,.82) 0%, rgba(20,15,10,.30) 55%, rgba(20,15,10,.05) 82%); } .cat-hero .ch-link{ position:absolute; inset:0; z-index:3; } .cat-hero-in{ position:absolute; left:0; right:0; bottom:0; z-index:4; width:100%; padding-block:clamp(34px,5vw,60px); color:#fff; pointer-events:none; } .cat-hero-in .container{ pointer-events:auto; } .cat-hero-in h1{ color:#fff; margin-top:8px; font-size:clamp(2rem,4.4vw,3.2rem); } .cat-hero .slats{ position:absolute; left:0; right:0; bottom:0; z-index:5; } .cat-hero .ch-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:6; width:46px; height:46px; border:none; border-radius:50%; background:rgba(18,13,9,.45); color:#fff; font-size:1.1rem; line-height:1; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); transition:background .15s; cursor:pointer; } .cat-hero .ch-arrow:hover{ background:rgba(18,13,9,.75); } .cat-hero .ch-prev{ left:16px; } .cat-hero .ch-next{ right:16px; } .cat-hero .ch-dots{ position:absolute; z-index:6; bottom:26px; left:0; right:0; display:flex; gap:8px; justify-content:center; } .cat-hero .ch-dot{ width:9px; height:9px; border-radius:50%; border:none; padding:0; background:rgba(255,255,255,.45); transition:all .2s; cursor:pointer; } .cat-hero .ch-dot.on{ background:#fff; transform:scale(1.35); } @media (max-width:760px){ .cat-hero{ aspect-ratio:16/10; min-height:260px; } .cat-hero .ch-arrow{ width:38px; height:38px; } .cat-hero .ch-prev{ left:8px; } .cat-hero .ch-next{ right:8px; } .cat-hero .ch-dots{ bottom:20px; } } @media (prefers-reduced-motion: reduce){ .cat-hero .ch-slide{ transition:none; } } /* ============================================================ 23. DESIGN VARIANTS ------------------------------------------------------------ Each of these changes the LAYOUT, not only the palette: where the navigation sits, how the hero behaves, whether project text sits over the photo or beneath it, how many columns the grid has, and how much air the page breathes. All of it is CSS. No template is touched, so every theme works with every existing page and with pages added later. ============================================================ */ /* ------------------------------------------------------------ 1. MAGAZINE — editorial. Logo centred with the navigation underneath it, project text BELOW the photo instead of over it, thin rules between sections, a shorter hero. ------------------------------------------------------------ */ [data-theme="magazine"]{ --bg:#faf8f4; --bg-alt:#f0ece4; --panel:#fff; --ink:#191512; --ink-2:#251f19; --text:#2e2721; --muted:#7d7266; --line:rgba(25,21,18,.16); --brand:#5c4632; --brand-2:#7a5e42; --spruce:#efe7d9; --accent:#a87f4e; --slat-dark:rgba(25,21,18,.92); --font-display:'Playfair Display', Georgia, serif; --font-body:'Inter', -apple-system, sans-serif; --radius:0px; --radius-sm:0px; --shadow:none; --shadow-sm:none; } /* header: two rows, everything centred */ [data-theme="magazine"] .site-header .container{ flex-direction:column; height:auto; gap:10px; padding-block:16px; text-align:center; } [data-theme="magazine"] .logo{ font-size:2.1rem; } [data-theme="magazine"] .nav{ margin-left:0; justify-content:center; flex-wrap:wrap; gap:22px; } [data-theme="magazine"] .nav a{ font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; } [data-theme="magazine"] .site-header{ border-bottom:2px solid var(--ink); } /* hero: shorter, text left, no gradient wash */ [data-theme="magazine"] .hero{ min-height:min(62vh, 560px); align-items:center; } [data-theme="magazine"] .hero h1{ max-width:20ch; font-weight:400; } /* project cards: caption under the image, like a printed catalogue */ [data-theme="magazine"] .pcard{ background:transparent; box-shadow:none; } [data-theme="magazine"] .pcard img{ aspect-ratio:3/2; } [data-theme="magazine"] .pcard-info{ position:static; padding:12px 0 0; background:none; color:var(--text); border-top:1px solid var(--line); margin-top:10px; } [data-theme="magazine"] .pcard-info h3{ color:var(--ink); font-size:1.15rem; } [data-theme="magazine"] .pcard-meta{ color:var(--muted); } [data-theme="magazine"] .pcard-price{ position:static; display:inline-block; margin-top:6px; background:none; color:var(--brand); padding:0; font-size:.95rem; } [data-theme="magazine"] .works{ grid-auto-rows:auto; gap:34px 26px; } [data-theme="magazine"] .works .pcard{ height:auto; } [data-theme="magazine"] .works .pcard img{ height:auto; aspect-ratio:3/2; } [data-theme="magazine"] .works .tall{ grid-row:span 1; } [data-theme="magazine"] .section{ border-top:1px solid var(--line); } [data-theme="magazine"] .slats{ display:none; } /* ------------------------------------------------------------ 2. SHOWCASE — photography first. Dark page, full-height hero, dense mosaic, images edge to edge with almost no gaps. The pictures carry the page. ------------------------------------------------------------ */ [data-theme="showcase"]{ --bg:#14110e; --bg-alt:#1c1815; --panel:#221d18; --ink:#f5efe6; --ink-2:#e8e0d4; --text:#ded5c8; --muted:#9c9084; --line:rgba(245,239,230,.16); --brand:#c89a5b; --brand-2:#d9ae70; --spruce:#3a3129; --accent:#c89a5b; --slat-dark:rgba(10,8,6,.94); --font-display:'Syne', 'Helvetica Neue', sans-serif; --font-body:'Inter', -apple-system, sans-serif; --radius:0px; --radius-sm:0px; --shadow:none; --shadow-sm:none; } [data-theme="showcase"] body{ background:var(--bg); color:var(--text); } [data-theme="showcase"] h1, [data-theme="showcase"] h2, [data-theme="showcase"] h3{ color:var(--ink); font-weight:800; letter-spacing:-.02em; } [data-theme="showcase"] .site-header{ background:rgba(20,17,14,.72); border-bottom:1px solid var(--line); } [data-theme="showcase"] .logo{ color:var(--ink); } [data-theme="showcase"] .nav a{ color:var(--text); } [data-theme="showcase"] .nav a:hover, [data-theme="showcase"] .nav a.on{ color:var(--brand); } [data-theme="showcase"] .hero{ min-height:100vh; } [data-theme="showcase"] .hero::before{ background:linear-gradient(180deg, rgba(10,8,6,.35), rgba(10,8,6,.85)); } [data-theme="showcase"] .hero h1{ font-size:clamp(2.6rem, 7vw, 5rem); max-width:18ch; } /* four columns, almost touching */ [data-theme="showcase"] .works{ grid-template-columns:repeat(4,1fr); gap:4px; grid-auto-rows:240px; } [data-theme="showcase"] .grid-3{ gap:4px; } [data-theme="showcase"] .pcard{ background:#0d0b09; } [data-theme="showcase"] .pcard-info{ padding:60px 18px 16px; background:linear-gradient(180deg, transparent, rgba(6,5,4,.92) 70%); } [data-theme="showcase"] .section{ padding-block:clamp(40px, 6vw, 80px); } [data-theme="showcase"] .card, [data-theme="showcase"] .ccard, [data-theme="showcase"] .bcard{ background:var(--panel); border:1px solid var(--line); } @media (max-width:980px){ [data-theme="showcase"] .works{ grid-template-columns:repeat(2,1fr); } } /* ------------------------------------------------------------ 3. CATALOG — built for many products. Projects become horizontal rows: photo left, details right. Tight vertical rhythm, small type, everything scannable. ------------------------------------------------------------ */ [data-theme="catalog"]{ --bg:#f6f6f4; --bg-alt:#ecece8; --panel:#fff; --ink:#1a1a18; --ink-2:#262623; --text:#2f2f2b; --muted:#74746d; --line:rgba(26,26,24,.18); --brand:#2f5d50; --brand-2:#3d7a68; --spruce:#dfe9e5; --accent:#5c9182; --slat-dark:rgba(26,26,24,.92); --font-display:'IBM Plex Sans', -apple-system, sans-serif; --font-body:'IBM Plex Sans', -apple-system, sans-serif; --radius:4px; --radius-sm:3px; --shadow:none; --shadow-sm:none; } [data-theme="catalog"] .section{ padding-block:clamp(32px, 4.5vw, 60px); } [data-theme="catalog"] h1{ font-size:clamp(1.9rem, 3.6vw, 2.9rem); font-weight:700; } [data-theme="catalog"] h2{ font-size:clamp(1.4rem, 2.4vw, 1.9rem); font-weight:700; } [data-theme="catalog"] .hero{ min-height:min(48vh, 430px); } /* one project per row */ [data-theme="catalog"] .works{ grid-template-columns:1fr; grid-auto-rows:auto; gap:10px; } [data-theme="catalog"] .works .pcard, [data-theme="catalog"] .pcard{ display:grid; grid-template-columns:210px 1fr; align-items:stretch; background:var(--panel); border:1px solid var(--line); height:auto; } [data-theme="catalog"] .pcard img, [data-theme="catalog"] .works .pcard img{ aspect-ratio:4/3; height:100%; } [data-theme="catalog"] .pcard-info{ position:static; padding:14px 18px; background:none; color:var(--text); display:flex; flex-direction:column; justify-content:center; } [data-theme="catalog"] .pcard-info h3{ color:var(--ink); font-size:1.05rem; } [data-theme="catalog"] .pcard-meta{ color:var(--muted); } [data-theme="catalog"] .pcard-price{ position:static; align-self:flex-start; margin-top:8px; background:var(--spruce); color:var(--brand); border-radius:3px; } [data-theme="catalog"] .works .tall, [data-theme="catalog"] .works .wide{ grid-row:span 1; grid-column:span 1; } [data-theme="catalog"] .grid-3{ grid-template-columns:repeat(2,1fr); } @media (max-width:620px){ [data-theme="catalog"] .pcard, [data-theme="catalog"] .works .pcard{ grid-template-columns:1fr; } } /* ------------------------------------------------------------ 4. STUDIO — quiet and spacious. A single narrow column, huge whitespace, small centred navigation, no shadows. Everything gets room to breathe. ------------------------------------------------------------ */ [data-theme="studio"]{ --bg:#ffffff; --bg-alt:#f7f7f5; --panel:#fff; --ink:#111111; --ink-2:#1c1c1c; --text:#333330; --muted:#8a8a85; --line:rgba(17,17,17,.12); --brand:#111111; --brand-2:#3a3a38; --spruce:#f0efec; --accent:#8a8a85; --slat-dark:rgba(17,17,17,.9); --font-display:'Fraunces', Georgia, serif; --font-body:'Inter', -apple-system, sans-serif; --radius:0px; --radius-sm:0px; --shadow:none; --shadow-sm:none; } [data-theme="studio"] .container{ width:min(940px, 90vw); } [data-theme="studio"] .section{ padding-block:clamp(80px, 12vw, 160px); } [data-theme="studio"] .site-header{ background:#fff; backdrop-filter:none; } [data-theme="studio"] .site-header .container{ flex-direction:column; height:auto; gap:14px; padding-block:22px; text-align:center; } [data-theme="studio"] .logo{ font-size:1.5rem; letter-spacing:.02em; } [data-theme="studio"] .nav{ margin-left:0; justify-content:center; gap:30px; } [data-theme="studio"] .nav a{ font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; border-bottom:0; } [data-theme="studio"] .hero{ min-height:min(70vh, 640px); align-items:center; text-align:center; } [data-theme="studio"] .hero h1{ max-width:none; margin-inline:auto; font-weight:400; } [data-theme="studio"] .hero p{ margin-inline:auto; } [data-theme="studio"] .hero-cta{ justify-content:center; } [data-theme="studio"] .hero-stats{ justify-content:center; } /* two generous columns, caption beneath */ [data-theme="studio"] .works{ grid-template-columns:repeat(2,1fr); grid-auto-rows:auto; gap:60px 40px; } [data-theme="studio"] .works .pcard{ height:auto; } [data-theme="studio"] .works .pcard img, [data-theme="studio"] .pcard img{ aspect-ratio:4/5; height:auto; } [data-theme="studio"] .pcard{ background:transparent; box-shadow:none; } [data-theme="studio"] .pcard-info{ position:static; padding:14px 0 0; background:none; color:var(--text); text-align:center; } [data-theme="studio"] .pcard-info h3{ color:var(--ink); } [data-theme="studio"] .pcard-meta{ justify-content:center; color:var(--muted); } [data-theme="studio"] .pcard-price{ position:static; background:none; color:var(--muted); padding:4px 0 0; } [data-theme="studio"] .works .tall{ grid-row:span 1; } [data-theme="studio"] .grid-3{ grid-template-columns:repeat(2,1fr); gap:40px; } [data-theme="studio"] .btn{ border-radius:0; letter-spacing:.1em; text-transform:uppercase; font-size:.78rem; } [data-theme="studio"] .slats{ display:none; } /* ------------------------------------------------------------ 5. COMPACT — dense and businesslike. Small sticky header, four tight columns, square photos, short sections. Fits a lot above the fold. ------------------------------------------------------------ */ [data-theme="compact"]{ --bg:#eef0f3; --bg-alt:#e2e6eb; --panel:#fff; --ink:#111a24; --ink-2:#1b2733; --text:#26313d; --muted:#6a7787; --line:rgba(17,26,36,.16); --brand:#1d4e89; --brand-2:#2a6bb0; --spruce:#dce7f3; --accent:#4a8fd4; --slat-dark:rgba(17,26,36,.93); --font-display:'Barlow', -apple-system, sans-serif; --font-body:'Barlow', -apple-system, sans-serif; --radius:5px; --radius-sm:4px; --shadow:0 2px 8px rgba(17,26,36,.10); --shadow-sm:0 1px 4px rgba(17,26,36,.08); } [data-theme="compact"] .site-header .container{ height:56px; gap:20px; } [data-theme="compact"] .logo{ font-size:1.3rem; font-weight:800; } [data-theme="compact"] .nav{ gap:18px; } [data-theme="compact"] .nav a{ font-size:.85rem; font-weight:700; } [data-theme="compact"] .section{ padding-block:clamp(30px, 4vw, 54px); } [data-theme="compact"] h1{ font-size:clamp(1.8rem, 3.4vw, 2.7rem); font-weight:800; letter-spacing:-.02em; } [data-theme="compact"] h2{ font-weight:700; } [data-theme="compact"] .hero{ min-height:min(52vh, 470px); } [data-theme="compact"] .works{ grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:10px; } [data-theme="compact"] .works .tall{ grid-row:span 1; } [data-theme="compact"] .works .wide{ grid-column:span 1; } [data-theme="compact"] .pcard img{ aspect-ratio:1/1; } [data-theme="compact"] .pcard-info{ padding:34px 12px 10px; } [data-theme="compact"] .pcard-info h3{ font-size:.92rem; } [data-theme="compact"] .pcard-meta{ font-size:.72rem; } [data-theme="compact"] .grid-3{ gap:12px; } [data-theme="compact"] .btn{ padding:9px 18px; font-size:.86rem; font-weight:700; } @media (max-width:980px){ [data-theme="compact"] .works{ grid-template-columns:repeat(2,1fr); } } @media (max-width:620px){ [data-theme="compact"] .works{ grid-template-columns:1fr; } }