/* Theme Name: Cre8ify Theme URI: https://cre8ify.nl Author: Cre8ify Description: A responsive theme for a Dutch digital-products marketplace. Dark and light, WooCommerce-ready, built around a single brand accent. Designed for creators selling downloads, courses and memberships. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: cre8ify Tags: e-commerce, two-columns, right-sidebar, custom-colors, custom-menu, featured-images, translation-ready, dark-mode-support */ /* ================================================================ 1. Tokens One source of truth for colour, type and spacing. Everything below resolves through these, so the whole theme re-skins from this block. The accent is exposed in the Customizer (Appearance → Customize → Colours), which overrides --accent at runtime. ================================================================ */ :root { /* Brand ------------------------------------------------------- */ --accent: #ff6b35; --accent-hover: #e85a26; /* Accent as TEXT on a light background. The brand orange measures about 2.9:1 on white; body text needs 4.5:1. Same hue, darkened until it passes. Use --accent for fills and large icons, this for links and small text. */ --accent-text: #b8410f; --on-accent: #ffffff; /* Surfaces ---------------------------------------------------- */ --bg: #ffffff; --surface: #ffffff; --surface-2: #f3f4f9; --line: #e2e3ea; --line-strong: #cfd1da; /* Ink --------------------------------------------------------- */ --ink: #0d1120; --ink-muted: #676c7e; --ink-faint: #8b8f9c; /* Deep navy, used for footers and the closing panel. Identical in both themes on purpose, so those surfaces never invert. */ --navy: #1b2136; --on-navy: #fafafa; /* Status ------------------------------------------------------ */ --ok: #18874f; --ok-soft: #ebfaf2; --warn: #8a6200; --warn-soft: #fef6e1; --bad: #9b1717; --bad-soft: #fef1f1; /* Type -------------------------------------------------------- */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --t-xs: 0.75rem; --t-sm: 0.875rem; --t-base: 1rem; --t-md: 1.125rem; --t-lg: 1.5rem; --t-xl: 2rem; --t-2xl: 2.5rem; --t-3xl: clamp(2.5rem, 6vw, 3.75rem); /* Space ------------------------------------------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem; --s-20: 5rem; /* Shape ------------------------------------------------------- */ --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px; /* Smallest reliably tappable target. */ --tap: 44px; --wrap: 1200px; --measure: 66ch; } /* Dark theme. Applied either by the OS preference or by the toggle, which sets data-theme on . The guard means an explicit light choice wins over a dark OS setting. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --bg: #0e101b; --surface: #141929; --surface-2: #252838; --line: #292d3e; --line-strong: #3a3f52; --ink: #fafafa; --ink-muted: #8f94a3; --ink-faint: #6b7180; /* On a dark ground the brand orange reads fine as text. */ --accent-text: #ff8a5e; --ok: #34b276; --ok-soft: #143425; --warn: #f5c13d; --warn-soft: #35260d; --bad: #f28c8c; --bad-soft: #361212; } } :root[data-theme='dark'] { --bg: #0e101b; --surface: #141929; --surface-2: #252838; --line: #292d3e; --line-strong: #3a3f52; --ink: #fafafa; --ink-muted: #8f94a3; --ink-faint: #6b7180; --accent-text: #ff8a5e; --ok: #34b276; --ok-soft: #143425; --warn: #f5c13d; --warn-soft: #35260d; --bad: #f28c8c; --bad-soft: #361212; } /* ================================================================ 2. Reset and base ================================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--t-base); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, video, iframe { max-width: 100%; height: auto; } h1, h2, h3, h4 { margin: 0 0 var(--s-4); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; } h1 { font-size: var(--t-2xl); } h2 { font-size: var(--t-xl); } h3 { font-size: var(--t-md); } p { margin: 0 0 var(--s-4); } a { color: var(--accent-text); text-underline-offset: 0.2em; } a:hover { color: var(--accent-hover); } /* Keyboard focus must stay visible — it is how a large number of people navigate, and removing it is the single most common accessibility regression in themes. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* WordPress core classes a theme is expected to provide. */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .screen-reader-text:focus { position: fixed !important; top: var(--s-4); left: var(--s-4); z-index: 100; width: auto; height: auto; clip: auto; padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--accent); border-radius: var(--r); color: var(--ink); } .alignleft { float: left; margin: 0 var(--s-6) var(--s-4) 0; } .alignright { float: right; margin: 0 0 var(--s-4) var(--s-6); } .aligncenter { display: block; margin-inline: auto; } .alignwide { max-width: min(100%, 1100px); margin-inline: auto; } .alignfull { width: 100%; } .wp-caption { max-width: 100%; } .wp-caption-text, .wp-element-caption { font-size: var(--t-sm); color: var(--ink-muted); } .sticky, .gallery-caption, .bypostauthor { /* required by the theme check */ } /* ================================================================ 3. Layout ================================================================ */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-4); } .section { padding-block: var(--s-16); } .section--tight { padding-block: var(--s-10); } .site { display: flex; min-height: 100vh; min-height: 100dvh; flex-direction: column; } .site-main { flex: 1; } /* ================================================================ 4. Header ================================================================ */ .site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } /* color-mix has good support but is not universal; this is the fallback for browsers without it. */ @supports not (background: color-mix(in srgb, red 50%, blue)) { .site-header { background: var(--bg); } } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); padding-block: var(--s-3); } .brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--ink); font-weight: 800; font-size: var(--t-md); letter-spacing: -0.03em; } .brand:hover { color: var(--ink); } .brand__mark { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--r-sm); background: var(--accent); color: var(--on-accent); font-size: var(--t-sm); font-weight: 800; } .brand__logo { max-height: 36px; width: auto; } .site-nav ul { display: flex; align-items: center; gap: var(--s-1); margin: 0; padding: 0; list-style: none; } .site-nav a { display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: var(--s-3); border-radius: var(--r-sm); color: var(--ink); font-size: var(--t-sm); font-weight: 500; text-decoration: none; } .site-nav a:hover { background: var(--surface-2); color: var(--ink); } .site-nav .current-menu-item > a { color: var(--accent-text); } .header-actions { display: flex; align-items: center; gap: var(--s-2); } .icon-btn { display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); cursor: pointer; } .icon-btn:hover { background: var(--surface-2); } .nav-toggle { display: none; } @media (max-width: 860px) { .nav-toggle { display: grid; } .site-nav { position: fixed; inset: 56px 0 auto; display: none; padding: var(--s-4); background: var(--bg); border-bottom: 1px solid var(--line); } .site-nav.is-open { display: block; } .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; } .site-nav a { padding: var(--s-3); border-radius: var(--r); } } /* ================================================================ 5. Buttons ================================================================ */ .btn, .wp-block-button__link, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--tap); padding: 0 var(--s-6); border: 1px solid transparent; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-family: inherit; font-size: var(--t-sm); font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; transition: background-color 150ms ease; } .btn:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--accent-hover); color: var(--on-accent); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; } .btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); } .btn--ghost:hover { background: var(--surface-2); color: var(--ink); } .btn--block { width: 100%; } .btn--lg { min-height: 52px; padding-inline: var(--s-8); font-size: var(--t-base); } /* ================================================================ 6. Cards and surfaces ================================================================ */ .card { padding: var(--s-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); } .card--flush { padding: 0; overflow: hidden; } .eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-text); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .badge { display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 600; } .badge--ok { background: var(--ok-soft); color: var(--ok); } .badge--warn { background: var(--warn-soft); color: var(--warn); } .badge--bad { background: var(--bad-soft); color: var(--bad); } .muted { color: var(--ink-muted); } .lead { font-size: var(--t-md); color: var(--ink-muted); max-width: var(--measure); } .icon-tile { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); } /* ================================================================ 7. Grids ================================================================ */ .grid { display: grid; gap: var(--s-5); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } /* ================================================================ 8. Hero and landing sections ================================================================ */ .hero { padding-block: var(--s-16) var(--s-12); } .hero h1 { max-width: 16ch; margin-block: var(--s-6) 0; font-size: var(--t-3xl); line-height: 1.03; letter-spacing: -0.035em; } .hero__accent { color: var(--accent-text); } .hero p { max-width: 48ch; margin-block: var(--s-6) 0; font-size: var(--t-md); color: var(--ink-muted); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); } .trust { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3) var(--s-8); margin: 0; padding: var(--s-5) 0; border-block: 1px solid var(--line); list-style: none; font-size: var(--t-sm); color: var(--ink-muted); } .feature h3 { margin-block: var(--s-4) var(--s-2); font-size: var(--t-base); } .feature p { margin: 0; font-size: var(--t-sm); color: var(--ink-muted); } /* Pricing ------------------------------------------------------- */ .plan { position: relative; display: flex; flex-direction: column; } .plan--featured { border-color: var(--accent); } .plan__flag { position: absolute; top: calc(var(--s-3) * -1); left: var(--s-6); padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; } .plan__price { display: flex; align-items: baseline; gap: var(--s-1); margin-block: var(--s-3) var(--s-6); } .plan__amount { font-size: var(--t-2xl); font-weight: 800; letter-spacing: -0.03em; } .plan--featured .plan__amount { color: var(--accent-text); } .plan ul { flex: 1; margin: 0 0 var(--s-6); padding: 0; list-style: none; } .plan li { display: flex; align-items: flex-start; gap: var(--s-2); margin-bottom: var(--s-3); font-size: var(--t-sm); color: var(--ink-muted); } .plan li svg { flex-shrink: 0; margin-top: 3px; color: var(--ok); } /* Closing panel -------------------------------------------------- */ .cta-panel { padding: var(--s-16) var(--s-8); border-radius: var(--r-xl); background: var(--navy); color: var(--on-navy); text-align: center; } .cta-panel h2 { color: var(--on-navy); } .cta-panel p { max-width: 46ch; margin-inline: auto; color: color-mix(in srgb, var(--on-navy) 70%, transparent); } /* ================================================================ 9. Content ================================================================ */ .entry-content { max-width: var(--measure); font-size: var(--t-base); line-height: 1.7; } .entry-content > * + * { margin-top: var(--s-4); } .entry-content h2 { margin-top: var(--s-10); font-size: var(--t-lg); } .entry-content h3 { margin-top: var(--s-8); } .entry-content ul, .entry-content ol { padding-left: 1.25em; } .entry-content li { margin-bottom: var(--s-2); } .entry-content img { border-radius: var(--r); } .entry-content blockquote { margin: var(--s-6) 0; padding: var(--s-4) var(--s-6); border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 var(--r) var(--r) 0; } .entry-content code { padding: 0.15em 0.4em; background: var(--surface-2); border-radius: var(--r-sm); font-size: 0.9em; } .entry-content pre { padding: var(--s-4); overflow-x: auto; background: var(--surface-2); border-radius: var(--r); } .entry-meta { font-size: var(--t-sm); color: var(--ink-muted); } .post-card { display: flex; flex-direction: column; gap: var(--s-3); } .post-card__thumb { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r); background: var(--surface-2); } .post-card__thumb img { width: 100%; height: 100%; object-fit: cover; } .post-card h2 { margin: 0; font-size: var(--t-md); } .post-card h2 a { color: var(--ink); text-decoration: none; } .post-card h2 a:hover { color: var(--accent-text); } /* Pagination and comments --------------------------------------- */ .pagination { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-10); } .pagination .page-numbers { display: grid; place-items: center; min-width: var(--tap); min-height: var(--tap); padding-inline: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; } .pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .comment-list { margin: 0; padding: 0; list-style: none; } .comment-list li { margin-bottom: var(--s-5); } input[type='text'], input[type='email'], input[type='url'], input[type='password'], input[type='search'], input[type='number'], input[type='tel'], input[type='date'], select, textarea { width: 100%; min-height: var(--tap); padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r); color: var(--ink); font-family: inherit; font-size: var(--t-sm); } textarea { min-height: 120px; resize: vertical; } label { display: block; margin-bottom: var(--s-2); font-size: var(--t-sm); font-weight: 500; } /* ================================================================ 10. Footer ================================================================ */ .site-footer { margin-top: var(--s-16); padding-block: var(--s-12) var(--s-8); border-top: 1px solid var(--line); font-size: var(--t-sm); color: var(--ink-muted); } .footer-cols { display: grid; gap: var(--s-8); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: var(--s-10); } .footer-cols h4 { margin-bottom: var(--s-4); font-size: var(--t-sm); font-weight: 700; color: var(--ink); } .footer-cols ul { margin: 0; padding: 0; list-style: none; } .footer-cols li { margin-bottom: var(--s-2); } .footer-cols a { color: var(--ink-muted); text-decoration: none; } .footer-cols a:hover { color: var(--ink); } .site-footer__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); padding-top: var(--s-6); border-top: 1px solid var(--line); } .vat-note { margin: 0; font-size: var(--t-xs); } /* ================================================================ 11. WooCommerce Light-touch overrides. WooCommerce ships its own stylesheet; these align the parts that would otherwise clash with the theme, without copying its templates. If you install a vendor plugin, its dashboard has separate templates and will need its own pass. ================================================================ */ .woocommerce-page .site-main { padding-block: var(--s-10); } .woocommerce ul.products { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin: 0; padding: 0; list-style: none; } .woocommerce ul.products::before, .woocommerce ul.products::after { content: none; } .woocommerce ul.products li.product { width: auto !important; margin: 0 !important; padding: var(--s-4); float: none !important; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: box-shadow 150ms ease, transform 150ms ease; } .woocommerce ul.products li.product:hover { box-shadow: 0 8px 24px rgb(0 0 0 / 0.08); transform: translateY(-2px); } .woocommerce ul.products li.product img { border-radius: var(--r); } .woocommerce ul.products li.product .woocommerce-loop-product__title { padding: var(--s-3) 0 var(--s-1); font-size: var(--t-base); font-weight: 700; color: var(--ink); } .woocommerce ul.products li.product .price, .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--ink); font-size: var(--t-md); font-weight: 800; font-variant-numeric: tabular-nums; } .woocommerce span.onsale { background: var(--accent); color: var(--on-accent); border-radius: var(--r-pill); min-height: auto; min-width: auto; padding: var(--s-1) var(--s-3); line-height: 1.4; font-weight: 700; } .woocommerce div.product .product_title { font-size: var(--t-xl); } .woocommerce-message, .woocommerce-info, .woocommerce-error { padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--r); background: var(--surface); color: var(--ink); } .woocommerce-error { border-top-color: var(--bad); } .woocommerce-message { border-top-color: var(--ok); } .woocommerce table.shop_table { border: 1px solid var(--line); border-radius: var(--r-lg); border-collapse: separate; border-spacing: 0; } .woocommerce table.shop_table th, .woocommerce table.shop_table td { border-color: var(--line); color: var(--ink); } .woocommerce .quantity input.qty { min-width: 4rem; text-align: center; } .woocommerce-tabs ul.tabs li { background: var(--surface-2) !important; border-color: var(--line) !important; border-radius: var(--r-sm) var(--r-sm) 0 0; } .woocommerce-tabs ul.tabs li a { color: var(--ink) !important; } /* Cart totals and checkout panels */ .woocommerce .cart_totals, .woocommerce-checkout #order_review, .woocommerce-checkout .woocommerce-checkout-review-order { padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); } /* ================================================================ 12. Utilities ================================================================ */ .text-center { text-align: center; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .tabular { font-variant-numeric: tabular-nums; } .stack > * + * { margin-top: var(--s-4); } @media (max-width: 640px) { .section { padding-block: var(--s-10); } .hero { padding-block: var(--s-10) var(--s-8); } .cta-panel { padding: var(--s-10) var(--s-5); } } /* ================================================================ 13. Account, dashboard and auth WooCommerce builds these pages; this styles them. The My Account page is a two-column layout — a navigation rail and a panel — and a vendor plugin's dashboard follows the same shape, so the same rules cover both. ================================================================ */ .account { display: grid; gap: var(--s-6); align-items: start; } @media (min-width: 900px) { .account { grid-template-columns: 240px 1fr; } } /* Navigation rail ------------------------------------------------ */ .woocommerce-MyAccount-navigation, .account-nav { padding: var(--s-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); } .woocommerce-MyAccount-navigation ul, .account-nav ul { margin: 0; padding: 0; list-style: none; } .woocommerce-MyAccount-navigation li a, .account-nav a { display: flex; align-items: center; gap: var(--s-3); min-height: var(--tap); padding: 0 var(--s-4); border-radius: var(--r); color: var(--ink-muted); font-size: var(--t-sm); font-weight: 500; text-decoration: none; } .woocommerce-MyAccount-navigation li a:hover, .account-nav a:hover { background: var(--surface-2); color: var(--ink); } .woocommerce-MyAccount-navigation li.is-active a, .account-nav a[aria-current='page'] { background: var(--surface-2); color: var(--ink); font-weight: 600; } /* On phones the rail becomes a scrolling row of pills, so it does not push the actual content below the fold. */ @media (max-width: 899px) { .woocommerce-MyAccount-navigation ul, .account-nav ul { display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; } .woocommerce-MyAccount-navigation ul::-webkit-scrollbar, .account-nav ul::-webkit-scrollbar { display: none; } .woocommerce-MyAccount-navigation li a, .account-nav a { white-space: nowrap; border-radius: var(--r-pill); } } /* Panel ---------------------------------------------------------- */ .woocommerce-MyAccount-content, .panel { padding: var(--s-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); } .panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); } .panel__head h2 { margin: 0; font-size: var(--t-lg); } /* Stat tiles ----------------------------------------------------- */ .stats { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .stat { padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); } .stat__label { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-3); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-muted); } .stat__value { margin: 0; font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .stat__note { margin: var(--s-2) 0 0; font-size: var(--t-sm); color: var(--ink-muted); } .dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--ok); flex-shrink: 0; } /* Data rows ------------------------------------------------------ */ .rows { margin: 0; padding: 0; list-style: none; } .rows li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); } .rows li:last-child { border-bottom: 0; } .rows__main { min-width: 0; } .rows__title { margin: 0; font-size: var(--t-sm); font-weight: 600; } .rows__meta { margin: var(--s-1) 0 0; font-size: var(--t-xs); color: var(--ink-muted); } .rows__side { flex-shrink: 0; text-align: right; } .rows__amount { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; } /* Progress ------------------------------------------------------- */ .bar { height: 6px; overflow: hidden; background: var(--surface-2); border-radius: var(--r-pill); } .bar > span { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); } /* Checklist ------------------------------------------------------ */ .checklist { margin: 0; padding: 0; list-style: none; } .checklist li { display: flex; align-items: center; gap: var(--s-3); min-height: var(--tap); padding: var(--s-2) 0; font-size: var(--t-sm); } .checklist .ring { width: 20px; height: 20px; flex-shrink: 0; border: 2px solid var(--line-strong); border-radius: var(--r-pill); } .checklist .done { color: var(--ok); } .checklist li.is-done span:not(.done) { color: var(--ink-muted); text-decoration: line-through; } /* Auth ----------------------------------------------------------- */ .auth { max-width: 440px; margin-inline: auto; padding: var(--s-8); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); } .auth h1 { font-size: var(--t-lg); text-align: center; } .auth .lead { text-align: center; margin-inline: auto; font-size: var(--t-sm); } .field { margin-bottom: var(--s-4); } .auth__divider { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-6) 0; color: var(--ink-faint); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.08em; } .auth__divider::before, .auth__divider::after { content: ''; flex: 1; height: 1px; background: var(--line); } .social-btn { display: flex; align-items: center; justify-content: center; gap: var(--s-3); width: 100%; min-height: var(--tap); margin-bottom: var(--s-3); padding: 0 var(--s-4); background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r); color: var(--ink); font-family: inherit; font-size: var(--t-sm); font-weight: 600; text-decoration: none; cursor: pointer; } .social-btn:hover { background: var(--surface-2); color: var(--ink); } /* Empty state ---------------------------------------------------- */ .empty { padding: var(--s-16) var(--s-6); border: 1px solid var(--line); border-radius: var(--r-lg); text-align: center; color: var(--ink-muted); } .empty h3 { margin-bottom: var(--s-2); color: var(--ink); } /* Product grid (marketplace) ------------------------------------- */ .products { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin: 0; padding: 0; list-style: none; } .product-card { position: relative; display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: transform 150ms ease, box-shadow 150ms ease; } .product-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgb(0 0 0 / 0.1); } .product-card__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); background: var(--surface-2); } .product-card h3 { margin: 0; font-size: var(--t-base); } .product-card h3 a { color: var(--ink); text-decoration: none; } /* The whole card is the target, while the title keeps the accessible name — a link wrapping the card reads the image and price first. */ .product-card h3 a::after { content: ''; position: absolute; inset: 0; } .product-card__by { margin: 0; font-size: var(--t-xs); color: var(--ink-muted); } .product-card__price { margin: auto 0 0; padding-top: var(--s-2); font-size: var(--t-md); font-weight: 800; font-variant-numeric: tabular-nums; } /* Two-column product page ---------------------------------------- */ .product-detail { display: grid; gap: var(--s-10); align-items: start; } @media (min-width: 900px) { .product-detail { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.9fr); } } .buy-box { position: sticky; top: calc(80px + env(safe-area-inset-top, 0px)); padding: var(--s-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); } .buy-box__price { margin: 0; font-size: var(--t-2xl); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .consent { display: flex; align-items: flex-start; gap: var(--s-3); margin: var(--s-6) 0 var(--s-4); font-size: var(--t-sm); line-height: 1.45; cursor: pointer; } .consent input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; } /* Order summary -------------------------------------------------- */ .summary { margin: 0; padding: 0; list-style: none; } .summary li { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-2) 0; font-size: var(--t-sm); } .summary li.total { margin-top: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); font-size: var(--t-md); font-weight: 800; } .summary .num { font-variant-numeric: tabular-nums; }