/* ———————————————————————————————————————————————————— Templacity — runtime theme CSS. Tokens live in theme.json; this file defines components and layout that don't map cleanly to block attributes. ———————————————————————————————————————————————————— */ @font-face { font-family: "Season Serif"; src: url("../fonts/SeasonSerif-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Season Sans"; src: url("../fonts/SeasonSans-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } :root { --paper: #F0EEEB; --paper-soft: #F7F6F2; --ink: #272622; --ink-muted: #66655C; --ink-hover: #1B1A17; --rule: #BCB9AF; --radius-sm: 6px; --radius: 12px; --radius-lg: 16px; --ease: cubic-bezier(.2, .6, .2, 1); --dur-fast: .18s; --dur: .25s; --dur-slow: .4s; --wrap-max: 1320px; --wrap-pad: 48px; --wrap-pad-sm: 24px; --serif: "Season Serif", "Cormorant Garamond", "EB Garamond", Georgia, serif; --sans: "Season Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* Dark theme overrides. Activated when . */ [data-theme="dark"] { --paper: #15140F; --paper-soft: #1F1D17; --ink: #F0EEEB; --ink-muted: #A6A39A; --ink-hover: #FFFFFF; --rule: #3A3830; } /* Smooth color crossfade when toggling. Quiet, premium feel. */ html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), fill var(--dur) var(--ease), stroke var(--dur) var(--ease) !important; } @media (prefers-reduced-motion: reduce) { html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: none !important; } } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "kern", "liga", "calt"; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } button { font: inherit; cursor: pointer; } .wrap { max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--wrap-pad); } @media (max-width: 720px) { .wrap { padding: 0 var(--wrap-pad-sm); } } /* ——— Display + utility type ——————————————————— */ .display { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; line-height: 1.02; color: var(--ink); } .eyebrow { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); } .muted { color: var(--ink-muted); } .italic-serif { font-family: var(--serif); font-style: italic; } /* ——— Buttons ——————————————————————————————— */ .btn { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: var(--paper-soft); border: 0; border-radius: var(--radius); padding: 13px 22px; font-size: 14px; font-weight: 500; letter-spacing: 0.01em; transition: transform .18s ease, background .18s ease; } .btn:hover { background: var(--ink-hover); transform: translateY(-2px); } .btn .arrow { transition: transform .18s ease; } .btn:hover .arrow { transform: translateX(3px); } .btn-ghost { display: inline-flex; align-items: center; gap: 10px; background: transparent; color: var(--ink); border: 1px solid rgba(39, 38, 34, 0.4); border-radius: var(--radius); padding: 12px 22px; font-size: 14px; font-weight: 500; letter-spacing: 0.01em; transition: border-color .18s ease, transform .18s ease; } .btn-ghost:hover { border-color: rgba(39, 38, 34, 1); transform: translateY(-1px); } /* ——— Header / nav —————————————————————————— */ .site-header { position: sticky; top: 0; z-index: 40; background: var(--paper); transition: background .25s ease, backdrop-filter .25s ease; } .site-header.is-scrolled { background: rgba(240, 238, 235, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } nav.site { padding: 22px 0; } nav.site .row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 48px; } .logo { display: inline-flex; align-items: center; line-height: 1; } .logo img { height: 22px; width: auto; } /* Logo swap: charcoal in light, white in dark. */ .logo .logo-light, .logo .logo-dark, .mobile-nav__brand .logo-light, .mobile-nav__brand .logo-dark { display: none; } :root:not([data-theme="dark"]) .logo .logo-light, :root:not([data-theme="dark"]) .mobile-nav__brand .logo-light { display: block; } [data-theme="dark"] .logo .logo-dark, [data-theme="dark"] .mobile-nav__brand .logo-dark { display: block; } .nav-links { display: flex; gap: 36px; justify-content: center; font-size: 14px; } .nav-links > .item { position: relative; } .nav-links a, .nav-links .trigger { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); opacity: 0.6; padding: 6px 0; background: none; border: 0; font: inherit; transition: opacity .18s ease; position: relative; cursor: pointer; } .nav-links a::after, .nav-links .trigger::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0.5px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform .25s ease; } .nav-links .item:hover > a, .nav-links .item:hover > .trigger, .nav-links a:focus-visible, .nav-links .trigger[aria-expanded="true"] { opacity: 1; } .nav-links .item:hover > a::after, .nav-links .item:hover > .trigger::after, .nav-links .trigger[aria-expanded="true"]::after { transform: scaleX(1); } .nav-links .trigger .caret { width: 10px; height: 10px; transition: transform .2s ease; } .nav-links .trigger[aria-expanded="true"] .caret { transform: rotate(180deg); } .dropdown { position: absolute; top: calc(100% + 10px); left: -16px; min-width: 220px; background: var(--paper-soft); border-radius: var(--radius); padding: 14px 8px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .18s ease, transform .18s ease, visibility .18s; } .nav-links .item.open .dropdown, .nav-links .item:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown a { display: block; padding: 8px 16px; font-size: 14px; opacity: 0.75; border-radius: 8px; } .dropdown a::after { display: none; } .dropdown a:hover { opacity: 1; background: var(--paper); } .nav-right { display: flex; align-items: center; gap: 8px; } .nav-icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: transparent; border: 0; padding: 0; color: var(--ink); opacity: 0.75; cursor: pointer; font: inherit; transition: background .18s ease, opacity .18s ease; position: relative; } .nav-icon:hover { background: var(--paper-soft); opacity: 1; } .nav-icon .cart-dot { position: absolute; top: 8px; right: 8px; width: 5px; height: 5px; background: var(--ink); border-radius: 50%; display: none; } .nav-icon .cart-dot[data-cart-count]:not([data-cart-count="0"]):not([data-cart-count=""]) { display: block; } /* Theme toggle button. Sun visible in dark mode, moon visible in light. */ .theme-toggle .icon-sun, .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun, :root:not([data-theme="dark"]) .theme-toggle .icon-moon { display: block; } @media (max-width: 820px) { .nav-links { display: none; } /* Mobile header: hamburger left, logo center, cart right. */ nav.site .row { grid-template-columns: 1fr auto 1fr; gap: 12px; } nav.site .row > .nav-toggle { justify-self: start; } nav.site .row > .logo { justify-self: center; } nav.site .row > .nav-right { justify-self: end; } /* Hide search, theme toggle, account icon. They live in the drawer on mobile. */ .nav-right .desktop-only { display: none; } } /* ——— Hero ——————————————————————————————————— */ section.hero { padding: 96px 0 140px; } .hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center; } .hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(64px, 8.2vw, 124px); line-height: 0.98; letter-spacing: -0.02em; margin: 0; max-width: 11ch; } .hero-sub { margin-top: 36px; max-width: 42ch; font-size: 17px; line-height: 1.55; color: var(--ink-muted); } .hero-cta { margin-top: 36px; } .hero-art { aspect-ratio: 5 / 4; width: 100%; background: transparent; border: 0.5px solid rgba(188, 185, 175, 0.7); border-radius: var(--radius); position: relative; overflow: hidden; } .hero-art .tag { position: absolute; top: 14px; left: 14px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--ink-muted); } .hero-art::before, .hero-art::after { content: ""; position: absolute; background: rgba(188, 185, 175, 0.45); } .hero-art::before { left: 50%; top: 20%; bottom: 20%; width: 0.5px; } .hero-art::after { top: 50%; left: 20%; right: 20%; height: 0.5px; } @media (max-width: 900px) { section.hero { padding: 56px 0 96px; } .hero-grid { grid-template-columns: 1fr; gap: 48px; } .hero-art { aspect-ratio: 4 / 3; } } /* ——— Sections ——————————————————————————————— */ section.block { padding: 96px 0; } .section-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px; margin-bottom: 56px; } .section-head h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -0.015em; margin: 14px 0 0; max-width: 22ch; } .section-head .right { text-align: right; max-width: 32ch; font-size: 14px; color: var(--ink-muted); } .section-head.center { grid-template-columns: 1fr; text-align: center; justify-items: center; } .section-head.center h2 { max-width: 26ch; margin-left: auto; margin-right: auto; } /* ——— Placeholder / .ph ————————————————————— */ .ph { background: var(--paper-soft); border-radius: var(--radius); position: relative; overflow: hidden; width: 100%; aspect-ratio: 4 / 5; } .ph::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient( 135deg, transparent 0 10px, rgba(188, 185, 175, 0.22) 10px 11px ); } .ph .label { position: absolute; left: 14px; bottom: 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--ink-muted); background: var(--paper-soft); padding: 4px 8px; border-radius: 6px; } /* ——— Best sellers ——————————————————————————— */ .products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } .product .meta { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 12px; margin-top: 20px; } .product .name { font-family: var(--serif); font-size: 22px; line-height: 1.15; letter-spacing: -0.005em; } .product .price { font-family: var(--sans); font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; } .product .hub { margin-top: 6px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); } @media (max-width: 1000px) { .products { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .products { grid-template-columns: 1fr; } } /* ——— Categories / hubs ——————————————————————— */ .cats { display: grid; grid-template-columns: repeat(12, 1fr); gap: 28px; } .cat { background: var(--paper-soft); border-radius: var(--radius); padding: 28px 28px 24px; display: flex; flex-direction: column; justify-content: space-between; min-height: 260px; transition: transform .2s ease; } .cat:hover { transform: translateY(-2px); } .cat .num { font-family: var(--serif); font-size: 14px; color: var(--ink-muted); font-style: italic; } .cat .title { font-family: var(--serif); font-size: 36px; line-height: 1.02; letter-spacing: -0.01em; margin-top: 72px; } .cat .desc { font-size: 13px; color: var(--ink-muted); margin-top: 10px; max-width: 26ch; } .cat .foot { margin-top: 28px; display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--ink-muted); letter-spacing: 0.08em; text-transform: uppercase; } .cat.a { grid-column: span 7; min-height: 360px; } .cat.b { grid-column: span 5; min-height: 360px; } .cat.c { grid-column: span 4; } .cat.d { grid-column: span 4; } .cat.e { grid-column: span 4; } @media (max-width: 900px) { .cat.a, .cat.b, .cat.c, .cat.d, .cat.e { grid-column: span 12; } } /* ——— Features (3-up) ————————————————————————— */ .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px; margin-top: 64px; } .feature { text-align: center; padding: 0 8px; } .feature .icon { color: var(--ink); margin: 0 auto 24px; display: inline-flex; align-items: center; justify-content: center; } .feature .icon svg { width: 30px; height: 30px; } .feature h4 { font-family: var(--sans); font-weight: 500; font-size: 16px; margin: 0 0 8px; color: var(--ink); } .feature p { margin: 0 auto; max-width: 34ch; font-size: 14.5px; line-height: 1.6; color: var(--ink-muted); } @media (max-width: 820px) { .features { grid-template-columns: 1fr; gap: 48px; } } /* ——— Blog / Journal ————————————————————————— */ .posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .post .ph { aspect-ratio: 5 / 4; } .post .cat-line { display: flex; gap: 10px; align-items: center; margin-top: 20px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); } .post .cat-line .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-muted); display: inline-block; } .post h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.15; letter-spacing: -0.005em; margin: 12px 0 0; } .post .read { margin-top: 16px; font-size: 13px; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; } @media (max-width: 900px) { .posts { grid-template-columns: 1fr; } } /* ——— FAQ ——————————————————————————————————— */ .faq-wrap { max-width: 880px; margin: 0 auto; } .faq-list { display: flex; flex-direction: column; gap: 10px; } details.faq { background: var(--paper-soft); border-radius: var(--radius); overflow: hidden; } details.faq > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; padding: 22px 26px; font-size: 15.5px; color: var(--ink); font-weight: 500; } details.faq > summary::-webkit-details-marker { display: none; } details.faq .icon-toggle { width: 20px; height: 20px; position: relative; flex-shrink: 0; color: var(--ink); opacity: 0.7; } details.faq .icon-toggle::before, details.faq .icon-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; transition: transform .25s ease, opacity .25s ease; } details.faq .icon-toggle::before { width: 14px; height: 1px; transform: translate(-50%, -50%); } details.faq .icon-toggle::after { width: 1px; height: 14px; transform: translate(-50%, -50%); } details.faq[open] .icon-toggle { transform: rotate(45deg); } details.faq .answer { padding: 0 26px 22px; color: var(--ink-muted); font-size: 15px; line-height: 1.6; max-width: 72ch; } .faq-foot { display: flex; justify-content: center; margin-top: 32px; } /* ——— Trust / principles ————————————————————— */ .trust-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 96px; align-items: start; } .trust-grid h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5vw, 72px); line-height: 1.02; letter-spacing: -0.015em; margin: 14px 0 0; } .principles { display: grid; grid-template-columns: 1fr; gap: 40px; } .principle { display: grid; grid-template-columns: 60px 1fr; gap: 24px; align-items: start; } .principle .n { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ink-muted); padding-top: 4px; } .principle h4 { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.15; margin: 0 0 8px; } .principle p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-muted); max-width: 48ch; } @media (max-width: 900px) { .trust-grid { grid-template-columns: 1fr; gap: 48px; } } /* ——— Footer ————————————————————————————————— */ footer.site { padding: 120px 0 48px; } .foot-grid { display: grid; grid-template-columns: 1.4fr 0.8fr 0.8fr 0.8fr 1.3fr; gap: 48px; } .foot-brand .logo img { height: 26px; } .foot-brand p { margin: 24px 0 0; font-size: 14px; color: var(--ink-muted); max-width: 28ch; line-height: 1.6; } .foot-col h3 { font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 20px; font-weight: 500; } .foot-col ul { list-style: none; padding: 0; margin: 0; } .foot-col li { margin: 0 0 12px; font-size: 14px; } .foot-col a { opacity: 0.85; transition: opacity .18s ease; } .foot-col a:hover { opacity: 1; } .newsletter label { font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); display: block; margin-bottom: 20px; font-weight: 500; } .newsletter .ns-intro { font-family: var(--serif); font-size: 22px; line-height: 1.2; margin: 0 0 20px; max-width: 22ch; } .newsletter .field { display: grid; grid-template-columns: 1fr auto; gap: 8px; background: var(--paper-soft); border-radius: var(--radius); padding: 6px; align-items: center; } .newsletter input { background: transparent; border: 0; padding: 10px 12px; font: inherit; font-size: 14px; color: var(--ink); outline: none; } .newsletter input::placeholder { color: var(--ink-muted); } .newsletter .btn { padding: 10px 16px; font-size: 13px; } .foot-bottom { margin-top: 96px; display: grid; grid-template-columns: 1fr auto; gap: 24px; font-size: 12px; color: var(--ink-muted); } .foot-bottom .links { display: flex; gap: 24px; } @media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } .newsletter { grid-column: 1 / -1; } } /* ——— Reset WP's default block spacing where it fights the design ——— */ .wp-site-blocks > main { min-height: 0; } body .wp-block-group { margin-block: 0; } /* Force .wrap padding + max-width even when it lands on a wp-block-group. */ .wp-block-group.wrap, main .wrap, main.wrap { max-width: var(--wrap-max); margin-left: auto; margin-right: auto; padding-left: var(--wrap-pad); padding-right: var(--wrap-pad); } @media (max-width: 720px) { .wp-block-group.wrap, main .wrap, main.wrap { padding-left: var(--wrap-pad-sm); padding-right: var(--wrap-pad-sm); } } /* Query / post-template width: the Query block lives inside our .wrap, which is max 1320px with 48px side padding. The inner ul.wp-block-post-template gets a calc()-based explicit width because WP's block layout CSS was resolving `width: 100%` to a narrower content size, collapsing the grid. */ .wrap .wp-block-query, .wp-block-query.post-list, .wp-block-query.posts, .wp-block-query.products { max-width: 100%; width: 100%; } .post-list .wp-block-post-template, .posts .wp-block-post-template, .products .wp-block-post-template { list-style: none; padding: 0; margin: 0; box-sizing: border-box; width: min(calc(var(--wrap-max) - 2 * var(--wrap-pad)), calc(100vw - 2 * var(--wrap-pad))); } .post-list .wp-block-post-template { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 32px; } .posts .wp-block-post-template { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; } .products .wp-block-post-template { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px 32px; } .wp-block-post-template > li { margin: 0; min-width: 0; } .wp-block-post-template > li > article.wp-block-group { max-width: 100%; margin: 0; } @media (max-width: 1100px) { .products .wp-block-post-template { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .post-list .wp-block-post-template, .posts .wp-block-post-template { grid-template-columns: 1fr 1fr; gap: 40px 24px; } .products .wp-block-post-template { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .post-list .wp-block-post-template, .posts .wp-block-post-template, .products .wp-block-post-template { width: calc(100vw - 2 * var(--wrap-pad-sm)); } } @media (max-width: 640px) { .post-list .wp-block-post-template, .posts .wp-block-post-template, .products .wp-block-post-template { grid-template-columns: 1fr; } } /* ——— Cart / checkout / account shell ——— */ .cart-page { padding-top: 48px; padding-bottom: 24px; } .cart-shell { padding-bottom: 96px; } .cart-shell .woocommerce, .cart-shell .woocommerce-account, .cart-shell .woocommerce-cart-form, .cart-shell .woocommerce-checkout { color: var(--ink); } .cart-shell table, .cart-shell table.shop_table { width: 100%; border-collapse: collapse; background: transparent; border: 0; font-size: 14.5px; } .cart-shell table th, .cart-shell table td { padding: 18px 14px; border: 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; } .cart-shell table th { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); } .cart-shell .product-name a { color: var(--ink); font-family: var(--serif); font-size: 20px; } .cart-shell .cart_totals, .cart-shell .woocommerce-additional-fields, .cart-shell .woocommerce-billing-fields, .cart-shell .woocommerce-shipping-fields, .cart-shell #order_review, .cart-shell .woocommerce-MyAccount-content { background: var(--paper-soft); border-radius: var(--radius); padding: 28px; margin-top: 32px; } .cart-shell .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--rule); padding-bottom: 16px; } .cart-shell .woocommerce-MyAccount-navigation a { display: inline-block; padding: 8px 14px; border-radius: var(--radius); font-size: 13px; color: var(--ink-muted); text-decoration: none; } .cart-shell .woocommerce-MyAccount-navigation li.is-active a, .cart-shell .woocommerce-MyAccount-navigation a:hover { background: var(--paper-soft); color: var(--ink); } .cart-shell input[type="text"], .cart-shell input[type="email"], .cart-shell input[type="password"], .cart-shell input[type="tel"], .cart-shell input[type="number"], .cart-shell select, .cart-shell textarea { width: 100%; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 12px 14px; font: inherit; font-size: 14px; color: var(--ink); outline: none; } .cart-shell input:focus, .cart-shell select:focus, .cart-shell textarea:focus { border-color: var(--ink); } .cart-shell .button, .cart-shell button[type="submit"], .cart-shell .woocommerce-button { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; background: var(--ink); color: var(--paper); border: 0; border-radius: 999px; font: inherit; font-size: 13px; cursor: pointer; text-decoration: none; transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .cart-shell .button:hover, .cart-shell button[type="submit"]:hover { background: var(--ink-hover); transform: translateY(-1px); } .cart-shell .button.alt { background: var(--ink); } .cart-shell .woocommerce-message, .cart-shell .woocommerce-info, .cart-shell .woocommerce-error { background: var(--paper-soft); border: 0; border-left: 2px solid var(--ink); border-radius: 0 var(--radius) var(--radius) 0; padding: 14px 18px; margin: 0 0 24px; font-size: 14px; list-style: none; } .cart-shell .woocommerce-cart-form__contents { margin-bottom: 32px; } .cart-shell .cart-empty, .cart-shell p.cart-empty { font-family: var(--serif); font-size: 22px; color: var(--ink-muted); padding: 32px 0; } /* ——— Blog single + archive ——— */ .article { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 72px; padding-top: 24px; padding-bottom: 96px; /* Same contentSize-break fix as post-list */ width: min(calc(var(--wrap-max) - 2 * var(--wrap-pad)), calc(100vw - 2 * var(--wrap-pad))); box-sizing: border-box; } .article .article-head { margin: 0 0 40px; } .article .article-head .eyebrow { margin-bottom: 14px; } .article .article-head h1 { font-family: var(--serif); font-size: clamp(36px, 4.4vw, 56px); letter-spacing: -0.01em; line-height: 1.05; margin: 0 0 20px; } .article .article-meta { display: flex; gap: 14px; align-items: center; color: var(--ink-muted); font-size: 13px; } .article .article-meta .dot { width: 3px; height: 3px; background: var(--ink-muted); border-radius: 50%; } .article .article-body { font-size: 17px; line-height: 1.7; color: var(--ink); max-width: 64ch; } .article .article-body p { margin: 0 0 1.2em; } .article .article-body h2 { font-family: var(--serif); font-size: 32px; letter-spacing: -0.005em; margin: 2em 0 0.6em; line-height: 1.2; } .article .article-body h3 { font-family: var(--serif); font-size: 24px; margin: 1.6em 0 0.5em; line-height: 1.25; } .article .article-body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); } .article .article-body a:hover { text-decoration-color: var(--ink); } .article .article-body blockquote { border-left: 2px solid var(--ink); padding-left: 20px; margin: 1.4em 0; font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.35; } .article .article-body img, .article .article-body figure { max-width: 100%; height: auto; border-radius: var(--radius); margin: 1.5em 0; } .article .article-body hr { border: 0; border-top: 1px solid var(--rule); margin: 2em 0; } .article .article-body ul, .article .article-body ol { padding-left: 22px; margin: 0 0 1.2em; } .article .article-body li { margin: 0 0 0.4em; } .article aside.sidebar { position: sticky; top: 96px; align-self: start; } .article .sidebar .product-card { background: var(--paper-soft); border-radius: var(--radius); padding: 20px; } .article .sidebar .product-card .ph { aspect-ratio: 4/5; margin-bottom: 16px; } .article .sidebar .product-card .hub { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 6px; } .article .sidebar .product-card .name { font-family: var(--serif); font-size: 22px; line-height: 1.15; margin: 0 0 6px; } .article .sidebar .product-card .desc { font-size: 14px; color: var(--ink-muted); margin: 0 0 18px; line-height: 1.5; } .article .sidebar .product-card .row { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid var(--rule); } .article .sidebar .product-card .price { font-size: 14px; font-variant-numeric: tabular-nums; } .article .sidebar .product-card .buy { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink); text-decoration: none; } .article .sidebar .product-card .buy:hover { opacity: .75; } .article .sidebar .sidebar-foot { margin-top: 24px; font-size: 13px; color: var(--ink-muted); line-height: 1.6; } @media (max-width: 980px) { .article { grid-template-columns: minmax(0, 1fr); gap: 40px; } .article aside.sidebar { position: static; } } /* ——— Archive / niche hub lists ——— */ .archive-head { padding: 48px 0 24px; } .archive-head h1 { font-family: var(--serif); font-size: clamp(40px, 5.2vw, 72px); letter-spacing: -0.01em; line-height: 1.02; margin: 0 0 18px; } .archive-head .desc { color: var(--ink-muted); font-size: 17px; max-width: 52ch; } .post-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 32px; padding-bottom: 96px; } .post-list .post { margin: 0; } .post-list .post h3 { margin: 14px 0 8px; } .pagination { display: flex; gap: 12px; justify-content: center; padding: 0 0 96px; font-size: 13px; } .pagination a, .pagination span { padding: 8px 14px; border-radius: var(--radius); text-decoration: none; color: var(--ink-muted); } .pagination .current { color: var(--ink); background: var(--paper-soft); } .pagination a:hover { background: var(--paper-soft); color: var(--ink); } @media (max-width: 900px) { .post-list { grid-template-columns: 1fr 1fr; gap: 40px 24px; } } @media (max-width: 640px) { .post-list { grid-template-columns: 1fr; } } /* ——— Niche hub — editorial intro ——— */ .hub-intro { padding: 64px 0 32px; } .hub-intro .eyebrow { margin-bottom: 18px; } .hub-intro h1 { margin: 0 0 28px; max-width: 20ch; } .hub-intro .hub-lede { font-family: var(--serif); font-size: clamp(22px, 2vw, 28px); line-height: 1.35; max-width: 54ch; margin: 0 0 18px; color: var(--ink); } .hub-intro .hub-sub { color: var(--ink-muted); max-width: 54ch; font-size: 17px; margin: 0; } /* ——— Niche hub — bundle hero (commercial / hybrid) ——— */ .bundle-hero { padding: 56px 0 24px; } .bundle-hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: stretch; } .bundle-hero-art .ph { aspect-ratio: 4/5; width: 100%; } .bundle-hero-copy .eyebrow { margin-bottom: 18px; } .bundle-hero-copy h1 { margin: 0 0 22px; font-size: clamp(44px, 5.4vw, 80px); line-height: 1.02; } .bundle-hero-copy .hero-sub { margin: 0 0 28px; max-width: 42ch; } .bundle-includes { margin: 0 0 32px; } .bundle-includes .label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 14px; } .bundle-includes ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; font-size: 14.5px; color: var(--ink); } .bundle-includes li { padding: 4px 0; border-bottom: 1px solid var(--rule); } .bundle-buy { background: var(--paper-soft); border-radius: var(--radius); padding: 22px 24px; } .bundle-buy .price-row { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; } .bundle-buy .price { font-family: var(--serif); font-size: 32px; line-height: 1; } .bundle-buy .price-strike { font-size: 13px; color: var(--ink-muted); text-decoration: line-through; text-decoration-color: var(--rule); } .bundle-buy .btn { width: 100%; justify-content: center; } .bundle-buy .refund-note { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-muted); text-align: center; } @media (max-width: 900px) { .bundle-hero-grid { grid-template-columns: 1fr; gap: 40px; } .bundle-includes ul { grid-template-columns: 1fr; } } /* ——— Brand bundle product page ——— */ /* Pattern: product-bundle-{brand}.php The product-brand-bundle wrapper carries [data-active-device="X"] — any descendant marked [data-device-mockup="X"] or [data-device-section="X"] is shown only when it matches; everything else is hidden. */ .product-brand-bundle { padding: 56px 0 0; } /* ----- Cross-cutting: hide non-active device assets/sections ----- */ .product-brand-bundle [data-device-mockup] { display: none; } .product-brand-bundle [data-device-mockup].is-active-device { display: block; } .product-brand-bundle [data-device-section] { display: none; } .product-brand-bundle [data-device-section].is-active-device { display: block; } /* Per-device physical-size scale. Move is the small reMarkable (7.3" vs 11.8" Paper Pro) — we shrink it so it doesn't dominate layout slots sized for the larger devices. */ .product-brand-bundle .device-mockup[data-device="remarkable-paper-pro-move"] { max-width: 62%; margin-inline: auto; } .product-brand-bundle .device-mockup[data-device="remarkable-2"] { max-width: 88%; margin-inline: auto; } /* Paper Pro and the Kindle family render at full slot width (default). */ /* ----- Hero ----- */ .product-brand-bundle .bundle-hero { padding: 16px 0 80px; } .product-brand-bundle .bundle-hero-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; } .product-brand-bundle .bundle-hero-copy .eyebrow { margin-bottom: 14px; } .product-brand-bundle .bundle-hero-copy h1 { margin: 0 0 22px; font-size: clamp(40px, 4.6vw, 68px); line-height: 1.04; letter-spacing: -0.02em; } .product-brand-bundle .bundle-hero-copy .hero-sub { margin: 0 0 28px; max-width: 50ch; color: var(--ink-muted); font-size: 16px; line-height: 1.55; } /* ----- Hero variant carousel (layout-test harness) ----- */ .bundle-hero-carousel { position: relative; width: 100%; margin: 0; } /* Locked R-only stage: replaces the old .hero-variants carousel track. */ .bundle-hero-art-stage { position: relative; width: 100%; max-width: 720px; margin: 0 auto; height: 540px; } .hero-variants { position: relative; width: 100%; height: 540px; } .hero-variant { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .35s var(--ease, ease); } .hero-variant.is-active { opacity: 1; pointer-events: auto; z-index: 2; } .hero-slot { position: absolute; width: 28%; transform-origin: center bottom; transition: transform .35s var(--ease, ease); } .hero-slot .device-mockup { width: 100%; /* In carousel slots, ignore per-device physical size scaling — every slot's max-width is whatever the variant chose, so devices read at consistent slot proportions. */ max-width: 100% !important; margin: 0; } /* A — Cascade right (5 same-size, stacked diagonally right) */ .hero-variant-A .hero-slot { width: 30%; left: calc(var(--idx) * 14%); top: calc(6% + var(--idx) * 4%); z-index: calc(var(--idx) + 1); } /* B — Symmetric stack (5 same-size, center forward) */ .hero-variant-B .hero-slot { width: 26%; } .hero-variant-B .hero-slot-1 { left: 0%; top: 18%; z-index: 1; } .hero-variant-B .hero-slot-2 { left: 18%; top: 9%; z-index: 2; } .hero-variant-B .hero-slot-3 { left: 37%; top: 0%; z-index: 3; } .hero-variant-B .hero-slot-4 { left: 56%; top: 9%; z-index: 2; } .hero-variant-B .hero-slot-5 { left: 74%; top: 18%; z-index: 1; } /* C — Tight row (5 same-size, barely overlapping) */ .hero-variant-C .hero-slot { width: 22%; left: calc(var(--idx) * 19.5%); top: 8%; z-index: calc(var(--idx) + 1); } /* D — Descending deck (5 same-size, falling diagonal) */ .hero-variant-D .hero-slot { width: 32%; left: calc(12% + var(--idx) * 8%); top: calc(var(--idx) * 8%); z-index: calc(5 - var(--idx)); } /* E — Cascade left (5 same-size, mirror of A) */ .hero-variant-E .hero-slot { width: 30%; left: calc((4 - var(--idx)) * 14%); top: calc(6% + (4 - var(--idx)) * 4%); z-index: calc(var(--idx) + 1); } /* F — Three-up fan (3 devices, sides rotated) */ .hero-variant-F .hero-slot { width: 32%; top: 8%; } .hero-variant-F .hero-slot-1 { left: 6%; transform: rotate(-7deg) scale(0.86); transform-origin: bottom right; z-index: 1; } .hero-variant-F .hero-slot-2 { left: 34%; transform: scale(1); z-index: 3; } .hero-variant-F .hero-slot-3 { left: 62%; transform: rotate(7deg) scale(0.86); transform-origin: bottom left; z-index: 1; } /* G — Open book (2 large devices angled) */ .hero-variant-G .hero-slot { width: 38%; top: 4%; } .hero-variant-G .hero-slot-1 { left: 8%; transform: rotate(-4deg); transform-origin: bottom right; z-index: 1; } .hero-variant-G .hero-slot-2 { left: 54%; transform: rotate(4deg); transform-origin: bottom left; z-index: 2; } /* H — Spotlight + satellites (1 large, 4 small) */ .hero-variant-H .hero-slot-1 { left: 32%; top: 8%; width: 36%; z-index: 5; } .hero-variant-H .hero-slot-2 { left: 4%; top: 0%; width: 18%; z-index: 1; transform: rotate(-3deg); } .hero-variant-H .hero-slot-3 { left: 78%; top: 0%; width: 18%; z-index: 1; transform: rotate(3deg); } .hero-variant-H .hero-slot-4 { left: 6%; top: 55%; width: 16%; z-index: 1; } .hero-variant-H .hero-slot-5 { left: 80%; top: 55%; width: 16%; z-index: 1; } /* I — Diagonal staircase (5 descending size, going down-right) */ .hero-variant-I .hero-slot { transform-origin: top left; } .hero-variant-I .hero-slot-1 { left: 0%; top: 0%; width: 30%; z-index: 5; } .hero-variant-I .hero-slot-2 { left: 18%; top: 8%; width: 26%; z-index: 4; } .hero-variant-I .hero-slot-3 { left: 36%; top: 16%; width: 22%; z-index: 3; } .hero-variant-I .hero-slot-4 { left: 52%; top: 24%; width: 18%; z-index: 2; } .hero-variant-I .hero-slot-5 { left: 66%; top: 32%; width: 14%; z-index: 1; } /* J — Trio stack (3 devices behind each other, close offset) */ .hero-variant-J .hero-slot { width: 36%; } .hero-variant-J .hero-slot-1 { left: 22%; top: 16%; z-index: 1; transform: rotate(-2deg); } .hero-variant-J .hero-slot-2 { left: 30%; top: 8%; z-index: 2; } .hero-variant-J .hero-slot-3 { left: 38%; top: 0%; z-index: 3; transform: rotate(2deg); } /* K — Bouquet fan (5 devices fanning from low anchor) */ .hero-variant-K .hero-slot { width: 26%; bottom: 0; top: auto; transform-origin: bottom center; } .hero-variant-K .hero-slot-1 { left: 4%; bottom: 4%; transform: rotate(-12deg); z-index: 1; } .hero-variant-K .hero-slot-2 { left: 22%; bottom: 2%; transform: rotate(-5deg); z-index: 2; } .hero-variant-K .hero-slot-3 { left: 37%; bottom: 0%; z-index: 3; } .hero-variant-K .hero-slot-4 { left: 52%; bottom: 2%; transform: rotate(5deg); z-index: 2; } .hero-variant-K .hero-slot-5 { left: 70%; bottom: 4%; transform: rotate(12deg); z-index: 1; } /* L — Floating cluster (varied positions/sizes/rotations) */ .hero-variant-L .hero-slot-1 { left: 28%; top: 4%; width: 32%; z-index: 5; } .hero-variant-L .hero-slot-2 { left: 2%; top: 12%; width: 22%; z-index: 2; transform: rotate(-6deg); } .hero-variant-L .hero-slot-3 { left: 70%; top: 30%; width: 24%; z-index: 3; transform: rotate(4deg); } .hero-variant-L .hero-slot-4 { left: 8%; top: 60%; width: 18%; z-index: 2; transform: rotate(3deg); } .hero-variant-L .hero-slot-5 { left: 62%; top: 5%; width: 18%; z-index: 1; transform: rotate(-3deg); } /* M/N/O — Symmetric cascade. Center forward + 2 on each side peeking from behind, A's gentle height step (4% per side) — not B's big drop. Three progressive widths: bigger devices means less peek. */ /* M — Symmetric cascade · narrow (5 same-size, 26% wide, 50% peek) */ .hero-variant-M .hero-slot { width: 26%; } .hero-variant-M .hero-slot-1 { left: 11%; top: 8%; z-index: 1; } .hero-variant-M .hero-slot-2 { left: 24%; top: 4%; z-index: 2; } .hero-variant-M .hero-slot-3 { left: 37%; top: 0%; z-index: 3; } .hero-variant-M .hero-slot-4 { left: 50%; top: 4%; z-index: 2; } .hero-variant-M .hero-slot-5 { left: 63%; top: 8%; z-index: 1; } /* N — Symmetric cascade · medium (5 same-size, 32% wide, 34% peek) */ .hero-variant-N .hero-slot { width: 32%; } .hero-variant-N .hero-slot-1 { left: 12%; top: 8%; z-index: 1; } .hero-variant-N .hero-slot-2 { left: 23%; top: 4%; z-index: 2; } .hero-variant-N .hero-slot-3 { left: 34%; top: 0%; z-index: 3; } .hero-variant-N .hero-slot-4 { left: 45%; top: 4%; z-index: 2; } .hero-variant-N .hero-slot-5 { left: 56%; top: 8%; z-index: 1; } /* O — Symmetric cascade · wide (5 same-size, 40% wide, 25% peek) */ .hero-variant-O .hero-slot { width: 40%; } .hero-variant-O .hero-slot-1 { left: 10%; top: 8%; z-index: 1; } .hero-variant-O .hero-slot-2 { left: 20%; top: 4%; z-index: 2; } .hero-variant-O .hero-slot-3 { left: 30%; top: 0%; z-index: 3; } .hero-variant-O .hero-slot-4 { left: 40%; top: 4%; z-index: 2; } .hero-variant-O .hero-slot-5 { left: 50%; top: 8%; z-index: 1; } /* P/Q/R — Inverted arch. Same horizontal positions as M/N/O, but the center sits LOWEST (sides up, center down), so the silhouette is like a shallow U instead of a peak. Z-order unchanged: center stays frontmost. */ /* P — Inverted arch · narrow (26% wide) */ .hero-variant-P .hero-slot { width: 26%; } .hero-variant-P .hero-slot-1 { left: 11%; top: 0%; z-index: 1; } .hero-variant-P .hero-slot-2 { left: 24%; top: 4%; z-index: 2; } .hero-variant-P .hero-slot-3 { left: 37%; top: 8%; z-index: 3; } .hero-variant-P .hero-slot-4 { left: 50%; top: 4%; z-index: 2; } .hero-variant-P .hero-slot-5 { left: 63%; top: 0%; z-index: 1; } /* Q — Inverted arch · medium (32% wide) */ .hero-variant-Q .hero-slot { width: 32%; } .hero-variant-Q .hero-slot-1 { left: 12%; top: 0%; z-index: 1; } .hero-variant-Q .hero-slot-2 { left: 23%; top: 4%; z-index: 2; } .hero-variant-Q .hero-slot-3 { left: 34%; top: 8%; z-index: 3; } .hero-variant-Q .hero-slot-4 { left: 45%; top: 4%; z-index: 2; } .hero-variant-Q .hero-slot-5 { left: 56%; top: 0%; z-index: 1; } /* R — Inverted arch · wide (40% wide) */ /* R: inverted arch · wide. Cluster spans the full art-stage edge-to-edge so the image visually anchors the hero column rather than floating right. Slots are 35% wide; lefts step by 16.25% so 5 slots fit 0%–100%. */ .hero-variant-R .hero-slot { width: 35%; } .hero-variant-R .hero-slot-1 { left: 0%; top: 0%; z-index: 1; } .hero-variant-R .hero-slot-2 { left: 16.25%; top: 4%; z-index: 2; } .hero-variant-R .hero-slot-3 { left: 32.5%; top: 8%; z-index: 3; } .hero-variant-R .hero-slot-4 { left: 48.75%; top: 4%; z-index: 2; } .hero-variant-R .hero-slot-5 { left: 65%; top: 0%; z-index: 1; } /* S/T/U — Flat row. Same horizontal positions as M/N/O, but every slot sits at the same vertical level (no arch, no peak, no dip). Pure horizontal cascade with center frontmost. */ /* S — Flat row · narrow (26% wide) */ .hero-variant-S .hero-slot { width: 26%; top: 4%; } .hero-variant-S .hero-slot-1 { left: 11%; z-index: 1; } .hero-variant-S .hero-slot-2 { left: 24%; z-index: 2; } .hero-variant-S .hero-slot-3 { left: 37%; z-index: 3; } .hero-variant-S .hero-slot-4 { left: 50%; z-index: 2; } .hero-variant-S .hero-slot-5 { left: 63%; z-index: 1; } /* T — Flat row · medium (32% wide) */ .hero-variant-T .hero-slot { width: 32%; top: 4%; } .hero-variant-T .hero-slot-1 { left: 12%; z-index: 1; } .hero-variant-T .hero-slot-2 { left: 23%; z-index: 2; } .hero-variant-T .hero-slot-3 { left: 34%; z-index: 3; } .hero-variant-T .hero-slot-4 { left: 45%; z-index: 2; } .hero-variant-T .hero-slot-5 { left: 56%; z-index: 1; } /* U — Flat row · wide (40% wide) */ .hero-variant-U .hero-slot { width: 40%; top: 4%; } .hero-variant-U .hero-slot-1 { left: 10%; z-index: 1; } .hero-variant-U .hero-slot-2 { left: 20%; z-index: 2; } .hero-variant-U .hero-slot-3 { left: 30%; z-index: 3; } .hero-variant-U .hero-slot-4 { left: 40%; z-index: 2; } .hero-variant-U .hero-slot-5 { left: 50%; z-index: 1; } /* Carousel chrome */ .hero-carousel-meta { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; } .hero-nav { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color .2s var(--ease, ease), background .2s var(--ease, ease); } .hero-nav:hover { border-color: var(--ink); background: var(--paper-soft); } .hero-carousel-label { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink-muted); min-width: 28ch; text-align: center; } .hero-carousel-dots { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 14px; } .hero-carousel-dots button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--rule); background: var(--paper); font-size: 11px; font-family: var(--serif); cursor: pointer; color: var(--ink-muted); letter-spacing: 0.04em; transition: all .2s var(--ease, ease); } .hero-carousel-dots button:hover { border-color: var(--ink); color: var(--ink); } .hero-carousel-dots button.is-active { background: var(--ink); color: var(--paper-soft); border-color: var(--ink); } @media (max-width: 1080px) { .hero-variants { height: 460px; } } @media (max-width: 720px) { .hero-variants { height: 360px; } .hero-carousel-label { min-width: auto; font-size: 13px; } .hero-carousel-dots button { width: 24px; height: 24px; font-size: 10px; } } /* Hero fan: 3 instances of the active device, slightly fanned/tilted. */ .product-brand-bundle .bundle-hero-fan { display: grid; grid-template-columns: 0.85fr 1fr 0.85fr; align-items: end; justify-items: center; gap: 0; perspective: 1200px; padding: 24px 0 36px; } .product-brand-bundle .fan-item { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; position: relative; } .product-brand-bundle .fan-item .bundle-mockup, .product-brand-bundle .fan-item .device-mockup { width: 100%; } .product-brand-bundle .fan-side .device-mockup { filter: brightness(0.97); } .product-brand-bundle .fan-left { transform: translateX(8%) rotate(-7deg) scale(0.86); transform-origin: bottom right; z-index: 1; } .product-brand-bundle .fan-right { transform: translateX(-8%) rotate(7deg) scale(0.86); transform-origin: bottom left; z-index: 1; } .product-brand-bundle .fan-center { z-index: 2; } .product-brand-bundle .fan-label { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ink-muted); letter-spacing: 0.01em; margin-top: 4px; } /* Buy card */ .product-brand-bundle .bundle-buy { background: var(--paper-soft); border-radius: var(--radius); padding: 22px 24px; margin-top: 8px; } .product-brand-bundle .bundle-buy .price-row { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; } .product-brand-bundle .bundle-buy .price { font-family: var(--serif); font-size: 36px; line-height: 1; } .product-brand-bundle .bundle-buy .price-strike { font-size: 13px; color: var(--ink-muted); text-decoration: line-through; text-decoration-color: var(--rule); } .product-brand-bundle .bundle-buy .btn { width: 100%; justify-content: center; } .product-brand-bundle .bundle-buy .refund-note { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-muted); text-align: center; } /* ----- Trust strip ----- */ .product-brand-bundle .trust-strip { padding: 36px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: 0; } .product-brand-bundle .trust-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; font-size: 13.5px; color: var(--ink-muted); } .product-brand-bundle .trust-list li { display: flex; align-items: baseline; gap: 8px; line-height: 1.45; } .product-brand-bundle .trust-list .trust-mark { font-family: var(--serif); font-style: italic; color: var(--ink); } /* ----- Why this exists ----- */ .product-brand-bundle .bundle-why { padding: 96px 0; } .product-brand-bundle .bundle-why-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 80px; align-items: start; } .product-brand-bundle .bundle-why h2 { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -0.012em; margin: 0; max-width: 22ch; } .product-brand-bundle .bundle-why-copy p { margin: 0 0 18px; font-size: 16px; line-height: 1.65; max-width: 60ch; color: var(--ink); } .product-brand-bundle .bundle-why-copy p + p { color: var(--ink-muted); } /* ----- Six-template gallery ----- */ .product-brand-bundle .bundle-gallery { padding: 88px 0 64px; background: var(--paper-soft); } .product-brand-bundle .bundle-gallery .section-head { margin-bottom: 56px; } .product-brand-bundle .gallery-sub { max-width: 50ch; margin: 12px auto 0; font-size: 15px; } .product-brand-bundle .gallery-row { display: grid; gap: 40px; align-items: end; justify-items: center; margin: 0; } .product-brand-bundle .gallery-row-primary { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 56px; } .product-brand-bundle .gallery-row-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 880px; margin-inline: auto; } .product-brand-bundle .gallery-item { width: 100%; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; } .product-brand-bundle .gallery-item-featured { transform: translateY(-12px); } .product-brand-bundle .gallery-art { width: 100%; max-width: 320px; } .product-brand-bundle .gallery-item-small .gallery-art { max-width: 220px; } .product-brand-bundle .gallery-item figcaption { text-align: center; max-width: 32ch; } .product-brand-bundle .gallery-handwritten { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--ink); display: block; margin-bottom: 6px; letter-spacing: 0.005em; } .product-brand-bundle .gallery-tag { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); display: block; margin-bottom: 6px; } .product-brand-bundle .gallery-item figcaption .muted { font-size: 14px; line-height: 1.5; margin: 0; } .product-brand-bundle .gallery-divider { text-align: center; margin: 64px auto 40px; position: relative; max-width: 880px; } .product-brand-bundle .gallery-divider hr { border: 0; border-top: 1px solid var(--rule); margin: 0; } .product-brand-bundle .gallery-divider-label { display: inline-block; background: var(--paper-soft); padding: 0 18px; position: relative; top: 14px; font-size: 18px; } /* ----- Daily spotlight ----- */ .product-brand-bundle .bundle-spotlight { padding: 96px 0; } .product-brand-bundle .bundle-spotlight-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; } .product-brand-bundle .bundle-spotlight-art { max-width: 440px; margin-inline: auto; width: 100%; } .product-brand-bundle .bundle-spotlight-copy h2 { margin: 12px 0 18px; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -0.012em; max-width: 22ch; } .product-brand-bundle .bundle-spotlight-copy p { margin: 0 0 22px; max-width: 56ch; font-size: 16px; line-height: 1.6; } .product-brand-bundle .spotlight-points { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 12px; } .product-brand-bundle .spotlight-points li { display: grid; grid-template-columns: 32px 1fr; align-items: baseline; column-gap: 10px; font-size: 15px; line-height: 1.55; color: var(--ink); } .product-brand-bundle .spotlight-points .num { font-family: var(--serif); font-style: italic; color: var(--ink-muted); } /* ----- Per-device deep-dive ----- */ .product-brand-bundle .device-section { padding: 88px 0; background: var(--paper-soft); border-top: 1px solid var(--rule); } .product-brand-bundle .device-section + .device-section { border-top: 0; } .product-brand-bundle .device-section-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; } .product-brand-bundle .device-section-art { max-width: 420px; width: 100%; margin-inline: auto; } .product-brand-bundle .device-section-copy h2 { margin: 12px 0 14px; font-size: clamp(26px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.012em; max-width: 22ch; } .product-brand-bundle .device-section-copy .device-specs { font-size: 13px; letter-spacing: 0.02em; margin: 0 0 18px; } .product-brand-bundle .device-section-copy p { margin: 0 0 14px; max-width: 56ch; line-height: 1.6; } /* ----- File specs ----- */ .product-brand-bundle .bundle-specs { padding: 96px 0; } .product-brand-bundle .bundle-specs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 48px; margin-top: 36px; border-top: 1px solid var(--rule); padding-top: 36px; } .product-brand-bundle .bundle-spec .spec-label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 6px; } .product-brand-bundle .bundle-spec .spec-value { font-family: var(--serif); font-size: 19px; line-height: 1.3; color: var(--ink); } /* ----- Bundle vs single ----- */ .product-brand-bundle .bundle-vs-single { padding: 96px 0; background: var(--paper-soft); } .product-brand-bundle .bvs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; margin-top: 44px; align-items: stretch; } .product-brand-bundle .bvs-card { background: var(--paper); border-radius: var(--radius); padding: 32px; display: flex; flex-direction: column; gap: 18px; border: 1px solid var(--rule); } .product-brand-bundle .bvs-card-featured { background: var(--ink); color: var(--paper-soft); border-color: var(--ink); } .product-brand-bundle .bvs-card header { display: flex; flex-direction: column; gap: 6px; } .product-brand-bundle .bvs-tag { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); } .product-brand-bundle .bvs-card-featured .bvs-tag { color: var(--rule); } .product-brand-bundle .bvs-price { font-family: var(--serif); font-size: 44px; line-height: 1; margin-top: 6px; } .product-brand-bundle .bvs-strike { font-size: 18px; color: var(--rule); text-decoration: line-through; text-decoration-color: currentColor; margin-left: 6px; } .product-brand-bundle .bvs-card-featured .bvs-strike { color: rgba(247, 246, 242, 0.55); } .product-brand-bundle .bvs-saving { font-size: 13px; color: var(--ink-muted); margin: 4px 0 0; } .product-brand-bundle .bvs-card-featured .bvs-saving { color: rgba(247, 246, 242, 0.7); } .product-brand-bundle .bvs-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .product-brand-bundle .bvs-list li { display: grid; grid-template-columns: 28px 1fr; column-gap: 8px; align-items: baseline; font-size: 14.5px; line-height: 1.5; } .product-brand-bundle .bvs-list .num { font-family: var(--serif); font-style: italic; color: var(--ink-muted); } .product-brand-bundle .bvs-card-featured .bvs-list .num { color: var(--rule); } .product-brand-bundle .bvs-card .btn, .product-brand-bundle .bvs-card .btn-ghost { margin-top: auto; align-self: flex-start; } .product-brand-bundle .bvs-card-featured .btn { background: var(--paper-soft); color: var(--ink); border-color: var(--paper-soft); } /* ----- Final CTA ----- */ .product-brand-bundle .bundle-final-cta { padding: 96px 0 120px; } .product-brand-bundle .bundle-final-card { background: var(--ink); color: var(--paper-soft); border-radius: var(--radius); padding: 56px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: center; } .product-brand-bundle .bundle-final-card .eyebrow { color: var(--rule); margin-bottom: 12px; } .product-brand-bundle .bundle-final-card h2 { margin: 0 0 12px; color: var(--paper-soft); font-size: clamp(32px, 3.4vw, 48px); line-height: 1.05; } .product-brand-bundle .bundle-final-card p { margin: 0; color: rgba(247, 246, 242, 0.75); font-size: 16px; max-width: 36ch; } .product-brand-bundle .bundle-final-buy { display: flex; flex-direction: column; gap: 14px; } .product-brand-bundle .bundle-final-buy .price { font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--paper-soft); } .product-brand-bundle .bundle-final-buy .price-strike { color: rgba(247, 246, 242, 0.6); text-decoration: line-through; text-decoration-color: rgba(247, 246, 242, 0.4); font-size: 13px; } .product-brand-bundle .bundle-final-buy .btn { background: var(--paper-soft); color: var(--ink); border-color: var(--paper-soft); align-self: stretch; justify-content: center; } /* ----- Mobile breakpoints ----- */ @media (max-width: 1080px) { .product-brand-bundle .bundle-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } .product-brand-bundle .bundle-hero-fan { gap: 0; } .product-brand-bundle .bundle-why-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } .product-brand-bundle .bundle-spotlight-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } .product-brand-bundle .device-section-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } .product-brand-bundle .bundle-specs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .product-brand-bundle .bvs-grid { grid-template-columns: minmax(0, 1fr); } .product-brand-bundle .bundle-final-card { grid-template-columns: minmax(0, 1fr); padding: 40px; gap: 32px; } .product-brand-bundle .trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .product-brand-bundle { padding: 32px 0 0; } .product-brand-bundle .bundle-hero { padding: 0 0 56px; } .product-brand-bundle .bundle-hero-fan { grid-template-columns: minmax(0, 1fr); gap: 32px; } .product-brand-bundle .fan-left, .product-brand-bundle .fan-right { transform: none; } .product-brand-bundle .gallery-row-primary, .product-brand-bundle .gallery-row-notes { grid-template-columns: minmax(0, 1fr); gap: 48px; } .product-brand-bundle .gallery-item-featured { transform: none; } .product-brand-bundle .bundle-specs-grid { grid-template-columns: minmax(0, 1fr); } .product-brand-bundle .trust-list { grid-template-columns: minmax(0, 1fr); gap: 12px; } .product-brand-bundle .bundle-final-card { padding: 32px 24px; } .product-brand-bundle .device-section { padding: 56px 0; } .product-brand-bundle .bundle-why, .product-brand-bundle .bundle-spotlight, .product-brand-bundle .bundle-specs, .product-brand-bundle .bundle-vs-single, .product-brand-bundle .bundle-final-cta { padding: 64px 0; } } /* ——— Niche hub — small bundle CTA ——— */ .hub-cta-card { background: var(--paper-soft); border-radius: var(--radius); padding: 40px 44px; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; } .hub-cta-card h3 { margin: 6px 0 6px; } .hub-cta-card p { color: var(--ink-muted); margin: 0; max-width: 52ch; } .hub-cta-buy { display: flex; align-items: center; gap: 20px; white-space: nowrap; } .hub-cta-buy .price { font-family: var(--serif); font-size: 26px; } @media (max-width: 760px) { .hub-cta-card { grid-template-columns: 1fr; padding: 28px; } .hub-cta-buy { justify-content: space-between; } } /* ——— Hub pillar content + generic page body ——— */ .hub-pillar { max-width: 780px; padding-top: 32px; padding-bottom: 48px; font-size: 17px; line-height: 1.7; } .hub-pillar p { max-width: 64ch; margin: 0 0 1.2em; } .hub-pillar h2 { font-family: var(--serif); font-size: 32px; margin: 2em 0 0.6em; line-height: 1.2; } .hub-pillar h3 { font-family: var(--serif); font-size: 24px; margin: 1.6em 0 0.5em; line-height: 1.25; } .page-body { max-width: 780px; padding-top: 24px; padding-bottom: 96px; font-size: 17px; line-height: 1.7; } .page-body p { max-width: 64ch; margin: 0 0 1.2em; } .page-body h2 { font-family: var(--serif); font-size: 32px; margin: 2em 0 0.6em; line-height: 1.2; } .page-body h3 { font-family: var(--serif); font-size: 24px; margin: 1.6em 0 0.5em; line-height: 1.25; } .page-body .article-lede { font-family: var(--serif); font-size: clamp(22px, 2vw, 28px); line-height: 1.35; color: var(--ink); margin: 0 0 1.6em; max-width: 50ch; } /* ——— Article: full-width head + hero ——— */ .article-head-wrap { padding-top: 48px; padding-bottom: 0; } .article-head-wrap .article-head { margin: 24px 0 40px; max-width: 72ch; } .article-head-wrap .article-head h1 { font-family: var(--serif); font-size: clamp(40px, 5vw, 72px); letter-spacing: -0.01em; line-height: 1.02; margin: 12px 0 20px; } .article-head-wrap .article-lede { font-family: var(--serif); font-size: clamp(22px, 2vw, 28px); line-height: 1.35; color: var(--ink); margin: 0 0 24px; max-width: 48ch; } .article-head-wrap .article-meta { display: flex; gap: 14px; align-items: center; color: var(--ink-muted); font-size: 13px; } .article-head-wrap .article-meta p { margin: 0; } .article-head-wrap .article-meta .dot { width: 3px; height: 3px; background: var(--ink-muted); border-radius: 50%; } .article-hero-wrap { padding-top: 0; padding-bottom: 64px; } .article-hero-ph { aspect-ratio: 16 / 7; width: 100%; border-radius: var(--radius); } /* ——— Breadcrumb ——— */ .breadcrumb { display: flex; gap: 10px; align-items: center; font-size: 12.5px; color: var(--ink-muted); margin: 0 0 24px; } .breadcrumb a { color: var(--ink-muted); } .breadcrumb a:hover { color: var(--ink); } .breadcrumb .sep { opacity: .5; } /* ——— Pull quote ——— */ .pull-quote { margin: 2.4em 0; padding: 28px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); text-align: center; } .pull-quote .quote-mark { font-family: var(--serif); font-size: 72px; line-height: 0.6; color: var(--rule); margin: 0 0 8px; } .pull-quote .quote-body { font-size: clamp(22px, 2.3vw, 30px); line-height: 1.3; max-width: 30ch; margin: 0 auto; color: var(--ink); } .pull-quote .quote-credit { margin: 14px 0 0; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); } /* ——— Email signup card (variant B from handoff) ——— Lead-magnet card: paper-soft surface, flat SVG planner thumbnail, eyebrow + serif headline + sub + pill input + format strip. Two layouts share the same .newsletter-card base; --inline runs side-by-side in the body, --sidebar stacks for the 320px sidebar. */ .newsletter-card { background: var(--paper-soft); border-radius: var(--radius); padding: 40px 44px 36px; margin: 56px 0; font-family: var(--sans); } .newsletter-card__eyebrow { margin: 0 0 14px; font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 12px; } .newsletter-card__eyebrow em { font-family: var(--serif); font-style: italic; letter-spacing: 0; text-transform: none; font-size: 13px; color: var(--ink-muted); } .newsletter-card__dot { color: var(--rule); } .newsletter-card__title { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); margin: 0; max-width: 20ch; } .newsletter-card__sub { font-size: 14.5px; line-height: 1.6; color: var(--ink-muted); margin: 14px 0 22px; max-width: 46ch; } .newsletter-card__field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 6px; align-items: center; transition: border-color var(--dur-fast) var(--ease); } .newsletter-card__field:focus-within { border-color: var(--ink); } .newsletter-card__field input { background: transparent; border: 0; padding: 10px 14px; font: inherit; font-size: 14px; color: var(--ink); outline: none; min-width: 0; } .newsletter-card__field input::placeholder { color: var(--ink-muted); } .newsletter-card__field .btn { padding: 10px 16px 10px 18px; font-size: 13px; border-radius: var(--radius); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; } .newsletter-card__field .btn .arrow { transition: transform var(--dur-fast) var(--ease); } .newsletter-card__field .btn:hover .arrow { transform: translateX(3px); } .newsletter-card__format { margin: 14px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); } .newsletter-card__format .sep, .newsletter-card__format .dot { color: var(--rule); } .newsletter-card__format .dot { margin: 0 2px; } /* Flat planner thumbnail (shared by inline body variant) */ .planner-thumb { position: relative; width: 100%; max-width: 220px; aspect-ratio: 4 / 5; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; } .planner-thumb svg { display: block; width: 100%; height: 100%; color: var(--ink-muted); } .planner-thumb .thumb-rule { stroke: currentColor; stroke-width: 0.6; opacity: 0.55; } .planner-thumb .thumb-title { font-family: var(--serif); font-size: 14px; fill: var(--ink); letter-spacing: -0.3px; } .planner-thumb .thumb-mono { font-family: var(--mono); font-size: 7px; letter-spacing: 1.2px; fill: currentColor; } .planner-thumb .thumb-divider { stroke: currentColor; stroke-width: 0.6; opacity: 0.6; } .planner-thumb .thumb-row text { font-family: var(--mono); font-size: 7px; letter-spacing: 1.2px; fill: currentColor; opacity: 0.75; } .planner-thumb .thumb-row line { stroke: currentColor; stroke-width: 0.5; opacity: 0.35; } .planner-thumb .thumb-pen { stroke: var(--ink); stroke-width: 0.9; opacity: 0.85; } .planner-thumb .thumb-pen-fade { opacity: 0.55; } .planner-thumb .thumb-pen-fill { fill: var(--ink); stroke: none; } .planner-thumb .thumb-foot { font-family: var(--mono); font-size: 6.5px; letter-spacing: 1.4px; fill: currentColor; opacity: 0.6; } .planner-thumb__corner { position: absolute; top: 0; right: 0; width: 28px; height: 28px; background: linear-gradient(225deg, rgba(188,185,175,0.18), transparent 70%); pointer-events: none; } /* —— Inline (body) variant: side-by-side layout, faithful to handoff —— */ .newsletter-card--inline { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 36px; align-items: center; max-width: 720px; padding: 32px 36px 28px; margin: 40px 0; } .newsletter-card--inline .newsletter-card__thumb-wrap { width: 156px; display: flex; justify-content: center; } /* Mobile: stack thumbnail above copy and stack the form too. */ @media (max-width: 720px) { .newsletter-card { padding: 28px; margin: 36px 0; } .newsletter-card--inline { grid-template-columns: minmax(0, 1fr); gap: 24px; } .newsletter-card--inline .newsletter-card__thumb-wrap { width: 200px; justify-content: flex-start; } .newsletter-card--inline .newsletter-card__title { font-size: 26px; } .newsletter-card--inline .newsletter-card__field { grid-template-columns: minmax(0, 1fr); gap: 6px; } .newsletter-card--inline .newsletter-card__field .btn { width: 100%; justify-content: center; } } /* —— Sidebar variant: narrow, no illustration, form inline like body —— */ .newsletter-card--sidebar { padding: 22px 20px; margin: 24px 0 0; } .newsletter-card--sidebar .newsletter-card__eyebrow { font-size: 10px; letter-spacing: 0.13em; gap: 8px; margin-bottom: 10px; } .newsletter-card--sidebar .newsletter-card__eyebrow em { font-size: 12px; } .newsletter-card--sidebar .newsletter-card__title { font-size: 21px; line-height: 1.18; max-width: none; } .newsletter-card--sidebar .newsletter-card__sub { font-size: 13px; margin: 8px 0 14px; max-width: none; } .newsletter-card--sidebar .newsletter-card__field { grid-template-columns: minmax(0, 1fr) auto; gap: 4px; padding: 4px; } .newsletter-card--sidebar .newsletter-card__field input { padding: 8px 10px; font-size: 13px; } .newsletter-card--sidebar .newsletter-card__field .btn { padding: 8px 11px; font-size: 12px; gap: 6px; } .newsletter-card--sidebar .newsletter-card__field .btn .arrow { width: 12px; height: 12px; } .newsletter-card--sidebar .newsletter-card__format { font-size: 9.5px; gap: 8px; margin-top: 12px; } /* Article-body scoped overrides. The post-content area defines `.article .article-body p { margin: 0 0 1.2em }` and `.article .article-body h3 { margin: 1.6em 0 0.5em; font-size: 24px }`, which would otherwise add ~47px of empty space between our card's eyebrow and title and shrink the headline. These rules pin the card's inner spacing back to its design. */ .article-body .newsletter-card p, .article-body .newsletter-card h3 { margin: 0; } .article-body .newsletter-card h3.newsletter-card__title { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); } .article-body .newsletter-card p.newsletter-card__eyebrow { margin: 0 0 14px; } .article-body .newsletter-card p.newsletter-card__sub { margin: 14px 0 22px; } .article-body .newsletter-card p.newsletter-card__format { margin: 14px 0 0; } @media (max-width: 720px) { .article-body .newsletter-card h3.newsletter-card__title { font-size: 26px; } } /* ——— Author byline ——— */ .author-byline { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: flex-start; margin: 48px 0; padding: 24px 0; border-top: 1px solid var(--rule); } .author-byline .author-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--paper-soft); display: grid; place-items: center; color: var(--ink-muted); } .author-byline .author-avatar svg { width: 28px; height: 28px; } .author-byline .author-meta .eyebrow { margin: 0 0 8px; } .author-byline .author-note { font-size: 17px; line-height: 1.45; margin: 0; color: var(--ink); max-width: 56ch; } /* ——— Post tags ——— */ .post-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 40px 0 8px; } .post-tags .tags-label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); margin-right: 8px; } .tag-chip { padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px; font-size: 12.5px; color: var(--ink-muted); transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .tag-chip:hover { color: var(--ink); border-color: var(--ink); } /* ——— TOC ——— */ .post-toc { background: var(--paper-soft); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 24px; } .post-toc .eyebrow { margin: 0 0 14px; } .toc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .toc-list li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; font-size: 14px; line-height: 1.4; } .toc-list .n { font-family: var(--serif); font-style: italic; color: var(--ink-muted); } .toc-list a { color: var(--ink); border-bottom: 1px solid transparent; transition: border-color var(--dur-fast) var(--ease); padding-bottom: 1px; } .toc-list a:hover { border-bottom-color: var(--ink); } /* ——— Related posts — reuses .posts grid tokens ——— */ .related-posts { padding-top: 72px; padding-bottom: 32px; border-top: 1px solid var(--rule); } .related-posts .posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 32px; } @media (max-width: 900px) { .related-posts .posts { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .related-posts .posts { grid-template-columns: 1fr; } } /* ——— Next / prev ——— */ .next-prev { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 32px 0 0; border-top: 1px solid var(--rule); padding-top: 32px; } .np-card { display: flex; align-items: center; gap: 16px; padding: 20px 22px; background: var(--paper-soft); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: transform var(--dur-fast) var(--ease); } .np-card:hover { transform: translateY(-2px); } .np-card .eyebrow { margin: 0 0 4px; } .np-card .eyebrow.right { text-align: right; } .np-title { font-family: var(--serif); font-size: 18px; line-height: 1.25; } .np-arrow { width: 36px; height: 36px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; color: var(--ink-muted); flex-shrink: 0; } .np-prev { text-align: left; } .np-next { text-align: right; grid-template-columns: 1fr 36px; } .np-next { display: grid; grid-template-columns: 1fr auto; } @media (max-width: 720px) { .next-prev { grid-template-columns: 1fr; } .np-next { grid-template-columns: 1fr auto; } } /* ——— Refund note (slim) ——— */ .refund-note-slim { display: flex; align-items: flex-start; gap: 10px; margin: 32px 0 0; padding: 14px 18px; background: var(--paper-soft); border-radius: var(--radius); font-size: 13.5px; color: var(--ink-muted); line-height: 1.5; } .refund-note-slim .mark { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); flex-shrink: 0; margin-top: 6px; } /* ——— Longform template ——— */ .longform-hero { padding: 72px 0 32px; border-bottom: 1px solid var(--rule); margin-bottom: 64px; } .longform-title { font-family: var(--serif); font-size: clamp(44px, 5.6vw, 84px) !important; letter-spacing: -0.01em; line-height: 1.02; margin: 16px 0 24px; max-width: 18ch; } .longform-lede { font-family: var(--serif); font-size: clamp(22px, 2vw, 28px); line-height: 1.35; max-width: 52ch; color: var(--ink); margin: 0 0 24px; } .longform-meta { display: flex; gap: 14px; align-items: center; color: var(--ink-muted); font-size: 13px; } .longform-meta p { margin: 0; } .longform-meta .dot { width: 3px; height: 3px; background: var(--ink-muted); border-radius: 50%; } .longform { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 80px; width: min(calc(var(--wrap-max) - 2 * var(--wrap-pad)), calc(100vw - 2 * var(--wrap-pad))); box-sizing: border-box; padding-bottom: 96px; } .longform-toc { position: sticky; top: 96px; align-self: start; } .longform-body { max-width: 68ch; font-size: 18px; line-height: 1.75; } .longform-body p.drop-cap::first-letter { font-family: var(--serif); font-size: 5.6em; float: left; line-height: 0.9; margin: 6px 12px 0 0; color: var(--ink); } @media (max-width: 960px) { .longform { grid-template-columns: 1fr; gap: 32px; } .longform-toc { position: static; } } /* ——— Product hero ——— */ .product-hero { padding: 48px 0 96px; } .product-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 80px; align-items: start; } .product-gallery { min-width: 0; } .product-buy { min-width: 0; position: sticky; top: 96px; } .product-gallery .gallery-main { aspect-ratio: 4/5; width: 100%; } .product-gallery .gallery-thumbs { margin-top: 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .product-gallery .gallery-thumbs .ph { aspect-ratio: 1 / 1; } .product-buy .eyebrow { margin-bottom: 14px; } .product-buy h1 { font-family: var(--serif); font-size: clamp(40px, 4.4vw, 62px); line-height: 1.02; margin: 0 0 18px; } .product-buy .product-lede { color: var(--ink); font-size: 17px; line-height: 1.55; margin: 0 0 28px; max-width: 48ch; } .product-price-row { display: flex; align-items: baseline; gap: 14px; padding-top: 24px; margin: 0 0 20px; border-top: 1px solid var(--rule); } .product-price { font-family: var(--serif); font-size: 36px; line-height: 1; } .product-price-note { font-size: 13px; color: var(--ink-muted); } .product-variant { margin: 0 0 20px; } .product-variant .label { display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 10px; } .variant-chips { display: flex; flex-wrap: wrap; gap: 8px; } .variant-chips .chip { padding: 10px 14px; border: 1px solid var(--rule); border-radius: 999px; font-size: 13px; color: var(--ink); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .variant-chips .chip input { position: absolute; opacity: 0; pointer-events: none; } .variant-chips .chip.selected, .variant-chips .chip:hover { border-color: var(--ink); background: var(--paper-soft); } .product-actions { display: flex; gap: 10px; align-items: center; margin: 28px 0 20px; } .btn-lg { padding: 16px 28px; font-size: 14px; flex: 1; justify-content: center; } .product-promises { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--ink-muted); } .product-promises li { display: flex; align-items: center; gap: 10px; } .product-promises .mark { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); flex-shrink: 0; } @media (max-width: 980px) { .product-hero-grid { grid-template-columns: 1fr; gap: 40px; } .product-buy { position: static; } } /* ——— Product: inside the bundle ——— */ .product-inside .inside-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 24px; } .inside-item .num { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--ink-muted); margin-bottom: 8px; } .inside-item h4 { font-family: var(--serif); font-size: 22px; line-height: 1.2; margin: 0 0 8px; } .inside-item p { color: var(--ink-muted); font-size: 14px; line-height: 1.55; margin: 0; } @media (max-width: 900px) { .product-inside .inside-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .product-inside .inside-grid { grid-template-columns: 1fr; } } /* ——— Product: built for ——— */ .product-built-for .device-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .device { text-align: left; } .device .device-ph { aspect-ratio: 4/3; margin-bottom: 16px; } .device h4 { font-family: var(--serif); font-size: 22px; margin: 0 0 6px; } .device p { color: var(--ink-muted); font-size: 13.5px; line-height: 1.55; margin: 0; } @media (max-width: 820px) { .product-built-for .device-grid { grid-template-columns: 1fr; gap: 24px; } } /* ——— Product: specs table ——— */ .product-specs .specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; margin: 0; padding: 0; } .product-specs .spec { display: grid; grid-template-columns: 1fr 1.4fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--rule); } .product-specs dt { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); padding-top: 4px; } .product-specs dd { margin: 0; font-size: 15px; color: var(--ink); } @media (max-width: 800px) { .product-specs .specs { grid-template-columns: 1fr; gap: 0; } } /* ——— Product: preview grid ——— */ .product-preview .preview-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; } .preview { margin: 0; grid-column: span 4; } .preview.a { grid-column: span 7; } .preview.b { grid-column: span 5; } .preview.c { grid-column: span 4; } .preview.d { grid-column: span 4; } .preview.e { grid-column: span 4; } .preview.f { grid-column: span 12; } .preview .ph { aspect-ratio: 4/3; } .preview.f .ph { aspect-ratio: 21/9; } .preview figcaption { display: flex; gap: 10px; align-items: baseline; margin: 14px 0 0; font-size: 13px; color: var(--ink-muted); } .preview figcaption .n { font-family: var(--serif); font-style: italic; color: var(--ink-muted); } @media (max-width: 900px) { .product-preview .preview-grid { grid-template-columns: 1fr 1fr; } .preview, .preview.a, .preview.b, .preview.c, .preview.d, .preview.e, .preview.f { grid-column: span 1; } } /* ——— Product: testimonial (single) ——— */ .product-testimonial { padding: 96px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .studio-quote { max-width: 56ch; margin: 0 auto; text-align: center; } .studio-quote p { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.3; margin: 0; } .studio-quote footer { margin-top: 20px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); } .studio-quote footer .n { font-family: var(--serif); font-style: italic; } /* ——— Product: how to use ——— */ .product-how-to-use .how-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; } .how-steps .step { text-align: center; padding: 0 12px; } .how-steps .step-n { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--ink-muted); margin: 0 0 10px; } .how-steps .step-icon { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; background: var(--paper-soft); display: grid; place-items: center; color: var(--ink); } .how-steps .step-icon svg { width: 28px; height: 28px; } .how-steps .step h4 { font-family: var(--serif); font-size: 22px; margin: 0 0 8px; line-height: 1.2; } .how-steps .step p { color: var(--ink-muted); font-size: 14px; line-height: 1.55; margin: 0; } @media (max-width: 820px) { .product-how-to-use .how-steps { grid-template-columns: 1fr; gap: 32px; } } /* ——— Product: companions — reuses .products grid ——— */ .product-companions .products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 56px 32px; } @media (max-width: 1100px) { .product-companions .products { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .product-companions .products { grid-template-columns: 1fr 1fr; gap: 40px 24px; } } @media (max-width: 560px) { .product-companions .products { grid-template-columns: 1fr; } } /* ——— Product: guarantee strip ——— */ .product-guarantee { padding: 64px 0; background: var(--paper-soft); } .product-guarantee .guarantee-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .guarantee { text-align: center; padding: 0 16px; } .guarantee .icon { width: 44px; height: 44px; margin: 0 auto 16px; color: var(--ink); display: grid; place-items: center; } .guarantee .icon svg { width: 28px; height: 28px; } .guarantee h4 { font-family: var(--serif); font-size: 20px; margin: 0 0 8px; } .guarantee p { color: var(--ink-muted); font-size: 14px; line-height: 1.55; margin: 0; max-width: 36ch; margin-left: auto; margin-right: auto; } @media (max-width: 820px) { .product-guarantee .guarantee-grid { grid-template-columns: 1fr; gap: 32px; } } /* ——— Product: sticky buy (bottom) ——— */ .product-sticky-buy { position: fixed; left: 0; right: 0; bottom: -100%; background: var(--paper); border-top: 1px solid var(--rule); padding: 14px 0; transition: bottom var(--dur) var(--ease); z-index: 40; } .product-sticky-buy.is-visible { bottom: 0; } .sticky-grid { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .sticky-info { display: flex; align-items: baseline; gap: 14px; } .sticky-info .name { font-family: var(--serif); font-size: 18px; } .sticky-info .price { font-size: 14px; color: var(--ink-muted); } /* ——— Editorial product template ——— */ .product-editorial-hero { padding: 72px 0 56px; border-bottom: 1px solid var(--rule); } .product-editorial-hero .wrap > * + * { margin-top: 48px; } .editorial-head { max-width: 62ch; } .editorial-title { font-family: var(--serif); font-size: clamp(48px, 6vw, 96px) !important; letter-spacing: -0.01em; line-height: 1.0; margin: 16px 0 24px; max-width: 14ch; } .editorial-lede { font-family: var(--serif); font-size: clamp(22px, 2vw, 28px); line-height: 1.35; max-width: 52ch; margin: 0; } .editorial-hero-ph { aspect-ratio: 16 / 8; width: 100%; margin-top: 48px; } .product-editorial-intro { padding: 96px 0; } .editorial-intro-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; } .editorial-intro-grid .eyebrow { margin-bottom: 18px; } .editorial-intro-grid h2 { font-family: var(--serif); font-size: clamp(32px, 3.6vw, 56px); line-height: 1.05; margin: 0; max-width: 16ch; } .editorial-intro-copy { font-size: 18px; line-height: 1.65; } .editorial-intro-copy p { margin: 0 0 1em; max-width: 52ch; } @media (max-width: 900px) { .editorial-intro-grid { grid-template-columns: 1fr; gap: 32px; } } .product-editorial-buy { padding: 32px 0 96px; } .editorial-buy-card { background: var(--paper-soft); border-radius: var(--radius); padding: 56px 64px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; } .editorial-buy-card h2 { font-family: var(--serif); font-size: clamp(28px, 3vw, 42px); line-height: 1.1; margin: 10px 0 12px; max-width: 22ch; } .editorial-buy-card p { color: var(--ink-muted); margin: 0; max-width: 46ch; } .editorial-buy-actions { display: flex; flex-direction: column; gap: 12px; } .editorial-buy-actions .btn, .editorial-buy-actions .btn-ghost { justify-content: center; text-align: center; } @media (max-width: 820px) { .editorial-buy-card { grid-template-columns: 1fr; padding: 32px; } } /* ———————————————————————————————————————————————————— Chrome & overlays — shared primitives ———————————————————————————————————————————————————— */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Scrim (shared by cart drawer + mobile nav). */ .cart-drawer__scrim, .mobile-nav__scrim { position: fixed; inset: 0; background: rgba(39, 38, 34, 0.22); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur); z-index: 90; } .is-open > .cart-drawer__scrim, .is-open > .mobile-nav__scrim { opacity: 1; visibility: visible; transition: opacity var(--dur) var(--ease); } /* Panel: base for drawers. --right and --left set position + transform. */ .panel { position: fixed; top: 0; height: 100vh; height: 100dvh; background: var(--paper); display: flex; flex-direction: column; z-index: 100; overflow-y: auto; overscroll-behavior: contain; transition: transform var(--dur-slow) var(--ease); visibility: hidden; } .is-open > .panel { visibility: visible; } .panel--right { right: 0; border-left: 1px solid rgba(39, 38, 34, 0.08); transform: translateX(100%); } .panel--left { left: 0; border-right: 1px solid rgba(39, 38, 34, 0.08); transform: translateX(-100%); } .is-open > .panel--right, .is-open > .panel--left { transform: translateX(0); } .panel__close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; display: grid; place-items: center; background: transparent; border: 0; border-radius: 999px; color: var(--ink-muted); cursor: pointer; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); z-index: 2; } .panel__close:hover { color: var(--ink); background: var(--paper-soft); } .panel__close svg { width: 18px; height: 18px; } body.is-overlay-open { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .panel, .panel--right, .panel--left { transition: opacity var(--dur-fast) var(--ease); transform: none !important; opacity: 0; } .is-open > .panel { opacity: 1; } .cart-drawer__scrim, .mobile-nav__scrim { transition: opacity var(--dur-fast) var(--ease); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* Announcement bar */ .announce-bar { position: relative; background: var(--ink); color: var(--paper-soft); font-size: 12.5px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.4; padding: 10px 48px; text-align: center; z-index: 60; max-height: 120px; overflow: hidden; transition: max-height var(--dur) var(--ease), padding var(--dur) var(--ease), opacity var(--dur) var(--ease); } .announce-bar.is-dismissed { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; pointer-events: none; } .announce-bar a { color: var(--paper-soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(247, 246, 242, 0.4); transition: text-decoration-color var(--dur-fast) var(--ease); } .announce-bar a:hover { text-decoration-color: var(--paper-soft); } /* Sheen sweep across announcement copy. Dim base + bright peak gives the moving highlight. */ .announce-bar .announce-shine { display: inline-block; background-image: linear-gradient( 100deg, rgba(247, 246, 242, 0.32) 0%, rgba(247, 246, 242, 0.32) 38%, rgba(255, 255, 255, 1) 50%, rgba(247, 246, 242, 0.32) 62%, rgba(247, 246, 242, 0.32) 100% ); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: announce-shine 5s linear infinite; } @keyframes announce-shine { 0% { background-position: 200% 0; } 100% { background-position: -120% 0; } } [data-theme="dark"] .announce-bar .announce-shine { background-image: linear-gradient( 100deg, rgba(31, 29, 23, 0.38) 0%, rgba(31, 29, 23, 0.38) 38%, rgba(0, 0, 0, 1) 50%, rgba(31, 29, 23, 0.38) 62%, rgba(31, 29, 23, 0.38) 100% ); } @media (prefers-reduced-motion: reduce) { .announce-bar .announce-shine { animation: none; background: none; -webkit-text-fill-color: var(--paper-soft); color: var(--paper-soft); } } .announce-close { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); width: 28px; height: 28px; display: grid; place-items: center; background: transparent; border: 0; color: var(--paper-soft); opacity: 0.55; cursor: pointer; border-radius: 999px; transition: opacity var(--dur-fast) var(--ease); } .announce-close:hover { opacity: 1; } .announce-close svg { width: 14px; height: 14px; } /* Header sits under announcement; sticky offset handled via body class. */ body.has-announce .site-header { top: 0; } /* ——— Header search ——— */ .nav-icon.nav-search { background: transparent; border: 0; cursor: pointer; } .header-search { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); padding: 18px 48px 22px; border-bottom: 1px solid rgba(39, 38, 34, 0.08); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur); z-index: 55; } .header-search.is-open { transform: translateY(0); opacity: 1; visibility: visible; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .header-search-inner { max-width: var(--wrap-max); margin: 0 auto; display: flex; flex-direction: column; gap: 8px; } .header-search__input { width: 100%; height: 48px; background: var(--paper-soft); border: 0; border-bottom: 1px solid rgba(39, 38, 34, 0.12); border-radius: 0; padding: 0 16px; font: inherit; font-size: 15px; color: var(--ink); outline: none; } .header-search__input::placeholder { color: var(--ink-muted); } .header-search__input:focus { border-bottom-color: var(--ink); } .header-search__hint { font-size: 12px; color: var(--ink-muted); margin: 0; letter-spacing: 0.02em; } @media (max-width: 720px) { .header-search { padding: 16px var(--wrap-pad-sm) 18px; } } /* ——— Mobile nav toggle (hamburger) ——— */ .nav-toggle { display: none; width: 40px; height: 40px; background: transparent; border: 0; padding: 0; position: relative; color: var(--ink); cursor: pointer; border-radius: 999px; transition: background var(--dur-fast) var(--ease); } .nav-toggle:hover { background: var(--paper-soft); } .nav-toggle .bars { position: absolute; left: 50%; top: 50%; width: 18px; height: 12px; transform: translate(-50%, -50%); } .nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transform-origin: center; transition: transform var(--dur) var(--ease), top var(--dur) var(--ease); } .nav-toggle .bars::before { top: 2px; } .nav-toggle .bars::after { top: 8px; } .mobile-nav.is-open ~ .nav-right .nav-toggle .bars::before, body.mobile-nav-open .nav-toggle .bars::before { top: 5px; transform: rotate(45deg); } body.mobile-nav-open .nav-toggle .bars::after { top: 5px; transform: rotate(-45deg); } @media (max-width: 820px) { .nav-toggle { display: inline-grid; place-items: center; } } /* ——— Mobile nav drawer ——— */ .mobile-nav { position: fixed; inset: 0; z-index: 95; pointer-events: none; } .mobile-nav.is-open { pointer-events: auto; } .mobile-nav .panel--left { width: min(88vw, 360px); padding: 80px 32px 32px; } .mobile-nav__brand { position: absolute; top: 22px; left: 28px; } .mobile-nav__brand img { height: 22px; } /* Search field at top of drawer. */ .mobile-nav__search { position: relative; margin: 0 0 22px; } .mobile-nav__search-icon { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); color: var(--ink-muted); pointer-events: none; } .mobile-nav__search input { width: 100%; padding: 11px 14px 11px 38px; font: inherit; font-size: 14px; color: var(--ink); background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-sm); outline: 0; transition: border-color var(--dur-fast) var(--ease); } .mobile-nav__search input:focus { border-color: var(--ink); } .mobile-nav__search input::placeholder { color: var(--ink-muted); } .mobile-nav__list { list-style: none; padding: 0; margin: 0; } .mobile-nav__list > li { border-top: 1px solid rgba(39, 38, 34, 0.08); } .mobile-nav__list > li:last-child { border-bottom: 1px solid rgba(39, 38, 34, 0.08); } .mobile-nav__list a, .mobile-nav__list .group-title { display: block; padding: 18px 0; font-family: var(--serif); font-size: 20px; font-weight: 500; color: var(--ink); letter-spacing: -0.005em; line-height: 1.3; } .mobile-nav__list .group-title { color: var(--ink-muted); font-size: 11px; font-family: var(--sans); letter-spacing: 0.14em; text-transform: uppercase; padding: 22px 0 8px; font-weight: 500; } .mobile-nav__sub { list-style: none; padding: 0 0 12px; margin: 0; } .mobile-nav__sub > li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: baseline; padding: 2px 0; } .mobile-nav__sub .n { font-family: var(--serif); font-style: italic; color: var(--ink-muted); font-size: 14px; } .mobile-nav__sub a { font-family: var(--sans); font-size: 15px; padding: 4px 0; color: var(--ink); } .mobile-nav__foot { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(39, 38, 34, 0.08); display: flex; gap: 8px; align-items: center; } .mobile-nav__foot .nav-icon { width: 40px; height: 40px; } /* ——— Cart drawer ——— */ .cart-drawer { position: fixed; inset: 0; z-index: 95; pointer-events: none; } .cart-drawer.is-open { pointer-events: auto; } .cart-drawer .panel--right { width: min(420px, 96vw); } .cart-drawer__head { padding: 24px 28px 20px; border-bottom: 1px solid rgba(39, 38, 34, 0.08); flex-shrink: 0; } .cart-drawer__head .eyebrow { margin-bottom: 8px; } .cart-drawer__head h2 { font-family: var(--serif); font-size: 24px; font-weight: 400; line-height: 1.1; margin: 0; } .cart-drawer__list { list-style: none; padding: 8px 28px 20px; margin: 0; flex: 1; overflow-y: auto; } .cart-drawer__item { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(39, 38, 34, 0.08); align-items: flex-start; } .cart-drawer__item:last-child { border-bottom: 0; } .cart-drawer__item .thumb { width: 64px; height: 64px; border-radius: var(--radius); background: var(--paper-soft); position: relative; overflow: hidden; } .cart-drawer__item .thumb::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, transparent 0 8px, rgba(188, 185, 175, 0.22) 8px 9px); } .cart-drawer__item .name { font-family: var(--serif); font-size: 16px; line-height: 1.2; margin: 0 0 4px; color: var(--ink); } .cart-drawer__item .line { font-size: 12px; color: var(--ink-muted); margin: 0 0 10px; letter-spacing: 0.02em; } .cart-drawer__qty { display: inline-grid; grid-template-columns: 28px 26px 28px; align-items: center; border: 1px solid rgba(39, 38, 34, 0.12); border-radius: 999px; overflow: hidden; font-size: 13px; } .cart-drawer__qty button { height: 28px; background: transparent; border: 0; color: var(--ink-muted); cursor: pointer; display: grid; place-items: center; transition: color var(--dur-fast) var(--ease); } .cart-drawer__qty button:hover { color: var(--ink); } .cart-drawer__qty button svg { width: 12px; height: 12px; } .cart-drawer__qty .val { text-align: center; font-variant-numeric: tabular-nums; } .cart-drawer__item .price { font-size: 14px; font-variant-numeric: tabular-nums; text-align: right; } .cart-drawer__remove { grid-column: 2 / 4; justify-self: end; background: transparent; border: 0; font-size: 11.5px; color: var(--ink-muted); letter-spacing: 0.05em; cursor: pointer; padding: 0; margin-top: 4px; } .cart-drawer__remove:hover { color: var(--ink); } .cart-drawer__totals { padding: 18px 28px; border-top: 1px solid rgba(39, 38, 34, 0.1); flex-shrink: 0; } .cart-drawer__totals-row { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 0; } .cart-drawer__totals-row.subtotal { font-family: var(--serif); font-size: 20px; } .cart-drawer__totals-row .label { font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); font-family: var(--sans); font-weight: 500; } .cart-drawer__totals-row .val { font-variant-numeric: tabular-nums; } .cart-drawer__promise { margin: 12px 0 0; font-size: 12px; color: var(--ink-muted); line-height: 1.5; } .cart-drawer__actions { padding: 0 28px 28px; display: grid; gap: 8px; flex-shrink: 0; } .cart-drawer__actions .btn, .cart-drawer__actions .btn-ghost { width: 100%; justify-content: center; padding: 14px 20px; } .cart-drawer__empty { padding: 48px 28px; text-align: center; color: var(--ink-muted); } .cart-drawer__empty .icon { width: 48px; height: 48px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 999px; background: var(--paper-soft); color: var(--ink-muted); } .cart-drawer__empty .icon svg { width: 22px; height: 22px; } .cart-drawer__empty h3 { font-family: var(--serif); font-size: 22px; margin: 0 0 8px; color: var(--ink); } .cart-drawer__empty p { margin: 0 0 20px; font-size: 14px; } .cart-drawer__empty .btn-ghost { display: inline-flex; } /* ———————————————————————————————————————————————————— 404 page ———————————————————————————————————————————————————— */ .error-page { padding: 80px 0 120px; } .error-wrap { max-width: 960px; } .error-head { text-align: center; margin-bottom: 48px; } .error-head h1 { font-size: clamp(48px, 8vw, 88px); margin: 12px 0 18px; } .error-head p { max-width: 560px; margin: 0 auto; font-size: 17px; } .error-search { display: flex; gap: 10px; max-width: 560px; margin: 0 auto 64px; padding: 8px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius); } .error-search input { flex: 1; border: 0; background: transparent; font: inherit; font-size: 15px; padding: 10px 14px; color: var(--ink); outline: none; } .error-search input::placeholder { color: var(--ink-muted); } .error-search .btn { flex-shrink: 0; } .error-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; border-top: 1px solid var(--rule); padding-top: 48px; } @media (max-width: 780px) { .error-columns { grid-template-columns: 1fr; gap: 28px; } } .error-col h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 0 0 16px; letter-spacing: -0.005em; } .error-col p { margin: 0 0 16px; color: var(--ink-muted); font-size: 15px; } .link-list { list-style: none; padding: 0; margin: 0; } .link-list li { padding: 6px 0; border-bottom: 1px solid var(--rule); } .link-list li:last-child { border-bottom: 0; } .link-list a { font-size: 15px; color: var(--ink); transition: color var(--dur-fast) var(--ease); } .link-list a:hover { color: var(--ink-muted); } /* ———————————————————————————————————————————————————— Search results ———————————————————————————————————————————————————— */ .search-page { padding: 60px 0 100px; } .search-wrap { max-width: 820px; } .search-head { margin-bottom: 48px; } .search-head h1 { font-size: clamp(40px, 6vw, 64px); margin: 10px 0 24px; } .search-refine { display: flex; gap: 10px; padding: 6px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: 14px; } .search-refine input { flex: 1; border: 0; background: transparent; font: inherit; font-size: 15px; padding: 10px 14px; color: var(--ink); outline: none; } .search-meta { font-size: 14px; margin: 0; } .search-results { display: flex; flex-direction: column; gap: 32px; } .search-item { padding: 28px 0; border-bottom: 1px solid var(--rule); } .search-item:last-child { border-bottom: 0; } .search-item__kind { display: block; margin-bottom: 8px; } .search-item__title { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.15; letter-spacing: -0.005em; margin: 0 0 10px; } .search-item__title a { transition: color var(--dur-fast) var(--ease); } .search-item__title a:hover { color: var(--ink-muted); } .search-item__excerpt { margin: 0 0 10px; color: var(--ink-muted); font-size: 15px; } .search-item__date { font-size: 13px; } .search-empty { text-align: center; padding: 60px 20px; border: 1px dashed var(--rule); border-radius: var(--radius-lg); background: var(--paper-soft); } .search-empty h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; margin: 0 0 12px; } .search-empty p { max-width: 480px; margin: 0 auto 24px; font-size: 15px; } .search-empty-links { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .search-pagination { margin-top: 32px; display: flex; justify-content: center; gap: 8px; } /* ———————————————————————————————————————————————————— Help centre ———————————————————————————————————————————————————— */ .help-page { padding: 60px 0 100px; } .help-wrap { max-width: 1120px; } .help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 48px 0; } @media (max-width: 900px) { .help-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .help-grid { grid-template-columns: 1fr; } } .help-card { display: block; padding: 28px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-lg); transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .help-card:hover { transform: translateY(-2px); border-color: var(--ink); } .help-card h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 10px 0 8px; } .help-card p { margin: 0; font-size: 14px; color: var(--ink-muted); } .help-contact { padding: 40px; background: var(--ink); color: var(--paper-soft); border-radius: var(--radius-lg); text-align: center; } .help-contact h3 { font-family: var(--serif); font-weight: 400; color: var(--paper-soft); font-size: 28px; margin: 0 0 10px; } .help-contact p { margin: 0 auto 24px; max-width: 480px; color: rgba(247, 246, 242, 0.75); } .help-contact .btn { background: var(--paper-soft); color: var(--ink); } .help-contact .btn:hover { background: #fff; } /* ———————————————————————————————————————————————————— Press kit ———————————————————————————————————————————————————— */ .press-page { padding: 60px 0 100px; background: var(--paper); } .press-wrap { max-width: 1000px; margin: 0 auto; padding: 0 24px; } .press-head { max-width: 680px; margin-bottom: 48px; } .press-head .display { margin: .3em 0 .4em; } .press-nav { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-top: 24px; } .press-nav a { text-decoration: none; color: rgba(39,38,34,.65); font-size: .9rem; border-bottom: 1px solid transparent; padding: 4px 0; } .press-nav a:hover { color: var(--ink); border-bottom-color: var(--ink); } .press-section { margin-bottom: 56px; scroll-margin-top: 96px; } .press-section-head { max-width: 640px; margin-bottom: 20px; } .press-section-head h2 { font-size: 1.55rem; margin: 0 0 .3em; } .press-quote-card { background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius); padding: 22px 26px; margin-bottom: 14px; } .press-quote-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; } .press-quote-card p { margin: 0; line-height: 1.6; font-size: 1rem; } .press-copy { font-family: var(--mono, monospace); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: 999px; padding: 6px 14px; cursor: pointer; transition: background .15s ease, color .15s ease; } .press-copy:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } .press-copy.is-copied { background: var(--ink); color: var(--paper); border-color: var(--ink); } .press-founder-card { display: grid; grid-template-columns: 240px 1fr; gap: 28px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius); padding: 28px; overflow: hidden; } @media (max-width: 640px) { .press-founder-card { grid-template-columns: 1fr; } } .press-founder-photo { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); } .press-founder-photo .tag { font-family: var(--mono, monospace); font-size: .78rem; color: rgba(39,38,34,.5); } .press-founder-body h3 { margin: 0 0 6px; font-size: 1.3rem; } .press-founder-meta { list-style: none; padding: 0; margin: 14px 0 18px; display: grid; gap: 6px; font-size: .95rem; } .press-founder-meta strong { font-weight: 500; color: var(--ink); } .press-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-soft); overflow: hidden; margin: 0; } @media (max-width: 640px) { .press-facts { grid-template-columns: 1fr; } } .press-fact { padding: 18px 22px; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); display: grid; gap: 4px; margin: 0; } .press-fact:nth-child(2n) { border-right: none; } @media (max-width: 640px) { .press-fact { border-right: none; } } .press-fact dt { font-family: var(--mono, monospace); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(39,38,34,.6); } .press-fact dd { margin: 0; font-size: 1rem; line-height: 1.45; } .press-logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 16px; } @media (max-width: 640px) { .press-logos { grid-template-columns: 1fr; } } .press-logo-card { background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; } .press-logo-art { aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--rule); } .press-logo-art--light { background: var(--paper); } .press-logo-art--dark { background: var(--ink); } .press-logo-art--dark .tag { color: rgba(240,238,235,.5); } .press-logo-art .tag { font-family: var(--mono, monospace); font-size: .82rem; color: rgba(39,38,34,.5); } .press-logo-foot { padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .press-logo-links { display: flex; gap: 8px; } .press-logo-links a { font-family: var(--mono, monospace); font-size: .82rem; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 999px; text-decoration: none; color: var(--ink); background: var(--paper); } .press-logo-links a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } .press-tokens { font-size: .88rem; line-height: 1.6; margin-top: 12px; } .press-tokens code { font-family: var(--mono, monospace); background: var(--paper-soft); padding: 2px 6px; border-radius: 4px; font-size: .9em; } .press-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; } @media (max-width: 860px) { .press-photos { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .press-photos { grid-template-columns: 1fr; } } .press-photo { margin: 0; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; } .press-photo-art { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; background: var(--paper); border-bottom: 1px solid var(--rule); } .press-photo-art .tag { font-family: var(--mono, monospace); font-size: .8rem; color: rgba(39,38,34,.5); } .press-photo figcaption { padding: 10px 14px; font-size: .88rem; color: rgba(39,38,34,.7); } .press-photos-foot { text-align: left; } .press-coverage { list-style: none; padding: 0; margin: 0; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--paper-soft); } .press-coverage li { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; align-items: baseline; padding: 16px 22px; border-bottom: 1px solid var(--rule); } .press-coverage li:last-child { border-bottom: none; } .press-coverage-meta { font-family: var(--mono, monospace); font-size: .8rem; color: rgba(39,38,34,.55); letter-spacing: .04em; } .press-contact { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: center; padding: 32px 36px; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: var(--radius); } @media (max-width: 720px) { .press-contact { grid-template-columns: 1fr; } } .press-contact h2 { color: var(--paper); font-size: 1.4rem; margin: 0 0 .4em; } .press-contact .muted { color: rgba(240,238,235,.7); } .press-contact a { color: var(--paper); } .press-contact-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; } @media (max-width: 720px) { .press-contact-actions { justify-content: flex-start; } } .press-contact .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); } .press-contact .btn-ghost { color: var(--paper); border-color: rgba(240,238,235,.35); } .press-contact .btn-ghost:hover { background: rgba(240,238,235,.08); border-color: var(--paper); } /* ———————————————————————————————————————————————————— Compare bundles ———————————————————————————————————————————————————— */ .compare-block { padding: 80px 0; } .compare-table-wrap { overflow-x: auto; margin: 40px -4px 0; padding: 4px; } .compare-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; } .compare-table th, .compare-table td { padding: 18px 20px; text-align: center; font-size: 14px; border-bottom: 1px solid var(--rule); vertical-align: middle; } .compare-rowhead { text-align: left !important; font-weight: 500; color: var(--ink); background: rgba(0, 0, 0, 0.015); border-right: 1px solid var(--rule); min-width: 180px; } .compare-col { vertical-align: top; padding: 28px 20px !important; } .compare-col--flag { background: var(--paper); } .compare-col-head .eyebrow { display: block; margin-bottom: 10px; } .compare-col-head h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; margin: 0 0 8px; color: var(--ink); } .compare-price { font-family: var(--serif); font-size: 34px; margin: 4px 0 10px; } .compare-for { font-size: 13px; min-height: 44px; margin: 0 0 14px; } .compare-col-head .btn, .compare-col-head .btn-ghost { display: inline-flex; } .compare-table tbody tr:last-child td, .compare-table tbody tr:last-child th { border-bottom: 0; } .compare-table td.yes { color: var(--ink); font-size: 18px; font-weight: 500; } .compare-table td.no { color: var(--ink-muted); font-size: 18px; } .compare-table td.partial { color: var(--ink-muted); font-style: italic; } .compare-note { text-align: center; margin-top: 24px; font-size: 14px; } /* ———————————————————————————————————————————————————— Find-your-planner quiz ———————————————————————————————————————————————————— */ .quiz-block { padding: 60px 0 100px; } .quiz-wrap { max-width: 820px; } .quiz-head { text-align: center; margin-bottom: 48px; } .quiz-head h1 { font-size: clamp(40px, 6vw, 72px); margin: 12px 0 18px; } .quiz-head p { max-width: 560px; margin: 0 auto; font-size: 16px; } .quiz-steps { list-style: none; padding: 0; margin: 0; position: relative; } .quiz-step { display: none; padding: 40px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-lg); } .quiz-step.is-active { display: block; } .quiz-step-head { margin-bottom: 28px; } .quiz-step-head .eyebrow { display: block; margin-bottom: 8px; } .quiz-step-head h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3.5vw, 36px); line-height: 1.15; margin: 0; letter-spacing: -0.005em; } .quiz-options { display: grid; gap: 10px; } .quiz-option { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .quiz-option:hover { border-color: var(--ink); transform: translateY(-1px); } .quiz-option input { flex-shrink: 0; accent-color: var(--ink); } .quiz-option-body { display: flex; flex-direction: column; gap: 2px; flex: 1; } .quiz-option-body strong { font-weight: 500; font-size: 16px; } .quiz-option-body .muted { font-size: 13px; } .quiz-option:has(input:checked) { border-color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px var(--ink); } .quiz-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--rule); } .quiz-nav .btn, .quiz-nav .btn-ghost { display: inline-flex; } .quiz-nav .btn:disabled, .quiz-nav .btn-ghost:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } .quiz-nav .btn:disabled:hover, .quiz-nav .btn-ghost:disabled:hover { background: var(--ink); transform: none; } .quiz-nav .btn-ghost:only-child, .quiz-nav .btn:only-child { margin-left: auto; } .quiz-result { text-align: center; } .quiz-result-card { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: center; margin: 32px 0 24px; padding: 32px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg); text-align: left; } @media (max-width: 640px) { .quiz-result-card { grid-template-columns: 1fr; } } .quiz-result-art { aspect-ratio: 3/4; background: var(--paper-soft); border: 1px dashed var(--rule); border-radius: var(--radius); display: grid; place-items: center; } .quiz-result-art .tag { font-size: 11px; color: var(--ink-muted); letter-spacing: 0.08em; text-transform: uppercase; } .quiz-result-body h3 { font-family: var(--serif); font-weight: 400; font-size: 32px; margin: 0 0 12px; } .quiz-result-body p { margin: 0 0 16px; color: var(--ink-muted); font-size: 15px; } .quiz-result-price { font-family: var(--serif); font-size: 28px; margin-bottom: 20px; } .quiz-result-cta { display: flex; flex-wrap: wrap; gap: 10px; } .quiz-result-note { text-align: center; font-size: 14px; } /* ———————————————————————————————————————————————————— Samples / freebies ———————————————————————————————————————————————————— */ .samples-block { padding: 60px 0 100px; } .samples-wrap { max-width: 1200px; } .samples-head { text-align: center; margin-bottom: 56px; } .samples-head h1 { font-size: clamp(42px, 6vw, 72px); margin: 12px 0 18px; } .samples-head p { max-width: 620px; margin: 0 auto; font-size: 16px; } .samples-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 960px) { .samples-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .samples-grid { grid-template-columns: 1fr; } } .sample-card { display: flex; flex-direction: column; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .sample-card:hover { border-color: var(--ink); transform: translateY(-2px); } .sample-art { aspect-ratio: 4/3; background: var(--paper); border-bottom: 1px dashed var(--rule); display: grid; place-items: center; } .sample-art .tag { font-size: 11px; color: var(--ink-muted); letter-spacing: 0.08em; text-transform: uppercase; } .sample-body { padding: 24px; flex: 1; display: flex; flex-direction: column; } .sample-body h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin: 10px 0 10px; } .sample-body p { font-size: 14px; color: var(--ink-muted); margin: 0 0 20px; flex: 1; } .sample-form { display: flex; gap: 8px; } .sample-form input { flex: 1; padding: 10px 14px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-sm); font: inherit; font-size: 14px; color: var(--ink); } .sample-form input:focus { outline: none; border-color: var(--ink); } .sample-form .btn, .sample-form .btn-ghost { padding: 10px 16px; font-size: 13px; } .sample-card--letter { background: var(--ink); border-color: var(--ink); color: var(--paper-soft); } .sample-card--letter h3 { color: var(--paper-soft); } .sample-card--letter .eyebrow { color: rgba(247, 246, 242, 0.65); } .sample-card--letter p { color: rgba(247, 246, 242, 0.75); } .sample-card--letter .sample-form input { background: rgba(247, 246, 242, 0.08); border-color: rgba(247, 246, 242, 0.2); color: var(--paper-soft); } .sample-card--letter .sample-form input::placeholder { color: rgba(247, 246, 242, 0.5); } .sample-card--letter .btn-ghost { color: var(--paper-soft); border-color: rgba(247, 246, 242, 0.3); } .sample-card--letter .btn-ghost:hover { border-color: var(--paper-soft); } .samples-note { text-align: center; margin: 48px auto 0; max-width: 640px; font-size: 14px; } /* ———————————————————————————————————————————————————— Device compatibility matrix ———————————————————————————————————————————————————— */ .compat-block { padding: 80px 0; } .compat-table-wrap { overflow-x: auto; margin: 40px -4px 0; padding: 4px; } .compat-table { width: 100%; min-width: 780px; border-collapse: separate; border-spacing: 0; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; } .compat-table th, .compat-table td { padding: 16px 14px; text-align: center; font-size: 13px; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); vertical-align: middle; } .compat-table th:last-child, .compat-table td:last-child { border-right: 0; } .compat-table tbody tr:last-child th, .compat-table tbody tr:last-child td { border-bottom: 0; } .compat-table thead th { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); background: rgba(0, 0, 0, 0.015); padding: 18px 14px; } .compat-rowhead { text-align: left !important; min-width: 180px; } .compat-rowhead strong { display: block; font-weight: 500; font-size: 14px; } .compat-rowhead .muted { font-size: 12px; margin-top: 2px; display: block; } .compat-table td.yes { color: var(--ink); font-weight: 500; } .compat-table td.partial { color: var(--ink-muted); font-style: italic; } .compat-table td.no { color: var(--ink-muted); } .compat-note { margin: 20px 0 0; max-width: 720px; font-size: 13px; } /* ———————————————————————————————————————————————————— Reviews wall ———————————————————————————————————————————————————— */ .reviews-block { padding: 80px 0; } .reviews-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px; } @media (max-width: 1100px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 820px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .reviews-grid { grid-template-columns: 1fr; } } .review-card { margin: 0; padding: 24px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 20px; break-inside: avoid; } .review-card blockquote { margin: 0; padding: 0; border: 0; font-family: var(--serif); font-size: 18px; line-height: 1.45; color: var(--ink); letter-spacing: -0.005em; } .review-card blockquote p { margin: 0; } .review-card blockquote p::before { content: "“"; margin-right: 2px; } .review-card blockquote p::after { content: "”"; margin-left: 2px; } .review-card figcaption { font-size: 13px; } .review-card figcaption strong { display: block; font-weight: 500; color: var(--ink); margin-bottom: 2px; } .review-card figcaption .muted { font-size: 12px; } .review-card--mixed { background: var(--paper); } .review-card--mixed blockquote { font-style: italic; } .reviews-note { margin: 40px auto 0; max-width: 620px; text-align: center; font-size: 14px; } /* ———————————————————————————————————————————————————— Glossary ———————————————————————————————————————————————————— */ .glossary-block { padding: 60px 0 100px; } .glossary-wrap { max-width: 820px; } .glossary-head { text-align: center; margin-bottom: 40px; } .glossary-head h1 { font-size: clamp(42px, 6vw, 72px); margin: 12px 0 18px; } .glossary-head p { max-width: 560px; margin: 0 auto 28px; } .glossary-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 12px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius); } .glossary-jump a { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; font-size: 13px; font-weight: 500; border-radius: var(--radius-sm); color: var(--ink); transition: background var(--dur-fast) var(--ease); } .glossary-jump a:hover { background: var(--ink); color: var(--paper-soft); } .glossary-list { margin-top: 24px; } .glossary-section { padding: 32px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 96px; } .glossary-section:last-of-type { border-bottom: 0; } .glossary-section > h2 { font-family: var(--serif); font-weight: 400; font-size: 40px; letter-spacing: -0.01em; margin: 0 0 20px; color: var(--ink); } .glossary-section dl { margin: 0; display: flex; flex-direction: column; gap: 20px; } .glossary-section dt { font-family: var(--sans); font-weight: 500; font-size: 17px; margin-bottom: 6px; letter-spacing: -0.005em; } .glossary-section dd { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 1.6; } .glossary-note { margin: 48px 0 0; text-align: center; font-size: 14px; } /* ———————————————————————————————————————————————————— Gift cards ———————————————————————————————————————————————————— */ .gifts-block { padding: 60px 0 100px; } .gifts-wrap { max-width: 1120px; } .gifts-head { text-align: center; margin-bottom: 56px; } .gifts-head h1 { font-size: clamp(42px, 6vw, 72px); margin: 12px 0 18px; } .gifts-head p { max-width: 620px; margin: 0 auto; font-size: 16px; } .gifts-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } @media (max-width: 960px) { .gifts-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .gifts-cards { grid-template-columns: 1fr; } } .gift-card { display: flex; flex-direction: column; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .gift-card:hover { border-color: var(--ink); transform: translateY(-2px); } .gift-card--flag { background: var(--paper); border-color: var(--ink); } .gift-art { aspect-ratio: 16/10; background: var(--paper); border-bottom: 1px dashed var(--rule); display: grid; place-items: center; } .gift-art .tag { font-size: 11px; color: var(--ink-muted); letter-spacing: 0.08em; text-transform: uppercase; } .gift-body { padding: 24px; flex: 1; display: flex; flex-direction: column; gap: 8px; } .gift-body .eyebrow { margin-bottom: 0; } .gift-body h3 { font-family: var(--serif); font-weight: 400; font-size: 40px; margin: 0; letter-spacing: -0.015em; } .gift-body p { font-size: 14px; color: var(--ink-muted); flex: 1; margin: 0 0 10px; } .gift-body .btn, .gift-body .btn-ghost { align-self: flex-start; } .gifts-how { margin: 64px 0 40px; padding: 40px; background: var(--ink); color: var(--paper-soft); border-radius: var(--radius-lg); } .gifts-how h3 { font-family: var(--serif); font-weight: 400; color: var(--paper-soft); font-size: 28px; margin: 0 0 20px; } .gifts-how-list { counter-reset: how; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 40px; } @media (max-width: 720px) { .gifts-how-list { grid-template-columns: 1fr; } } .gifts-how-list li { counter-increment: how; position: relative; padding-left: 44px; font-size: 15px; line-height: 1.6; color: rgba(247, 246, 242, 0.8); } .gifts-how-list li::before { content: counter(how, decimal-leading-zero); position: absolute; left: 0; top: 0; font-family: var(--serif); font-size: 22px; color: var(--paper-soft); } .gifts-how-list li strong { color: var(--paper-soft); font-weight: 500; } .gifts-foot { padding: 32px; border: 1px solid var(--rule); border-radius: var(--radius-lg); } .gifts-foot h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin: 0 0 10px; } .gifts-foot p { margin: 0 0 18px; font-size: 15px; color: var(--ink-muted); } /* ———————————————————————————————————————————————————— Reading progress bar ———————————————————————————————————————————————————— */ .reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: transparent; z-index: 500; pointer-events: none; } .reading-progress__fill { display: block; height: 100%; width: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); transition: transform 80ms linear; } body.is-overlay-open .reading-progress { opacity: 0; } /* Sticky TOC active highlight is now defined in the variant C block at the bottom of this file. The legacy left-dash indicator was overriding the leading-zero numeral via content:"" and made active rows lurch, so it has been removed. */ /* ———————————————————————————————————————————————————— Updated stamp ———————————————————————————————————————————————————— */ .updated-stamp { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: 999px; font-size: 13px; color: var(--ink); } .updated-stamp__dot { width: 8px; height: 8px; border-radius: 50%; background: #6a8f66; box-shadow: 0 0 0 3px rgba(106, 143, 102, 0.18); } .updated-stamp__label { font-weight: 500; letter-spacing: 0.01em; } .updated-stamp__date { color: var(--ink); } .updated-stamp__meta { font-size: 12px; } @media (max-width: 560px) { .updated-stamp__meta { display: none; } } /* ———————————————————————————————————————————————————— Newsletter — with preferences ———————————————————————————————————————————————————— */ .newsletter-prefs-block { padding: 80px 0; } .newsletter-prefs { padding: 48px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-lg); } @media (max-width: 640px) { .newsletter-prefs { padding: 32px 24px; } } .newsletter-prefs-head { text-align: center; margin-bottom: 32px; } .newsletter-prefs-head h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 4vw, 42px); line-height: 1.15; margin: 10px 0 14px; letter-spacing: -0.005em; } .newsletter-prefs-head p { max-width: 520px; margin: 0 auto; font-size: 15px; } .newsletter-prefs-choices { border: 0; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } @media (max-width: 820px) { .newsletter-prefs-choices { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .newsletter-prefs-choices { grid-template-columns: 1fr; } } .newsletter-prefs-choices .choice { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); cursor: pointer; transition: border-color var(--dur-fast) var(--ease); } .newsletter-prefs-choices .choice:hover { border-color: var(--ink); } .newsletter-prefs-choices .choice input { accent-color: var(--ink); flex-shrink: 0; } .newsletter-prefs-choices .choice-body { display: flex; flex-direction: column; gap: 2px; } .newsletter-prefs-choices .choice-body strong { font-size: 14px; font-weight: 500; } .newsletter-prefs-choices .choice-body .muted { font-size: 12px; line-height: 1.4; } .newsletter-prefs-choices .choice:has(input:checked) { background: #fff; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .newsletter-prefs-submit { display: flex; gap: 10px; padding: 6px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); } .newsletter-prefs-submit input { flex: 1; border: 0; background: transparent; padding: 10px 14px; font: inherit; font-size: 15px; color: var(--ink); outline: none; } .newsletter-prefs-submit .btn { flex-shrink: 0; } .newsletter-prefs-note { text-align: center; margin: 18px 0 0; font-size: 12px; } /* ———————————————————————————————————————————————————— Affiliate — shared bits ———————————————————————————————————————————————————— */ .aff-disclosure { display: flex; align-items: flex-start; gap: 14px; padding: 14px 18px; background: rgba(39, 38, 34, 0.04); border: 1px solid var(--rule); border-radius: var(--radius); margin: 0 0 32px; font-size: 13px; } .aff-disclosure__tag { flex-shrink: 0; display: inline-flex; align-items: center; padding: 4px 10px; background: var(--ink); color: var(--paper-soft); border-radius: 999px; font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; } .aff-disclosure p { margin: 0; color: var(--ink-muted); line-height: 1.55; } .aff-disclosure a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); } .aff-disclosure a:hover { text-decoration-color: var(--ink); } .aff-link { position: relative; } .aff-link__ext { margin-left: 4px; font-size: 0.85em; } .aff-link--text { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); } .aff-link--text:hover { text-decoration-color: var(--ink); } /* Affiliate product card */ .aff-card { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: center; margin: 32px 0; padding: 28px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-lg); } @media (max-width: 640px) { .aff-card { grid-template-columns: 1fr; } } .aff-card__art { aspect-ratio: 3/4; background: var(--paper); border: 1px dashed var(--rule); border-radius: var(--radius); display: grid; place-items: center; } .aff-card__art .tag { font-size: 11px; color: var(--ink-muted); letter-spacing: 0.08em; text-transform: uppercase; } .aff-card__kind { margin-bottom: 8px; } .aff-card__title { font-family: var(--serif); font-weight: 400; font-size: 28px; margin: 0 0 10px; letter-spacing: -0.005em; } .aff-card__rating { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .aff-card__score { font-family: var(--serif); font-size: 28px; color: var(--ink); } .aff-card__scoremax { font-size: 14px; color: var(--ink-muted); } .aff-card__verdict { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ink-muted); } .aff-card__meta { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-muted); } .aff-card__meta strong { color: var(--ink); font-weight: 500; } .aff-card__cta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .aff-card__disclosure { margin: 0; font-size: 12px; } /* Affiliate inline CTA */ .aff-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 32px 0; padding: 20px 24px; background: var(--ink); color: var(--paper-soft); border-radius: var(--radius-lg); } .aff-cta__label { display: flex; flex-direction: column; gap: 2px; } .aff-cta__label .eyebrow { color: rgba(247, 246, 242, 0.65); } .aff-cta__name { font-family: var(--serif); font-weight: 400; font-size: 22px; } .aff-cta__price { font-size: 13px; color: rgba(247, 246, 242, 0.65); } .aff-cta__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .aff-cta .btn { background: var(--paper-soft); color: var(--ink); } .aff-cta .btn:hover { background: #fff; } .aff-cta__disclosure { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(247, 246, 242, 0.55); } /* ———————————————————————————————————————————————————— Review — hero + verdict + sections ———————————————————————————————————————————————————— */ .review-page { padding-bottom: 80px; } .review-hero { padding: 60px 0 32px; } .review-hero__crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-muted); margin-bottom: 14px; } .review-hero__crumbs a { color: var(--ink-muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); } .review-hero__crumbs a:hover { color: var(--ink); } .review-hero__title { font-size: clamp(42px, 6vw, 84px); margin: 10px 0 18px; } .review-hero__lede { font-family: var(--serif); font-size: clamp(18px, 2vw, 22px); line-height: 1.5; max-width: 720px; margin: 0 0 28px; } .review-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 13px; color: var(--ink-muted); } .review-hero__meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--rule); } .review-hero__meta strong { color: var(--ink); font-weight: 500; } .review-wrap { max-width: 980px; padding-top: 32px; } /* Verdict strip with subscores */ .verdict-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 0 0 48px; padding: 36px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-lg); } @media (max-width: 780px) { .verdict-strip { grid-template-columns: 1fr; gap: 28px; } } .verdict-strip__summary .eyebrow { display: block; margin-bottom: 10px; } .verdict-strip__headline { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 3vw, 32px); line-height: 1.2; margin: 0 0 12px; letter-spacing: -0.005em; } .verdict-strip__line { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 1.6; } .verdict-strip__scores { display: flex; flex-direction: column; gap: 16px; } .verdict-score--overall { display: flex; align-items: baseline; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); } .verdict-score__value { font-family: var(--serif); font-size: 56px; line-height: 1; color: var(--ink); letter-spacing: -0.02em; } .verdict-score__max { font-size: 18px; color: var(--ink-muted); } .verdict-score__label { margin-left: auto; font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); } .verdict-score__breakdown { margin: 0; display: flex; flex-direction: column; gap: 10px; } .verdict-score__row { display: grid; grid-template-columns: 130px 1fr; gap: 14px; align-items: center; } .verdict-score__row dt { font-size: 13px; color: var(--ink-muted); } .verdict-score__row dd { margin: 0; display: flex; align-items: center; gap: 10px; } .verdict-score__row .bar { flex: 1; height: 4px; background: rgba(39, 38, 34, 0.08); border-radius: 2px; overflow: hidden; } .verdict-score__row .bar > span { display: block; height: 100%; background: var(--ink); border-radius: 2px; } .verdict-score__row .n { flex-shrink: 0; font-family: var(--serif); font-size: 14px; color: var(--ink); min-width: 28px; text-align: right; } /* Review specs */ .review-specs { margin: 48px 0; scroll-margin-top: 96px; } .review-specs__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; background: var(--paper-soft); margin: 28px 0 0; } @media (max-width: 620px) { .review-specs__grid { grid-template-columns: 1fr; } } .review-specs__grid > div { padding: 16px 20px; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 150px 1fr; gap: 16px; font-size: 14px; } @media (max-width: 620px) { .review-specs__grid > div { grid-template-columns: 1fr; gap: 4px; } } .review-specs__grid > div:nth-child(odd) { border-right: 1px solid var(--rule); } @media (max-width: 620px) { .review-specs__grid > div:nth-child(odd) { border-right: 0; } } .review-specs__grid > div:nth-last-child(-n+2) { border-bottom: 0; } @media (max-width: 620px) { .review-specs__grid > div:last-child { border-bottom: 0; } .review-specs__grid > div:nth-last-child(2) { border-bottom: 1px solid var(--rule); } } .review-specs__grid dt { font-family: var(--sans); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); font-weight: 500; } .review-specs__grid dd { margin: 0; color: var(--ink); } /* Pros / cons */ .review-proscons { margin: 64px 0; scroll-margin-top: 96px; } .proscons-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 28px; } @media (max-width: 780px) { .proscons-grid { grid-template-columns: 1fr; } } .proscons { padding: 28px; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--paper-soft); } .proscons--pro { border-top: 4px solid var(--ink); } .proscons--con { border-top: 4px solid var(--ink-muted); background: var(--paper); } .proscons__head { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); } .proscons__head h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 6px 0 0; letter-spacing: -0.005em; } .proscons__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; } .proscons__list li { padding-left: 20px; position: relative; font-size: 15px; line-height: 1.6; color: var(--ink); } .proscons--pro .proscons__list li::before { content: "+"; position: absolute; left: 0; top: 0; font-family: var(--serif); font-size: 20px; line-height: 1; color: var(--ink); } .proscons--con .proscons__list li::before { content: "−"; position: absolute; left: 0; top: 0; font-family: var(--serif); font-size: 20px; line-height: 1; color: var(--ink-muted); } .proscons__list strong { font-weight: 500; } /* Who for */ .review-whofor { margin: 64px 0; scroll-margin-top: 96px; } .whofor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; } @media (max-width: 900px) { .whofor-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .whofor-grid { grid-template-columns: 1fr; } } .whofor-card { padding: 24px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-lg); } .whofor-card--no { background: var(--paper); border-style: dashed; } .whofor-card h3 { font-family: var(--serif); font-weight: 400; font-size: 20px; margin: 8px 0 10px; letter-spacing: -0.005em; } .whofor-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-muted); } /* Alternatives */ .review-alts { margin: 64px 0; scroll-margin-top: 96px; } .alts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; } @media (max-width: 900px) { .alts-grid { grid-template-columns: 1fr; } } .alt-card { display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 20px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-lg); } @media (max-width: 500px) { .alt-card { grid-template-columns: 1fr; } } .alt-card__art { aspect-ratio: 3/4; background: var(--paper); border: 1px dashed var(--rule); border-radius: var(--radius-sm); display: grid; place-items: center; } .alt-card__art .tag { font-size: 10px; color: var(--ink-muted); letter-spacing: 0.08em; text-transform: uppercase; } .alt-card__body h3 { font-family: var(--serif); font-weight: 400; font-size: 20px; margin: 6px 0 8px; } .alt-card__body p { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: var(--ink-muted); } .alt-card__meta { font-size: 13px; margin-bottom: 12px; } .alt-card__ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .alt-card__ctas .btn-ghost { padding: 8px 14px; font-size: 12px; } /* Methodology */ .review-method { margin: 64px 0; scroll-margin-top: 96px; } .method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; } @media (max-width: 900px) { .method-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .method-grid { grid-template-columns: 1fr; } } .method-card { padding: 24px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-lg); } .method-card h3 { font-family: var(--serif); font-weight: 400; font-size: 20px; margin: 8px 0 10px; } .method-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-muted); } .method-card a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); } /* Cross-sell */ .review-crosssell { padding: 80px 0; margin-top: 40px; background: rgba(39, 38, 34, 0.02); } .review-crosssell__wrap { max-width: var(--wrap-max); } .crosssell-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 40px 0 24px; } @media (max-width: 900px) { .crosssell-grid { grid-template-columns: 1fr; } } .crosssell-card { display: flex; flex-direction: column; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .crosssell-card:hover { border-color: var(--ink); transform: translateY(-2px); } .crosssell-card--flag { background: var(--paper); border-color: var(--ink); } .crosssell-card__art { aspect-ratio: 4/3; background: var(--paper); border-bottom: 1px dashed var(--rule); display: grid; place-items: center; } .crosssell-card__art .tag { font-size: 11px; color: var(--ink-muted); letter-spacing: 0.08em; text-transform: uppercase; } .crosssell-card__body { padding: 24px; flex: 1; display: flex; flex-direction: column; gap: 8px; } .crosssell-card__body h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin: 4px 0 6px; } .crosssell-card__body p { font-size: 13px; color: var(--ink-muted); flex: 1; margin: 0; } .crosssell-card__price { font-family: var(--serif); font-size: 22px; margin-top: 8px; } .crosssell-note { text-align: center; font-size: 13px; margin: 0; } /* ———————————————————————————————————————————————————— Compare page ———————————————————————————————————————————————————— */ .compare-hero { padding: 60px 0 32px; } .compare-hero__title { font-size: clamp(38px, 5vw, 72px); margin: 10px 0 18px; line-height: 1.05; } .compare-hero__vs { font-family: var(--serif); font-style: italic; color: var(--ink-muted); font-size: 0.7em; padding: 0 4px; } .compare-hero__lede { font-family: var(--serif); font-size: clamp(18px, 2vw, 22px); line-height: 1.5; max-width: 720px; margin: 0 0 28px; } .compare-hero__answer { display: flex; flex-direction: column; gap: 8px; padding: 24px; background: var(--paper-soft); border-left: 3px solid var(--ink); border-radius: var(--radius); max-width: 760px; } .compare-hero__answer p { margin: 0; font-size: 16px; line-height: 1.6; } .compare-hero__answer strong { font-weight: 500; } .compare-page__wrap { max-width: 1080px; padding-top: 32px; } .compare-split { margin: 48px 0; } .compare-split__table-wrap { overflow-x: auto; margin: 28px -4px 0; padding: 4px; } .compare-split__table { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; } .compare-split__table th, .compare-split__table td { padding: 14px 18px; text-align: center; font-size: 14px; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); } .compare-split__table th:last-child, .compare-split__table td:last-child { border-right: 0; } .compare-split__table tbody tr:last-child th, .compare-split__table tbody tr:last-child td { border-bottom: 0; } .compare-split__table tbody th[scope="row"] { text-align: left; font-family: var(--sans); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); font-weight: 500; background: rgba(0, 0, 0, 0.015); min-width: 160px; } .compare-split__table thead th { padding: 24px 18px; background: rgba(0, 0, 0, 0.02); } .compare-split__col-head { display: flex; flex-direction: column; gap: 4px; align-items: center; } .compare-split__col-head .eyebrow { color: var(--ink-muted); } .compare-split__col-head strong { font-family: var(--serif); font-weight: 400; font-size: 20px; color: var(--ink); } .compare-split__col-head .muted { font-size: 13px; } .compare-split__col-head .aff-link--text { margin-top: 4px; } .compare-split__table td.yes { color: var(--ink); } .compare-split__table td.no { color: var(--ink-muted); } .compare-split__table strong { font-weight: 500; } .compare-wins { margin: 64px 0; } .wins-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 28px; } @media (max-width: 780px) { .wins-grid { grid-template-columns: 1fr; } } .wins-card { padding: 28px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-lg); } .wins-card__head { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); } .wins-card__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; } .wins-card__list li { padding-left: 20px; position: relative; font-size: 15px; line-height: 1.55; } .wins-card__list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 10px; height: 1px; background: var(--ink); } .wins-card__list strong { font-weight: 500; } .compare-which { margin: 64px 0; } .which-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 28px; } @media (max-width: 900px) { .which-grid { grid-template-columns: 1fr; } } .which-card { display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 24px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-lg); } @media (max-width: 620px) { .which-card { grid-template-columns: 1fr; } } .which-card__art { aspect-ratio: 3/4; background: var(--paper); border: 1px dashed var(--rule); border-radius: var(--radius-sm); display: grid; place-items: center; } .which-card__art .tag { font-size: 10px; color: var(--ink-muted); letter-spacing: 0.08em; text-transform: uppercase; } .which-card__body h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 8px 0 12px; } .which-card__body ul { padding-left: 18px; margin: 0 0 16px; font-size: 14px; color: var(--ink-muted); display: flex; flex-direction: column; gap: 6px; } .which-card__cta { display: flex; gap: 10px; flex-wrap: wrap; } .which-note { text-align: center; margin-top: 24px; font-size: 13px; } /* ———————————————————————————————————————————————————— Buying guide page ———————————————————————————————————————————————————— */ .guide-hero { padding: 60px 0 32px; } .guide-hero__title { font-size: clamp(40px, 6vw, 80px); margin: 10px 0 18px; } .guide-hero__lede { font-family: var(--serif); font-size: clamp(18px, 2vw, 22px); line-height: 1.5; max-width: 720px; margin: 0 0 28px; } .guide-hero__jump { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; } .guide-hero__jump a { display: inline-flex; padding: 8px 14px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: 999px; font-size: 13px; color: var(--ink); transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .guide-hero__jump a:hover { background: var(--ink); color: var(--paper-soft); border-color: var(--ink); } .guide-page__wrap { max-width: 980px; padding-top: 32px; } .guide-criteria { margin: 48px 0; scroll-margin-top: 96px; } .criteria-list { counter-reset: crit; list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 14px; } .criteria-list li { display: grid; grid-template-columns: 60px 1fr; gap: 20px; padding: 20px 24px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius); } .criteria-list__n { font-family: var(--serif); font-size: 28px; line-height: 1; color: var(--ink); letter-spacing: -0.015em; } .criteria-list h3 { font-family: var(--serif); font-weight: 400; font-size: 20px; margin: 0 0 6px; } .criteria-list p { margin: 0; font-size: 14px; color: var(--ink-muted); line-height: 1.55; } .guide-pick { display: grid; grid-template-columns: 280px 1fr; gap: 32px; margin: 28px 0; padding: 32px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-lg); scroll-margin-top: 96px; } @media (max-width: 780px) { .guide-pick { grid-template-columns: 1fr; } } .guide-pick__art { aspect-ratio: 3/4; background: var(--paper); border: 1px dashed var(--rule); border-radius: var(--radius); display: grid; place-items: center; } .guide-pick__art .tag { font-size: 11px; color: var(--ink-muted); letter-spacing: 0.08em; text-transform: uppercase; } .guide-pick__head { margin-bottom: 16px; } .guide-pick__flag { display: block; margin-bottom: 10px; } .guide-pick__name { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; margin: 0 0 10px; letter-spacing: -0.01em; } .guide-pick__tagline { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--ink-muted); margin: 0; } .guide-pick__rating { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 18px 0; padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .guide-pick__price { margin-left: auto; font-family: var(--serif); font-size: 22px; } .guide-pick__sections { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 20px 0; } @media (max-width: 780px) { .guide-pick__sections { grid-template-columns: 1fr; } } .guide-pick__sections .eyebrow { display: block; margin-bottom: 6px; } .guide-pick__sections p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-muted); } .guide-pick__cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--rule); } .guide-pick__disclosure { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; } .guide-also { margin: 64px 0; scroll-margin-top: 96px; } .also-list { margin: 28px 0 0; border-top: 1px solid var(--rule); } .also-list__row { display: grid; grid-template-columns: 260px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--rule); } @media (max-width: 620px) { .also-list__row { grid-template-columns: 1fr; gap: 6px; } } .also-list dt strong { display: block; font-weight: 500; font-size: 15px; color: var(--ink); } .also-list dt .muted { font-size: 13px; margin-top: 2px; display: inline-block; } .also-list dd { margin: 0; font-size: 14px; color: var(--ink-muted); line-height: 1.6; } .also-list a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); } /* ———————————————————————————————————————————————————— SECTION SAMPLES PAGE — temporary showcase chrome (The 30 section previews live below this block.) ———————————————————————————————————————————————————— */ .samples-page__intro { padding: 72px 0 48px; border-bottom: 1px solid var(--rule); background: var(--paper-soft); } .samples-page__intro h1 { font-size: clamp(42px, 6vw, 84px); margin: 12px 0 18px; } .samples-page__lede { font-family: var(--serif); font-size: clamp(18px, 2vw, 22px); line-height: 1.5; max-width: 720px; margin: 0 0 14px; } .samples-page__note { font-size: 13px; max-width: 720px; margin: 0; } .samples-page__note code { background: var(--paper); border: 1px solid var(--rule); padding: 1px 6px; border-radius: 4px; font-size: 12px; } .samples-page { counter-reset: sample; padding: 0 0 40px; } .sample-wrapper { counter-increment: sample; border-bottom: 1px solid var(--rule); padding: 40px 0 60px; } .sample-wrapper::before { content: "Sample " counter(sample, decimal-leading-zero); display: block; max-width: calc(var(--wrap-max) + 0px); margin: 0 auto 14px; padding: 0 var(--wrap-pad); font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); } @media (max-width: 720px) { .sample-wrapper::before { padding: 0 var(--wrap-pad-sm); } } .sample-ps { max-width: var(--wrap-max); margin: 0 auto 28px; padding: 14px 20px 14px 52px; background: #fffbea; border: 1px solid #e9d89a; border-left: 4px solid #b39042; border-radius: var(--radius); position: relative; font-size: 14px; line-height: 1.55; color: #4a3d1a; } .sample-ps p { margin: 0; } .sample-ps strong { color: #2d2611; font-weight: 600; } .sample-ps code { background: rgba(179, 144, 66, 0.12); padding: 1px 6px; border-radius: 4px; font-size: 12px; color: #4a3d1a; } .sample-ps__label { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; background: #b39042; color: #fffbea; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; } @media (max-width: 720px) { .sample-ps { margin-left: var(--wrap-pad-sm); margin-right: var(--wrap-pad-sm); } .sample-ps__label { top: 16px; transform: none; } } @media (min-width: 721px) { .sample-ps { margin-left: auto; margin-right: auto; width: calc(100% - 2 * var(--wrap-pad)); } } .sample-body { background: var(--paper); border-radius: var(--radius-lg); overflow: hidden; } .sample-body > section { padding-top: 40px; padding-bottom: 40px; } .samples-page__outro { padding: 80px 0; background: var(--ink); color: var(--paper-soft); text-align: center; } .samples-page__outro h2 { font-family: var(--serif); font-weight: 400; color: var(--paper-soft); font-size: clamp(28px, 4vw, 42px); margin: 10px 0 12px; } .samples-page__outro p { color: rgba(247, 246, 242, 0.7); max-width: 540px; margin: 0 auto; } /* ——— 01 Craft strip ——— */ .craft-steps { counter-reset: craft; list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 880px) { .craft-steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .craft-steps { grid-template-columns: 1fr; } } .craft-steps li { padding: 24px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-lg); position: relative; } .craft-steps__n { font-family: var(--serif); font-size: 28px; line-height: 1; color: var(--ink-muted); letter-spacing: -0.015em; margin-bottom: 8px; } .craft-steps h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 0 0 8px; } .craft-steps p { margin: 0; font-size: 14px; color: var(--ink-muted); line-height: 1.55; } /* ——— 02 Press logos ——— */ .press-strip { padding: 20px 0; } .press-strip__label { text-align: center; font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 24px; } .press-strip__logos { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 40px; align-items: center; justify-content: center; } .press-strip__logos span { font-family: var(--serif); font-size: 26px; color: var(--ink); opacity: 0.55; transition: opacity var(--dur-fast) var(--ease); } .press-strip__logos span:hover { opacity: 1; } /* ——— 03 Founder's picks ——— */ .fp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; } @media (max-width: 900px) { .fp-grid { grid-template-columns: 1fr; } } .fp-card { display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 22px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-lg); } @media (max-width: 500px) { .fp-card { grid-template-columns: 1fr; } } .fp-card__art { aspect-ratio: 3/4; background: var(--paper); border: 1px dashed var(--rule); border-radius: var(--radius-sm); display: grid; place-items: center; } .fp-card__art .tag { font-size: 10px; color: var(--ink-muted); letter-spacing: 0.08em; text-transform: uppercase; } .fp-card__mark { font-family: var(--serif); font-size: 14px; color: var(--ink-muted); display: block; margin-bottom: 6px; } .fp-card h3 { font-family: var(--serif); font-weight: 400; font-size: 20px; margin: 0 0 10px; } .fp-card__note { font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.5; margin: 0 0 10px; } .fp-card__attr { font-size: 12px; margin: 0; } /* ——— 04 Year in review ——— */ .yr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 28px; } @media (max-width: 960px) { .yr-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .yr-grid { grid-template-columns: 1fr; } } .yr-stat { padding: 28px 24px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 6px; } .yr-stat__n { font-family: var(--serif); font-size: 52px; line-height: 1; color: var(--ink); letter-spacing: -0.02em; } .yr-stat__l { font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 6px; } .yr-stat p { margin: 0; font-size: 13px; color: var(--ink-muted); line-height: 1.55; } /* ——— 05 Community showcase ——— */ .comm-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 12px; margin-top: 28px; } @media (max-width: 900px) { .comm-grid { grid-template-columns: repeat(2, 1fr); } } .comm-tile { margin: 0; grid-column: span 1; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; } .comm-tile--wide { grid-column: span 2; } .comm-tile__art { flex: 1; background: var(--paper); border-bottom: 1px dashed var(--rule); display: grid; place-items: center; } .comm-tile__art .tag { font-size: 10px; color: var(--ink-muted); letter-spacing: 0.08em; text-transform: uppercase; } .comm-tile figcaption { padding: 10px 14px; font-size: 12px; color: var(--ink-muted); } /* ——— 06 Manifesto ——— */ .manifesto-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 28px; border-top: 1px solid var(--rule); padding-top: 32px; } @media (max-width: 900px) { .manifesto-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .manifesto-grid { grid-template-columns: 1fr; } } .manifesto-col__n { display: block; font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--ink-muted); margin-bottom: 12px; } .manifesto-col h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 0 0 10px; line-height: 1.15; letter-spacing: -0.005em; } .manifesto-col p { margin: 0; font-size: 14px; color: var(--ink-muted); line-height: 1.55; } /* ——— 07 Week in templates ——— */ .week-grid { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; } @media (max-width: 1000px) { .week-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 600px) { .week-grid { grid-template-columns: repeat(2, 1fr); } } .week-day { padding: 16px 14px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius); font-size: 13px; } .week-day__label { font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 8px; } .week-day strong { display: block; font-weight: 500; font-size: 14px; margin-bottom: 4px; } .week-day p { margin: 0; font-size: 12px; color: var(--ink-muted); line-height: 1.45; } /* ——— 08 Money-back strip ——— */ .mb-strip { padding: 20px 0; } .mb-strip__inner { display: grid; grid-template-columns: 80px 1fr auto; gap: 28px; align-items: center; padding: 32px 40px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-lg); } @media (max-width: 760px) { .mb-strip__inner { grid-template-columns: 1fr; text-align: center; } .mb-strip__mark { margin: 0 auto; } .mb-strip__cta { justify-self: center; } } .mb-strip__mark { color: var(--ink); } .mb-strip__body h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.005em; margin: 6px 0 8px; line-height: 1.1; } .mb-strip__body p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-muted); } /* ——— 09 Flipbook preview ——— */ .fb-deck { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 28px; } @media (max-width: 880px) { .fb-deck { grid-template-columns: repeat(2, 1fr); } } .fb-page { margin: 0; display: flex; flex-direction: column; gap: 8px; } .fb-page__art { aspect-ratio: 3/4; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-sm); display: grid; place-items: center; box-shadow: 0 1px 0 var(--rule); transition: transform var(--dur-fast) var(--ease); } .fb-page:hover .fb-page__art { transform: translateY(-3px); } .fb-page__art .tag { font-size: 11px; color: var(--ink-muted); letter-spacing: 0.08em; text-transform: uppercase; } .fb-page figcaption { font-size: 12px; color: var(--ink-muted); text-align: center; } .fb-note { text-align: center; margin: 24px 0 0; font-size: 13px; } /* ——— 10 Changelog ——— */ .cl-list { list-style: none; padding: 0; margin: 28px 0 0; } .cl-row { display: grid; grid-template-columns: 160px 1fr; gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--rule); } .cl-row:last-child { border-bottom: 0; } @media (max-width: 680px) { .cl-row { grid-template-columns: 1fr; gap: 8px; } } .cl-row__meta { display: flex; flex-direction: column; gap: 4px; } .cl-row__v { font-family: var(--serif); font-size: 22px; color: var(--ink); } .cl-row__d { font-size: 12px; color: var(--ink-muted); letter-spacing: 0.1em; text-transform: uppercase; } .cl-row__body h3 { font-family: var(--serif); font-weight: 400; font-size: 20px; margin: 0 0 10px; } .cl-row__body ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--ink-muted); display: flex; flex-direction: column; gap: 4px; } /* ——— 11 Frequently bought together ——— */ .fbt-row { display: flex; align-items: stretch; justify-content: center; gap: 14px; margin-top: 28px; padding: 24px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-lg); flex-wrap: wrap; } .fbt-item { display: flex; flex-direction: column; gap: 10px; width: 160px; } .fbt-item__art { aspect-ratio: 3/4; background: var(--paper); border: 1px dashed var(--rule); border-radius: var(--radius-sm); display: grid; place-items: center; } .fbt-item__art .tag { font-size: 10px; color: var(--ink-muted); letter-spacing: 0.08em; text-transform: uppercase; } .fbt-item__body { text-align: center; font-size: 13px; display: flex; flex-direction: column; gap: 2px; } .fbt-plus { align-self: center; font-family: var(--serif); font-size: 32px; color: var(--ink-muted); } .fbt-total { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--rule); } .fbt-total strong { font-family: var(--serif); font-size: 28px; } /* ——— 12 Device-fit check ——— */ .fit-check__card { padding: 32px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-lg); } .fit-check__label { margin-bottom: 18px; } .fit-check__label h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 3vw, 30px); margin: 4px 0 0; } .fit-check__options { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .fit-chip { padding: 8px 16px; background: var(--paper); border: 1px solid var(--rule); border-radius: 999px; font-size: 13px; color: var(--ink); cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .fit-chip:hover { border-color: var(--ink); } .fit-chip--on { background: var(--ink); color: var(--paper-soft); border-color: var(--ink); } .fit-check__answer { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; background: rgba(106, 143, 102, 0.08); border: 1px solid rgba(106, 143, 102, 0.25); border-left: 3px solid #6a8f66; border-radius: var(--radius); } .fit-check__dot { width: 10px; height: 10px; border-radius: 50%; background: #6a8f66; margin-top: 6px; flex-shrink: 0; } .fit-check__answer p { margin: 0; font-size: 14px; line-height: 1.55; } /* ——— 13 Print-at-home specs ——— */ .ps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; } @media (max-width: 820px) { .ps-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .ps-grid { grid-template-columns: 1fr; } } .ps-card { padding: 20px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius); } .ps-card .eyebrow { display: block; margin-bottom: 4px; } .ps-card strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 20px; margin-bottom: 6px; } .ps-card p { margin: 0; font-size: 13px; color: var(--ink-muted); line-height: 1.55; } /* ——— 14 Scale diagram ——— */ .scale-stage { position: relative; height: 280px; margin: 28px 0 20px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-lg); } .scale-item { position: absolute; bottom: 24px; border: 1px solid var(--ink); border-radius: 4px; background: #fff; display: flex; align-items: flex-end; padding: 8px 10px; } .scale-item--device { left: 8%; width: 240px; height: 220px; background: #f6f4ee; } .scale-item--tpl { left: calc(8% + 14px); top: 24px; width: 210px; height: 196px; background: #fff; border-color: var(--rule); } .scale-item--ref { right: 12%; width: 120px; height: 180px; background: #f0e6d2; border-color: #c9b68a; } .scale-tag { font-size: 10px; color: var(--ink-muted); letter-spacing: 0.08em; text-transform: uppercase; } .scale-legend { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; font-size: 13px; color: var(--ink-muted); } @media (max-width: 720px) { .scale-legend { grid-template-columns: 1fr; } .scale-stage { display: none; } } .scale-legend strong { color: var(--ink); font-weight: 500; } /* ——— 15 Delivery timeline ——— */ .tl-list { list-style: none; padding: 0; margin: 28px 0 0; } .tl-item { display: grid; grid-template-columns: 60px 1fr; gap: 20px; padding: 16px 0; position: relative; } .tl-item::before { content: ""; position: absolute; left: 26px; top: 46px; bottom: -16px; width: 1px; background: var(--rule); } .tl-item:last-child::before { display: none; } .tl-item__marker { width: 52px; height: 52px; border-radius: 50%; background: var(--paper-soft); border: 1px solid var(--rule); display: grid; place-items: center; z-index: 1; } .tl-item__marker span { font-family: var(--serif); font-size: 18px; } .tl-item__body strong { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 4px; } .tl-item__body p { margin: 0; font-size: 15px; } /* ——— 16 TL;DR ——— */ .tldr { padding: 20px 0; } .tldr-box { padding: 28px 32px; background: var(--paper-soft); border: 1px solid var(--rule); border-left: 4px solid var(--ink); border-radius: var(--radius); } .tldr-box__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; } .tldr-box__tag { font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper-soft); background: var(--ink); padding: 4px 10px; border-radius: 4px; } .tldr-box h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 0; } .tldr-box__list { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.6; display: flex; flex-direction: column; gap: 8px; } /* ——— 17 Fact box ——— */ .factbox { padding: 20px 0; } .factbox-card { display: grid; grid-template-columns: 200px 1fr; gap: 32px; align-items: center; padding: 28px 32px; background: var(--ink); color: var(--paper-soft); border-radius: var(--radius-lg); margin: 0; } @media (max-width: 640px) { .factbox-card { grid-template-columns: 1fr; gap: 14px; text-align: center; } } .factbox-card__n { font-family: var(--serif); font-size: clamp(64px, 10vw, 120px); line-height: 1; letter-spacing: -0.04em; color: var(--paper-soft); } .factbox-card figcaption .eyebrow { color: rgba(247, 246, 242, 0.65); margin-bottom: 8px; display: block; } .factbox-card figcaption p { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(247, 246, 242, 0.85); } /* ——— 18 Citations ——— */ .cite-list { list-style: none; padding: 0; margin: 28px 0 0; counter-reset: cite; } .cite-list li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); font-size: 14px; line-height: 1.55; } .cite-list li:last-child { border-bottom: 0; } .cite-list__n { font-family: var(--serif); font-size: 20px; color: var(--ink-muted); } .cite-list strong { font-weight: 500; } .cite-list a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); } /* ——— 19 Mailbag ——— */ .mb-list { display: flex; flex-direction: column; gap: 18px; margin-top: 28px; } .mb-letter { padding: 24px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-lg); } .mb-letter__meta { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; } .mb-letter__meta strong { font-weight: 500; } .mb-letter__meta .muted { font-size: 13px; } .mb-letter blockquote { margin: 0 0 14px; padding: 0; font-family: var(--serif); font-size: 18px; line-height: 1.5; border: 0; } .mb-letter blockquote p { margin: 0; } .mb-letter blockquote p::before { content: "“"; margin-right: 2px; } .mb-letter blockquote p::after { content: "”"; margin-left: 2px; } .mb-letter__reply { padding: 12px 16px; background: var(--paper); border-left: 2px solid var(--ink); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 14px; color: var(--ink-muted); } .mb-letter__reply strong { color: var(--ink); font-weight: 500; } /* ——— 20 Experiment log ——— */ .explog-list { list-style: none; padding: 0; margin: 28px 0 0; } .explog-row { display: grid; grid-template-columns: 100px 1fr; gap: 24px; padding: 14px 0; border-bottom: 1px dashed var(--rule); font-size: 15px; } .explog-row:last-child { border-bottom: 0; } @media (max-width: 620px) { .explog-row { grid-template-columns: 1fr; gap: 4px; } } .explog-row__d { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); } .explog-row strong { font-weight: 500; } /* ——— 21 Further reading / in-series ——— */ .further-list { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 10px; } .further-item { display: grid; grid-template-columns: 52px 1fr auto; gap: 18px; align-items: center; padding: 18px 20px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius); } @media (max-width: 620px) { .further-item { grid-template-columns: 40px 1fr; } .further-item a { grid-column: 2; } } .further-item__n { font-family: var(--serif); font-size: 20px; color: var(--ink-muted); } .further-item--done { opacity: 0.7; } .further-item--current { border-color: var(--ink); background: var(--paper); } .further-item--current .further-item__n { color: var(--ink); } .further-item strong { display: block; font-weight: 500; font-size: 15px; } .further-item .muted { font-size: 12px; } /* ——— 22 Anti-testimonial ——— */ .antitest { padding: 20px 0; } .antitest__card { padding: 36px; background: var(--paper-soft); border: 1px dashed var(--ink); border-radius: var(--radius-lg); } .antitest__card h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 4vw, 38px); margin: 10px 0 18px; letter-spacing: -0.005em; } .antitest__list { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.6; } .antitest__list li { padding-left: 24px; position: relative; } .antitest__list li::before { content: "×"; position: absolute; left: 0; top: -2px; font-family: var(--serif); font-size: 20px; color: var(--ink-muted); } .antitest__card > .muted { margin: 0; font-size: 14px; } /* ——— 23 Vs alternatives ——— */ .vs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; } @media (max-width: 900px) { .vs-grid { grid-template-columns: 1fr; } } .vs-col { padding: 28px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-lg); } .vs-col--us { background: var(--ink); color: var(--paper-soft); } .vs-col--us .eyebrow, .vs-col--us strong { color: rgba(247, 246, 242, 0.65); } .vs-col--us h3 { color: var(--paper-soft); } .vs-col--us li { color: rgba(247, 246, 242, 0.85); } .vs-col h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 8px 0 14px; letter-spacing: -0.005em; } .vs-col ul { list-style: none; padding: 0; margin: 0; font-size: 14px; display: flex; flex-direction: column; gap: 10px; color: var(--ink-muted); line-height: 1.55; } .vs-col strong { font-weight: 500; color: var(--ink); } /* ——— 24 Readiness checklist ——— */ .ready-check__card { padding: 32px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-lg); } .ready-check__card h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 3vw, 32px); margin: 6px 0 18px; } .ready-list { list-style: none; padding: 0; margin: 0 0 18px; counter-reset: ready; display: flex; flex-direction: column; gap: 10px; } .ready-list li { counter-increment: ready; } .ready-list label { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); cursor: pointer; font-size: 15px; } .ready-list input { accent-color: var(--ink); margin-top: 4px; } .ready-list a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); } .ready-list label:hover { border-color: var(--ink); } /* ——— 25 Bundle builder ——— */ .builder-stage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; } @media (max-width: 780px) { .builder-stage { grid-template-columns: 1fr; } } .builder-slot { position: relative; padding: 20px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 10px; } .builder-slot--empty { border-style: dashed; background: transparent; display: grid; place-items: center; text-align: center; min-height: 200px; } .builder-slot__art { aspect-ratio: 4/3; background: var(--paper); border: 1px dashed var(--rule); border-radius: var(--radius-sm); display: grid; place-items: center; } .builder-slot__art .tag { font-size: 10px; color: var(--ink-muted); letter-spacing: 0.08em; text-transform: uppercase; } .builder-slot__body strong { display: block; font-weight: 500; } .builder-slot__body .muted { font-size: 12px; } .builder-slot__x { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; background: var(--paper); border: 1px solid var(--rule); display: grid; place-items: center; font-size: 16px; line-height: 1; color: var(--ink-muted); cursor: pointer; } .builder-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--rule); font-size: 14px; } /* ——— 26 Chips filter ——— */ .chips-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; } .chips-head strong { font-family: var(--serif); font-size: 22px; font-weight: 400; } .chips-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--rule); } .chips-row:last-child { border-bottom: 0; } .chips-label { flex-shrink: 0; min-width: 110px; font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); } .chip { padding: 7px 14px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: 999px; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .chip:hover { border-color: var(--ink); } .chip--on { background: var(--ink); color: var(--paper-soft); border-color: var(--ink); } .chips-row--actions { justify-content: flex-end; padding-top: 20px; } /* ——— 27 Starter kit ——— */ .starter-list { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 14px; } .starter-item { display: grid; grid-template-columns: 72px 1fr; gap: 24px; padding: 22px 24px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-lg); transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); cursor: pointer; } .starter-item:hover { border-color: var(--ink); transform: translateY(-1px); } .starter-item__n { font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--ink-muted); letter-spacing: -0.02em; } .starter-item strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 20px; margin-bottom: 6px; } .starter-item p { margin: 0 0 6px; font-size: 14px; color: var(--ink-muted); line-height: 1.55; } /* ——— 28 Roadmap ——— */ .rm-list { list-style: none; padding: 0; margin: 28px 0 0; } .rm-row { display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--rule); } .rm-row:last-child { border-bottom: 0; } @media (max-width: 680px) { .rm-row { grid-template-columns: 1fr; gap: 6px; } } .rm-row__date { display: flex; flex-direction: column; gap: 2px; } .rm-row__date strong { font-family: var(--serif); font-size: 20px; font-weight: 400; } .rm-row__date .muted { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); } .rm-row h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 0 0 8px; letter-spacing: -0.005em; } .rm-row p { margin: 0 0 14px; font-size: 14px; color: var(--ink-muted); line-height: 1.6; } .rm-row--next { padding-left: 24px; border-left: 3px solid var(--ink); margin-left: -24px; } .rm-row--cut { opacity: 0.55; } .rm-row--cut h3 { text-decoration: line-through; text-decoration-color: var(--ink-muted); } .rm-waitlist { display: flex; gap: 8px; max-width: 420px; padding: 6px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius); } .rm-waitlist input { flex: 1; border: 0; background: transparent; padding: 8px 12px; font: inherit; font-size: 14px; color: var(--ink); outline: none; } /* ——— 29 Letter preview ——— */ .letter-frame { margin: 28px auto 0; max-width: 640px; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 1px 0 var(--rule), 0 20px 40px -30px rgba(0,0,0,0.2); } .letter-frame__head { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; background: var(--paper-soft); border-bottom: 1px solid var(--rule); font-size: 13px; } .letter-frame__from { display: flex; flex-direction: column; } .letter-frame__from strong { font-weight: 500; } .letter-frame__from .muted { font-size: 12px; } .letter-frame__subject { padding: 18px 24px; font-family: var(--serif); font-size: 20px; border-bottom: 1px solid var(--rule); } .letter-frame__body { padding: 24px; font-family: var(--serif); font-size: 16px; line-height: 1.65; } .letter-frame__body p { margin: 0 0 14px; } .letter-frame__body p:last-child { margin-bottom: 0; } .letter-frame__foot { padding: 16px 24px; border-top: 1px solid var(--rule); font-size: 12px; line-height: 1.5; } .letter-preview__cta { text-align: center; margin-top: 28px; } /* ——— 30 Support strip ——— */ .support-strip { padding: 20px 0; } .support-strip__inner { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; padding: 28px 36px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-lg); } @media (max-width: 760px) { .support-strip__inner { grid-template-columns: 1fr; text-align: center; } .support-strip__avatars { justify-self: center; } .support-strip__cta { justify-self: center; } } .support-strip__avatars { display: flex; } .support-strip__avatars .support-avatar:nth-child(2) { margin-left: -12px; } .support-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: var(--paper-soft); display: grid; place-items: center; font-family: var(--serif); font-size: 22px; border: 2px solid var(--paper-soft); } .support-strip__body h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin: 4px 0 6px; letter-spacing: -0.005em; } .support-strip__body p { margin: 0; font-size: 14px; color: var(--ink-muted); line-height: 1.55; } .support-strip__cta { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; } .support-strip__meta { font-size: 12px; } /* ———————————————————————————————————————————————————— ILLUSTRATIONS PAGE — specimen catalogue (Thirty thin-line SVG illustrations, each with a PS note.) ———————————————————————————————————————————————————— */ .illos-page__intro { padding: 72px 0 48px; border-bottom: 1px solid var(--rule); background: var(--paper-soft); } .illos-page__intro h1 { font-size: clamp(42px, 6vw, 84px); margin: 12px 0 18px; } .illos-page__lede { font-family: var(--serif); font-size: clamp(18px, 2vw, 22px); line-height: 1.5; max-width: 720px; margin: 0 0 14px; } .illos-page__note { font-size: 13px; max-width: 720px; margin: 0; } .illos-page__note code { background: var(--paper); border: 1px solid var(--rule); padding: 1px 6px; border-radius: 4px; font-size: 12px; } .illos-page { counter-reset: illo; padding: 0 0 40px; } .illo-wrapper { counter-increment: illo; border-bottom: 1px solid var(--rule); padding: 40px 0 56px; } .illo-wrapper::before { content: "Illustration " counter(illo, decimal-leading-zero); display: block; max-width: calc(var(--wrap-max) + 0px); margin: 0 auto 14px; padding: 0 var(--wrap-pad); font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); } @media (max-width: 720px) { .illo-wrapper::before { padding: 0 var(--wrap-pad-sm); } } .illo-body { max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--wrap-pad); } @media (max-width: 720px) { .illo-body { padding: 0 var(--wrap-pad-sm); } } .illo-figure { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: center; margin: 0; } .illo-figure--square { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); } @media (max-width: 820px) { .illo-figure, .illo-figure--square { grid-template-columns: 1fr; gap: 20px; } } .illo-canvas { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 40px; color: var(--ink); display: grid; place-items: center; position: relative; } /* Faint corner ticks like a technical spec sheet */ .illo-canvas::before, .illo-canvas::after { content: ""; position: absolute; width: 14px; height: 14px; border: 1px solid var(--rule); } .illo-canvas::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; } .illo-canvas::after { bottom: 8px; right: 8px; border-left: 0; border-top: 0; } .illo-canvas svg { width: 100%; height: auto; max-width: 520px; display: block; } .illo-figure--square .illo-canvas svg { max-width: 360px; } .illo-figure--wide .illo-canvas svg { max-width: 560px; } .illo-caption h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; margin: 0 0 10px; letter-spacing: -0.005em; } .illo-caption p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-muted); } .illo-caption code { background: var(--paper-soft); border: 1px solid var(--rule); padding: 1px 6px; border-radius: 4px; font-size: 12px; color: var(--ink); } .illos-page__outro { padding: 80px 0; background: var(--ink); color: var(--paper-soft); text-align: center; } .illos-page__outro h2 { font-family: var(--serif); font-weight: 400; color: var(--paper-soft); font-size: clamp(28px, 4vw, 42px); margin: 10px 0 12px; } .illos-page__outro p { color: rgba(247, 246, 242, 0.7); max-width: 540px; margin: 0 auto; } /* ———————————————————————————————————————————————————— Thank-you / post-purchase ———————————————————————————————————————————————————— */ .thanks-block { padding: 64px 0 96px; background: var(--paper); } .thanks-wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; } .thanks-head { max-width: 640px; margin-bottom: 48px; } .thanks-head .display { margin: .3em 0 .4em; } .thanks-head .muted { font-size: 1.05rem; line-height: 1.55; } .thanks-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; margin-bottom: 56px; } @media (max-width: 860px) { .thanks-grid { grid-template-columns: 1fr; } } .thanks-card { background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius); padding: 32px; } .thanks-card-head { margin-bottom: 12px; } .thanks-card .tag { display: inline-block; font-family: var(--mono, monospace); font-size: .8rem; color: rgba(39,38,34,.55); margin-bottom: 8px; } .thanks-card h2 { margin: .1em 0 .5em; font-size: 1.6rem; line-height: 1.2; } .thanks-files { margin: 20px 0 16px; } .thanks-file { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); text-decoration: none; color: inherit; } .thanks-file + .thanks-file { margin-top: 10px; } .thanks-file-label strong { display: block; } .thanks-file-label .muted { display: block; font-size: .85rem; margin-top: 2px; } .thanks-note { font-size: .9rem; margin-top: 10px; } .thanks-support .eyebrow { margin-bottom: 12px; } .thanks-links { list-style: none; padding: 0; margin: 0; } .thanks-links li + li { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); } .thanks-links a { text-decoration: none; color: inherit; border-bottom: 1px solid transparent; } .thanks-links a:hover { border-bottom-color: var(--ink); } .thanks-upsell { border-top: 1px solid var(--rule); padding-top: 56px; margin-bottom: 56px; } .thanks-upsell-head { max-width: 620px; margin-bottom: 28px; } .thanks-upsell-head h2 { font-size: 1.6rem; margin: .3em 0 .4em; } .thanks-upsell-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 860px) { .thanks-upsell-grid { grid-template-columns: 1fr; } } .thanks-companion { background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; } .thanks-companion-art { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--rule); background: var(--paper); } .thanks-companion-art .tag { font-family: var(--mono, monospace); font-size: .85rem; color: rgba(39,38,34,.5); } .thanks-companion-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .thanks-companion-body h3 { margin: 0; font-size: 1.2rem; } .thanks-companion-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 8px; } .thanks-companion-foot .price { font-family: var(--serif, Georgia, serif); font-size: 1.25rem; } .thanks-news { background: var(--ink); color: var(--paper); padding: 44px 40px; margin-bottom: 48px; border-radius: var(--radius); } .thanks-news-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center; max-width: 960px; margin: 0 auto; } @media (max-width: 860px) { .thanks-news-inner { grid-template-columns: 1fr; } } .thanks-news .eyebrow { color: rgba(240,238,235,.6); } .thanks-news-copy h2 { color: var(--paper); font-size: 1.5rem; margin: .3em 0 .4em; } .thanks-news-copy .muted { color: rgba(240,238,235,.7); } .thanks-news-form { display: flex; gap: 8px; flex-wrap: wrap; } .thanks-news-form input[type=email] { flex: 1 1 240px; padding: 14px 16px; background: transparent; border: 1px solid rgba(240,238,235,.35); border-radius: var(--radius); color: var(--paper); font-family: inherit; font-size: 1rem; } .thanks-news-form input[type=email]::placeholder { color: rgba(240,238,235,.45); } .thanks-news-form input[type=email]:focus { outline: none; border-color: var(--paper); } .thanks-news-form .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); } .thanks-next h3 { font-size: 1.3rem; margin-bottom: 16px; } .thanks-next-list { counter-reset: next; list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; } .thanks-next-list li { counter-increment: next; position: relative; padding-left: 48px; line-height: 1.55; } .thanks-next-list li::before { content: counter(next, decimal-leading-zero); position: absolute; left: 0; top: 2px; font-family: var(--mono, monospace); font-size: .85rem; color: rgba(39,38,34,.5); } /* ———————————————————————————————————————————————————— Account dashboard ———————————————————————————————————————————————————— */ .account-block { padding: 56px 0 96px; background: var(--paper); } .account-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; } .account-head { max-width: 640px; margin-bottom: 36px; } .account-head .display { margin: .3em 0 .4em; } .account-nav { display: flex; flex-wrap: wrap; gap: 4px 24px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 14px 0; margin-bottom: 40px; align-items: center; } .account-nav a { text-decoration: none; color: rgba(39,38,34,.65); font-size: .95rem; padding: 6px 0; border-bottom: 1px solid transparent; } .account-nav a.is-active, .account-nav a:hover { color: var(--ink); border-bottom-color: var(--ink); } .account-nav-out { margin-left: auto; font-size: .9rem; } .account-panels { display: grid; gap: 48px; } .account-panel { scroll-margin-top: 96px; } .account-panel-head { margin-bottom: 20px; max-width: 620px; } .account-panel-head h2 { font-size: 1.55rem; margin: 0 0 .3em; } .account-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .95rem; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; } .account-table th, .account-table td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; } .account-table thead th { font-weight: 500; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(39,38,34,.55); background: var(--paper-soft); } .account-table td.right, .account-table th.right { text-align: right; } .account-table tbody tr:last-child td, .account-table tbody tr:last-child th { border-bottom: 1px solid var(--rule); } .account-downloads { display: grid; gap: 28px; } .account-download-group h3 { font-size: 1.05rem; margin: 0 0 12px; font-family: var(--mono, monospace); letter-spacing: .02em; text-transform: uppercase; color: rgba(39,38,34,.6); } .account-download-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); } .account-download-list li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); } .account-download-list li > div strong { display: block; } .account-download-list li .muted { display: block; font-size: .85rem; margin-top: 2px; } .account-prefs { display: grid; gap: 24px; max-width: 640px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius); padding: 24px 28px; } .account-prefs fieldset { border: none; padding: 0; margin: 0; display: grid; gap: 10px; } .account-prefs legend { padding: 0; margin-bottom: 8px; } .account-prefs label { display: flex; gap: 10px; align-items: center; font-size: .95rem; cursor: pointer; } .account-prefs input[type=radio], .account-prefs input[type=checkbox] { accent-color: var(--ink); } .account-form-foot { margin-top: 4px; } /* ———————————————————————————————————————————————————— Free-tools hub (/tools/) ———————————————————————————————————————————————————— */ .tools-block { padding: 64px 0 96px; background: var(--paper); } .tools-wrap { max-width: 860px; margin: 0 auto; padding: 0 24px; } .tools-head { margin-bottom: 40px; max-width: 640px; } .tools-head .display { margin: .3em 0 .4em; } .tools-nav { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-top: 24px; } .tools-nav a { text-decoration: none; color: rgba(39,38,34,.65); font-size: .92rem; border-bottom: 1px solid transparent; padding: 4px 0; } .tools-nav a:hover { color: var(--ink); border-bottom-color: var(--ink); } .tool-card { background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius); padding: 32px; margin-bottom: 24px; scroll-margin-top: 96px; } .tool-head { margin-bottom: 20px; } .tool-head .tag { display: inline-block; font-family: var(--mono, monospace); font-size: .8rem; color: rgba(39,38,34,.55); margin-bottom: 8px; } .tool-head h2 { font-size: 1.45rem; line-height: 1.2; margin: .1em 0 .4em; } .tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; } @media (max-width: 640px) { .tool-grid { grid-template-columns: 1fr; } } .tool-field { display: grid; gap: 8px; margin-bottom: 16px; } .tool-field--full { grid-column: 1 / -1; } .tool-field > span, .tool-field legend > span { font-family: var(--mono, monospace); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(39,38,34,.6); } .tool-field legend { padding: 0; margin-bottom: 8px; } .tool-field input[type=number], .tool-field input[type=text], .tool-field select, .tool-field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); color: var(--ink); font-family: inherit; font-size: 1rem; } .tool-field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px; } .tool-field textarea { resize: vertical; min-height: 120px; font-family: var(--mono, monospace); font-size: .92rem; } .tool-field input:focus, .tool-field select:focus, .tool-field textarea:focus { outline: none; border-color: var(--ink); } .tool-row { display: flex; gap: 8px; } .tool-row input[type=number] { flex: 1; } .tool-row select { width: auto; min-width: 80px; } .tool-chips { display: flex; flex-wrap: wrap; gap: 8px; } .tool-chips label { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); font-size: .9rem; cursor: pointer; } .tool-chips input[type=radio] { accent-color: var(--ink); } .tool-chips label:has(input:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); } .tool-out { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--rule); display: grid; gap: 12px; } .tool-out[hidden] { display: none; } .tool-out-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .tool-out-row strong { font-family: var(--serif, Georgia, serif); font-size: 1.2rem; } .tool-out-bar { height: 8px; background: var(--paper); border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; } .tool-out-bar span { display: block; height: 100%; width: 0; background: var(--ink); transition: width .35s ease; } .tool-out-note { font-size: .88rem; } .tool-out-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 8px; } @media (max-width: 640px) { .tool-out-stats { grid-template-columns: repeat(2, 1fr); } } .tool-out-stats > div { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 12px 14px; display: grid; gap: 4px; } .tool-out-stats .muted { font-family: var(--mono, monospace); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; } .tool-out-stats strong { font-family: var(--serif, Georgia, serif); font-size: 1.35rem; line-height: 1; } .tool-out--pick { gap: 16px; } .tool-out--pick .btn { justify-self: start; } .tool-streak-grid { width: 100%; overflow-x: auto; padding-top: 4px; } .tool-streak-grid svg { display: block; width: 100%; height: auto; min-width: 520px; } .tools-foot { margin-top: 40px; text-align: center; font-size: .95rem; } @media print { .tools-nav, .tool-head .tag, .tools-foot, .tool-field:not(.tool-field--full) { display: none; } .tool-card { border: none; background: transparent; padding: 0; margin-bottom: 32px; page-break-inside: avoid; } } /* ———————————————————————————————————————————————————— Respect reduced motion ———————————————————————————————————————————————————— */ @media (prefers-reduced-motion: reduce) { .reading-progress__fill { transition: none; } .help-card, .sample-card, .gift-card, .review-card, .quiz-option, .compare-table, .crosssell-card, .guide-hero__jump a, .fb-page__art, .starter-item, .fit-chip, .chip, .thanks-companion, .thanks-file, .tool-out-bar span, .tool-chips label { transition: none; } } /* ============================================================ Device lab — /device-lab/ Workshop page for the photoreal PNG mockup system. Component CSS for .device-mockup lives at end of file. ============================================================ */ .device-lab { padding: 64px 0 96px; } .device-lab__head { max-width: 720px; margin: 0 auto 56px; text-align: center; } .device-lab__lede { color: var(--ink-muted); margin-top: 12px; } .device-mockup-block { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--rule); } .device-mockup-block:first-of-type { margin-top: 48px; } .device-mockup-block > header { margin-bottom: 24px; } .device-mockup-block > header h2 { margin: 0; font-size: 22px; line-height: 1.2; } .device-mockup-block > header p { margin: 4px 0 0; color: var(--ink-muted); font-size: 13px; font-variant-numeric: tabular-nums; } /* ——— Animations page ——————————————————————————— */ /* Three logo-mark loops: Converge, Draw, Stack. Vanilla CSS + RAF. No shadows, no gradients beyond paper-soft tonal swap. Tokens only. */ .anim-block { padding: 80px 0 96px; } .anim-wrap { max-width: 1240px; } .anim-head { max-width: 760px; margin: 0 auto 56px; text-align: center; } .anim-head .display { font-size: clamp(34px, 4.4vw, 52px); margin: 14px 0 18px; } .anim-head .muted { font-size: 16px; line-height: 1.55; } .anim-nav { margin-top: 26px; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 6px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: 999px; } .anim-nav a { display: inline-block; padding: 8px 16px; border-radius: 999px; font-size: 12.5px; letter-spacing: 0.02em; color: var(--ink-muted); transition: background .2s ease, color .2s ease; } .anim-nav a:hover { background: var(--paper); color: var(--ink); } /* Featured card holds the full-width original animation */ .anim-card--featured { margin-bottom: 36px; } .anim-card--featured .anim-stage--wide { aspect-ratio: 12 / 5; } @media (max-width: 1024px) { .anim-card--featured .anim-stage--wide { aspect-ratio: 16 / 11; } } .anim-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } @media (max-width: 1024px) { .anim-grid { grid-template-columns: 1fr; gap: 32px; } } .anim-card { display: flex; flex-direction: column; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; } .anim-stage { position: relative; aspect-ratio: 4 / 3; background: var(--paper); border-bottom: 1px solid var(--rule); overflow: hidden; isolation: isolate; } @media (max-width: 1024px) { .anim-stage { aspect-ratio: 16 / 10; } } .anim-meta { padding: 22px 24px 26px; } .anim-meta .tag { display: inline-block; font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 10px; } .anim-meta h2 { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.2; letter-spacing: -0.005em; margin: 0 0 8px; color: var(--ink); } .anim-meta .muted { font-size: 14px; line-height: 1.55; margin: 0; } .anim-foot { margin-top: 48px; text-align: center; } .anim-foot .muted { font-size: 14px; } /* —— Central mark — shared base — */ .anim-mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink); z-index: 2; pointer-events: none; } /* ——— № 01 — Converge ——————————————————————— */ .anim-stage[data-anim="converge"] .anim-stage__field { position: absolute; inset: 0; /* Mask: tickets fade near the mark and at the far edges */ -webkit-mask-image: radial-gradient(ellipse 70% 80% at center, transparent 0, transparent 56px, #000 130px, #000 78%, transparent 100%); mask-image: radial-gradient(ellipse 70% 80% at center, transparent 0, transparent 56px, #000 130px, #000 78%, transparent 100%); z-index: 1; } .anim-stage__rail { position: absolute; top: 0; bottom: 0; width: 50%; } .anim-stage__rail--left { left: 0; } .anim-stage__rail--right { right: 0; } .anim-ticket { position: absolute; top: 50%; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius); font-size: 12px; letter-spacing: 0.01em; color: var(--ink); white-space: nowrap; transform: translate3d(0, -50%, 0); will-change: transform, opacity; } .anim-ticket__dot { width: 5px; height: 5px; border-radius: 999px; background: var(--ink); opacity: 0.5; } .anim-ticket__no { font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: 10px; letter-spacing: 0.14em; color: var(--ink-muted); text-transform: uppercase; } .anim-mark--breathe { animation: anim-breathe 3.6s ease-in-out infinite; } .anim-mark--breathe svg { display: block; filter: none; } @keyframes anim-breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.04); opacity: 0.92; } } /* ——— № 02 — Draw ———————————————————————————— */ .anim-mark--draw .anim-mark__path { /* JS measures real path length and sets it; this is a safe fallback. */ stroke-dasharray: 380; stroke-dashoffset: 380; animation: anim-draw 5.2s cubic-bezier(.6,.05,.25,1) infinite; } .anim-mark--draw .anim-mark__fill { opacity: 0; animation: anim-fill 5.2s ease-in-out infinite; } .anim-mark--draw svg { display: block; /* Stack stroke + fill paths on top of each other */ } .anim-mark--draw svg .anim-mark__fill { /* Reset position — both paths share the same viewBox so they overlay */ } /* Wordmark caption typed in below the mark */ .anim-mark__caption { position: absolute; left: 0; right: 0; bottom: 22%; text-align: center; z-index: 3; pointer-events: none; } .anim-mark__word { display: inline-block; font-family: var(--serif); font-size: 18px; letter-spacing: 0.01em; color: var(--ink); clip-path: inset(0 100% 0 0); animation: anim-word 5.2s ease-out infinite; } @keyframes anim-draw { 0% { stroke-dashoffset: var(--draw-len, 380); } 55% { stroke-dashoffset: 0; opacity: 1; } 72% { opacity: 0.9; } 90% { opacity: 0.9; stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } } @keyframes anim-fill { 0%, 50% { opacity: 0; } 62% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } } @keyframes anim-word { 0%, 60% { clip-path: inset(0 100% 0 0); opacity: 0; } 78% { clip-path: inset(0 0 0 0); opacity: 1; } 92% { clip-path: inset(0 0 0 0); opacity: 1; } 100% { clip-path: inset(0 0 0 0); opacity: 0; } } /* ——— № 03 — Stack ——————————————————————————— */ .anim-stage[data-anim="stack"] { display: flex; align-items: center; justify-content: center; } .anim-sheet { position: absolute; width: 56%; aspect-ratio: 3 / 4; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius); transform-origin: 50% 100%; opacity: 0; } .anim-sheet__num { position: absolute; top: 14px; right: 16px; font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-muted); letter-spacing: 0.02em; } .anim-sheet--3 { transform: translateY(28px) translateX(28px) rotate(2.4deg); background: var(--paper); animation: anim-stack-3 5.4s ease-out infinite; } .anim-sheet--2 { transform: translateY(16px) translateX(-16px) rotate(-1.8deg); animation: anim-stack-2 5.4s ease-out infinite; } .anim-sheet--1 { background: var(--paper-soft); animation: anim-stack-1 5.4s ease-out infinite; } .anim-sheet__mark { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--ink); opacity: 0; animation: anim-stack-mark 5.4s ease-out infinite; } .anim-sheet__mark svg { display: block; transform: scale(.85); transform-origin: center; } .anim-sheet__label { font-family: var(--serif); font-size: 17px; letter-spacing: 0.005em; color: var(--ink); margin-top: 4px; } .anim-sheet__sub { font-size: 11.5px; letter-spacing: 0.04em; color: var(--ink-muted); } @keyframes anim-stack-3 { 0% { transform: translateY(80px) translateX(28px) rotate(2.4deg); opacity: 0; } 18% { transform: translateY(28px) translateX(28px) rotate(2.4deg); opacity: 1; } 82% { transform: translateY(28px) translateX(28px) rotate(2.4deg); opacity: 1; } 100% { transform: translateY(28px) translateX(28px) rotate(2.4deg); opacity: 0; } } @keyframes anim-stack-2 { 0%, 12% { transform: translateY(80px) translateX(-16px) rotate(-1.8deg); opacity: 0; } 30% { transform: translateY(16px) translateX(-16px) rotate(-1.8deg); opacity: 1; } 82% { transform: translateY(16px) translateX(-16px) rotate(-1.8deg); opacity: 1; } 100% { transform: translateY(16px) translateX(-16px) rotate(-1.8deg); opacity: 0; } } @keyframes anim-stack-1 { 0%, 24% { transform: translateY(80px) rotate(0); opacity: 0; } 44% { transform: translateY(0) rotate(0); opacity: 1; } 82% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(0) rotate(0); opacity: 0; } } @keyframes anim-stack-mark { 0%, 50% { opacity: 0; transform: scale(0.94); } 62% { opacity: 1; transform: scale(1); } 82% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } } /* ——— № 00 — Original (faithful port of the AI Studio cut) ——— */ .anim-stage[data-anim="tools"] .anim-stage__field { position: absolute; inset: 0; /* Edge fade only — icons remain fully visible across the full width and pass behind the centre logo tile (which sits on top via z-index). */ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%); z-index: 1; } .anim-mark--brand { z-index: 3; } .anim-mark--brand .anim-mark__tile { position: relative; width: 156px; height: 156px; border-radius: var(--radius-lg); background: var(--paper-soft); border: 1px solid var(--rule); display: flex; align-items: center; justify-content: center; color: var(--ink); /* Tonal pulse — replaces the original's blurred dark glow with a clean tone shift, per the design system's no-shadow rule. */ animation: anim-tile-pulse 3s ease-in-out infinite; } @keyframes anim-tile-pulse { 0%, 100% { background: var(--paper-soft); transform: scale(1); } 50% { background: #EDE9E1; transform: scale(1.012); } } .anim-tool { position: absolute; top: 50%; left: 50%; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--ink); white-space: nowrap; pointer-events: none; will-change: transform, opacity; /* Self-centre on stage centre (top/left 50%). JS animations compose a second translate() on top, so the structure stays consistent across keyframes and WAAPI can matrix-interpolate cleanly. */ transform: translate(-50%, -50%) translate(0, 0); } .anim-tool__tile { width: 72px; height: 72px; border-radius: var(--radius); background: var(--paper-soft); border: 1px solid var(--rule); display: flex; align-items: center; justify-content: center; color: var(--ink); opacity: 0.72; } .anim-tool__tile svg { width: 32px; height: 32px; } .anim-tool__label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); } /* Margin-note signature in the bottom-right of the wide stage */ .anim-stage__sig { position: absolute; right: 18px; bottom: 14px; z-index: 4; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted); opacity: 0.55; } @media (max-width: 720px) { .anim-mark--brand .anim-mark__tile { width: 116px; height: 116px; } .anim-mark--brand .anim-mark__tile svg { width: 68px; height: 68px; } .anim-tool__tile { width: 56px; height: 56px; } .anim-tool__tile svg { width: 24px; height: 24px; } } /* —— Reduced motion: pin to a clean static state —— */ @media (prefers-reduced-motion: reduce) { .anim-mark--breathe, .anim-mark--brand .anim-mark__tile, .anim-mark--draw .anim-mark__path, .anim-mark--draw .anim-mark__fill, .anim-mark__word, .anim-sheet, .anim-sheet__mark, .anim-ticket, .anim-tool { animation: none !important; } .anim-mark--draw .anim-mark__path { stroke-dashoffset: 0; } .anim-mark--draw .anim-mark__fill { opacity: 1; } .anim-mark__word { clip-path: inset(0 0 0 0); opacity: 1; } .anim-sheet { opacity: 1; } .anim-sheet--1 { transform: translateY(0); } .anim-sheet--2 { transform: translateY(16px) translateX(-16px) rotate(-1.8deg); opacity: 1; } .anim-sheet--3 { transform: translateY(28px) translateX(28px) rotate(2.4deg); opacity: 1; } .anim-sheet__mark { opacity: 1; } } /* ===================================================================== Concepts grid — № 04+ 24 short animations, one each for a different section of the site. All CSS-only. Each lives under .anim-stage[data-anim="..."]. Stage shell + .anim-card--concept layout below; per-concept rules follow. ===================================================================== */ .anim-head--secondary { margin-top: 96px; padding-top: 48px; border-top: 1px solid var(--rule); } .anim-head--secondary .display { font-size: clamp(28px, 3vw, 40px); } .anim-grid--concepts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; margin-top: 32px; } .anim-card--concept { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 12px; } .anim-card--concept .anim-meta { padding: 0; } .anim-card--concept h3 { font-family: var(--serif); font-size: 18px; margin: 4px 0; line-height: 1.25; } .anim-card--concept .muted { font-size: 13px; line-height: 1.45; } .anim-card--concept .tag { font-family: var(--mono); font-size: 11px; color: var(--ink); opacity: 0.6; } .anim-ps { font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; line-height: 1.5; color: var(--ink); opacity: 0.7; margin: 0; padding: 8px 10px; background: var(--paper-soft); border-left: 2px solid var(--ink); border-radius: 4px; } .anim-ps strong { font-family: var(--mono); font-weight: 700; letter-spacing: 0.06em; } .anim-stage--concept { position: relative; width: 100%; aspect-ratio: 16 / 10; background: var(--paper-soft); border-radius: var(--radius); overflow: hidden; display: grid; place-items: center; color: var(--ink); } /* — № 04 typewriter ------------------------------------------------ */ .anim-tw { font-family: var(--serif); font-size: clamp(20px, 4vw, 32px); color: var(--ink); white-space: nowrap; } .anim-tw__text { display: inline-block; overflow: hidden; vertical-align: bottom; max-width: 0; animation: anim-tw 6s ease-in-out infinite; } .anim-tw__caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; background: var(--ink); vertical-align: text-bottom; animation: anim-blink 0.9s step-end infinite; } @keyframes anim-tw { 0% { max-width: 0; } 35% { max-width: 11ch; } 85% { max-width: 11ch; } 100% { max-width: 0; } } @keyframes anim-blink { 50% { opacity: 0; } } /* — № 05 page turn -------------------------------------------------- */ .anim-stage[data-anim="page-turn"] { perspective: 900px; } .anim-pt__sheet { width: 50%; aspect-ratio: 4/5; position: relative; transform-style: preserve-3d; animation: anim-pt 6s ease-in-out infinite; } .anim-pt__face { position: absolute; inset: 0; backface-visibility: hidden; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); display: grid; place-items: center; color: var(--ink); } .anim-pt__face--back { transform: rotateY(180deg); } .anim-pt__num { font-family: var(--mono); font-size: 11px; opacity: 0.6; } @keyframes anim-pt { 0%, 25% { transform: rotateY(0deg); } 60%, 100% { transform: rotateY(-180deg); } } /* — № 06 grid build ------------------------------------------------- */ .anim-gb { display: grid; grid-template-columns: repeat(5, 14px); grid-template-rows: repeat(5, 14px); gap: 4px; } .anim-gb__cell { background: var(--ink); border-radius: 2px; opacity: 0; animation: anim-gb 5s ease-in-out infinite; } .anim-gb__cell:nth-child(1) { animation-delay: 0.00s; } .anim-gb__cell:nth-child(2) { animation-delay: 0.05s; } .anim-gb__cell:nth-child(3) { animation-delay: 0.10s; } .anim-gb__cell:nth-child(4) { animation-delay: 0.15s; } .anim-gb__cell:nth-child(5) { animation-delay: 0.20s; } .anim-gb__cell:nth-child(6) { animation-delay: 0.25s; } .anim-gb__cell:nth-child(7) { animation-delay: 0.30s; } .anim-gb__cell:nth-child(8) { animation-delay: 0.35s; } .anim-gb__cell:nth-child(9) { animation-delay: 0.40s; } .anim-gb__cell:nth-child(10) { animation-delay: 0.45s; } .anim-gb__cell:nth-child(11) { animation-delay: 0.50s; } .anim-gb__cell:nth-child(12) { animation-delay: 0.55s; } .anim-gb__cell:nth-child(13) { animation-delay: 0.60s; } .anim-gb__cell:nth-child(14) { animation-delay: 0.65s; } .anim-gb__cell:nth-child(15) { animation-delay: 0.70s; } .anim-gb__cell:nth-child(16) { animation-delay: 0.75s; } .anim-gb__cell:nth-child(17) { animation-delay: 0.80s; } .anim-gb__cell:nth-child(18) { animation-delay: 0.85s; } .anim-gb__cell:nth-child(19) { animation-delay: 0.90s; } .anim-gb__cell:nth-child(20) { animation-delay: 0.95s; } .anim-gb__cell:nth-child(21) { animation-delay: 1.00s; } .anim-gb__cell:nth-child(22) { animation-delay: 1.05s; } .anim-gb__cell:nth-child(23) { animation-delay: 1.10s; } .anim-gb__cell:nth-child(24) { animation-delay: 1.15s; } .anim-gb__cell:nth-child(25) { animation-delay: 1.20s; } @keyframes anim-gb { 0%, 5% { opacity: 0; transform: scale(0.5); } 35%, 75% { opacity: 1; transform: scale(1); } 95%, 100% { opacity: 0; transform: scale(0.6); } } /* — № 07 marquee ---------------------------------------------------- */ .anim-mq { width: 100%; overflow: hidden; } .anim-mq__track { display: inline-block; white-space: nowrap; font-family: var(--mono); font-size: 14px; color: var(--ink); animation: anim-mq 28s linear infinite; padding-left: 100%; } @keyframes anim-mq { from { transform: translateX(0); } to { transform: translateX(-100%); } } /* — № 08 stamp ------------------------------------------------------ */ .anim-stamp { display: grid; place-items: center; } .anim-stamp svg { color: var(--ink); transform-origin: center; animation: anim-stamp 4.5s ease-out infinite; } @keyframes anim-stamp { 0% { transform: scale(2.6); opacity: 0; } 6% { transform: scale(0.88); opacity: 1; } 10% { transform: scale(1.05); } 14% { transform: scale(0.99); } 18%, 88% { transform: scale(1); opacity: 1; } 98%, 100% { opacity: 0; } } /* — № 09 crossfade -------------------------------------------------- */ .anim-cf { font-family: var(--serif); font-size: clamp(16px, 2.4vw, 22px); color: var(--ink); } .anim-cf__words { display: inline-block; position: relative; min-width: 9ch; vertical-align: bottom; } .anim-cf__words span { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; animation: anim-cf 12.5s ease-in-out infinite; } .anim-cf__words span:nth-child(1) { animation-delay: 0s; } .anim-cf__words span:nth-child(2) { animation-delay: 2.5s; } .anim-cf__words span:nth-child(3) { animation-delay: 5.0s; } .anim-cf__words span:nth-child(4) { animation-delay: 7.5s; } .anim-cf__words span:nth-child(5) { animation-delay: 10s; } @keyframes anim-cf { 0%, 4% { opacity: 0; transform: translateY(6px); } 8%, 18% { opacity: 1; transform: translateY(0); } 22%, 100% { opacity: 0; transform: translateY(-6px); } } /* — № 10 sketch settle --------------------------------------------- */ .anim-ss { font-family: var(--serif); font-size: clamp(20px, 3.2vw, 28px); color: var(--ink); display: inline-block; animation: anim-ss 5s ease-out infinite; transform-origin: center; } @keyframes anim-ss { 0% { transform: translate(2px, -1px) rotate(-1deg) skewX(-1deg); filter: blur(0.4px); } 6% { transform: translate(-2px, 2px) rotate(0.8deg) skewX(0.6deg); filter: blur(0.3px); } 12% { transform: translate(1px, 1px) rotate(-0.4deg); filter: blur(0.15px); } 20%, 90% { transform: translate(0, 0) rotate(0); filter: blur(0); } 100% { transform: translate(0, 0) rotate(0); filter: blur(0); } } /* — № 11 cursor demo ----------------------------------------------- */ .anim-cd { position: relative; width: 70%; } .anim-cd__planner { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 12px 14px; font-family: var(--mono); font-size: 11px; color: var(--ink); display: flex; flex-direction: column; gap: 6px; } .anim-cd__row { display: flex; gap: 8px; align-items: center; } .anim-cd__chk { width: 12px; height: 12px; border: 1.5px solid var(--ink); border-radius: 3px; position: relative; flex-shrink: 0; } .anim-cd__chk--1 { animation: anim-cd-tick 7s ease 1.4s infinite; } .anim-cd__chk--2 { animation: anim-cd-tick 7s ease 3.0s infinite; } .anim-cd__chk--3 { animation: anim-cd-tick 7s ease 4.6s infinite; } @keyframes anim-cd-tick { 0%, 14% { background: transparent; } 15%, 90% { background: var(--ink); } 100% { background: transparent; } } .anim-cd__cursor { position: absolute; width: 10px; height: 10px; background: transparent; border: 1.5px solid var(--ink); border-radius: 50%; pointer-events: none; animation: anim-cd-move 7s ease-in-out infinite; top: 0; left: 0; } @keyframes anim-cd-move { 0% { transform: translate(110%, 30%); } 18% { transform: translate(8%, 30%); } 22% { transform: translate(8%, 30%) scale(0.7); } 26% { transform: translate(8%, 30%) scale(1); } 40% { transform: translate(8%, 90%); } 44% { transform: translate(8%, 90%) scale(0.7); } 48% { transform: translate(8%, 90%) scale(1); } 62% { transform: translate(8%, 150%); } 66% { transform: translate(8%, 150%) scale(0.7); } 70% { transform: translate(8%, 150%) scale(1); } 100% { transform: translate(110%, 150%); } } /* — № 12 card fan -------------------------------------------------- */ .anim-fan { position: relative; width: 90px; height: 110px; } .anim-fan__card { position: absolute; inset: 0; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); transform-origin: 50% 100%; } .anim-fan__card--1 { animation: anim-fan-1 6s ease-in-out infinite; } .anim-fan__card--2 { animation: anim-fan-2 6s ease-in-out infinite; } .anim-fan__card--3 { animation: anim-fan-3 6s ease-in-out infinite; } @keyframes anim-fan-1 { 0%, 15% { transform: rotate(0deg); } 40%, 65% { transform: rotate(-14deg); } 90%,100% { transform: rotate(0deg); } } @keyframes anim-fan-2 { 0%, 15% { transform: rotate(0deg); } 40%, 65% { transform: rotate(0deg); } 90%,100% { transform: rotate(0deg); } } @keyframes anim-fan-3 { 0%, 15% { transform: rotate(0deg); } 40%, 65% { transform: rotate(14deg); } 90%,100% { transform: rotate(0deg); } } /* — № 13 date flip ------------------------------------------------- */ .anim-df { display: flex; gap: 8px; align-items: center; font-family: var(--serif); font-size: 32px; color: var(--ink); } .anim-df__cell { position: relative; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 8px 14px; min-width: 56px; text-align: center; overflow: hidden; } .anim-df__num--flip { display: inline-block; animation: anim-df 5s ease-in-out infinite; transform-origin: center top; } .anim-df__sep { opacity: 0.4; } @keyframes anim-df { 0%, 30% { transform: rotateX(0deg); } 50% { transform: rotateX(-90deg); } 52% { content: '27'; } 70%, 100% { transform: rotateX(0deg); } } /* — № 14 pulse breathe --------------------------------------------- */ .anim-pb { display: flex; gap: 10px; align-items: center; font-family: var(--mono); font-size: 12px; color: var(--ink); } .anim-pb__dot { width: 10px; height: 10px; background: var(--ink); border-radius: 50%; position: relative; animation: anim-pb 2.6s ease-in-out infinite; } .anim-pb__dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--ink); opacity: 0; animation: anim-pb-ring 2.6s ease-out infinite; } @keyframes anim-pb { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } } @keyframes anim-pb-ring { 0% { opacity: 0.6; transform: scale(0.6); } 80%, 100% { opacity: 0; transform: scale(2.2); } } /* — № 15 origami --------------------------------------------------- */ .anim-or { width: 60%; aspect-ratio: 4/3; position: relative; } .anim-or__top, .anim-or__bottom { position: absolute; left: 0; right: 0; background: var(--paper); border: 1px solid var(--rule); display: grid; place-items: center; } .anim-or__top { top: 0; height: 50%; border-radius: var(--radius) var(--radius) 0 0; border-bottom: 0; transform-origin: 50% 100%; animation: anim-or-top 5s ease-in-out infinite; z-index: 2; } .anim-or__bottom { bottom: 0; height: 50%; border-radius: 0 0 var(--radius) var(--radius); border-top: 1px dashed var(--rule); } @keyframes anim-or-top { 0%, 20% { transform: rotateX(0deg); } 55%, 75% { transform: rotateX(-160deg); } 95%, 100% { transform: rotateX(0deg); } } /* — № 16 receipt scroll -------------------------------------------- */ .anim-stage[data-anim="receipt-scroll"] { overflow: hidden; } .anim-rs { width: 60%; height: 100%; overflow: hidden; mask: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%); } .anim-rs__paper { background: var(--paper); border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); padding: 8px 12px; font-family: var(--mono); font-size: 11px; color: var(--ink); animation: anim-rs 12s linear infinite; } .anim-rs__row { padding: 4px 0; border-bottom: 1px dashed var(--rule); } @keyframes anim-rs { 0% { transform: translateY(40%); } 100% { transform: translateY(-100%); } } /* — № 17 ink fill -------------------------------------------------- */ .anim-if svg { color: var(--ink); } .anim-if__rect { animation: anim-if 5s ease-in-out infinite; } @keyframes anim-if { 0%, 10% { y: 48; } 55%, 80% { y: 0; } 98%, 100% { y: 48; } } /* — № 18 pin drop -------------------------------------------------- */ .anim-pd { position: relative; width: 60%; aspect-ratio: 4/3; } .anim-pd__sheet { position: absolute; inset: 12% 8% 12% 12%; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); } .anim-pd__pin { position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); color: var(--ink); animation: anim-pd 4s cubic-bezier(0.22, 1.6, 0.4, 1) infinite; } @keyframes anim-pd { 0% { transform: translate(-50%, -120%) rotate(-12deg); opacity: 0; } 20% { opacity: 1; } 60% { transform: translate(-50%, 12%) rotate(0deg); } 72% { transform: translate(-50%, 0%) rotate(2deg); } 82%, 95% { transform: translate(-50%, 8%) rotate(0deg); } 100% { transform: translate(-50%, 8%) rotate(0deg); opacity: 1; } } /* — № 19 thread bind ----------------------------------------------- */ .anim-tb { position: relative; width: 75%; aspect-ratio: 16/6; } .anim-tb__page { position: absolute; width: 24px; height: 32px; background: var(--paper); border: 1px solid var(--rule); border-radius: 3px; top: 50%; transform: translateY(-50%); } .anim-tb__page--1 { left: 8%; } .anim-tb__page--2 { left: 50%; transform: translate(-50%, -50%); } .anim-tb__page--3 { right: 8%; } .anim-tb__thread { position: absolute; inset: 0; width: 100%; height: 100%; } .anim-tb__thread path { stroke-dasharray: 200; stroke-dashoffset: 200; animation: anim-tb 5s ease-in-out infinite; } @keyframes anim-tb { 0%, 5% { stroke-dashoffset: 200; } 60%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 200; } } /* — № 20 watermark ------------------------------------------------- */ .anim-wm { position: relative; width: 100%; height: 100%; overflow: hidden; } .anim-wm__sweep { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(0,0,0,0.04) 50%, transparent 70%); animation: anim-wm 6s ease-in-out infinite; } .anim-wm__text { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-size: 38px; color: var(--ink); opacity: 0.08; transform: rotate(-22deg); } @keyframes anim-wm { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* — № 21 folder open ----------------------------------------------- */ .anim-fo { position: relative; width: 60%; aspect-ratio: 5/3; } .anim-fo__back, .anim-fo__flap { position: absolute; left: 0; right: 0; background: var(--paper); border: 1px solid var(--rule); } .anim-fo__back { inset: 30% 0 0 0; border-radius: 0 0 var(--radius) var(--radius); } .anim-fo__inner { position: absolute; inset: 40% 18% 18% 18%; display: grid; place-items: center; font-family: var(--mono); font-size: 11px; color: var(--ink); opacity: 0.7; } .anim-fo__flap { inset: 0 0 35% 0; border-radius: var(--radius) var(--radius) 0 0; transform-origin: 50% 100%; animation: anim-fo 5s ease-in-out infinite; z-index: 2; } @keyframes anim-fo { 0%, 25% { transform: rotateX(0deg); } 55%, 80% { transform: rotateX(-115deg); } 98%, 100% { transform: rotateX(0deg); } } /* — № 22 caret blink ----------------------------------------------- */ .anim-cb { font-family: var(--serif); font-size: clamp(20px, 3vw, 28px); color: var(--ink); } .anim-cb__caret { display: inline-block; width: 2px; height: 1em; margin-left: 4px; background: var(--ink); vertical-align: text-bottom; animation: anim-blink 0.9s step-end infinite; } /* — № 23 page settle (empty state) --------------------------------- */ .anim-eps { position: relative; width: 100%; height: 100%; } .anim-eps__grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px); background-size: 16px 16px; opacity: 0; animation: anim-eps-grid 5s ease-out infinite; } .anim-eps__page { position: absolute; top: 50%; left: 50%; width: 45%; aspect-ratio: 3/4; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); transform: translate(-50%, -50%) translateY(-30px) rotate(-3deg); opacity: 0; animation: anim-eps-page 5s ease-out infinite; } @keyframes anim-eps-grid { 0% { opacity: 0; } 20%, 95% { opacity: 1; } 100% { opacity: 0; } } @keyframes anim-eps-page { 0% { transform: translate(-50%, -50%) translateY(-30px) rotate(-3deg); opacity: 0; } 35%, 95% { transform: translate(-50%, -50%) rotate(0deg); opacity: 1; } 100% { transform: translate(-50%, -50%) translateY(-30px) rotate(-3deg); opacity: 0; } } /* — № 24 day-to-night ---------------------------------------------- */ .anim-stage[data-anim="day-to-night"] { animation: anim-dn-bg 8s ease-in-out infinite; } .anim-dn__page { width: 50%; aspect-ratio: 4/5; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); display: grid; place-items: center; color: var(--ink); } @keyframes anim-dn-bg { 0%, 25% { background: var(--paper-soft); } 50%, 75% { background: #2a2620; } 100% { background: var(--paper-soft); } } /* — № 25 reorder --------------------------------------------------- */ .anim-ro { display: flex; flex-direction: column; gap: 6px; width: 70%; font-family: var(--mono); font-size: 11px; color: var(--ink); } .anim-ro__item { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 8px 10px; animation-duration: 6s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .anim-ro__item--c { animation-name: anim-ro-c; } .anim-ro__item--b { animation-name: anim-ro-b; } .anim-ro__item--a { animation-name: anim-ro-a; } @keyframes anim-ro-c { 0%, 30% { transform: translateY(0); } 60%, 95% { transform: translateY(74px); } 100% { transform: translateY(0); } } @keyframes anim-ro-b { 0%, 30% { transform: translateY(0); } 60%, 95% { transform: translateY(0); } 100% { transform: translateY(0); } } @keyframes anim-ro-a { 0%, 30% { transform: translateY(0); } 60%, 95% { transform: translateY(-74px); } 100% { transform: translateY(0); } } /* — № 26 underline draw -------------------------------------------- */ .anim-ud { position: relative; font-family: var(--serif); font-size: clamp(20px, 3vw, 26px); color: var(--ink); padding-bottom: 6px; } .anim-ud__rule { position: absolute; left: 0; bottom: 0; height: 1.5px; background: var(--ink); width: 0; animation: anim-ud 5s ease-in-out infinite; } @keyframes anim-ud { 0%, 20% { width: 0; } 55%, 85% { width: 100%; } 100% { width: 0; } } /* — № 27 rule lines ------------------------------------------------- */ .anim-rl { display: flex; flex-direction: column; gap: 12px; width: 60%; } .anim-rl__rule { height: 1.5px; background: var(--ink); width: 0; animation: anim-rl 5s ease-in-out infinite; } .anim-rl__rule:nth-child(1) { animation-delay: 0s; } .anim-rl__rule:nth-child(2) { animation-delay: 0.4s; } .anim-rl__rule:nth-child(3) { animation-delay: 0.8s; } @keyframes anim-rl { 0%, 10% { width: 0; } 45%, 80% { width: 100%; } 100% { width: 0; } } /* Reduced motion ---------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .anim-tw__text, .anim-tw__caret, .anim-pt__sheet, .anim-gb__cell, .anim-mq__track, .anim-stamp svg, .anim-cf__words span, .anim-ss, .anim-cd__chk, .anim-cd__cursor, .anim-fan__card, .anim-df__num--flip, .anim-pb__dot, .anim-pb__dot::after, .anim-or__top, .anim-rs__paper, .anim-if__rect, .anim-pd__pin, .anim-tb__thread path, .anim-wm__sweep, .anim-fo__flap, .anim-cb__caret, .anim-eps__grid, .anim-eps__page, .anim-stage[data-anim="day-to-night"], .anim-ro__item, .anim-ud__rule, .anim-rl__rule { animation: none !important; } .anim-tw__text { max-width: 11ch; } .anim-gb__cell, .anim-cf__words span:first-child, .anim-pb__dot, .anim-eps__page, .anim-eps__grid { opacity: 1; } .anim-ud__rule, .anim-rl__rule { width: 100%; } .anim-tb__thread path { stroke-dashoffset: 0; } } /* ——— Post variant C — Magazine cover ————————————— */ .cover-hero { position: relative; margin: 28px auto 0; border-radius: var(--radius-lg); overflow: hidden; isolation: isolate; } .cover-hero .cover-bg { aspect-ratio: 16 / 9; border-radius: 0; margin: 0; } .cover-hero .cover-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(39,38,34,0.82) 0%, rgba(39,38,34,0.45) 50%, rgba(39,38,34,0.18) 100%); z-index: 1; pointer-events: none; } .cover-hero .cover-text { position: absolute; inset: auto 0 0 0; padding: 32px clamp(20px, 4vw, 56px) 36px; z-index: 2; color: var(--paper); } .cover-hero .cover-text .eyebrow { color: rgba(240,238,235,0.78); margin-bottom: 14px; } .cover-hero .cover-text h1.wp-block-post-title { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 14px; color: var(--paper); max-width: 22ch; } .cover-hero .cover-text .wp-block-post-excerpt, .cover-hero .cover-text .lede { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; max-width: 56ch; color: rgba(240,238,235,0.86); margin: 0 0 18px; } .cover-hero .cover-text .meta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 13px; color: rgba(240,238,235,0.72); } .cover-hero .cover-text .meta p { margin: 0; } .cover-hero .cover-text .meta .dot { width: 3px; height: 3px; background: rgba(240,238,235,0.5); border-radius: 50%; } .cover-body { max-width: 64ch; margin: 56px auto; padding: 0 var(--wrap-pad-sm); font-size: 17px; line-height: 1.7; color: var(--ink); } .cover-body > p { margin: 0 0 1.2em; } .cover-body > h2 { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.2; margin: 1.8em 0 0.5em; letter-spacing: -0.005em; } @media (max-width: 720px) { .cover-hero .cover-bg { aspect-ratio: 4 / 5; } .cover-body { margin: 36px auto; } } /* Inline horizontal bundle strip — used in C, D, E */ .bundle-inline { display: grid; grid-template-columns: 132px 1fr auto; gap: 22px; align-items: center; background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px; margin: 2.2em 0; } .bundle-inline .ph { aspect-ratio: 4 / 5; margin: 0; border-radius: var(--radius-sm); } .bundle-inline .b-info p { margin: 0; } .bundle-inline .b-info .hub { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); margin: 0 0 6px; } .bundle-inline .b-info .name { font-family: var(--serif); font-size: 22px; line-height: 1.15; margin: 0 0 8px; letter-spacing: -0.005em; } .bundle-inline .b-info p:last-child { font-size: 14px; color: var(--ink-muted); line-height: 1.5; max-width: 48ch; } .bundle-inline .buy { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: var(--radius); font-size: 14px; white-space: nowrap; } .bundle-inline .buy:hover { opacity: 0.85; } @media (max-width: 720px) { .bundle-inline { grid-template-columns: 1fr; } .bundle-inline .ph { max-width: 200px; } .bundle-inline .buy { justify-self: start; } } /* ——— Post variant D — Notebook ——————————————— */ .notebook-head { text-align: center; max-width: 64ch; margin: 56px auto 24px; padding: 0 var(--wrap-pad-sm); } .notebook-head .eyebrow { display: inline-flex; justify-content: center; } .notebook-head .ornament { display: block; width: 48px; height: 1px; background: var(--rule); margin: 24px auto; } .notebook-head h1.wp-block-post-title { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4vw, 52px); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 18px; } .notebook-head .wp-block-post-excerpt, .notebook-head .lede { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.55; color: var(--ink-muted); margin: 0 0 22px; } .notebook-head .meta { display: inline-flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; font-size: 13px; color: var(--ink-muted); } .notebook-head .meta p { margin: 0; } .notebook-head .meta .dot { width: 3px; height: 3px; background: var(--ink-muted); border-radius: 50%; } .notebook-body { max-width: 60ch; margin: 32px auto 56px; padding: 0 var(--wrap-pad-sm); font-size: 17px; line-height: 1.75; color: var(--ink); } .notebook-body > p { margin: 0 0 1.2em; } .notebook-body h2 { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.2; position: relative; margin: 2.4em 0 0.5em; } .notebook-body h2 .num { position: absolute; left: -56px; top: 0.18em; font-style: italic; font-size: 16px; color: var(--ink-muted); letter-spacing: 0.02em; } .notebook-body .from-studio { background: var(--paper-soft); border: 1px solid var(--rule); border-left: 2px solid var(--ink); border-radius: var(--radius); padding: 18px 22px; margin: 2em 0; } .notebook-body .from-studio .label { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); display: block; margin: 0 0 8px; } .notebook-body .from-studio p { margin: 0; font-size: 16px; line-height: 1.6; } .notebook-body .signoff { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ink-muted); margin-top: 2.4em; text-align: center; } @media (max-width: 960px) { .notebook-body h2 .num { position: static; display: block; margin: 0 0 4px; } } /* ——— Post variant E — Stacked story —————————— */ .stacked-head { max-width: 72ch; margin: 48px auto 24px; padding: 0 var(--wrap-pad-sm); } .stacked-head .eyebrow { margin-bottom: 14px; } .stacked-head h1.wp-block-post-title { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4.5vw, 56px); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 18px; } .stacked-head .wp-block-post-excerpt, .stacked-head .lede { font-size: 19px; line-height: 1.55; color: var(--ink-muted); margin: 0 0 22px; } .stacked-head .meta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--ink-muted); } .stacked-head .meta p { margin: 0; } .stacked-head .meta .dot { width: 3px; height: 3px; background: var(--ink-muted); border-radius: 50%; } .tldr { background: var(--paper-soft); border: 1px solid var(--rule); border-radius: var(--radius); padding: 22px 26px; max-width: 72ch; margin: 0 auto 16px; } .tldr .eyebrow { margin: 0 0 10px; } .tldr ul { margin: 0; padding-left: 18px; } .tldr li { font-size: 15px; line-height: 1.55; margin: 0 0 6px; } .tldr li:last-child { margin-bottom: 0; } .stacked-content { max-width: 64ch; margin: 32px auto 0; font-size: 17px; line-height: 1.7; color: var(--ink); } .stacked-content > p { margin: 0 0 1.2em; } .stacked-strip { padding: 56px var(--wrap-pad-sm); } .stacked-strip.alt { background: var(--paper-soft); } .stacked-strip .strip-inner { max-width: 64ch; margin: 0 auto; font-size: 17px; line-height: 1.7; } .stacked-strip .strip-num { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); margin: 0 0 14px; } .stacked-strip h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3vw, 34px); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 0.6em; } .stacked-strip p { margin: 0 0 1.1em; } .stacked-strip ul { padding-left: 22px; margin: 0 0 1.2em; } .stacked-strip li { margin: 0 0 0.4em; } .stacked-mobile-cta { position: fixed; left: 16px; right: 16px; bottom: 16px; background: var(--ink); color: var(--paper); border-radius: 999px; padding: 12px 14px 12px 20px; display: flex; align-items: center; justify-content: space-between; font-size: 14px; z-index: 20; text-decoration: none; } .stacked-mobile-cta .b-name { font-family: var(--serif); font-size: 16px; } .stacked-mobile-cta .b-price { color: rgba(240,238,235,0.7); margin-left: 10px; font-variant-numeric: tabular-nums; } .stacked-mobile-cta .buy { background: var(--paper); color: var(--ink); padding: 8px 14px; border-radius: 999px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; } @media (min-width: 900px) { .stacked-mobile-cta { display: none; } } /* ========================================================= Device mockups — layered photoreal stack ========================================================= */ .device-mockup { position: relative; display: block; width: 100%; max-width: 100%; isolation: isolate; } .device-mockup__back, .device-mockup__front { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; user-select: none; } .device-mockup__back { z-index: 1; } .device-mockup__front { z-index: 4; } /* Per-device front-overlay nudge. The dot icon in front.webp doesn't sit at the exact same screen-relative position as the planner's drawn house icon on every device — these translate values bring it back into alignment. RPP needs no nudge. Iterate via .audit/align-check.mjs. */ .device-mockup[data-device="remarkable-2"] .device-mockup__front { transform: translate(-0.83%, -0.27%); } .device-mockup[data-device="remarkable-paper-pro-move"] .device-mockup__front { transform: translate(-0.23%, -0.33%); } .device-mockup__screen { position: absolute; z-index: 2; overflow: hidden; background: transparent; } /* Bezel inset — sits on top of planner + tint + grain so the screen edge is visible regardless of what's behind. Values mirror the Photoshop layer styles (inner shadow black 40% / 6px, stroke #9c9c9c 25%). */ .device-mockup__screen::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5; box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(156, 156, 156, 0.25); } .device-mockup__planner { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: top center; display: block; } .device-mockup__tint, .device-mockup__grain { position: absolute; inset: 0; pointer-events: none; z-index: 3; } .device-mockup__grain { background-image: url("data:image/svg+xml;utf8,"); background-size: 220px 220px; } .device-mockup.is-empty .device-mockup__tint, .device-mockup.is-empty .device-mockup__grain { display: none; } /* Workshop layout — used on /device-lab/ */ .mockup-lab__head { margin: 0 0 32px; } .mockup-lab__pair { display: grid; grid-template-columns: 1fr; gap: 24px; margin: 0 0 48px; } @media (min-width: 900px) { .mockup-lab__pair { grid-template-columns: 1fr 1fr; } } .mockup-lab__pair figcaption { margin-top: 8px; font-size: 13px; color: var(--ink-soft, #6b6b6b); } .mockup-lab__notes { font-size: 12px; color: var(--ink-soft, #6b6b6b); background: var(--paper-2, #f4f1ec); padding: 12px 14px; border-radius: var(--radius, 12px); white-space: pre-wrap; margin: 0 0 48px; } /* ===== Blog post body patterns — variant C from the Claude Design handoff ===== */ /* Word-count meta. */ .article-meta .meta-words { font-variant-numeric: tabular-nums; } /* Section marker eyebrow (drops directly above an h2). The "№ 0X · " prefix is generated by CSS counter so authors only edit the label. The counter is reset at the article-body root and increments per .section-marker. */ .article-body { counter-reset: post-section; } .article-body .section-marker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin: 56px 0 12px; counter-increment: post-section; } .article-body .section-marker::before { content: "№ " counter(post-section, decimal-leading-zero) " · "; } .article-body .section-marker + h2, .article-body .section-marker + .wp-block-heading { margin-top: 0; } /* Key takeaway: two-column big-numeral block. */ .article-body .takeaway { margin: 32px 0; background: var(--paper-soft); border-radius: var(--radius); padding: 28px 32px; display: grid; grid-template-columns: 88px 1fr; gap: 24px; align-items: start; } .takeaway__num { font-family: var(--serif); font-size: 56px; line-height: 0.9; color: var(--ink); font-style: italic; } .takeaway__eyebrow { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 8px; font-weight: 500; } .takeaway__text { font-family: var(--serif); font-size: 18px; line-height: 1.5; margin: 0; color: var(--ink); } @media (max-width: 600px) { .article-body .takeaway { grid-template-columns: 1fr; gap: 8px; padding: 22px 24px; } .takeaway__num { font-size: 44px; } } /* Figure with caption (image-in-body). */ .post-figure { margin: 36px 0; } .post-figure__ph { aspect-ratio: 16 / 9; border-radius: var(--radius); background: var(--paper-soft); overflow: hidden; } .post-figure__cap { margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: var(--ink-muted); font-style: italic; font-family: var(--serif); max-width: 60ch; } .post-figure img, .post-figure picture > img { width: 100%; height: auto; display: block; border-radius: var(--radius); } /* Two-up gallery. */ .post-gallery { margin: 36px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .post-gallery__col { margin: 0; display: flex; flex-direction: column; gap: 8px; } .post-gallery__ph { aspect-ratio: 4 / 5; border-radius: var(--radius); background: var(--paper-soft); overflow: hidden; } .post-gallery figcaption { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-muted); } @media (max-width: 600px) { .post-gallery { grid-template-columns: 1fr; } } /* Ledger table. */ .ledger { margin: 36px 0; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; } .ledger__head { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 14px 20px; background: var(--paper-soft); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); } .ledger__title { color: var(--ink-muted); font-weight: 500; } .ledger__count { color: var(--ink-muted); font-weight: 500; } .ledger__table { width: 100%; border-collapse: collapse; font-family: var(--sans); } .ledger__table th, .ledger__table td { padding: 14px 20px; font-size: 13.5px; text-align: left; border-top: 1px solid var(--rule); font-variant-numeric: tabular-nums; } .ledger__table thead th { font-weight: 500; color: var(--ink-muted); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; } .ledger__table thead th.num, .ledger__table tbody td.num { text-align: right; } .ledger__table tbody td.col { font-family: var(--serif); font-size: 16px; color: var(--ink); } .ledger__table tbody tr:hover td { background: var(--paper-soft); } @media (max-width: 720px) { .ledger { overflow-x: auto; } .ledger__table { min-width: 640px; } } /* TOC redesign per handoff: leading-zero numerals, border-left rule, meta. */ .post-toc--rule { background: transparent; border-radius: 0; padding: 0; font-family: var(--sans); } .post-toc__eyebrow { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin: 0; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; list-style: none; transition: color var(--dur-fast) var(--ease); } .post-toc__eyebrow::-webkit-details-marker { display: none; } .post-toc__eyebrow:hover { color: var(--ink); } .post-toc__eyebrow:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; } .post-toc__chevron { transition: transform 220ms var(--ease); color: var(--ink-muted); flex-shrink: 0; } .post-toc__details[open] .post-toc__chevron { transform: rotate(180deg); } .post-toc__details[open] .post-toc__eyebrow { margin-bottom: 18px; } .post-toc--rule .toc-list { list-style: none; margin: 0; padding: 0; counter-reset: toc; border-left: 1px solid var(--rule); } .post-toc--rule .toc-list li { counter-increment: toc; display: block; margin-left: -1px; } .post-toc--rule .toc-list a { display: grid; grid-template-columns: 32px 1fr; align-items: baseline; gap: 4px; padding: 9px 14px; font-size: 13.5px; line-height: 1.35; color: var(--ink-muted); transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); border-left: 1.5px solid transparent; border-bottom: 0; } .post-toc--rule .toc-list a::before { content: counter(toc, decimal-leading-zero); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--ink-muted); opacity: 0.7; } .post-toc--rule .toc-list a:hover { color: var(--ink); border-bottom: 0; } .post-toc--rule .toc-list a.is-active { color: var(--ink); border-left-color: var(--ink); } .post-toc--rule .toc-list a.is-active::before { color: var(--ink); opacity: 1; } .post-toc--rule .toc-list a.is-active::after { display: none; } /* ———————————————————————————————————————————————————— Post body data patterns: stat (single + grid), bar chart, comparison. Drop into article-body via the inserter. All use existing tokens. ———————————————————————————————————————————————————— */ /* Single stat: big serif numeral, italic-serif caption beneath. */ .article-body .post-stat { margin: 40px 0; padding: 24px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 32px; align-items: baseline; } .article-body .post-stat__num { font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 6vw, 72px); line-height: 1; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; } .article-body .post-stat__cap { font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.5; color: var(--ink-muted); margin: 0; max-width: 46ch; } /* 3-up stat grid. */ .article-body .post-stat-grid { margin: 40px 0; padding: 28px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; } .article-body .post-stat-grid__item { margin: 0; } .article-body .post-stat-grid__num { font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: 1; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; margin-bottom: 10px; } .article-body .post-stat-grid__cap { font-family: var(--serif); font-style: italic; font-size: 13.5px; line-height: 1.45; color: var(--ink-muted); margin: 0; } @media (max-width: 720px) { .article-body .post-stat-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } .article-body .post-stat { grid-template-columns: minmax(0, 1fr); gap: 12px; } } /* Inline SVG bar chart. */ .article-body .post-chart { margin: 40px 0; padding: 28px; background: var(--paper-soft); border-radius: var(--radius); } .article-body .post-chart__head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 18px; gap: 16px; flex-wrap: wrap; } .article-body .post-chart__title { font-family: var(--serif); font-size: 18px; color: var(--ink); } .article-body .post-chart__legend { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); } .article-body .post-chart__plot { color: var(--ink); } .article-body .post-chart__plot svg { display: block; width: 100%; height: auto; } .article-body .post-chart__plot .axis { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; } .article-body .post-chart__plot .bars rect { fill: var(--ink); opacity: 0.92; } .article-body .post-chart__labels { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; margin-top: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--ink-muted); text-align: center; } .article-body .post-chart__caption { font-family: var(--serif); font-style: italic; font-size: 13.5px; line-height: 1.55; color: var(--ink-muted); margin: 16px 0 0; } /* 2-column comparison block. */ .article-body .post-compare { margin: 40px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--paper-soft); } .article-body .post-compare__col { padding: 22px 24px; background: var(--paper-soft); } .article-body .post-compare__col + .post-compare__col { border-left: 1px solid var(--rule); background: var(--paper); } .article-body .post-compare__eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 8px; } .article-body .post-compare__title { font-family: var(--serif); font-weight: 400; font-size: 19px; line-height: 1.2; color: var(--ink); margin: 0 0 14px; } .article-body .post-compare__list { list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 1.55; color: var(--ink); } .article-body .post-compare__list li { padding: 8px 0 8px 18px; position: relative; border-top: 1px solid var(--rule); } .article-body .post-compare__list li:first-child { border-top: 0; padding-top: 0; } .article-body .post-compare__list li::before { content: ""; position: absolute; left: 0; top: 16px; width: 8px; height: 1px; background: var(--rule); } .article-body .post-compare__list li:first-child::before { top: 8px; } .article-body .post-compare__list--out li::before { background: var(--ink); } @media (max-width: 720px) { .article-body .post-compare { grid-template-columns: minmax(0, 1fr); } .article-body .post-compare__col + .post-compare__col { border-left: 0; border-top: 1px solid var(--rule); } } /* ———————————————————————————————————————————————————— Niche hub (locked layout: Commercial spine + Hybrid promise/related). ———————————————————————————————————————————————————— */ .niche-hub { background: var(--paper); } /* 01 — Bundle hero */ .nh-hero { padding: 64px 0 96px; } .nh-crumb { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); font-family: var(--mono); } .nh-crumb a { color: var(--ink-muted); transition: color var(--dur-fast) var(--ease); } .nh-crumb a:hover { color: var(--ink); } .nh-hero__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center; } .nh-hero__art .ph { aspect-ratio: 5 / 4; background: var(--paper-soft); border-radius: var(--radius); position: relative; overflow: hidden; } .nh-hero__art .ph::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(188,185,175,0.18) 14px 15px); opacity: 0.6; } .nh-hero__art .ph .label { position: absolute; left: 14px; bottom: 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--ink-muted); } .nh-hero__copy { padding-right: 24px; } .nh-hero__copy h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5.4vw, 76px); line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 24px; max-width: 14ch; } .nh-hero__copy h1 em { font-style: italic; color: var(--ink-muted); font-weight: 400; } .nh-hero__sub { font-size: 17px; line-height: 1.55; color: var(--ink-muted); max-width: 42ch; margin: 0 0 32px; } .nh-hero__price { display: flex; align-items: baseline; gap: 16px; margin: 0 0 28px; flex-wrap: wrap; } .nh-hero__price .now { font-family: var(--serif); font-size: 44px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .nh-hero__price .was { font-size: 14px; color: var(--ink-muted); text-decoration: line-through; font-variant-numeric: tabular-nums; } .nh-hero__price .note { font-size: 12px; color: var(--ink-muted); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; } .nh-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; } .nh-hero__specs { list-style: none; padding: 0; margin: 36px 0 0; display: flex; gap: 32px; flex-wrap: wrap; font-size: 12px; color: var(--ink-muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; } .nh-hero__specs li { display: inline-flex; align-items: center; gap: 8px; } .nh-hero__specs svg { width: 14px; height: 14px; opacity: 0.6; } /* 02 — Promise (what this hub is for) */ .nh-promise { padding: 88px 0 96px; border-top: 1px solid var(--rule); } .nh-promise__grid { display: grid; grid-template-columns: 0.6fr 1fr; gap: 80px; align-items: start; } .nh-promise .eyebrow { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 14px; font-weight: 500; } .nh-promise h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3vw, 38px); line-height: 1.1; letter-spacing: -0.015em; margin: 0; } .nh-promise__copy p { font-size: 16.5px; line-height: 1.7; max-width: none; margin: 0; color: var(--ink); } .nh-promise__copy p + p { margin-top: 18px; } /* 03 — What's inside (3 cards) */ .nh-inside { padding: 64px 0 96px; } .nh-inside__head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px; margin-bottom: 48px; } .nh-inside__head .eyebrow { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 14px; font-weight: 500; } .nh-inside__head h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 3.8vw, 48px); letter-spacing: -0.015em; margin: 0; max-width: 22ch; line-height: 1.05; } .nh-inside__sub { text-align: right; max-width: 32ch; font-size: 14px; color: var(--ink-muted); margin: 0; } .nh-inside__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .nh-card { background: var(--paper-soft); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 20px; transition: transform var(--dur-fast) var(--ease); } .nh-card:hover { transform: translateY(-2px); } .nh-card .ph { aspect-ratio: 4 / 5; background: var(--paper); border-radius: var(--radius); position: relative; overflow: hidden; } .nh-card .ph::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, transparent 0 10px, rgba(188,185,175,0.22) 10px 11px); } .nh-card .ph .label { position: absolute; left: 14px; bottom: 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--ink-muted); } .nh-card__num { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink-muted); margin: 0; } .nh-card h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.15; letter-spacing: -0.01em; margin: 0; } .nh-card__desc { font-size: 14px; color: var(--ink-muted); line-height: 1.55; max-width: 32ch; margin: 0; } .nh-card__foot { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--ink-muted); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; padding-top: 16px; border-top: 1px solid var(--rule); } /* 04 — From the Journal posts */ .nh-posts { padding: 64px 0 96px; } .nh-posts__head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px; margin-bottom: 48px; } .nh-posts__head .eyebrow { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 14px; font-weight: 500; } .nh-posts__head h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 3.6vw, 44px); letter-spacing: -0.015em; margin: 0; line-height: 1.05; } .nh-posts__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; row-gap: 56px; } .nh-post .wp-block-post-featured-image, .nh-post .ph, .nh-post img { aspect-ratio: 5 / 4; width: 100%; background: var(--paper-soft); border-radius: var(--radius); object-fit: cover; } .nh-post__cat { display: flex; gap: 10px; align-items: center; margin-top: 18px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); } .nh-post__cat .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-muted); } .nh-post h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.18; letter-spacing: -0.005em; margin: 10px 0 0; } .nh-posts__empty { grid-column: 1 / -1; font-size: 14px; color: var(--ink-muted); } /* 05 — Trust strip */ .nh-trust { background: var(--paper-soft); padding: 64px 0; border-top: 1px solid var(--rule); } .nh-trust__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px; } .nh-trust__item { display: flex; flex-direction: column; gap: 10px; } .nh-trust__icon { width: 28px; height: 28px; color: var(--ink); margin-bottom: 6px; } .nh-trust__item h4 { font-family: var(--sans); font-weight: 500; font-size: 14px; margin: 0; } .nh-trust__item p { margin: 0; font-size: 13px; color: var(--ink-muted); line-height: 1.55; } /* 06 — Related rooms */ .nh-related { border-top: 1px solid var(--rule); padding: 64px 0 96px; } .nh-related__top { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 32px; margin-bottom: 32px; } .nh-related__top .eyebrow { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 14px; font-weight: 500; } .nh-related__top h3 { font-family: var(--serif); font-weight: 400; font-size: 32px; letter-spacing: -0.015em; line-height: 1.1; margin: 0; } .nh-related__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .nh-niche { background: var(--paper-soft); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; justify-content: space-between; min-height: 180px; transition: transform var(--dur-fast) var(--ease); color: var(--ink); } .nh-niche:hover { transform: translateY(-2px); } .nh-niche__num { font-family: var(--serif); font-style: italic; color: var(--ink-muted); font-size: 13px; margin: 0; } .nh-niche__ttl { font-family: var(--serif); font-size: 24px; line-height: 1.1; letter-spacing: -0.01em; margin: 28px 0 0; } .nh-niche__foot { margin: 20px 0 0; display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); font-weight: 500; } /* Responsive collapse */ @media (max-width: 1000px) { .nh-hero__grid, .nh-promise__grid, .nh-inside__head, .nh-posts__head, .nh-related__top { grid-template-columns: minmax(0, 1fr); } .nh-inside__sub { text-align: left; } .nh-hero__copy { padding-right: 0; } .nh-inside__cards, .nh-posts__grid, .nh-trust__grid, .nh-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .nh-inside__cards, .nh-posts__grid, .nh-trust__grid, .nh-related__grid { grid-template-columns: minmax(0, 1fr); } .nh-hero__copy h1 { max-width: none; } }