/* Theme Name: Ibra Theme URI: https://ibracreative.com/ Author: Ibra Creative Studio Description: Lightweight WooCommerce theme for IbraCreative — glass UI, light/dark mode, EN/ID interface, built-in hero slider. No page builder or slider plugin required. Version: 2.7.0 Requires at least: 6.0 Requires PHP: 7.4 Text Domain: ibra WC requires at least: 7.0 License: GPL-2.0-or-later */ /* ---------------- Tokens ---------------- */ :root { --accent: #D53A3E; --accent-text: #C4302F; --bg: #F2F2F7; --card: #FFFFFF; --text: #1C1C1E; --sub: #6C6C70; --strike: #6C6C70; --fill: rgba(118, 118, 128, .12); --line: rgba(60, 60, 67, .18); --glass: rgba(255, 255, 255, .62); --glass-line: rgba(255, 255, 255, .75); --glass-hi: rgba(255, 255, 255, .9); --seg-thumb: #FFFFFF; --promo: #1C1C1E; --green: #248A3D; --shadow: 0 18px 40px rgba(0, 0, 0, .10); --r-lg: 36px; --r-md: 24px; --r-sm: 14px; --ease: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.34, 1.56, .64, 1); --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, "Segoe UI", Roboto, sans-serif; color-scheme: light; } :root[data-theme="dark"] { --accent-text: #FF7A7A; --bg: #000000; --card: #1C1C1E; --text: #F5F5F7; --sub: #98989D; --strike: #8E8E93; --fill: rgba(118, 118, 128, .24); --line: rgba(84, 84, 88, .6); --glass: rgba(30, 30, 32, .62); --glass-line: rgba(255, 255, 255, .12); --glass-hi: rgba(255, 255, 255, .08); --seg-thumb: #636366; --promo: #2C2C2E; --green: #30D158; --shadow: 0 18px 40px rgba(0, 0, 0, .5); color-scheme: dark; } /* ---------------- Base ---------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; } body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.5 var(--font); -webkit-font-smoothing: antialiased; } .theme-anim, .theme-anim * { transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease) !important; } img, svg, video { max-width: 100%; height: auto; } a { color: var(--accent-text); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 .5em; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px; } .screen-reader-text:focus { clip: auto; clip-path: none; width: auto; height: auto; margin: 0; padding: 10px 16px; background: var(--card); color: var(--text); z-index: 100; border-radius: 999px; } .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--card); color: var(--text); padding: 10px 16px; border-radius: 999px; } .skip-link:focus { top: 12px; } .site-main { overflow-x: clip; } .container { max-width: 1280px; margin: 0 auto; padding: 0 24px; } .page-pad { padding-top: 40px; padding-bottom: 32px; } .eyebrow { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--accent-text); letter-spacing: 0; } .eyebrow.light { color: #FF9F9F; } .lead { font-size: 19px; color: var(--sub); } .glass { background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border: 1px solid var(--glass-line); box-shadow: 0 10px 30px rgba(0, 0, 0, .10), inset 0 1px 0 var(--glass-hi); } .glass-dark { background: rgba(18, 18, 20, .46); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); border: 1px solid rgba(255, 255, 255, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); color: #fff; } .logo-dark { display: none; } [data-theme="dark"] .logo-light { display: none; } [data-theme="dark"] .logo-dark { display: block; } /* ---------------- Buttons ---------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 0; cursor: pointer; text-decoration: none !important; transition: transform .2s var(--ease), background-color .2s; } .btn:active, .icon-btn:active, .chip:active, .ctrl:active, .add-btn:active, .tab:active { transform: scale(.92); } .btn-white { background: #fff; color: #1C1C1E; } .btn-white:hover { background: #E5E5EA; color: #1C1C1E; } .btn-accent { background: var(--accent); color: #fff; } .btn-accent:hover { background: #B8302F; color: #fff; } .btn-fill { background: var(--fill); color: var(--text); } .icon-btn { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 999px; border: 0; background: transparent; color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; transition: transform .2s var(--ease), background-color .2s; } .icon-btn:hover { background: var(--fill); text-decoration: none; } /* ---------------- Header ---------------- */ .site-header-wrap { position: sticky; top: 0; z-index: 50; padding: 14px 24px 0; transition: padding .3s var(--ease); } .admin-bar .site-header-wrap { top: 32px; } .site-header { max-width: 1280px; margin: 0 auto; border-radius: 999px; padding: 8px 8px 8px 22px; display: flex; align-items: center; gap: 6px; transition: box-shadow .3s, padding .3s var(--ease); } .site-header-wrap.is-scrolled { padding-top: 8px; } .site-header-wrap.is-scrolled .site-header { box-shadow: 0 14px 40px rgba(0, 0, 0, .16), inset 0 1px 0 var(--glass-hi); } .brand { display: flex; align-items: center; margin-right: 10px; } .brand .logo { height: 30px; width: auto; } .main-nav .nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; } .main-nav li { position: relative; } .main-nav a { display: block; padding: 8px 14px; border-radius: 999px; color: var(--text); font-size: 15px; font-weight: 500; text-decoration: none; } .main-nav a:hover, .main-nav .current-menu-item > a { background: var(--fill); } .main-nav .sub-menu { list-style: none; margin: 0; padding: 8px; position: absolute; top: calc(100% + 10px); left: 0; min-width: 200px; border-radius: 20px; opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top left; transition: opacity .2s, transform .25s var(--ease), visibility .2s; } .main-nav li:hover > .sub-menu, .main-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; } .main-nav .sub-menu a { border-radius: 12px; } .header-spacer { flex: 1 1 auto; } .header-search { display: flex; align-items: center; gap: 8px; background: var(--fill); border-radius: 999px; padding: 0 14px; height: 40px; width: 220px; color: var(--sub); transition: width .35s var(--ease); } .header-search:focus-within { width: 280px; } .header-search input { border: 0; background: transparent; outline: none; font-size: 15px; width: 100%; color: var(--text); } .seg { position: relative; display: flex; background: var(--fill); border-radius: 999px; padding: 3px; height: 38px; margin: 0 4px; } .seg button { position: relative; z-index: 1; border: 0; background: transparent; font-size: 13px; font-weight: 700; width: 44px; cursor: pointer; border-radius: 999px; color: var(--text); } .seg-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: 44px; border-radius: 999px; background: var(--seg-thumb); box-shadow: 0 2px 8px rgba(0, 0, 0, .14); transition: transform .45s var(--spring); } [data-lang="id"] .seg-thumb { transform: translateX(44px); } .theme-toggle .when-dark { display: none; } :root:not([data-theme]) .theme-toggle .when-light { display: inline-flex; } [data-theme="dark"] .theme-toggle .when-dark { display: inline-flex; animation: spin-in .5s var(--spring); } [data-theme="dark"] .theme-toggle .when-light { display: none; } [data-theme="light"] .theme-toggle .when-light { display: inline-flex; animation: spin-in .5s var(--spring); } .ibra-cart-count { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; } .ibra-cart-count:empty { display: none; } .ibra-cart-count.bump { animation: bump .5s var(--spring); } /* ---------------- Mobile tab bar + search sheet ---------------- */ .tabbar { display: none; } .search-sheet { border-radius: 24px; padding: 8px 8px 8px 16px; width: min(560px, calc(100vw - 32px)); margin: 90px auto auto; color: var(--text); } .search-sheet::backdrop { background: rgba(0, 0, 0, .3); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .search-sheet[open] { animation: ib-rise .35s var(--ease); } .search-sheet form { display: flex; align-items: center; gap: 10px; color: var(--sub); } .search-sheet input { flex: 1; border: 0; background: transparent; outline: none; font-size: 18px; color: var(--text); height: 44px; } /* ---------------- Toast ---------------- */ .toast { position: fixed; top: 92px; left: 50%; z-index: 60; transform: translateX(-50%); border-radius: 999px; padding: 12px 20px 12px 14px; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--text); } .toast.show { animation: toast 2.4s var(--ease) both; } .toast[hidden] { display: none; } .toast-ic { width: 26px; height: 26px; border-radius: 999px; background: #30D158; color: #fff; display: inline-flex; align-items: center; justify-content: center; } /* ---------------- Hero ---------------- */ .hero-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; padding: 40px 0 28px; } .hero-title { font-size: clamp(40px, 5.2vw, 60px); line-height: 1.04; letter-spacing: -0.025em; font-weight: 700; margin: 0; } .hero-sub { margin: 0; font-size: 19px; line-height: 1.45; color: var(--sub); max-width: 430px; } .slider { position: relative; height: clamp(440px, 46vw, 620px); border-radius: var(--r-lg); overflow: hidden; background: #1C1C1E; outline: none; touch-action: pan-y; } .slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility .9s; will-change: transform; } .slide.is-active { opacity: 1; visibility: visible; } .slider.is-js .slide { opacity: 1; visibility: visible; transition: none; } .slider { cursor: grab; user-select: none; -webkit-user-select: none; } .slider:active { cursor: grabbing; } .slide-img { -webkit-user-drag: none; pointer-events: none; } .slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform 7s ease-out; } .slide.is-active .slide-img { transform: scale(1.06); } .caption { position: absolute; left: 28px; bottom: 28px; max-width: 460px; border-radius: 28px; padding: 22px 22px 22px 24px; display: flex; flex-direction: column; gap: 12px; } .slide.is-active .caption > * { animation: ib-rise .7s var(--ease) both; } .slide.is-active .caption > *:nth-child(2) { animation-delay: .08s; } .slide.is-active .caption > *:nth-child(3) { animation-delay: .16s; } .cap-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .badge { background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; padding: 5px 11px; border-radius: 999px; } .cap-kind { font-size: 14px; color: rgba(255, 255, 255, .88); } .cap-name { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; margin: 0; } .cap-price { font-size: 17px; font-weight: 600; } .cap-price del { color: rgba(255, 255, 255, .72); font-weight: 400; font-size: 15px; } .cap-price ins { text-decoration: none; } .cap-price .from { color: rgba(255, 255, 255, .75); font-weight: 500; font-size: 14px; } .cap-price .is-free { color: #6EF09A; } .slider-ctrls { position: absolute; right: 28px; bottom: 28px; border-radius: 999px; padding: 6px; display: flex; align-items: center; gap: 4px; } .ctrl { width: 44px; height: 44px; border-radius: 999px; border: 0; background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .2s var(--ease), background-color .2s; } .ctrl:hover { background: rgba(255, 255, 255, .14); } .dots { display: flex; align-items: center; gap: 7px; padding: 0 6px; } .dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .45); cursor: pointer; overflow: hidden; position: relative; transition: width .4s var(--ease); } .dot.is-active { width: 36px; } .dot-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: #fff; border-radius: 999px; } .dot.is-active .dot-fill { animation: fill var(--dur, 6000ms) linear forwards; } .slider.is-paused .dot-fill { animation-play-state: paused; } /* ---------------- Browse ---------------- */ .browse { margin-top: 56px; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .section-head h2 { font-size: 32px; margin: 0; } .see-all { display: inline-flex; align-items: center; gap: 2px; font-size: 17px; font-weight: 500; } .chips { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 8px; margin: 0 -2px 18px; } .chips::-webkit-scrollbar { display: none; } .chip { border: 0; cursor: pointer; font-size: 15px; font-weight: 600; padding: 10px 18px; min-height: 44px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; background: var(--card); color: var(--text); transition: transform .2s var(--ease), background-color .3s, color .3s; } .chip.is-on { background: var(--text); color: var(--bg); } .chip-n { font-weight: 500; opacity: .7; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; } .product-grid { min-height: 200px; transition: opacity .25s; } .product-grid.is-loading { opacity: .4; } .card { position: relative; background: var(--card); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .card-link { color: var(--text); display: flex; flex-direction: column; height: 100%; text-decoration: none !important; } .card-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--fill); } .card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease); } .card:hover .card-img { transform: scale(1.05); } .pill { position: absolute; top: 12px; left: 12px; font-size: 13px; font-weight: 700; padding: 5px 11px; border-radius: 999px; color: var(--text); } .card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; } .card-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 0; } .card-kind { font-size: 15px; color: var(--sub); margin: 0; } .card-excerpt { font-size: 15px; color: var(--sub); } .card-excerpt p { margin: 4px 0 0; } .card-price { margin-top: 8px; font-size: 17px; font-weight: 700; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .card-price del { order: 2; color: var(--strike); font-weight: 400; font-size: 15px; } .card-price ins { text-decoration: none; } .card-price.is-free, .card-price .is-free { color: var(--green); } .card-price .from { font-weight: 500; color: var(--sub); font-size: 14px; } .add-btn { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: var(--text); opacity: 0; transform: scale(.8); transition: opacity .25s, transform .3s var(--spring); } .card:hover .add-btn, .add-btn:focus-visible { opacity: 1; transform: none; } .add-btn.loading { opacity: 1; animation: pulse 1s infinite; } .add-btn.added::after { content: ""; } .added_to_cart.wc-forward { display: none; } /* ---------------- Promos ---------------- */ .promos { margin-top: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .promo { border-radius: 32px; padding: 36px; background: var(--card); display: flex; flex-direction: column; gap: 6px; min-height: 230px; } .promo h2 { font-size: 32px; line-height: 1.1; margin: 0; } .promo-dark { background: var(--promo); color: #fff; } .promo-actions { margin-top: auto; padding-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; } /* ---------------- Footer ---------------- */ .site-footer { margin-top: 72px; padding: 32px 0 48px; border-top: 1px solid var(--line); font-size: 15px; color: var(--sub); } .footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; } .footer-brand .logo { height: 26px; width: auto; } .footer-brand p { margin: 10px 0; } .socials { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; flex-wrap: wrap; } .socials a, .footer-cols a { color: var(--sub); } .footer-cols { display: flex; gap: 56px; flex-wrap: wrap; } .footer-cols div { display: flex; flex-direction: column; gap: 8px; } .footer-cols .footer-h { font-weight: 700; font-size: 15px; color: var(--text); margin: 0 0 4px; letter-spacing: 0; } /* ---------------- Pages & posts ---------------- */ .page-head { margin-bottom: 28px; } .page-head h1, .article-head h1 { font-size: clamp(34px, 4.4vw, 52px); } .article { max-width: 820px; } .article-cover { margin: 0 0 32px; border-radius: var(--r-md); overflow: hidden; } .article-cover img { display: block; width: 100%; } .entry { font-size: 18px; line-height: 1.7; } .entry img { border-radius: var(--r-sm); } .entry-wide { font-size: 17px; } .entry a { text-decoration: underline; text-underline-offset: 3px; } .post-nav { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); } .post-nav .nav-links { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .pager { margin-top: 40px; } .pager .nav-links { display: flex; gap: 6px; flex-wrap: wrap; } .page-numbers { display: inline-flex; min-width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0 12px; border-radius: 999px; background: var(--card); color: var(--text); text-decoration: none !important; } .page-numbers.current { background: var(--text); color: var(--bg); } .search-form { display: flex; align-items: center; gap: 8px; background: var(--card); border-radius: 999px; padding: 0 16px; height: 50px; max-width: 520px; margin: 16px 0 24px; color: var(--sub); } .search-form input { border: 0; background: transparent; outline: none; width: 100%; font-size: 17px; color: var(--text); } .notfound { text-align: left; max-width: 640px; } .comments { margin-top: 48px; } .comment-list { padding-left: 20px; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"]:not(.header-search input):not(.search-form input):not(.search-sheet input), textarea, select { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; min-height: 44px; color: var(--text); max-width: 100%; } /* ---------------- Content blocks (converted pages) ---------------- */ .entry > * { margin-top: 0; margin-bottom: 1.1em; } .entry h2 { font-size: clamp(28px, 3.2vw, 40px); margin-top: 1.4em; } .entry h3 { font-size: 22px; } .entry .wp-block-columns { gap: 28px; margin: 36px 0; align-items: stretch; } .entry .wp-block-column { display: flex; flex-direction: column; } .entry .wp-block-column > * { margin-top: 0; } .entry .wp-block-image img, .entry .wp-block-gallery img { border-radius: 20px; } .entry .wp-block-image.aligncenter { margin-left: auto; margin-right: auto; } .entry .wp-block-gallery { gap: 12px; } .entry .wp-block-separator { border: 0; border-top: 1px solid var(--line); margin: 40px 0; } .entry blockquote { margin: 1em 0; padding: 18px 24px; border-left: 4px solid var(--accent); background: var(--card); border-radius: 0 16px 16px 0; font-size: 19px; } .entry a.button, .entry .wp-block-button__link { display: inline-flex; align-items: center; min-height: 46px; padding: 12px 22px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; } .entry a.button:hover { background: #B8302F; color: #fff; } .entry .wp-block-latest-posts.is-grid { gap: 24px; padding: 0; } .entry .wp-block-latest-posts.is-grid li { background: var(--card); border-radius: var(--r-md); overflow: hidden; margin: 0; padding: 0 0 18px; } .entry .wp-block-latest-posts__featured-image img { border-radius: 0; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .entry .wp-block-latest-posts.is-grid li > a { display: block; padding: 0 18px; font-weight: 600; color: var(--text); text-decoration: none; } .entry .wp-block-latest-posts__post-date { padding: 4px 18px 0; color: var(--sub); } .ibra-feature, .ibra-price { background: var(--card); border-radius: var(--r-md); padding: 24px; flex: 1 1 auto; transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .ibra-feature:hover, .ibra-price:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .entry .ibra-feature img { width: auto !important; height: auto !important; max-width: 100%; max-height: 72px; object-fit: contain; border-radius: 0 !important; image-rendering: auto; } .ibra-feature .wp-block-image { margin: 4px 0 0; } .ibra-feature h3, .ibra-price h3 { margin: 14px 0 6px; font-size: 22px; } .ibra-feature p { color: var(--sub); font-size: 16px; margin: 0; } .ibra-price h3 { margin-top: 0; } .ibra-price ul { list-style: none; margin: 14px 0 0; padding: 0; } .ibra-price li { position: relative; padding: 9px 0 9px 28px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.45; } .ibra-price li::before { content: "✓"; position: absolute; left: 2px; top: 9px; color: var(--accent-text); font-weight: 700; } .entry .wp-block-columns .wp-block-column:nth-child(odd) .ibra-price h3 { color: var(--accent-text); } .entry iframe { max-width: 100% !important; margin: 0 !important; border: 0; border-radius: 16px; background: #fff; } .entry .iframe-wrapper { width: auto !important; margin: 0 !important; overflow: visible !important; } @media (max-width: 781px) { .entry .wp-block-columns { gap: 16px; } } /* ---------------- Tints: calm accent palette ---------------- */ :root { --t-rose: #FBEDEC; --i-rose: #B23E3B; --t-peach: #FDF0E4; --i-peach: #A0521A; --t-sand: #F6F0DF; --i-sand: #7E6115; --t-sage: #E9F3EB; --i-sage: #2C7343; --t-sky: #E7F0FA; --i-sky: #2A6296; --t-lilac: #F0ECFA; --i-lilac: #6447AA; } :root[data-theme="dark"] { --t-rose: #2B1D1D; --i-rose: #FF9E99; --t-peach: #2C2219; --i-peach: #FFB27C; --t-sand: #29251A; --i-sand: #E8C96E; --t-sage: #19261F; --i-sage: #80D69B; --t-sky: #17222E; --i-sky: #90C2F2; --t-lilac: #221E2F; --i-lilac: #BCA8F6; } .tint-rose { --tint: var(--t-rose); --ink: var(--i-rose); } .tint-peach { --tint: var(--t-peach); --ink: var(--i-peach); } .tint-sand { --tint: var(--t-sand); --ink: var(--i-sand); } .tint-sage { --tint: var(--t-sage); --ink: var(--i-sage); } .tint-sky { --tint: var(--t-sky); --ink: var(--i-sky); } .tint-lilac { --tint: var(--t-lilac); --ink: var(--i-lilac); } /* ---------------- Designed page sections ---------------- */ .entry .ib-hero { padding: clamp(8px, 2vw, 24px) 0 clamp(16px, 3vw, 32px); margin: 0 0 12px; } .entry .ib-hero h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 18px; max-width: 14ch; } .entry .ib-hero .ib-lead { max-width: 640px; } .entry .ib-eyebrow { font-size: 15px; font-weight: 600; color: var(--accent-text); margin: 0 0 10px; letter-spacing: 0; } .entry .ib-lead { font-size: clamp(18px, 2vw, 22px); line-height: 1.5; color: var(--sub); } .entry .ib-section { background: var(--card); border-radius: var(--r-lg); padding: clamp(26px, 5vw, 64px); margin: 28px 0; position: relative; overflow: hidden; } .entry .ib-section.is-tinted { background: var(--tint); } .entry .ib-section.is-tinted h2, .entry .ib-section.is-tinted .ib-eyebrow { color: var(--ink); } .entry .ib-section > .wp-block-columns:first-child { margin-top: 0; } .entry .ib-section > *:last-child { margin-bottom: 0; } .entry .ib-section h2 { margin-top: 0; } .entry .ib-blob { position: relative; } .entry .ib-blob::before { content: ""; position: absolute; width: 420px; height: 420px; right: -120px; top: -160px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 16%, transparent), transparent); pointer-events: none; animation: ib-float 12s ease-in-out infinite alternate; } @keyframes ib-float { to { transform: translate(-60px, 50px) scale(1.15); } } .entry .ib-eyebrow + h2, .entry .ib-eyebrow + h1 { margin-top: 0; } .entry h2 + .ib-lead { margin-top: -4px; } .entry .ib-card .ib-icon-badge { background: color-mix(in srgb, var(--card) 75%, transparent); } .entry .ib-center { text-align: center; margin-left: auto; margin-right: auto; } .entry .ib-narrow { max-width: 720px; margin-left: auto; margin-right: auto; } /* Stats */ .entry .ib-stats { gap: 16px !important; } .entry .ib-stat { background: var(--card); border-radius: var(--r-md); padding: 22px 24px; } .entry .ib-stat .ib-stat-num { font-size: clamp(36px, 4.4vw, 54px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin: 0 0 6px; color: var(--ink, var(--text)); } .entry .ib-stat p { margin: 0; color: var(--sub); font-size: 15px; } .entry .ib-section .ib-stat { background: color-mix(in srgb, var(--card) 70%, transparent); } /* Feature cards (icon + title + text) */ .entry .ib-card { background: var(--card); border-radius: var(--r-md); padding: 26px; flex: 1 1 auto; transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .entry .ib-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); } .entry .ib-card.is-tinted { background: var(--tint); } .entry .ib-card h3 { margin: 14px 0 6px; font-size: 21px; color: var(--ink, var(--text)); } .entry .ib-card p { margin: 0; color: var(--sub); font-size: 16px; } .entry .ib-card .ib-num { font-size: 14px; font-weight: 700; color: var(--ink, var(--accent-text)); margin: 0; letter-spacing: .04em; } .entry .ib-card .wp-block-image img, .entry .ibra-feature .wp-block-image img { width: auto !important; height: auto !important; max-height: 56px; border-radius: 0 !important; } .entry .ib-icon-badge { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--tint, var(--fill)); margin: 0; } .entry .ib-icon-badge img { max-height: 32px !important; } /* Split image + text */ .entry .ib-split { align-items: center !important; gap: clamp(24px, 5vw, 64px) !important; } .entry .ib-photo img { border-radius: 28px !important; width: 100%; object-fit: cover; aspect-ratio: 4 / 3; box-shadow: var(--shadow); } .entry .ib-quote { font-size: clamp(20px, 2.4vw, 26px); line-height: 1.4; font-weight: 500; letter-spacing: -0.01em; border: 0; background: none; padding: 0; margin: 16px 0; } .entry .ib-quote::before { content: "“"; display: block; font-size: 64px; line-height: .6; color: var(--accent-text); font-weight: 700; } .entry .ib-quote cite { display: block; margin-top: 10px; font-size: 15px; font-style: normal; color: var(--sub); font-weight: 500; } /* Logo marquee */ .entry .ib-marquee { overflow: hidden; margin: 18px -8px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .entry .ib-marquee .ib-track { display: flex; gap: 14px; width: max-content; animation: ib-marquee 28s linear infinite; } .entry .ib-marquee:hover .ib-track { animation-play-state: paused; } .entry .ib-marquee figure { margin: 0 !important; width: 180px !important; flex: 0 0 180px; } .entry .ib-marquee img { border-radius: 16px !important; background: #fff; aspect-ratio: 2 / 1; object-fit: contain; padding: 0; width: 100%; } @keyframes ib-marquee { to { transform: translateX(-50%); } } /* Steps */ .entry .ib-steps { list-style: none; counter-reset: step; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .entry .ib-steps li { counter-increment: step; background: var(--card); border-radius: var(--r-md); padding: 22px 22px 22px 70px; position: relative; font-size: 16px; color: var(--sub); } .entry .ib-steps li strong { display: block; color: var(--text); font-size: 18px; margin-bottom: 4px; } .entry .ib-steps li::before { content: counter(step); position: absolute; left: 20px; top: 20px; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 16px; } /* Accordions (FAQ, job openings) */ .entry .wp-block-details { background: var(--card); border-radius: var(--r-md); padding: 0; margin: 0 0 12px; overflow: hidden; transition: box-shadow .3s; } .entry .wp-block-details[open] { box-shadow: var(--shadow); } .entry .wp-block-details summary { list-style: none; cursor: pointer; padding: 20px 60px 20px 24px; font-weight: 600; font-size: 18px; position: relative; } .entry .wp-block-details summary::-webkit-details-marker { display: none; } .entry .wp-block-details summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: var(--fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center no-repeat; transition: transform .35s var(--spring); } .entry .wp-block-details[open] summary::after { transform: rotate(45deg); } .entry .wp-block-details > *:not(summary) { padding: 0 24px; } .entry .wp-block-details > *:last-child { padding-bottom: 22px; } .entry .wp-block-details[open] > *:not(summary) { animation: ib-rise .45s var(--ease) both; } .entry .ib-job summary small { display: block; font-weight: 500; font-size: 14px; color: var(--sub); margin-top: 2px; } .entry .ib-job h4 { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--sub); margin: 14px 0 6px; } .entry .wp-block-details.ib-job > ul { list-style: none; margin: 0 0 10px; padding: 0 24px; font-size: 16px; } .entry .ib-job > ul > li { position: relative; padding-left: 20px; margin: 7px 0; line-height: 1.5; } .entry .ib-job > ul > li::before { content: ""; position: absolute; left: 1px; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .entry .ib-job > h4 { margin-top: 22px; } .entry .ib-job > h4:first-of-type { margin-top: 4px; } .entry .ib-job > .wp-block-buttons { margin-top: 18px; } .entry .ib-badge { display: inline-block; vertical-align: 3px; margin-left: 8px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--t-sky); color: var(--i-sky); } .entry .ib-badge.is-open { background: var(--t-sage); color: var(--i-sage); } .entry .ib-subhead { margin: 40px 0 4px; font-size: 22px; } .entry .ib-note { color: var(--sub); margin: 0 0 16px; font-size: 16px; } @media (max-width: 600px) { .entry .wp-block-details summary { padding: 18px 56px 18px 20px; } .entry .wp-block-details > *:not(summary), .entry .wp-block-details.ib-job > ul { padding-left: 20px; padding-right: 20px; } } /* Licenses */ .entry .ibra-price { border: 0; } .entry .ibra-price[class*="tint-"] { background: var(--tint); } .entry .ibra-price[class*="tint-"] h3 { color: var(--ink); } .entry .ibra-price[class*="tint-"] li { border-top-color: color-mix(in srgb, var(--ink) 18%, transparent); } .entry .ibra-price[class*="tint-"] li::before { color: var(--ink); } .entry .ibra-price .ib-best { font-size: 14px; color: var(--sub); margin: 2px 0 10px; } .entry .ib-licenses .wp-block-column:nth-child(odd) .ibra-price h3 { color: inherit; } .entry .ib-licenses .ibra-price[class*="tint-"] h3 { color: var(--ink); } .entry .ib-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; } .entry .ib-chips li { background: var(--card); border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 600; } /* Contact cards */ .entry .ib-contact { position: relative; height: 100%; } .entry .ib-contact .ib-arrow a { color: var(--ink); text-decoration: none; } .entry .ib-contact .ib-arrow a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .entry .ib-contact h3 { word-break: break-word; } .entry .ib-contact-ic { width: 52px; height: 52px; border-radius: 16px; background: var(--tint); display: grid; place-items: center; margin: 0; } .entry .ib-contact-ic::before { content: ""; width: 26px; height: 26px; background: var(--ink); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; } .ic-chat { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-12.4 7.4L3 21l2.1-5.5A8.5 8.5 0 1 1 21 11.5z'/%3E%3C/svg%3E"); } .ic-mail { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); } .ic-camera { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='.6' fill='black'/%3E%3C/svg%3E"); } .ic-pin { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11.5A7 7 0 0 0 5 9.5C5 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); } .entry .ib-contact .ib-arrow { margin-top: 14px; font-weight: 600; color: var(--ink, var(--accent-text)); font-size: 15px; } .entry .ib-contact:hover .ib-arrow a { text-decoration: underline; } .entry .ib-form { background: var(--card); border-radius: var(--r-lg); padding: clamp(24px, 4vw, 44px); } .entry .wpcf7 input[type="text"], .entry .wpcf7 input[type="email"], .entry .wpcf7 input[type="tel"], .entry .wpcf7 textarea { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; font-size: 16px; color: var(--text); } .entry .wpcf7 textarea { min-height: 150px; } .entry .wpcf7 input[type="submit"] { background: var(--accent); color: #fff; border: 0; border-radius: 999px; padding: 14px 28px; font-weight: 600; font-size: 16px; cursor: pointer; transition: transform .2s var(--ease); } .entry .wpcf7 input[type="submit"]:active { transform: scale(.95); } .entry .wpcf7 label { font-weight: 600; font-size: 15px; display: block; } .entry .wpcf7 p { margin: 0 0 14px; } /* Buttons block */ .entry .wp-block-buttons { gap: 10px; margin-top: 22px; } .entry .wp-block-button__link { transition: transform .2s var(--ease), background-color .2s; } .entry .wp-block-button__link:active { transform: scale(.95); } .entry .is-style-outline .wp-block-button__link { background: var(--fill) !important; color: var(--text) !important; border: 0 !important; } .entry .ib-cta { background: var(--promo); color: #fff; } .entry .ib-cta h2 { color: #fff !important; } .entry .ib-cta p { color: rgba(255, 255, 255, .78); } .entry .ib-cta .is-style-outline .wp-block-button__link { background: rgba(255, 255, 255, .14) !important; color: #fff !important; } /* ---------------- Blog ---------------- */ .blog-head .lead { margin: 6px 0 0; max-width: 560px; } .post-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .post-card { background: var(--card); border-radius: var(--r-md); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .post-card-link { display: flex; flex-direction: column; height: 100%; color: var(--text); text-decoration: none !important; } .post-card-media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--fill); } .post-card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); } .post-card:hover .post-card-img { transform: scale(1.05); } .post-card-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .post-card-title { font-size: 20px; line-height: 1.25; margin: 0; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .post-card-excerpt { margin: 0; color: var(--sub); font-size: 15px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--sub); margin: 0; } .post-cat { background: var(--t-rose); color: var(--i-rose) !important; padding: 4px 10px; border-radius: 999px; font-weight: 600; text-decoration: none !important; } .post-card.is-featured { grid-column: 1 / -1; } .post-card.is-featured .post-card-link { flex-direction: row; } .post-card.is-featured .post-card-media { flex: 0 0 58%; aspect-ratio: auto; min-height: 380px; } .post-card.is-featured .post-card-body { padding: clamp(24px, 4vw, 48px); justify-content: center; gap: 14px; } .post-card.is-featured .post-card-title { font-size: clamp(26px, 3vw, 38px); -webkit-line-clamp: 4; } .post-card.is-featured .post-card-excerpt { font-size: 17px; -webkit-line-clamp: 3; } .post-card-cta { align-self: flex-start; margin-top: 6px; } .related-posts { margin-top: 24px; } .related-posts h2 { font-size: 28px; } .article-head .post-meta { margin-bottom: 14px; } .article-cta { margin: 48px 0 0; padding: 32px; border-radius: var(--r-md); background: var(--t-rose); } .article-cta .eyebrow { color: var(--i-rose); } .article-cta-title { font-size: 24px; font-weight: 700; margin: 0 0 16px; letter-spacing: -0.01em; } .reading-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 70; pointer-events: none; } .reading-progress span { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); } .entry h2, .entry h3 { scroll-margin-top: 100px; } @media (max-width: 781px) { .entry .ib-stats { flex-wrap: wrap !important; } .entry .ib-stats > .wp-block-column { flex-basis: calc(50% - 8px) !important; flex-grow: 0; } .entry .ib-stat { padding: 18px; } } @media (max-width: 900px) { .post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .post-card.is-featured .post-card-link { flex-direction: column; } .post-card.is-featured .post-card-media { min-height: 0; aspect-ratio: 3 / 2; } } @media (max-width: 600px) { .post-list { grid-template-columns: 1fr; gap: 16px; } .post-list .post-card:not(.is-featured) .post-card-link { flex-direction: row; } .post-list .post-card:not(.is-featured) .post-card-media { flex: 0 0 38%; aspect-ratio: 1; } .post-list .post-card:not(.is-featured) .post-card-body { padding: 12px 14px; gap: 6px; } .post-list .post-card:not(.is-featured) .post-card-title { font-size: 16px; } .post-list .post-card:not(.is-featured) .post-card-excerpt { display: none; } .entry .ib-steps li { padding-left: 64px; } } /* ---------------- Built-in contact form ---------------- */ .ibra-contact { display: flex; flex-direction: column; gap: 4px; } .ibra-contact .ibc-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .ibra-contact .ibc-field { margin: 0 0 12px; } .ibra-contact label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; } .ibra-contact label span { color: var(--accent-text); } .ibra-contact input[type="text"], .ibra-contact input[type="email"], .ibra-contact textarea { width: 100%; max-width: none; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; font-size: 16px; color: var(--text); transition: border-color .2s, box-shadow .2s; } .ibra-contact input:focus, .ibra-contact textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); } .ibra-contact textarea { min-height: 150px; resize: vertical; } .ibra-contact .ibc-actions { margin: 6px 0 0; } .ibra-contact .ibc-submit:disabled { opacity: .7; cursor: progress; } .ibra-contact .ibc-status { margin: 10px 0 0; font-size: 15px; min-height: 1px; } .ibra-contact .ibc-status.is-ok { color: var(--green); font-weight: 600; animation: ib-rise .5s var(--ease) both; } .ibra-contact .ibc-status.is-error, .ibra-contact .ibc-status.is-required, .ibra-contact .ibc-status.is-spam, .ibra-contact .ibc-status.is-slow, .ibra-contact .ibc-status.is-fail { color: var(--accent-text); font-weight: 600; } .ibc-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } @media (max-width: 600px) { .ibra-contact .ibc-row { grid-template-columns: 1fr; gap: 0; } } /* ---------------- WooCommerce ---------------- */ .woocommerce .woocommerce-breadcrumb { font-size: 14px; color: var(--sub); margin-bottom: 18px; } .woocommerce .woocommerce-breadcrumb a { color: var(--sub); } .woocommerce-products-header__title, .wc-wrap h1.page-title { font-size: clamp(34px, 4.4vw, 52px); margin-bottom: 12px; } .woocommerce .woocommerce-result-count { color: var(--sub); font-size: 15px; } .woocommerce .woocommerce-ordering select { border-radius: 999px; } .woocommerce ul.products { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; margin: 0 0 32px !important; padding: 0; clear: both; } .woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; } .woocommerce ul.products li.product.ibra-li { width: auto !important; margin: 0 !important; float: none !important; padding: 0; list-style: none; } .woocommerce span.onsale { display: none; } .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt { background: var(--accent); color: #fff; border-radius: 999px; padding: 13px 24px; font-weight: 600; border: 0; line-height: 1.2; transition: transform .2s var(--ease), background-color .2s; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce button.button.alt:hover, .woocommerce a.button.alt:hover { background: #B8302F; color: #fff; } .woocommerce button.button:active, .woocommerce a.button:active { transform: scale(.95); } .woocommerce button.button:disabled, .woocommerce button.button.disabled, .woocommerce button.button.alt.disabled { background: var(--fill); color: var(--sub); opacity: 1; } .woocommerce div.product { background: transparent; } .woocommerce div.product div.images { border-radius: var(--r-md); overflow: hidden; } .woocommerce div.product div.images img { border-radius: var(--r-sm); } .woocommerce div.product div.images .flex-control-thumbs { margin-top: 10px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .woocommerce div.product div.images .flex-control-thumbs li { width: auto !important; margin: 0 !important; } .woocommerce div.product .product_title { font-size: clamp(30px, 3.6vw, 44px); } .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--text); font-size: 28px; font-weight: 700; } .woocommerce div.product p.price del, .woocommerce div.product span.price del { color: var(--strike); font-size: 20px; font-weight: 400; opacity: 1; } .woocommerce div.product p.price ins, .woocommerce div.product span.price ins { text-decoration: none; } .woocommerce div.product form.cart .variations select { border-radius: 12px; min-width: 220px; } .woocommerce div.product form.cart .variations td, .woocommerce div.product form.cart .variations th { padding: 6px 8px 6px 0; } .woocommerce .quantity .qty { border-radius: 999px; width: 80px; text-align: center; } .woocommerce div.product .woocommerce-tabs ul.tabs { padding: 4px; margin: 32px 0 20px; display: inline-flex; gap: 4px; background: var(--fill); border-radius: 999px; } .woocommerce div.product .woocommerce-tabs ul.tabs::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li { border: 0; background: transparent; border-radius: 999px; margin: 0; padding: 0; } .woocommerce div.product .woocommerce-tabs ul.tabs li a, .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { padding: 8px 18px; color: var(--text) !important; font-weight: 600; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--card); box-shadow: 0 2px 8px rgba(0, 0, 0, .12); } .woocommerce div.product .woocommerce-tabs .panel { font-size: 17px; } .woocommerce .related > h2, .woocommerce .upsells > h2 { font-size: 28px; margin-top: 48px; } .woocommerce-message, .woocommerce-info, .woocommerce-error { background: var(--card); color: var(--text); border-radius: var(--r-sm); border-top: 0; border-left: 4px solid var(--accent); box-shadow: 0 4px 18px rgba(0, 0, 0, .06); } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none; } .woocommerce-message, .woocommerce-info, .woocommerce-error { padding: 16px 20px !important; } .select2-container .select2-selection--single { height: 44px; border-radius: 12px; border-color: var(--line); display: flex; align-items: center; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; } .woocommerce table.shop_table { border-radius: var(--r-sm); border-color: var(--line); background: var(--card); } .woocommerce table.shop_table td, .woocommerce table.shop_table th { border-color: var(--line); } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { border-radius: 12px; } .woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register { border-color: var(--line); border-radius: var(--r-md); background: var(--card); } .woocommerce-checkout #payment { background: var(--card); border-radius: var(--r-md); } .woocommerce-checkout #payment div.payment_box { background: var(--fill); color: var(--text); } .woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--fill); } .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; } .woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 10px 14px; border-radius: 12px; color: var(--text); } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--card); font-weight: 600; } .woocommerce nav.woocommerce-pagination ul { border: 0; display: flex; gap: 6px; justify-content: center; } .woocommerce nav.woocommerce-pagination ul li { border: 0; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--card); color: var(--text); } .woocommerce nav.woocommerce-pagination ul li span.current { background: var(--text); color: var(--bg); } .woocommerce .star-rating span::before { color: #FF9F0A; } [data-theme="dark"] .woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: #3A3A3C; } [data-theme="dark"] .select2-container--default .select2-selection--single, [data-theme="dark"] .select2-dropdown { background: var(--card); color: var(--text); border-color: var(--line); } /* ---------------- Motion ---------------- */ .ib-rise { animation: ib-rise .8s var(--ease) both; animation-delay: var(--d, 0s); } .ib-reveal { opacity: 0; transform: translateY(18px); } .ib-reveal.ib-in { opacity: 1; transform: none; transition: opacity .6s var(--ease) var(--d, 0s), transform .6s var(--ease) var(--d, 0s), box-shadow .35s var(--ease); } .card.ib-reveal.ib-in:hover { transform: translateY(-4px); transition-delay: 0s; } @keyframes ib-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes fill { from { width: 0; } to { width: 100%; } } @keyframes spin-in { from { opacity: 0; transform: rotate(-90deg) scale(.5); } to { opacity: 1; transform: none; } } @keyframes bump { 0% { transform: scale(.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } } @keyframes pulse { 50% { transform: scale(.9); } } @keyframes toast { 0% { opacity: 0; transform: translate(-50%, -16px) scale(.96); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1); } 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -10px); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; } .ib-reveal { opacity: 1; transform: none; } .slide.is-active .slide-img { transform: none; } } /* ---------------- Responsive ---------------- */ @media (max-width: 1100px) { .header-search { width: 160px; } .header-search:focus-within { width: 200px; } } @media (max-width: 960px) { .main-nav, .header-search, .hide-sm { display: none !important; } .site-header { padding-left: 18px; } .tabbar { display: flex; position: fixed; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 55; align-items: center; gap: 10px; } .tabbar-tabs { flex: 1 1 auto; border-radius: 999px; padding: 6px; display: flex; justify-content: space-between; } .tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; font-weight: 600; padding: 6px 10px; border-radius: 999px; min-width: 56px; color: var(--text); text-decoration: none !important; transition: transform .2s var(--ease); } .tab.is-active { color: var(--accent-text); background: var(--fill); } .tab.is-active .ic { animation: spin-in .45s var(--spring); } .tab .ibra-cart-count { top: 0; right: 8px; } .tab-search { width: 60px; height: 60px; flex: 0 0 60px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--text); cursor: pointer; } body { padding-bottom: 100px; } .grecaptcha-badge { bottom: 104px !important; } .toast { top: 80px; } } @media (max-width: 782px) { .admin-bar .site-header-wrap { top: 46px; } } @media (max-width: 640px) { .container { padding: 0 16px; } .site-header-wrap { padding: 10px 12px 0; } .hero-head { padding-top: 24px; } .slider { height: calc((100vw - 32px) / 1.5 + 168px); border-radius: 28px; } .slide-img { bottom: auto; height: calc((100vw - 32px) / 1.5); } .caption { left: 0; right: 0; bottom: 0; max-width: none; padding: 16px 18px 18px; border-radius: 0; border: 0; background: #1C1C1E; -webkit-backdrop-filter: none; backdrop-filter: none; min-height: 168px; justify-content: center; } .cap-name { font-size: 26px; } .slider-ctrls { top: 10px; right: 10px; bottom: auto; padding: 4px; } .slider-ctrls .ctrl { display: none; } .dots { padding: 10px 8px; } .grid, .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .card { border-radius: 20px; } .card-body { padding: 10px 12px 12px; } .card-title { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card-kind { display: none; } .card-price { font-size: 15px; margin-top: 2px; } .add-btn { opacity: 1; transform: none; top: 6px; right: 6px; } .pill { top: 8px; left: 8px; font-size: 12px; } .section-head h2, .promo h2 { font-size: 26px; } .promo { padding: 28px; min-height: 0; } .footer-cols { gap: 32px; } .seg button, .seg-thumb { width: 38px; } [data-lang="id"] .seg-thumb { transform: translateX(38px); } .brand .logo { height: 24px; } } /* ---------------- Type tester ---------------- */ .tt { clear: both; margin: 40px 0 8px; scroll-margin-top: 110px; --tt-size: 88px; --tt-lh: 1.15; --tt-ls: 0; --tt-align: left; --tt-case: none; --tt-feat: normal; --tt-var: normal; --tt-family: inherit; } .tt-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 14px; } .tt-head .eyebrow { margin-bottom: 2px; } .tt-title { margin: 0; font-size: clamp(26px, 4vw, 36px); letter-spacing: -.02em; line-height: 1.1; } .tt-tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--fill); border-radius: 999px; } .tt-tab { border: 0; background: transparent; color: var(--text); font: 600 14px/1 var(--font); padding: 9px 16px; border-radius: 999px; cursor: pointer; transition: background .25s var(--ease), box-shadow .25s; } .tt-tab.is-on { background: var(--seg-thumb); box-shadow: 0 2px 8px rgba(0, 0, 0, .12); } .tt-tab[hidden] { display: none; } .tt-card { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 18px 18px 14px; position: relative; overflow: hidden; transition: background .35s var(--ease), color .35s; } .tt.is-inverted .tt-card { background: #111113; color: #F5F5F7; } .tt.is-inverted .tt-chip, .tt.is-inverted .tt-style, .tt.is-inverted .tt-seg, .tt.is-inverted .tt-icon, .tt.is-inverted .tt-feat { background: rgba(255, 255, 255, .1); color: #F5F5F7; } .tt.is-inverted .tt-range b, .tt.is-inverted .tt-label, .tt.is-inverted .tt-wf small { color: #A1A1A6; } .tt-styles, .tt-samples { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 10px; margin: 0 -2px; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); } .tt-styles::-webkit-scrollbar, .tt-samples::-webkit-scrollbar { display: none; } .tt-styles[hidden] { display: none; } .tt-chip, .tt-style { flex: none; border: 0; background: var(--fill); color: var(--text); font: 600 14px/1 var(--font); padding: 9px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s, transform .2s var(--spring); } .tt-style { font-size: 18px; font-weight: 400; padding: 8px 16px; } .tt-chip:active, .tt-style:active { transform: scale(.95); } .tt-chip.is-on, .tt-style.is-on { background: var(--text); color: var(--card); } .tt.is-inverted .tt-chip.is-on, .tt.is-inverted .tt-style.is-on { background: #F5F5F7; color: #111113; } .tt-text, .tt-wf p, .tt-glyph, .tt-glyph-big span { font-family: var(--tt-family); font-feature-settings: var(--tt-feat); font-variation-settings: var(--tt-var); } .tt-text { min-height: 1.3em; padding: 14px 6px 22px; font-size: var(--tt-size); line-height: var(--tt-lh); letter-spacing: var(--tt-ls); text-align: var(--tt-align); text-transform: var(--tt-case); white-space: pre-wrap; overflow-wrap: anywhere; outline: none; caret-color: var(--accent); transition: opacity .3s; } .tt-text:focus-visible { box-shadow: inset 0 0 0 2px var(--fill); border-radius: 16px; } .tt.is-loading .tt-text, .tt.is-loading .tt-glyph-grid { opacity: .35; } .tt-view[hidden] { display: none; } .tt-view-waterfall { padding: 6px 0 12px; } .tt-wf { display: grid; grid-template-columns: 52px 1fr; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); } .tt-wf:last-child { border-bottom: 0; } .tt-wf small { color: var(--sub); font-size: 12px; font-variant-numeric: tabular-nums; } .tt-wf p { margin: 0; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: var(--tt-ls); text-transform: var(--tt-case); } .tt-view-glyphs { display: grid; grid-template-columns: minmax(180px, 32%) 1fr; gap: 14px; padding: 4px 0 14px; } .tt-glyph-big { position: sticky; top: 0; align-self: start; aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--r-md); background: var(--fill); overflow: hidden; } .tt-glyph-big span { font-size: clamp(90px, 14vw, 170px); line-height: 1; } .tt-glyph-big small { position: absolute; left: 14px; bottom: 12px; font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--sub); } .tt-glyph-big { position: relative; } .tt-glyph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; max-height: 360px; overflow-y: auto; align-content: start; padding-right: 4px; transition: opacity .3s; } .tt-glyph { aspect-ratio: 1; border: 0; border-radius: 12px; background: var(--fill); color: inherit; font-size: 26px; line-height: 1; cursor: pointer; transition: background .2s, transform .2s var(--spring); } .tt-glyph:hover, .tt-glyph.is-on { background: var(--accent); color: #fff; transform: scale(1.06); } .tt-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 14px 22px; align-items: end; padding: 14px 4px 4px; border-top: 1px solid var(--line); } .tt[data-view="glyphs"] .tt-controls .tt-range, .tt[data-view="glyphs"] .tt-seg { display: none; } .tt[data-view="glyphs"] .tt-controls { grid-template-columns: 1fr; justify-items: end; } .tt-range { display: grid; gap: 8px; min-width: 0; } .tt-range > span { display: flex; justify-content: space-between; font-size: 13px; } .tt-range b { font-weight: 600; color: var(--sub); } .tt-range output { font-variant-numeric: tabular-nums; font-weight: 600; } .tt input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin: 0; cursor: pointer; } .tt input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: var(--fill); } .tt input[type=range]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--fill); } .tt input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 3px 10px rgba(0,0,0,.18); border: 0; } .tt input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 3px 10px rgba(0,0,0,.18); border: 0; } .tt.is-inverted input[type=range]::-webkit-slider-runnable-track { background: rgba(255,255,255,.2); } .tt-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .tt-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--fill); } .tt-seg button { border: 0; background: transparent; color: inherit; width: 36px; height: 32px; border-radius: 9px; font: 600 13px/1 var(--font); cursor: pointer; display: grid; place-items: center; transition: background .2s; } .tt-seg button.is-on { background: var(--seg-thumb); box-shadow: 0 1px 4px rgba(0,0,0,.12); } .tt.is-inverted .tt-seg button.is-on { background: rgba(255,255,255,.22); } .tt-icon { border: 0; width: 38px; height: 38px; border-radius: 12px; background: var(--fill); color: inherit; display: grid; place-items: center; cursor: pointer; transition: transform .2s var(--spring), background .2s; } .tt-icon:active { transform: scale(.9); } .tt-icon.is-done { background: var(--green); color: #fff; } .tt svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .tt svg .f { fill: currentColor; stroke: none; } .tt-features, .tt-axes { padding: 14px 4px 4px; border-top: 1px solid var(--line); margin-top: 14px; } .tt-features[hidden], .tt-axes[hidden] { display: none; } .tt-axes { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px 22px; } .tt-label { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--sub); } .tt-feature-list { display: flex; flex-wrap: wrap; gap: 8px; } .tt-feat { display: inline-flex; align-items: center; gap: 8px; border: 0; background: var(--fill); color: inherit; padding: 8px 12px 8px 10px; border-radius: 999px; font: 600 13px/1 var(--font); cursor: pointer; transition: background .2s, color .2s; } .tt-feat::before { content: ""; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; opacity: .45; transition: all .2s; } .tt-feat[aria-pressed="true"] { background: var(--accent); color: #fff; } .tt-feat[aria-pressed="true"]::before { opacity: 1; box-shadow: inset 0 0 0 5px #fff; } .tt-feat code { font: 500 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; opacity: .6; } .tt-feats-collapsed .tt-feat:nth-child(n+9) { display: none; } .tt-more { border: 0; background: transparent; color: var(--accent-text); font: 600 13px/1 var(--font); padding: 8px 10px; cursor: pointer; } .tt.is-inverted .tt-more { color: #FF8A8A; } .tt[data-view="waterfall"] .tt-range:first-child, .tt[data-view="waterfall"] .tt-lh, .tt[data-view="waterfall"] .tt-range:nth-child(2) { display: none; } .tt[data-view="glyphs"] .tt-samples { display: none; } .tt-jump { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 18px; padding: 10px 16px; border-radius: 999px; background: var(--fill); color: var(--text); font-weight: 600; font-size: 15px; text-decoration: none; transition: background .2s, transform .2s var(--spring); } .tt-jump:hover { background: var(--accent); color: #fff; } .tt-jump svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 760px) { .tt-card { padding: 14px 12px 12px; border-radius: var(--r-md); } .tt-controls { grid-template-columns: 1fr; gap: 10px; } .tt-controls .tt-range { gap: 2px; } .tt-btns { justify-content: space-between; gap: 6px; flex-wrap: nowrap; } .tt-seg button { width: 31px; } .tt-icon { width: 34px; height: 34px; } .tt-view-glyphs { grid-template-columns: 1fr; } .tt-glyph-big { aspect-ratio: auto; height: 170px; position: relative; } .tt-glyph-grid { max-height: 300px; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); } .tt-head { align-items: flex-start; flex-direction: column; } } @media (prefers-reduced-motion: reduce) { .tt * { transition: none !important; } } /* ---------------- Contact: sample messages ---------------- */ .entry .ib-note { color: var(--sub); } .entry .ib-samples { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; } .entry .ib-sample { display: inline-flex; align-items: center; gap: 8px; border: 0; background: var(--card); color: var(--text); border-radius: 999px; padding: 10px 16px; font: 600 14px/1.2 var(--font); cursor: pointer; text-align: left; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: background .2s, color .2s, transform .2s var(--spring), box-shadow .2s; } .entry .ib-sample::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; opacity: .55; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") center/contain no-repeat; } .entry .ib-sample:hover { box-shadow: 0 6px 16px rgba(0,0,0,.08); transform: translateY(-1px); } .entry .ib-sample:active { transform: scale(.96); } .entry .ib-sample[aria-pressed="true"] { background: var(--accent); color: #fff; } .entry .ib-sample[aria-pressed="true"]::before { opacity: 1; } .ibra-contact textarea.ib-flash { animation: ib-flash 1s var(--ease); } @keyframes ib-flash { 0% { box-shadow: 0 0 0 0 rgba(213,58,62,.45); } 100% { box-shadow: 0 0 0 10px rgba(213,58,62,0); } } /* ---------------- Product page ---------------- */ .woocommerce div.product div.images .flex-control-thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); } .woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar { display: none; } .woocommerce div.product div.images .flex-control-thumbs li { flex: 0 0 84px; } .woocommerce div.product div.images .flex-control-thumbs img { border-radius: 12px; opacity: .55; transition: opacity .2s; aspect-ratio: 3 / 2; object-fit: cover; } .woocommerce div.product div.images .flex-control-thumbs img.flex-active, .woocommerce div.product div.images .flex-control-thumbs img:hover { opacity: 1; } .pd-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 14px; color: var(--sub); } .pd-crumbs a { color: var(--sub); text-decoration: none; } .pd-crumbs a:hover { color: var(--accent-text); } .pd-crumbs span { opacity: .5; } .woocommerce div.product .pd-title { margin: 0 0 14px; line-height: 1.05; } .pd-title .pd-name { display: block; font-size: clamp(36px, 4.6vw, 56px); letter-spacing: -.03em; font-weight: 800; } .pd-title .pd-sub { display: block; margin-top: 8px; font-size: clamp(17px, 1.6vw, 20px); font-weight: 500; letter-spacing: 0; color: var(--sub); line-height: 1.3; } .pd-price { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 16px; font-size: 16px; } .pd-free { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--t-sage); color: var(--i-sage); font-weight: 700; font-size: 14px; } .pd-free::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .pd-from { color: var(--sub); } .pd-from strong { color: var(--text); font-size: 20px; } .pd-from del { opacity: .7; } .pd-glance { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--sub); } .pd-glance li { display: inline-flex; align-items: center; gap: 6px; } .pd-glance li::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--ic) center/contain no-repeat; mask: var(--ic) center/contain no-repeat; } .pd-glance .ic-file { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E"); } .pd-glance .ic-globe { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E"); } .pd-glance .ic-bolt { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E"); } .woocommerce div.product form.cart .pd-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .pd-licenses { margin: 0 0 14px; } .pd-lic-title, .pd-terms-title { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sub); } .pd-lic-list { background: var(--card); border-radius: var(--r-md); padding: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); } .pd-lic-more[hidden] { display: none; } .pd-lic { width: 100%; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border: 0; border-radius: 18px; background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer; transition: background .2s; } .pd-lic + .pd-lic, .pd-lic-more .pd-lic, .pd-lic-more { border-top: 1px solid var(--line); } .pd-lic-more .pd-lic:first-child { border-top: 0; } .pd-lic:hover { background: var(--fill); } .pd-lic[aria-checked="true"] { background: color-mix(in srgb, var(--accent) 9%, transparent); border-top-color: transparent; } .pd-lic[aria-checked="true"] + .pd-lic { border-top-color: transparent; } .pd-lic:disabled { opacity: .45; cursor: not-allowed; } .pd-lic-dot { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line); transition: box-shadow .2s var(--spring); } .pd-lic[aria-checked="true"] .pd-lic-dot { box-shadow: inset 0 0 0 7px var(--accent); } .pd-lic-txt { display: grid; gap: 2px; min-width: 0; } .pd-lic-name { font-weight: 650; font-size: 16px; } .pd-lic-for { font-size: 13px; color: var(--sub); } .pd-lic-price b { font-size: 16px; font-variant-numeric: tabular-nums; } .pd-lic-free { color: var(--green); } .pd-lic-toggle { margin-top: 6px; border: 0; background: transparent; color: var(--accent-text); font: 600 14px/1 var(--font); padding: 8px 4px; cursor: pointer; } .pd-lic-count { color: var(--sub); font-weight: 500; } .woocommerce div.product form.cart .reset_variations { display: none !important; } .woocommerce div.product .single_variation_wrap .woocommerce-variation { margin: 4px 0 14px; } .woocommerce div.product .woocommerce-variation-description { margin-bottom: 10px; } .pd-terms { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 15px; } .pd-terms li { position: relative; padding-left: 26px; line-height: 1.4; } .pd-terms li::before { content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--t-sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C7343' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat; } .pd-terms-note { margin: 8px 0 0; font-size: 12.5px; color: var(--sub); } .woocommerce div.product .woocommerce-variation-price .price { font-size: 30px; } .woocommerce div.product form.cart .button.single_add_to_cart_button { min-height: 52px; padding: 0 30px; font-size: 16px; } .pd-help { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 14px; font-size: 14px; } .pd-help a { color: var(--accent-text); font-weight: 600; text-decoration: none; } .pd-help a:hover { text-decoration: underline; } .woocommerce div.product .summary .tt-jump { margin-top: 0; } .pd-top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 56px); align-items: start; } .pd-top > * { min-width: 0; } .pd-top > .pd-media { position: sticky; top: 96px; display: grid; gap: 18px; } .woocommerce div.product .pd-top > div.summary { float: none; width: auto !important; margin: 0; } .woocommerce div.product .pd-media div.images { float: none; width: 100%; margin: 0; } .pd-specs { background: var(--card); border-radius: var(--r-md); padding: 4px 20px 8px; } .pd-specs .pd-h3 { margin: 14px 0 8px; } .pd-specs dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; } .pd-specs dl > div { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14.5px; } .pd-specs dt { color: var(--sub); font-size: 12.5px; } .pd-specs dd { margin: 0; font-weight: 600; } .pd-specs dd a { color: var(--accent-text); text-decoration: none; } .pd-specs .pd-langs { grid-column: 1 / -1; } .pd-specs details summary { cursor: pointer; list-style: none; color: var(--accent-text); } .pd-specs details summary::-webkit-details-marker { display: none; } .pd-specs details summary::after { content: " ›"; display: inline-block; transition: transform .2s; } .pd-specs details[open] summary::after { transform: rotate(90deg); } .pd-specs details p { margin: 6px 0 0; font-weight: 400; font-size: 13.5px; color: var(--sub); line-height: 1.5; } .pd-about { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(24px, 4vw, 56px); margin: 56px 0 8px; align-items: start; } .pd-about.is-single { grid-template-columns: minmax(0, 1fr); } .pd-about-main h2 { margin: 0 0 14px; font-size: clamp(26px, 3.2vw, 36px); letter-spacing: -.02em; } .pd-desc { font-size: 17px; line-height: 1.65; max-width: 68ch; } .pd-desc p { margin: 0 0 1em; } .pd-desc h3 { font-size: 20px; margin: 1.4em 0 .5em; } .pd-h3 { margin: 24px 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sub); } .pd-uses-card { background: var(--card); border-radius: var(--r-md); padding: 4px 20px 20px; margin-top: 34px; } .pd-uses-card .pd-h3 { margin-top: 16px; } .pd-uses { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .pd-uses li { padding: 7px 12px; border-radius: 999px; background: var(--fill); font-size: 14px; font-weight: 600; } @media (max-width: 900px) { .pd-top { grid-template-columns: minmax(0, 1fr); } .pd-top > .pd-media { display: contents; } .woocommerce div.product .pd-media div.images { order: 1; margin-bottom: 20px; } .woocommerce div.product .pd-top > div.summary { order: 2; } .woocommerce div.product .pd-specs { order: 3; margin-top: 8px; } .pd-about { grid-template-columns: 1fr; gap: 0; margin-top: 36px; } .pd-uses-card { margin-top: 12px; } } @media (max-width: 600px) { .pd-lic { padding: 12px 10px; gap: 10px; } .pd-desc { font-size: 16px; } } /* ---------------- About: app-style icons ---------------- */ .entry .ib-app-ic { --g1: var(--tint, var(--fill)); display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; margin: 0 0 18px; color: var(--ink, var(--accent)); background: linear-gradient(145deg, color-mix(in srgb, var(--card) 70%, var(--g1)), var(--g1)); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 8px 20px -8px color-mix(in srgb, var(--ink, #000) 45%, transparent); transition: transform .4s var(--spring); } .entry .ib-app-ic svg { width: 34px; height: 34px; } .entry .ib-card:hover .ib-app-ic { transform: translateY(-3px) rotate(-4deg); } .entry .ib-card.is-tinted .ib-app-ic { background: linear-gradient(145deg, var(--card), color-mix(in srgb, var(--card) 55%, var(--g1))); } [data-theme="dark"] .entry .ib-app-ic { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px -10px rgba(0,0,0,.8); } .entry .ib-app-ic svg path, .entry .ib-app-ic svg rect, .entry .ib-app-ic svg circle { vector-effect: non-scaling-stroke; } .entry .ib-photo-wide img { aspect-ratio: 3 / 2 !important; } /* What's included? */ .woocommerce div.product .woocommerce-variation-description { margin: 0 0 12px; } .pd-inc { position: relative; z-index: 30; } .pd-inc-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 4px 0; color: var(--text); font: 600 15px/1.3 var(--font); cursor: pointer; text-align: left; } .pd-inc-btn > span:first-child { text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--sub); text-underline-offset: 4px; } .pd-inc-i { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--fill); color: var(--sub); font: italic 700 12px/1 Georgia, serif; transition: background .2s, color .2s; } .pd-inc.is-open .pd-inc-i, .pd-inc-btn:hover .pd-inc-i { background: var(--accent); color: #fff; } .pd-inc-pop { position: absolute; z-index: 20; left: 0; top: calc(100% + 8px); width: min(380px, 100%); padding: 16px 18px; border-radius: 20px; background: var(--card); box-shadow: 0 20px 50px -12px rgba(0,0,0,.28), 0 0 0 1px var(--line); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top left; transition: opacity .2s var(--ease), transform .25s var(--spring), visibility .2s; } .pd-inc-pop::before { content: ""; position: absolute; left: 22px; top: -6px; width: 12px; height: 12px; background: var(--card); transform: rotate(45deg); box-shadow: -1px -1px 0 var(--line); } .pd-inc.is-open .pd-inc-pop { opacity: 1; visibility: visible; transform: none; } @media (hover: hover) and (min-width: 901px) { .pd-inc:hover .pd-inc-pop, .pd-inc:focus-within .pd-inc-pop { opacity: 1; visibility: visible; transform: none; } .pd-inc::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; } } @media (max-width: 900px) { .pd-inc-pop { position: static; width: auto; margin-top: 6px; display: none; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: var(--fill); } .pd-inc-pop::before { display: none; } .pd-inc.is-open .pd-inc-pop { display: block; } } /* ---------------- Join our team ---------------- */ .entry .ib-anchor { display: block; position: relative; top: -100px; visibility: hidden; height: 0; } .entry .ib-paths .ib-card { height: 100%; } .entry .ib-paths .ib-badge { margin: 0 0 12px; } .entry .ib-paths h3 { margin-top: 0; } .entry .ib-apply { align-items: flex-start; gap: clamp(24px, 4vw, 48px); } .entry .ib-apply > .wp-block-column:first-child { position: sticky; top: 110px; } .entry .ib-ready { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; counter-reset: rd; } .entry .ib-ready li { counter-increment: rd; position: relative; background: var(--card); border-radius: 18px; padding: 14px 16px 14px 56px; font-size: 15px; color: var(--sub); line-height: 1.45; } .entry .ib-ready li::before { content: counter(rd); position: absolute; left: 14px; top: 14px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--tint, var(--fill)); color: var(--ink, var(--text)); font-weight: 700; font-size: 14px; } .entry .ib-ready li strong { display: block; color: var(--text); font-size: 16px; margin-bottom: 2px; } .entry .ib-mt { margin-top: 28px !important; } .entry .ib-next { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; font-size: 15px; } .entry .ib-next li { position: relative; padding-left: 28px; } .entry .ib-next li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--t-sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C7343' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat; } .entry .ib-gform { background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); } .entry .ib-gform iframe { display: block; width: 100%; height: 1240px; border: 0; } .entry .ib-gform-alt { margin: 12px 4px 0; font-size: 14px; color: var(--sub); } .entry .ib-gform-alt a { color: var(--accent-text); font-weight: 600; text-decoration: none; } @media (max-width: 781px) { .entry .ib-apply > .wp-block-column:first-child { position: static; } .entry .ib-gform { border-radius: var(--r-md); margin: 0 -8px; } .entry .ib-gform iframe { height: 1400px; } } /* ================= Store flow (1.5) ================= */ /* Shop chips */ .shop-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; margin: 0 -2px 18px; -webkit-mask-image: linear-gradient(90deg, #000 94%, transparent); mask-image: linear-gradient(90deg, #000 94%, transparent); } .shop-chips::-webkit-scrollbar { display: none; } .shop-chips .chip { text-decoration: none; min-height: 40px; padding: 8px 16px; font-size: 14px; } .woocommerce .woocommerce-result-count { margin: 10px 0 18px; } /* Cart */ .woocommerce-cart .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; } .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper, .woocommerce-cart .woocommerce > .cart-empty, .woocommerce-cart .woocommerce > .return-to-shop { grid-column: 1 / -1; } .woocommerce-cart .woocommerce-cart-form { grid-column: 1; grid-row: 2; } .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-row: 1; } .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper:empty { display: none; } .woocommerce-cart .cart-collaterals { grid-column: 2; grid-row: 1 / span 3; display: contents; } .woocommerce-cart .cart-collaterals .cart_totals { grid-column: 2; grid-row: 2 / span 2; width: auto !important; float: none !important; position: sticky; top: 100px; background: var(--card); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow); } .woocommerce-cart .cart-collaterals .cross-sells { grid-column: 1; grid-row: 3; width: auto !important; float: none !important; } .woocommerce-cart .cart_totals h2 { font-size: 20px; margin: 0 0 10px; } .woocommerce-cart .cart_totals table.shop_table { border: 0; background: transparent; } .woocommerce-cart .cart_totals table.shop_table th, .woocommerce-cart .cart_totals table.shop_table td { padding: 10px 0; border: 0; border-top: 1px solid var(--line); background: transparent; } .woocommerce-cart .cart_totals .order-total td, .woocommerce-cart .cart_totals .order-total th { font-size: 20px; } .woocommerce-cart .wc-proceed-to-checkout { padding: 14px 0 0; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { border-radius: 999px; font-size: 17px; padding: 16px; margin: 0; } .woocommerce table.shop_table.cart { border: 0; background: transparent; border-collapse: separate; border-spacing: 0 10px; margin: -10px 0 0; } .woocommerce table.shop_table.cart thead { display: none; } .woocommerce table.shop_table.cart tr.cart_item { background: var(--card); } .woocommerce table.shop_table.cart tr.cart_item td { border: 0; padding: 14px 12px; vertical-align: middle; background: var(--card); } .woocommerce table.shop_table.cart tr.cart_item td:first-child { border-radius: 22px 0 0 22px; } .woocommerce table.shop_table.cart tr.cart_item td:last-child { border-radius: 0 22px 22px 0; } .woocommerce table.shop_table.cart td.product-thumbnail { width: 132px; padding-left: 14px; } .woocommerce table.shop_table.cart td.product-thumbnail img { width: 120px !important; height: 80px; object-fit: cover; border-radius: 14px; } .woocommerce table.shop_table.cart td.product-quantity, .woocommerce table.shop_table.cart td.product-price { display: none !important; } .woocommerce table.shop_table.cart td.product-subtotal { font-weight: 700; font-size: 17px; text-align: right; } .woocommerce table.shop_table.cart td.product-remove { width: 44px; text-align: center; } .woocommerce table.shop_table.cart a.remove { width: 32px; height: 32px; line-height: 30px; border-radius: 50%; background: var(--fill); color: var(--sub) !important; font-size: 20px; } .woocommerce table.shop_table.cart a.remove:hover { background: var(--accent); color: #fff !important; } .woocommerce .ci-name, .ci-name { display: block; font-weight: 700; font-size: 17px; color: var(--text) !important; text-decoration: none !important; } .ci-sub { display: block; font-size: 13.5px; color: var(--sub); margin-top: 2px; } .ci-lic { display: inline-flex; margin-top: 8px; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-text); font-size: 12.5px; font-weight: 700; } .woocommerce table.shop_table.cart td.actions { padding: 6px 0 0; background: transparent; border: 0; text-align: left; } .woocommerce table.shop_table.cart td.actions .coupon { display: flex; gap: 8px; float: none; } .woocommerce table.shop_table.cart td.actions .coupon .input-text { width: 220px !important; min-height: 44px; border-radius: 999px; padding: 0 16px; border: 1px solid var(--line); background: var(--card); } .woocommerce table.shop_table.cart td.actions .coupon .button { border-radius: 999px; min-height: 44px; background: var(--fill); color: var(--text); } .woocommerce table.shop_table.cart td.actions > .button[name="update_cart"] { display: none; } .woocommerce-cart .cross-sells h2 { font-size: 20px; margin: 18px 0 12px; } @media (max-width: 900px) { .woocommerce-cart .woocommerce { grid-template-columns: 1fr; } .woocommerce-cart .cart-collaterals .cart_totals { grid-column: 1; grid-row: auto; position: static; } .woocommerce-cart .cart-collaterals .cross-sells { grid-column: 1; } .woocommerce table.shop_table_responsive.cart tr.cart_item { display: grid; grid-template-columns: 96px 1fr 40px; grid-template-areas: "img name rm" "img sub sub"; border-radius: 22px; margin-bottom: 10px; padding: 12px; gap: 4px 12px; } .woocommerce table.shop_table_responsive.cart tr.cart_item td { display: block; padding: 0 !important; text-align: left !important; border-radius: 0 !important; } .woocommerce table.shop_table_responsive.cart tr.cart_item td::before { display: none; } .woocommerce table.shop_table_responsive.cart td.product-thumbnail { display: block !important; grid-area: img; width: auto; } .woocommerce table.shop_table_responsive.cart td.product-thumbnail img { width: 96px !important; height: 72px; } .woocommerce table.shop_table_responsive.cart td.product-name { grid-area: name; } .woocommerce table.shop_table_responsive.cart td.product-remove { grid-area: rm; } .woocommerce table.shop_table_responsive.cart td.product-subtotal { grid-area: sub; text-align: left !important; } .woocommerce table.shop_table.cart td.actions .coupon .input-text { width: 100% !important; } } /* Checkout */ .woocommerce-checkout form.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 0 32px; align-items: start; } .woocommerce-checkout form.checkout > * { grid-column: 1; } .woocommerce-checkout form.checkout #customer_details { grid-column: 1; grid-row: 2 / span 2; } .woocommerce-checkout form.checkout #customer_details .col-1, .woocommerce-checkout form.checkout #customer_details .col-2 { float: none; width: 100%; } .woocommerce-checkout form.checkout #customer_details .col-2:empty, .woocommerce-checkout .woocommerce-additional-fields:empty { display: none; } .woocommerce-checkout form.checkout #order_review_heading { grid-column: 2; grid-row: 1; margin: 0 0 12px; font-size: 22px; } .woocommerce-checkout form.checkout #order_review { grid-column: 2; grid-row: 2; position: sticky; top: 100px; background: var(--card); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow); } .woocommerce-checkout .co-lead { grid-column: 1; grid-row: 1; margin: 0 0 14px; color: var(--sub); font-size: 16px; } .woocommerce-checkout .woocommerce-billing-fields { background: var(--card); border-radius: var(--r-lg); padding: 22px 24px 10px; } .woocommerce-checkout .woocommerce-billing-fields h3 { font-size: 20px; margin: 0 0 12px; } .woocommerce-checkout .form-row { margin: 0 0 14px; } .woocommerce-checkout .form-row .input-text, .woocommerce-checkout .form-row select, .woocommerce-checkout .select2-container .select2-selection--single { min-height: 48px; border-radius: 14px !important; border: 1px solid var(--line) !important; background: var(--bg) !important; padding: 0 14px; font-size: 16px; } .woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered { line-height: 46px; padding-left: 0; } .woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow { height: 46px; right: 8px; } .woocommerce-checkout .form-row .description { font-size: 13px; color: var(--sub); margin-top: 4px; background: none; padding: 0; } .woocommerce-checkout #order_review table.shop_table { border: 0; background: transparent; margin: 0 0 12px; } .woocommerce-checkout #order_review table.shop_table th, .woocommerce-checkout #order_review table.shop_table td { padding: 10px 0; border: 0; border-top: 1px solid var(--line); background: transparent; } .woocommerce-checkout #order_review table.shop_table thead { display: none; } .woocommerce-checkout #order_review .product-name .product-quantity { display: none; } .woocommerce-checkout #order_review .order-total th, .woocommerce-checkout #order_review .order-total td { font-size: 20px; } .woocommerce-checkout #payment { background: transparent !important; } .woocommerce-checkout #payment ul.payment_methods { padding: 0 0 10px; border: 0; } .woocommerce-checkout #payment div.form-row { padding: 0; } .woocommerce-checkout #payment #place_order { float: none; width: 100%; border-radius: 999px; padding: 16px; font-size: 17px; } .co-trust { list-style: none; margin: 4px 0 14px; padding: 0; display: grid; gap: 6px; font-size: 13.5px; color: var(--sub); } .co-trust li { position: relative; padding-left: 24px; } .co-trust li::before { content: ""; position: absolute; left: 0; top: 1px; width: 16px; height: 16px; border-radius: 50%; background: var(--t-sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C7343' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/11px no-repeat; } .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info { background: transparent; border: 0; padding: 0 0 0 0; margin: 0 0 12px; font-size: 14px; color: var(--sub); } .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before { display: none; } @media (max-width: 900px) { .woocommerce-checkout form.checkout { grid-template-columns: 1fr; } .woocommerce-checkout form.checkout > *, .woocommerce-checkout form.checkout #order_review_heading, .woocommerce-checkout form.checkout #order_review, .woocommerce-checkout form.checkout #customer_details, .woocommerce-checkout .co-lead { grid-column: 1; grid-row: auto; position: static; } .woocommerce-checkout form.checkout #order_review_heading { margin-top: 22px; } } /* My Account */ .woocommerce-account .woocommerce { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; } .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; } .woocommerce-account .woocommerce-MyAccount-navigation { position: sticky; top: 100px; background: var(--card); border-radius: var(--r-md); padding: 8px; } .woocommerce-account .woocommerce-MyAccount-navigation ul { margin: 0; display: grid; gap: 2px; } .woocommerce-account .woocommerce-MyAccount-navigation li a { text-decoration: none; font-weight: 500; } .woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--fill); } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--text); color: var(--card); } .woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--sub); } .woocommerce-account:not(.logged-in) .woocommerce { display: block; } .acc-hello h2 { margin: 0 0 6px; font-size: clamp(26px, 3vw, 34px); letter-spacing: -.02em; } .acc-hello p { margin: 0; color: var(--sub); } .acc-hello .eyebrow { margin-bottom: 4px; color: var(--accent-text); } .acc-block { margin-top: 28px; } .acc-block-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; } .acc-block-head h3 { margin: 0; font-size: 20px; } .acc-block-head a { color: var(--accent-text); font-weight: 600; text-decoration: none; font-size: 15px; } .acc-dl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; } .acc-dl-item { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; align-items: center; background: var(--card); border-radius: 20px; padding: 12px; } .acc-dl-img img { width: 84px; height: 56px; object-fit: cover; border-radius: 12px; display: block; } .acc-dl-txt { min-width: 0; display: grid; gap: 2px; } .acc-dl-name { font-weight: 700; color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .acc-dl-meta { font-size: 13px; color: var(--sub); } .acc-dl-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; font-size: 14px; text-decoration: none; } .acc-dl-btn svg { width: 18px; height: 18px; } .acc-empty { background: var(--card); border-radius: var(--r-lg); padding: 28px; text-align: center; } .acc-empty-title { font-size: 20px; font-weight: 700; margin: 0 0 6px; } .acc-empty p { color: var(--sub); } .acc-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: inherit; margin: 14px 0 0; } .acc-empty .acc-actions { justify-content: center; } .acc-orders { list-style: none; margin: 0; padding: 0; background: var(--card); border-radius: 20px; overflow: hidden; } .acc-orders li + li { border-top: 1px solid var(--line); } .acc-orders a { display: grid; grid-template-columns: 90px 1fr auto auto; gap: 12px; align-items: center; padding: 14px 18px; color: var(--text); text-decoration: none; font-size: 15px; } .acc-orders a:hover { background: var(--fill); } .acc-o-num { font-weight: 700; } .acc-o-date { color: var(--sub); } .acc-o-status { padding: 3px 10px; border-radius: 999px; background: var(--fill); font-size: 12.5px; font-weight: 700; } .acc-o-status.status-completed { background: var(--t-sage); color: var(--i-sage); } .acc-o-status.status-processing, .acc-o-status.status-on-hold { background: var(--t-sand); color: var(--i-sand); } .acc-o-total { font-weight: 700; } .acc-help { margin-top: 28px; background: var(--fill); border-radius: 20px; padding: 18px 20px; } .acc-help p { margin: 0; } @media (max-width: 900px) { .woocommerce-account .woocommerce { grid-template-columns: 1fr; gap: 18px; } .woocommerce-account .woocommerce-MyAccount-navigation { position: static; overflow-x: auto; } .woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; gap: 4px; } .woocommerce-account .woocommerce-MyAccount-navigation li a { white-space: nowrap; } .acc-orders a { grid-template-columns: 1fr auto; } .acc-o-date { grid-column: 1; grid-row: 2; font-size: 13px; } .acc-dl { grid-template-columns: 1fr; } .acc-dl-item { grid-template-columns: 72px 1fr auto; } .acc-dl-img img { width: 72px; height: 48px; } .acc-dl-btn span { display: none; } } /* Portfolio */ .entry .pf-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(180px, 16vw); gap: 14px; margin: 8px 0 24px; } .entry .pf-tile { position: relative; display: block; overflow: hidden; border-radius: 24px; background: var(--fill); color: #fff; text-decoration: none; isolation: isolate; } .entry .pf-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease); } .entry .pf-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.72)); opacity: .85; transition: opacity .4s; z-index: 1; } .entry .pf-tile:hover img { transform: scale(1.05); } .entry .pf-1 { grid-column: span 2; grid-row: span 2; } .entry .pf-6 { grid-column: span 2; } .entry .pf-cap { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; display: grid; gap: 2px; } .entry .pf-cap small { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .8; } .entry .pf-cap b { font-size: 22px; letter-spacing: -.01em; line-height: 1.15; } .entry .pf-1 .pf-cap b { font-size: clamp(26px, 3vw, 38px); } .entry .pf-cap em { font-style: normal; font-size: 15px; opacity: .9; max-width: 46ch; } .entry .pf-go { font-style: normal; font-size: 14px; font-weight: 600; margin-top: 6px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s var(--ease), opacity .3s; } .entry .pf-tile:hover .pf-go, .entry .pf-tile:focus-visible .pf-go { max-height: 24px; opacity: 1; } .entry .pf-styles { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; } .entry .pf-styles .chip { text-decoration: none; background: var(--fill); } .entry .pf-styles .chip:hover { background: var(--text); color: var(--card); } @media (max-width: 900px) { .entry .pf-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 42vw; gap: 10px; } .entry .pf-1, .entry .pf-6 { grid-column: span 2; grid-row: span 1; } .entry .pf-1 { grid-row: span 2; } .entry .pf-tile { border-radius: 18px; } .entry .pf-cap { left: 12px; right: 12px; bottom: 10px; } .entry .pf-cap b { font-size: 17px; } .entry .pf-cap em { display: none; } .entry .pf-go { display: none; } } .woocommerce-account .woocommerce::before, .woocommerce-account .woocommerce::after, .woocommerce-cart .woocommerce::before, .woocommerce-cart .woocommerce::after, .woocommerce-checkout form.checkout::before, .woocommerce-checkout form.checkout::after { display: none !important; } .woocommerce .acc-dl-name, .acc-dl-name { text-decoration: none !important; color: var(--text) !important; } .acc-actions .btn:not(.btn-accent) { background: var(--card); color: var(--text); } .acc-help .acc-actions { justify-content: flex-start; } .acc-dl-btn.btn-accent { color: #fff !important; } /* ================= 1.6: nav, trends portfolio, font finder ================= */ .main-nav .sub-menu .sub-sep { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); } .main-nav .nav-finder > a { color: var(--accent-text); font-weight: 650; } @media (max-width: 1100px) and (min-width: 901px) { .main-nav .nav-list { gap: 0; } .main-nav .nav-list > li > a { padding-left: 10px; padding-right: 10px; } } /* Portfolio trends */ .entry .pf-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } .entry .pf-jump .chip { text-decoration: none; font-size: 14px; min-height: 40px; padding: 8px 16px; } .entry .pf-trend { padding-top: clamp(28px, 4vw, 44px); padding-bottom: clamp(28px, 4vw, 44px); } .entry .pf-trend-head { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; align-items: start; margin-bottom: 22px; max-width: 820px; } .entry .pf-num { font-size: clamp(36px, 5vw, 64px); font-weight: 800; line-height: .9; letter-spacing: -.04em; color: var(--ink, var(--accent)); opacity: .9; } .entry .pf-trend-title { margin: 0 0 6px; font-size: clamp(26px, 3.2vw, 38px); letter-spacing: -.02em; color: var(--ink, var(--text)); } .entry .pf-trend-why { margin: 0 0 12px; font-size: 17px; color: var(--text); max-width: 60ch; } .entry .pf-for { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .entry .pf-for li { padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, var(--card) 75%, transparent); font-size: 13px; font-weight: 600; } .entry .pf-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-auto-rows: clamp(220px, 22vw, 310px); gap: 14px; } .entry .pf-row .pf-tile { height: 100%; } .entry .pf-finder-cta .wp-block-buttons { justify-content: center; } @media (max-width: 900px) { .entry .pf-row { grid-template-columns: 1fr 1fr; grid-auto-rows: 44vw; gap: 10px; } .entry .pf-row .pf-tile:first-child { grid-column: span 2; } .entry .pf-trend-head { grid-template-columns: 1fr; } .entry .pf-jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } } /* Homepage finder banner */ .finder-banner { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: 32px; background: linear-gradient(135deg, var(--t-rose), var(--t-lilac)); } .finder-banner h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.08; margin: 0 0 10px; letter-spacing: -.02em; } .finder-banner p { margin: 0 0 18px; color: var(--sub); max-width: 52ch; } .finder-banner .eyebrow { color: var(--accent-text); margin-bottom: 6px; } .finder-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .finder-chips li { padding: 12px 16px; border-radius: 18px; background: var(--card); font-weight: 600; font-size: 15px; box-shadow: 0 8px 20px -12px rgba(0,0,0,.3); } .finder-chips li:nth-child(odd) { transform: rotate(-2deg); } .finder-chips li:nth-child(even) { transform: rotate(2deg) translateY(6px); } @media (max-width: 760px) { .finder-banner { grid-template-columns: 1fr; } .finder-chips { justify-content: flex-start; } } /* Font Finder */ .ff { margin: 8px 0 40px; background: var(--card); border-radius: var(--r-lg); padding: clamp(20px, 3.5vw, 40px); box-shadow: var(--shadow); position: relative; overflow: hidden; } .ff-progress { height: 6px; border-radius: 6px; background: var(--fill); margin: 0 0 22px; overflow: hidden; } .ff-progress span { display: block; height: 100%; width: 8%; border-radius: 6px; background: var(--accent); transition: width .45s var(--ease); } .ff-q-n { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--sub); letter-spacing: .04em; } .ff-q { margin: 0 0 18px; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.02em; } .ff-step.is-on { animation: ib-rise .4s var(--ease) both; } .ff-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } .ff-opt { display: flex; align-items: center; gap: 12px; text-align: left; border: 0; background: var(--fill); color: var(--text); border-radius: 18px; padding: 16px; font: inherit; cursor: pointer; transition: background .2s, transform .2s var(--spring), box-shadow .2s; min-height: 64px; } .ff-opt:hover { background: color-mix(in srgb, var(--accent) 8%, var(--fill)); transform: translateY(-2px); } .ff-opt:active { transform: scale(.97); } .ff-opt.is-on { background: var(--accent); color: #fff; } .ff-opt b { font-weight: 650; font-size: 16px; line-height: 1.25; } .ff-emoji { font-size: 26px; line-height: 1; flex: none; } .ff-opts-mood { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .ff-mood { flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px; } .ff-mood small { font-size: 13.5px; color: var(--sub); line-height: 1.4; } .ff-mood.is-on small { color: rgba(255,255,255,.85); } .ff-mood b { font-size: 20px; } .ff-mood-calm b { font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 300; letter-spacing: .02em; } .ff-mood-luxury b { font-family: "Didot", "Bodoni 72", "Playfair Display", Georgia, serif; font-weight: 400; letter-spacing: .03em; } .ff-mood-soft b { font-family: "Snell Roundhand", "Segoe Script", "Brush Script MT", cursive; font-weight: 400; font-size: 22px; } .ff-mood-natural b { font-family: "Marker Felt", "Comic Sans MS", "Chalkboard SE", cursive; font-weight: 400; } .ff-mood-bold b { font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; font-size: 18px; } .ff-mood-playful b { font-family: "Chalkboard SE", "Comic Sans MS", "Arial Rounded MT Bold", sans-serif; font-weight: 700; } .ff-mood-retro b { font-family: "Cooper Black", "Cooper", "Rockwell", Georgia, serif; font-weight: 700; } .ff-back { margin-top: 16px; border: 0; background: none; color: var(--sub); font: 600 14px/1 var(--font); cursor: pointer; padding: 8px 0; } .ff-name { display: grid; gap: 6px; margin-top: 18px; max-width: 460px; } .ff-name span { font-size: 14px; font-weight: 600; } .ff-name em { font-style: normal; color: var(--sub); font-weight: 400; } .ff-name input { min-height: 48px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); color: var(--text); padding: 0 16px; font: 16px var(--font); } .ff-result-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .ff-result-title { margin: 0; font-size: clamp(26px, 3vw, 34px); letter-spacing: -.02em; } .ff-summary { margin: 6px 0 0; color: var(--sub); } .ff-restart { background: var(--fill); color: var(--text); } .ff-advice { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; margin: 20px 0 6px; } .ff-lic, .ff-tip { border-radius: 20px; padding: 18px 20px; } .ff-lic { background: color-mix(in srgb, var(--accent) 9%, var(--card)); } .ff-tip { background: var(--fill); } .ff-label { margin: 0 0 4px; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sub); } .ff-lic-name { margin: 0 0 4px; font-size: 22px; font-weight: 750; color: var(--accent-text); } .ff-lic-why, .ff-tip-text { margin: 0; font-size: 15px; line-height: 1.5; } .ff-lic-link { display: inline-block; margin-top: 8px; font-weight: 600; font-size: 14px; color: var(--accent-text); text-decoration: none; } .ff-name-live { max-width: none; margin: 18px 0 14px; } .ff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .ff-loading { color: var(--sub); } .ff.is-loading .ff-grid { opacity: .5; } .ff-card { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--bg); color: var(--text); text-decoration: none; transition: transform .25s var(--spring), box-shadow .25s; animation: ib-rise .45s var(--ease) both; animation-delay: var(--d, 0s); } .ff-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .ff-prev { height: 140px; display: grid; place-items: center; padding: 8px 12px; background: var(--card); border: 1px solid var(--line); border-bottom: 0; border-radius: 22px 22px 0 0; overflow: hidden; } .ff-prev img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; } .ff-prev-text { display: block; max-width: 100%; text-align: center; line-height: 1.1; white-space: nowrap; color: var(--text); opacity: .35; transition: opacity .3s; } .ff-prev-text.is-ready { opacity: 1; } .ff-card-body { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; } .ff-thumb { width: 56px; height: 38px; object-fit: cover; border-radius: 10px; } .ff-card-body b { display: block; font-size: 15.5px; } .ff-card-body small { display: block; font-size: 12.5px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ff-card-body > div { min-width: 0; } .ff-price { font-size: 13px; font-weight: 700; text-align: right; white-space: nowrap; } .ff-price .is-free { color: var(--green); } .ff-price del { display: none; } .ff-more { text-align: center; margin: 22px 0 0; } .ff-more .btn { background: var(--fill); color: var(--text); } @media (max-width: 760px) { .ff { border-radius: var(--r-md); } .ff-opts { grid-template-columns: 1fr 1fr; gap: 8px; } .ff-opt { flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; min-height: 0; } .ff-opt b { font-size: 14.5px; } .ff-opts-mood { grid-template-columns: 1fr; } .ff-mood { flex-direction: column; } .ff-advice { grid-template-columns: 1fr; } .ff-grid { grid-template-columns: 1fr; } } .entry .ff-card, .entry .ff-card * { text-decoration: none !important; } .entry .ff .ff-q, .entry .ff .ff-result-title { margin-top: 0 !important; } .entry .ff-result-head .eyebrow { margin: 0 0 4px; } /* ================= 1.7: helpers, type bar, kits, pairs, newsletter, rails, web preview ================= */ /* License helper */ .lh { background: var(--card); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 34px); box-shadow: var(--shadow); margin-top: 8px; } .lh-anim { animation: ib-rise .35s var(--ease) both; } .lh-n { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--accent-text); letter-spacing: .04em; text-transform: uppercase; } .entry .lh-q { margin: 0 0 16px !important; font-size: clamp(22px, 2.6vw, 28px); } .lh-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; } .lh-opt { display: flex; align-items: center; gap: 12px; text-align: left; border: 0; background: var(--fill); color: var(--text); border-radius: 18px; padding: 14px 16px; font: inherit; cursor: pointer; min-height: 60px; transition: background .2s, transform .2s var(--spring); } .lh-opt:hover { background: color-mix(in srgb, var(--accent) 9%, var(--fill)); transform: translateY(-2px); } .lh-opt span { font-size: 24px; } .lh-opt b { font-weight: 600; font-size: 15.5px; line-height: 1.3; } .lh-back { margin-top: 14px; border: 0; background: none; color: var(--sub); font: 600 14px var(--font); cursor: pointer; } .lh-result { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: start; background: color-mix(in srgb, var(--accent) 7%, var(--card)); border-radius: 22px; padding: 20px 22px; } .entry .lh-name { margin: 0 !important; font-size: clamp(26px, 3vw, 34px); color: var(--accent-text); } .lh-for { margin: 4px 0 0; font-weight: 600; } .lh-path { margin: 10px 0 0; font-size: 13.5px; color: var(--sub); } .lh-terms { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; } .lh-terms li { position: relative; padding-left: 26px; font-size: 15px; } .lh-terms li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--t-sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C7343' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat; } .lh-how { margin: 14px 0; font-size: 15px; } .lh-actions { display: flex; flex-wrap: wrap; gap: 8px; } .lh-btn { background: var(--fill); color: var(--text); } .lh-ask { margin: 12px 0 0; font-size: 14px; color: var(--sub); } .lh-ask a { color: var(--accent-text); font-weight: 600; } @media (max-width: 760px) { .lh-result { grid-template-columns: 1fr; } .lh-opts { grid-template-columns: 1fr; } } /* Shop: type your own text */ .type-bar { display: flex; gap: 10px; align-items: center; margin: 0 0 14px; } .type-bar-field { flex: 1; display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 999px; padding: 0 18px; min-height: 50px; box-shadow: 0 1px 2px rgba(0,0,0,.04); } .type-bar-field svg { width: 20px; height: 20px; color: var(--sub); flex: none; } .type-bar-field input { flex: 1; border: 0; background: transparent; color: var(--text); font: 16px var(--font); outline: none; min-width: 0; } .type-bar-clear { border: 0; background: var(--fill); color: var(--text); border-radius: 999px; min-height: 44px; padding: 0 16px; font: 600 14px var(--font); cursor: pointer; white-space: nowrap; } .card-type { position: absolute; inset: 0; display: none; place-items: center; padding: 10px 14px; background: var(--card); color: var(--text); text-align: center; line-height: 1.1; white-space: nowrap; overflow: hidden; opacity: .3; transition: opacity .3s; } .is-typing .card-type { display: grid; } .is-typing .card.type-ready .card-type { opacity: 1; } .is-typing .card-media .pill { z-index: 2; } /* Kits */ .kit { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: center; background: var(--card); border-radius: 26px; padding: 16px; margin-top: 18px; } .kit-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .kit-thumbs a { position: relative; display: block; border-radius: 16px; overflow: hidden; text-decoration: none; } .kit-thumbs img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; } .kit-thumbs span { position: absolute; left: 8px; bottom: 6px; color: #fff; font-size: 12.5px; font-weight: 700; text-shadow: 0 1px 6px rgba(0,0,0,.6); } .kit-name { margin: 0 0 4px; font-size: 20px; font-weight: 750; } .kit-save { display: inline-block; vertical-align: 3px; margin-left: 6px; padding: 3px 9px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; } .kit-desc { margin: 0 0 10px; color: var(--sub); font-size: 15px; } .kit-price { margin: 0 0 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; } .kit-price del { color: var(--strike); } .kit-price strong { font-size: 22px; } .kit-price small { width: 100%; color: var(--sub); font-size: 12.5px; } .kit-nudge { margin: 0 0 12px; padding: 12px 16px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 9%, var(--card)); color: var(--accent-text); font-weight: 600; font-size: 15px; } @media (max-width: 760px) { .kit { grid-template-columns: 1fr; } } /* Pairs well with */ .pairs { margin: 52px 0 8px; } .pairs-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .pairs-head h2 { margin: 0; font-size: clamp(24px, 3vw, 32px); letter-spacing: -.02em; } .pairs-deal { margin: 0; padding: 8px 14px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, var(--card)); color: var(--accent-text); font-weight: 700; font-size: 14px; } .pairs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; } .pair { display: grid; background: var(--card); border-radius: 24px; overflow: hidden; color: var(--text); text-decoration: none; transition: transform .25s var(--spring), box-shadow .25s; } .pair:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .pair-demo { display: grid; gap: 8px; padding: 26px 24px; min-height: 170px; align-content: center; border-bottom: 1px solid var(--line); } .pair-h { font-size: clamp(34px, 4vw, 48px); line-height: 1.05; opacity: .35; transition: opacity .3s; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .pair-b { font-size: 17px; line-height: 1.45; color: var(--sub); opacity: .35; transition: opacity .3s; } .pair-h.is-ready, .pair-b.is-ready { opacity: 1; } .pair-meta { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 14px 20px; align-items: center; } .pair-meta b { font-size: 16px; } .pair-meta small { grid-column: 1; color: var(--sub); font-size: 13px; } .pair-price { grid-column: 2; grid-row: 1 / span 2; font-size: 14px; font-weight: 700; } .woocommerce div.product > .pairs { grid-column: 1 / -1; } /* Newsletter */ .sub-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 28px; align-items: center; background: var(--card); border-radius: 28px; padding: clamp(20px, 3vw, 32px); color: var(--text); } .sub-title { grid-column: 1; margin: 0; font-size: clamp(20px, 2.4vw, 26px); font-weight: 750; letter-spacing: -.01em; } .sub-text { grid-column: 1; margin: 0; color: var(--sub); font-size: 15px; } .sub-row { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 8px; } .sub-row input { flex: 1; min-width: 0; min-height: 50px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--text); padding: 0 18px; font: 16px var(--font); } .sub-status { grid-column: 2; margin: 6px 0 0; font-size: 14px; } .sub-status.is-ok { color: var(--green); } .sub-status.is-error { color: var(--accent-text); } .sub-hp { position: absolute; left: -9999px; } .sub-form.is-done .sub-row { opacity: .5; pointer-events: none; } .co-optin { margin: 6px 0 10px; font-size: 14px; } @media (max-width: 760px) { .sub-form { grid-template-columns: minmax(0, 1fr); } .sub-row, .sub-status { grid-column: 1; grid-row: auto; margin-top: 10px; } } /* Homepage rails */ .rail-sec { margin-top: 48px; } .rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 280px); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 14px; margin: 0 -4px; scrollbar-width: none; } .rail::-webkit-scrollbar { display: none; } .rail > .card { scroll-snap-align: start; } @media (max-width: 600px) { .rail { grid-auto-columns: 72%; gap: 12px; } } /* Type tester: website preview */ .tt[data-view="web"] .tt-controls { display: none; } .tt-web-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; } .tt-web-sw { width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer; box-shadow: inset 0 0 0 2px rgba(0,0,0,.08); } .tt-web-sw.is-on { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent); } .tt-web-sw[data-web="blush"] { background: #F6E4E1; } .tt-web-sw[data-web="ink"] { background: #15161A; } .tt-web-sw[data-web="sage"] { background: #DCE7DC; } .tt-web-sw[data-web="sun"] { background: #FFD66B; } .tt-web-note { font-size: 13px; color: var(--sub); margin-left: 6px; } .tt-web { --w-bg: #FBF3F1; --w-ink: #3B2A2A; --w-acc: #B9675E; --w-card: #fff; border-radius: 18px; overflow: hidden; background: var(--w-bg); color: var(--w-ink); box-shadow: 0 0 0 1px rgba(0,0,0,.06); margin-bottom: 14px; } .tt-web[data-web="ink"] { --w-bg: #15161A; --w-ink: #F3F1EC; --w-acc: #E2C27A; --w-card: #22242A; } .tt-web[data-web="sage"] { --w-bg: #EEF3EC; --w-ink: #1F3326; --w-acc: #3F7A55; --w-card: #fff; } .tt-web[data-web="sun"] { --w-bg: #FFF4D6; --w-ink: #2A2111; --w-acc: #E2572B; --w-card: #fff; } .tt-web-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: rgba(0,0,0,.05); font: 12px var(--font); } .tt-web-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(0,0,0,.18); } .tt-web-bar span { margin-left: 10px; padding: 3px 12px; border-radius: 999px; background: rgba(255,255,255,.55); color: #555; } .tt-web[data-web="ink"] .tt-web-bar span { background: rgba(255,255,255,.08); color: #aaa; } .tt-web-nav { display: flex; align-items: center; gap: 20px; padding: 16px clamp(16px, 4vw, 40px); font: 14px var(--font); } .tt-web-logo { font-family: var(--tt-family); font-feature-settings: var(--tt-feat); font-variation-settings: var(--tt-var); font-size: 24px; font-weight: 400; margin-right: auto; white-space: nowrap; } .tt-web-cta { padding: 8px 14px; border-radius: 999px; background: var(--w-acc); color: #fff; font-weight: 600; } .tt-web-hero { padding: clamp(24px, 5vw, 60px) clamp(16px, 4vw, 40px) 24px; max-width: 760px; } .tt-web-kicker { margin: 0 0 8px; font: 600 13px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--w-acc); } .entry .tt-web-h, .tt-web-h { margin: 0 0 12px !important; font-family: var(--tt-family); font-feature-settings: var(--tt-feat); font-variation-settings: var(--tt-var); font-size: clamp(36px, 6vw, 72px); line-height: 1.04; font-weight: 400; letter-spacing: var(--tt-ls); text-transform: var(--tt-case); color: var(--w-ink); overflow-wrap: anywhere; } .tt-web-p { margin: 0 0 18px; font: 16px/1.55 var(--font); opacity: .8; max-width: 52ch; } .tt-web-btn { display: inline-block; padding: 12px 20px; border-radius: 999px; background: var(--w-ink); color: var(--w-bg); font: 600 14px var(--font); } .tt-web-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 clamp(16px, 4vw, 40px) clamp(16px, 4vw, 32px); } .tt-web-cards div { background: var(--w-card); border-radius: 14px; padding: 14px; display: grid; gap: 2px; font: 13px var(--font); } .tt-web-cards b { font-family: var(--tt-family); font-size: 20px; font-weight: 400; } @media (max-width: 600px) { .tt-web-nav span:not(.tt-web-cta) { display: none; } .tt-web-cards { grid-template-columns: 1fr; } } .pair, .pair * { text-decoration: none !important; } .card-type > span { display: inline-block; white-space: nowrap; } .ff-prev-text { display: inline-block !important; } /* ================= Footer (1.7.1) ================= */ .site-footer { margin-top: 80px; padding: 0 0 28px; border-top: 0; font-size: 15px; color: var(--sub); } .footer-sub { margin-bottom: 18px; } .footer-main { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr); gap: clamp(28px, 5vw, 72px); background: var(--card); border-radius: 32px; padding: clamp(24px, 4vw, 44px); } .footer-logo { display: inline-block; } .footer-brand .logo { height: 30px; width: auto; } .footer-tag { margin: 14px 0 18px; color: var(--text); font-size: 16px; line-height: 1.5; max-width: 38ch; } .footer-stats { list-style: none; margin: 0 0 18px; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; } .footer-stats li { display: grid; padding: 10px 16px; border-radius: 16px; background: var(--fill); min-width: 92px; } .footer-stats b { font-size: 22px; color: var(--text); letter-spacing: -.02em; line-height: 1.1; } .footer-stats span { font-size: 12.5px; } .footer-contact { display: flex; flex-wrap: wrap; gap: 8px; } .footer-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border-radius: 999px; background: var(--fill); color: var(--text); font-weight: 600; font-size: 14px; text-decoration: none; transition: background .2s, color .2s, transform .2s var(--spring); } .footer-pill:hover { background: var(--text); color: var(--card); } .footer-pill.is-wa { background: #25D366; color: #fff; } .footer-pill.is-wa:hover { background: #1EBE5A; color: #fff; } .site-footer svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; } .site-footer svg .f { fill: currentColor; stroke: none; } .footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .footer-cols div { display: flex; flex-direction: column; gap: 9px; } .footer-cols .footer-h { font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--text); margin: 4px 0 6px; } .footer-cols a { color: var(--sub); text-decoration: none; width: fit-content; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color .2s, background-size .3s var(--ease); } .footer-cols a:hover { color: var(--text); background-size: 100% 1px; } .footer-bottom { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px 8px 0; } .footer-copy { margin: 0; margin-right: auto; font-size: 14px; } .footer-social { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; } .footer-social a, .footer-top { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--card); color: var(--text); border: 0; cursor: pointer; transition: background .2s, color .2s, transform .2s var(--spring); } .footer-social a:hover { background: var(--accent); color: #fff; transform: translateY(-2px); } .footer-top:hover { background: var(--text); color: var(--card); } @media (max-width: 900px) { .footer-main { grid-template-columns: 1fr; } .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; } } @media (max-width: 600px) { .site-footer { padding-bottom: 110px; } .footer-main { border-radius: 26px; } .footer-bottom { justify-content: center; text-align: center; } .footer-copy { width: 100%; margin: 0 0 4px; } } .footer-pill.is-accent { background: var(--accent); color: #fff; } .footer-pill.is-accent:hover { background: var(--text); color: var(--card); } /* ================= Homepage 1.8: motion & sections ================= */ /* Hero letter reveal */ .hero-title .hw { display: inline-block; white-space: nowrap; } .hero-title.is-revealing .hl { display: inline-block; filter: blur(10px); transform: translateY(.18em); animation: hl-in .7s var(--ease) forwards; animation-delay: calc(var(--i) * 28ms + 60ms); } @keyframes hl-in { to { opacity: 1; filter: blur(0); transform: none; } } .hero-head { transition: transform .2s linear; will-change: transform; } /* Parallax */ .slider.has-tilt .slide-img { transform: scale(1.06) translate3d(calc(var(--px, 0) * -10px), calc(var(--py, 0) * -8px), 0); transition: transform .1s linear; } .slider.has-tilt .caption { transform: translate3d(calc(var(--px, 0) * 8px), calc(var(--py, 0) * 6px), 0); } .slider.has-scroll-px .slide-img { transform: scale(1.08) translate3d(0, calc(var(--sy, 0) * 18px), 0); } @media (prefers-reduced-motion: reduce) { .slider .slide-img, .slider .caption, .hero-head { transform: none !important; } } /* Magnetic + arrows */ .magnetic, .promo .btn, .finder-banner .btn, .see-all { transition: transform .25s var(--spring), background-color .2s, color .2s; } .see-all svg, .btn svg { transition: transform .25s var(--spring); } .see-all:hover svg, .btn:hover svg { transform: translateX(4px); } @media (hover: none) { .btn:active, .see-all:active, .card:active { transform: scale(.97); } } /* Featured story (sticky editorial) */ .story { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 5vw, 64px); margin-top: 64px; align-items: center; } .story-text { position: relative; } .story-name { margin: 4px 0 0; font-size: clamp(40px, 5.6vw, 80px); line-height: 1; letter-spacing: -.02em; } .story-sub { margin: 10px 0 0; font-size: 20px; color: var(--sub); } .story-intro { margin: 18px 0; font-size: 17px; line-height: 1.6; max-width: 46ch; } .story-uses { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .story-uses li { padding: 6px 12px; border-radius: 999px; background: var(--card); font-size: 13.5px; font-weight: 600; } .story-actions { display: flex; gap: 10px; flex-wrap: wrap; } .story-price { margin: 14px 0 0; color: var(--sub); font-size: 15px; } .story-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-bottom: 56px; } .story-fig { margin: 0; border-radius: 28px; overflow: hidden; background: var(--fill); } .story-fig img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .8s var(--ease); } .story-fig { translate: 0 calc(var(--sp, 0) * 1px); } .story-fig:nth-child(even) { --sp: var(--sp2, 0); } .story-fig:hover img { transform: scale(1.04); } .story-fig:nth-child(even) { margin-top: 56px; margin-bottom: -56px; } @media (max-width: 900px) { .story { grid-template-columns: 1fr; margin-top: 44px; } .story-text { position: static; } .story-media { grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .story-media::-webkit-scrollbar { display: none; } .story-fig { scroll-snap-align: start; } .story-fig:nth-child(even) { margin-top: 0; margin-bottom: 0; } .story-media { padding-bottom: 0; } .story-fig { translate: none; } } /* Ranked & fresh rails */ .rail-sub { margin: 4px 0 0; color: var(--sub); font-size: 15px; } .rail-ranked .rail { counter-reset: rank; grid-auto-columns: minmax(280px, 320px); padding-left: 14px; } .rail-ranked .rail > .card { counter-increment: rank; position: relative; margin-left: 72px; overflow: visible; } .rail-ranked .rail > .card::before { content: counter(rank); position: absolute; left: -78px; bottom: 4px; font-size: 150px; line-height: .8; font-weight: 900; letter-spacing: -.08em; color: transparent; -webkit-text-stroke: 2.5px var(--accent); opacity: .5; z-index: 0; pointer-events: none; } .rail-ranked .rail > .card:hover::before { opacity: .9; } .rail-ranked .rail > .card > * { position: relative; z-index: 1; } .rail-ranked .card-link { border-radius: inherit; overflow: hidden; display: block; } .rail-fresh .section-head h2::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 10px; border-radius: 50%; background: var(--accent); vertical-align: middle; box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); animation: ping 2s infinite; } @keyframes ping { 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } @media (prefers-reduced-motion: reduce) { .rail-fresh .section-head h2::after { animation: none; } } @media (max-width: 600px) { .rail-ranked .rail { grid-auto-columns: 78%; } .rail-ranked .rail > .card { margin-left: 52px; } .rail-ranked .rail > .card::before { font-size: 110px; left: -58px; } } /* Playground */ .play { margin-top: 64px; } .play-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 16px; } .play-head h2 { margin: 0; font-size: clamp(30px, 4vw, 44px); letter-spacing: -.03em; } .play-stage { position: relative; border-radius: 32px; padding: clamp(28px, 5vw, 64px) clamp(20px, 4vw, 48px) 56px; min-height: 300px; display: grid; align-content: center; transition: background .4s var(--ease), color .4s; --pb: #FAF7F2; --pc: #1C1C1E; background: var(--pb); color: var(--pc); overflow: hidden; } .play-stage[data-bg="ink"] { --pb: #121214; --pc: #F5F1E8; } .play-stage[data-bg="blush"] { --pb: #F7DCD8; --pc: #4A1F24; } .play-stage[data-bg="sky"] { --pb: #D8E6FA; --pc: #13294B; } .play-text { font-size: 120px; line-height: 1.05; outline: none; overflow-wrap: normal; word-break: normal; caret-color: var(--accent); transition: opacity .3s; min-height: 1.1em; } .play.is-loading .play-text { opacity: .35; } .play-font { position: absolute; left: clamp(20px, 4vw, 48px); bottom: 18px; margin: 0; font-size: 13px; opacity: .6; } .play-ctrls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 14px; padding: 14px 18px; background: var(--card); border-radius: 22px; } .play-range { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--sub); flex: 1; min-width: 200px; } .play-range input { flex: 1; accent-color: var(--accent); } .play-bgs { display: flex; gap: 8px; } .play-bgs button { width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer; box-shadow: inset 0 0 0 2px rgba(0,0,0,.08); transition: transform .2s var(--spring); } .play-bgs button:hover { transform: scale(1.1); } .play-bgs button.is-on { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent); } .play-bgs [data-bg="paper"] { background: #FAF7F2; } .play-bgs [data-bg="ink"] { background: #121214; } .play-bgs [data-bg="blush"] { background: #F7DCD8; } .play-bgs [data-bg="sky"] { background: #D8E6FA; } .play-cta { margin-left: auto; } @media (max-width: 600px) { .play-stage { min-height: 220px; border-radius: 24px; } .play-cta { margin-left: 0; width: 100%; } } /* Section headings: short staggered reveal */ .section-head.ib-reveal h2 { transition: letter-spacing .8s var(--ease); } .see-all { white-space: nowrap; } .play-stage { grid-template-columns: minmax(0, 1fr); } .play-text { min-width: 0; } /* ---- 1.8 perf & a11y ---- */ /* Above-the-fold: move only, never hide (keeps LCP fast). */ .ib-lift { animation: ib-lift .7s var(--ease) both; animation-delay: var(--d, 0s); } @keyframes ib-lift { from { transform: translateY(14px); } to { transform: none; } } .hero-title.is-revealing .hl { opacity: .06; } @media (prefers-reduced-motion: reduce) { .ib-lift { animation: none; } } /* Dots: 24px tap target, 8px visual */ .dot { box-sizing: content-box; padding: 8px 4px; background-clip: content-box; overflow: visible; } .dots { gap: 0; } .dot-fill { inset: 8px auto 8px 4px; max-width: calc(100% - 8px); } .dot.is-active .dot-fill { width: calc(100% - 8px); animation: fill-c var(--dur, 6000ms) linear forwards; } @keyframes fill-c { from { width: 0; } to { width: calc(100% - 8px); } } .play-font { opacity: .8; } .tt-feat code { opacity: .8; } .pd-lic-free, .ff-price .is-free { color: var(--i-sage); } .pair-h, .pair-b { opacity: 1; } .pd-from del { opacity: 1; color: var(--strike); } .guide-box { margin: 32px 0 0; padding: 20px 22px; border-radius: 22px; background: var(--card); } .guide-box-h { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-text); } .guide-box ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; } .guide-box a { font-weight: 600; } /* ---------------- Collections: Graphics & Templates ---------------- */ .col .shop-chips { margin-bottom: 8px; } .col-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 5vw, 72px); align-items: center; margin: 18px 0 56px; } .col-title { margin: 0; font-size: clamp(34px, 4.6vw, 58px); line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; } .col-lead { margin: 18px 0 0; font-size: 18px; line-height: 1.6; color: var(--sub); max-width: 54ch; } .col-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; } .col-facts span { padding: 7px 14px; border-radius: 999px; background: var(--card); font-size: 14px; font-weight: 600; } .col-facts .woocommerce-Price-amount { color: var(--accent-text); } .col-subs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; padding: 4px; border-radius: 999px; background: var(--fill); width: fit-content; max-width: 100%; } .col-subs a { padding: 8px 16px; min-height: 40px; display: inline-flex; align-items: center; border-radius: 999px; color: var(--text); font-size: 14.5px; font-weight: 600; } .col-subs a.is-on { background: var(--seg-thumb); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); } .col-stack { position: relative; aspect-ratio: 5 / 4; overflow: visible; } .col-stack-card { position: absolute; inset: 12% 18% 8% 4%; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow); background: var(--card); transform: translate(calc(var(--n) * 7%), calc(var(--n) * -5%)) rotate(calc(-4deg + var(--n) * 4deg)); z-index: calc(3 - var(--n)); transition: transform .6s var(--spring); } .col-stack-card img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (hover: hover) { .col-stack:hover .col-stack-card { transform: translate(calc(var(--n) * 10%), calc(var(--n) * -7%)) rotate(calc(-6deg + var(--n) * 6deg)); } } .col-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 64px; } .col-why-item { background: var(--card); border-radius: var(--r-md); padding: 26px; } .col-why-n { display: block; font-size: 14px; font-weight: 700; color: var(--accent-text); margin-bottom: 14px; font-variant-numeric: tabular-nums; } .col-why-item h2 { margin: 0 0 8px; font-size: 21px; letter-spacing: -.01em; } .col-why-item p { margin: 0; color: var(--sub); font-size: 15.5px; line-height: 1.55; } .col-h { font-size: clamp(26px, 3vw, 36px); letter-spacing: -.025em; margin: 0 0 22px; } .col-list { margin-bottom: 64px; } .col-item { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(20px, 4vw, 56px); align-items: center; background: var(--card); border-radius: var(--r-lg); padding: clamp(14px, 2vw, 22px); margin-bottom: 18px; } .col-item.is-flip .col-item-media { order: 2; } .col-item-media { position: relative; display: block; border-radius: calc(var(--r-lg) - 12px); overflow: hidden; aspect-ratio: 4 / 3; background: var(--fill); } .col-item-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); } .col-item-media:hover img { transform: scale(1.04); } .col-save { position: absolute; left: 14px; top: 14px; padding: 6px 12px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; } .col-item-text { padding: 6px clamp(4px, 1.5vw, 18px) 6px 0; } .col-item.is-flip .col-item-text { padding: 6px 0 6px clamp(4px, 1.5vw, 18px); } .col-item-name { margin: 0 0 10px; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.12; letter-spacing: -.02em; } .col-item-name a { color: var(--text); } .col-item-story { margin: 0 0 18px; font-size: 16.5px; line-height: 1.6; } .col-best-h, .col-pair-h { margin: 0 0 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sub); } .col-best { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 6px; } .col-best li { display: flex; align-items: center; gap: 8px; font-size: 15.5px; } .col-best svg { color: var(--green); flex: none; } .col-note { margin: 0 0 18px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--t-sand, var(--fill)); font-size: 14.5px; line-height: 1.5; } .col-pair { margin: 0 0 20px; padding: 16px; border-radius: var(--r-sm); background: var(--fill); } .col-pair-fonts { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; } .col-pair-fonts a { font-size: 30px; line-height: 1.2; color: var(--text); } .col-pair-fonts a:hover { color: var(--accent-text); } .col-pair-why { margin: 6px 0 0; font-size: 14px; color: var(--sub); } .col-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .col-price { font-size: 20px; font-weight: 700; margin-right: 6px; } .col-price del { color: var(--strike); font-weight: 500; font-size: 16px; margin-right: 4px; } .col-price ins { text-decoration: none; } .col-empty { color: var(--sub); } .col-inside { margin-bottom: 64px; } .col-inside ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .col-inside li { background: var(--card); border-radius: var(--r-md); padding: 20px; display: grid; gap: 2px; } .col-inside-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 10px; background: var(--t-rose, var(--fill)); color: var(--accent-text); font-weight: 800; font-size: 14px; letter-spacing: .02em; } .col-inside li:nth-child(2) .col-inside-ic { background: var(--t-sky, var(--fill)); color: var(--i-sky, var(--text)); } .col-inside li:nth-child(3) .col-inside-ic { background: var(--t-sage, var(--fill)); color: var(--i-sage, var(--green)); } .col-inside li:nth-child(4) .col-inside-ic { background: var(--t-lilac, var(--fill)); color: var(--i-lilac, var(--text)); } .col-inside b { font-size: 16.5px; } .col-inside small { font-size: 14px; color: var(--sub); } .col-tips { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 56px); background: var(--promo); color: #F5F5F7; border-radius: var(--r-lg); padding: clamp(26px, 5vw, 56px); margin-bottom: 64px; } .col-tips h2 { margin: 0; font-size: clamp(26px, 3vw, 38px); line-height: 1.12; letter-spacing: -.025em; color: #fff; } .col-tips ol { list-style: none; margin: 0; padding: 0; counter-reset: tip; display: grid; gap: 22px; } .col-tips li { counter-increment: tip; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; } .col-tips li::before { content: counter(tip); grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .12); font-weight: 700; color: #fff; } .col-tips li b { font-size: 18px; color: #fff; } .col-tips li span { color: #C7C7CC; font-size: 15.5px; line-height: 1.55; } .col-faq { max-width: 820px; margin: 0 auto 56px; } .col-q { background: var(--card); border-radius: var(--r-sm); margin-bottom: 8px; } .col-q summary { cursor: pointer; padding: 18px 20px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; min-height: 44px; } .col-q summary::-webkit-details-marker { display: none; } .col-q summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--sub); transition: transform .3s var(--ease); } .col-q[open] summary::after { transform: rotate(45deg); } .col-q p { margin: 0; padding: 0 20px 18px; color: var(--sub); line-height: 1.6; } .col-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: var(--card); border-radius: var(--r-lg); padding: clamp(24px, 4vw, 40px); margin-bottom: 24px; } .col-cta h2 { margin: 0 0 6px; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.02em; } .col-cta p { margin: 0; color: var(--sub); max-width: 52ch; } @media (max-width: 900px) { .col-hero { grid-template-columns: minmax(0, 1fr); margin-bottom: 40px; } .col-stack { max-width: 420px; width: 100%; margin: 0 auto; } .col-why, .col-tips { grid-template-columns: minmax(0, 1fr); } .col-why { margin-bottom: 48px; } .col-item, .col-item.is-flip { grid-template-columns: minmax(0, 1fr); border-radius: var(--r-md); } .col-item.is-flip .col-item-media { order: 0; } .col-item-text, .col-item.is-flip .col-item-text { padding: 4px 6px 8px; } .col-inside ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .col-inside ul { grid-template-columns: minmax(0, 1fr); } .col-inside li { grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; align-items: center; } .col-inside-ic { grid-row: span 2; margin: 0; } .col-buy .btn { flex: 1 1 auto; } .col-pair-fonts a { font-size: 26px; } } @media (prefers-reduced-motion: reduce) { .col-stack-card, .col-item-media img { transition: none; } .col-stack:hover .col-stack-card { transform: translate(calc(var(--n) * 7%), calc(var(--n) * -5%)) rotate(calc(-4deg + var(--n) * 4deg)); } } /* ---------------- Blog widgets: live fonts ---------------- */ .entry .gw { margin: 32px 0; } .gw { --gw-r: 26px; background: var(--card); border-radius: var(--gw-r); box-shadow: 0 1px 0 var(--line); overflow: hidden; transition: opacity .6s var(--ease), transform .6s var(--ease); } .gw.gw-wait { opacity: 0; transform: translateY(14px); } .gw a { text-decoration: none; } .gw-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--line); } .gw-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(36, 138, 61, .5); animation: gwPulse 2.4s infinite; flex: none; } @keyframes gwPulse { 70% { box-shadow: 0 0 0 10px rgba(36, 138, 61, 0); } 100% { box-shadow: 0 0 0 0 rgba(36, 138, 61, 0); } } .gw-label { font-size: 14px; font-weight: 600; color: var(--sub); flex: 1 1 auto; } .gw-range input, .gw-size { width: 140px; accent-color: var(--accent); } .gw-text { padding: 28px 22px; min-height: 1.4em; font-size: var(--gw-size, 72px); line-height: 1.15; outline: none; overflow-wrap: normal; word-break: keep-all; cursor: text; color: var(--text); } .gw-text:focus-visible { box-shadow: inset 0 0 0 3px var(--accent); } .gw-type.is-typing::after { content: ""; display: inline-block; width: .06em; height: .9em; margin-left: .04em; vertical-align: -.08em; background: var(--accent); animation: gwCaret .8s steps(1) infinite; } @keyframes gwCaret { 50% { opacity: 0; } } .gw-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 18px; background: var(--fill); font-size: 14.5px; } .gw-foot a { color: var(--text); } .gw-foot a b { color: var(--accent-text); } .gw-foot span { color: var(--sub); font-weight: 600; } .gw-note { margin: 0; padding: 12px 18px 16px; font-size: 15px; color: var(--sub); } .gw-input { flex: 1 1 220px; } .gw-input input { width: 100%; min-height: 44px; padding: 10px 16px; border-radius: 999px; border: 0; background: var(--fill); color: var(--text); font: 600 16px var(--font); } .gw-input input:focus { outline: 3px solid var(--accent); outline-offset: 1px; } .gw-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--fill); } .gw-seg button { border: 0; background: transparent; color: var(--text); font: 600 14px var(--font); padding: 8px 14px; min-height: 38px; border-radius: 999px; cursor: pointer; } .gw-seg button.is-on { background: var(--seg-thumb); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); } .gw-cap { margin: 0; padding: 14px 18px 0; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sub); } .gw-rows { list-style: none; margin: 0; padding: 6px 0; counter-reset: gw; } .gw-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 220px); gap: 16px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--line); } .gw-wait .gw-row { opacity: 0; transform: translateX(-10px); } .gw-row:first-child { border-top: 0; } .gw-in .gw-row { transition: opacity .5s var(--ease) calc(var(--i) * .08s + .1s), transform .5s var(--ease) calc(var(--i) * .08s + .1s); } .gw-sample { font-size: clamp(30px, 5vw, 48px); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: font-size .35s var(--ease); color: var(--text); } .gw.is-small .gw-sample { font-size: 15px; } .gw-meta { display: grid; gap: 2px; font-size: 14px; } .gw-meta a { font-weight: 700; color: var(--accent-text); } .gw-meta span { color: var(--sub); line-height: 1.4; } .gw-mock { padding: 0; } .gw-stage { display: grid; place-items: center; padding: clamp(28px, 6vw, 56px) 18px; background: radial-gradient(120% 90% at 50% 0%, var(--t-sand) 0%, var(--fill) 100%); min-height: 280px; } .gw-obj { position: relative; transition: transform .6s var(--spring); } .gw-mock:hover .gw-obj { transform: translateY(-4px) rotate(-.6deg); } .gw-print { position: relative; text-align: center; } .gw-m-title { font-size: clamp(36px, 7vw, 64px); line-height: 1.05; outline: none; cursor: text; } .gw-m-sub { margin-top: 10px; font-size: clamp(13px, 2vw, 16px); letter-spacing: .22em; text-transform: uppercase; outline: none; cursor: text; } .gw-m-title:focus-visible, .gw-m-sub:focus-visible { box-shadow: 0 0 0 3px var(--accent); border-radius: 6px; } .gw-mock-card .gw-obj { width: min(420px, 100%); aspect-ratio: 1.75; background: #fff; color: #1C1C1E; border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .35); display: grid; place-items: center; padding: 20px; } .gw-mock-sign .gw-obj { width: min(520px, 100%); padding: 34px 26px; background: #1F3B2E; color: #F6F0DF; border-radius: 18px 18px 6px 6px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .5), inset 0 0 0 6px rgba(246, 240, 223, .12); } .gw-mock-sign .gw-obj::before { content: ""; position: absolute; left: 12%; right: 12%; top: -26px; height: 26px; border-left: 3px solid #8E8E93; border-right: 3px solid #8E8E93; } .gw-mock-label .gw-obj { width: min(300px, 80%); aspect-ratio: .82; background: linear-gradient(90deg, #E8D9BF, #F6EBD7 30%, #F6EBD7 70%, #E2D0B1); color: #3A2A1A; border-radius: 22px 22px 30px 30px; display: grid; place-items: center; padding: 22px; box-shadow: 0 30px 50px -22px rgba(0, 0, 0, .4); } .gw-mock-label .gw-print { border: 2px solid currentColor; border-radius: 12px; padding: 18px 12px; width: 100%; } .gw-mock-label .gw-m-title { font-size: clamp(30px, 6vw, 46px); } .gw-mock-tee .gw-obj { width: min(320px, 86%); } .gw-tee { width: 100%; height: auto; display: block; fill: #FFFFFF; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .18)); } .gw-mock-tee .gw-print { position: absolute; left: 24%; right: 24%; top: 36%; color: #D53A3E; } .gw-mock-tee .gw-m-title { font-size: clamp(26px, 6vw, 42px); } .gw-mock-tee .gw-m-sub { color: #1C1C1E; font-size: 11px; } .gw-mock figcaption { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 18px; font-size: 14px; color: var(--sub); } .gw-fonts a { font-weight: 700; color: var(--accent-text); } @media (max-width: 600px) { .gw-row { grid-template-columns: minmax(0, 1fr); gap: 4px; } .gw-text { padding: 22px 16px; } .gw-range input, .gw-size { width: 110px; } } @media (prefers-reduced-motion: reduce) { .gw, .gw-row, .gw-obj { transition: none !important; opacity: 1; transform: none !important; } .gw-dot { animation: none; } } /* ---------------- Share buttons ---------------- */ .share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 0; } .share-label { font-size: 14px; font-weight: 700; color: var(--sub); margin-right: 4px; } .share-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 999px; border: 0; background: var(--card); color: var(--text); cursor: pointer; text-decoration: none !important; font: 600 14px var(--font); transition: transform .2s var(--spring), background-color .2s, color .2s; box-shadow: 0 1px 0 var(--line); } .share-btn:hover { transform: translateY(-2px); color: var(--accent-text); } .share-btn:active { transform: scale(.94); } .share-native { background: var(--accent); color: #fff; padding: 0 16px; } .share-native:hover { color: #fff; } .share.has-native .share-x, .share.has-native .share-in, .share.has-native .share-fb { display: none; } .share-copy.is-done { background: var(--green); color: #fff; } .share-wrap { margin: 40px 0 0; padding: 22px 24px; border-radius: 24px; background: var(--card); } .share-wrap .share { margin: 0; } .share-wrap .share-btn { background: var(--fill); box-shadow: none; } .share-wrap .share-native { background: var(--accent); } .summary .share { margin-top: 14px; } .share-btn[hidden], .share-done[hidden] { display: none; } .summary .share { margin: 14px 0 18px; } .summary .share + .tt-jump { margin-top: 0; } /* ---------------- Homepage typography refresh ---------------- */ .home .hero-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 340px); align-items: end; gap: 12px 40px; padding: 48px 0 32px; } .home .hero-title { font-family: "IbraDisplay", var(--font); font-weight: 400; font-size: clamp(48px, 7.4vw, 112px); line-height: 1; letter-spacing: -.02em; text-wrap: balance; } .home .hero-accent { font-family: inherit; font-style: normal; font-weight: inherit; color: var(--accent); } .home .hero-sub { margin: 0; font-size: 17px; line-height: 1.5; color: var(--sub); padding-bottom: .9em; } .home .eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: 12.5px; font-weight: 700; } .home .section-head h2, .home .lt-title, .home .finder-banner h2, .home .promo h2 { font-family: "IbraDisplay", var(--font); font-weight: 400; letter-spacing: -.015em; line-height: 1.05; } .home .section-head h2 { font-size: clamp(30px, 3.4vw, 48px); } .home .story-name { font-family: "IbraDisplay", var(--font); font-weight: 400; letter-spacing: -.02em; line-height: 1; } .home .finder-banner h2 { font-size: clamp(30px, 3.6vw, 48px); } .home .promo h2 { font-size: clamp(26px, 2.8vw, 38px); } @media (max-width: 760px) { .home .hero-head { grid-template-columns: minmax(0, 1fr); padding: 28px 0 22px; } .home .hero-sub { padding-bottom: 0; font-size: 16px; } } /* ---------------- Logo tester ---------------- */ .lt { margin-top: 72px; } .lt-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 380px); gap: 12px 40px; align-items: end; margin-bottom: 22px; } .lt-title { margin: 0; font-size: clamp(36px, 4.6vw, 68px); } .lt-sub { margin: 0; color: var(--sub); font-size: 16.5px; line-height: 1.5; } .lt-ctrl { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 10px; margin-bottom: 12px; } .lt-field input { width: 100%; box-sizing: border-box; border: 0; border-radius: 22px; background: var(--card); color: var(--text); padding: 0 22px; height: 76px; font: 400 clamp(24px, 2.6vw, 34px) "IbraDisplay", var(--font); letter-spacing: 0; box-shadow: 0 1px 0 var(--line); transition: box-shadow .2s; } .lt-field-tag input { font: 500 18px var(--font); letter-spacing: .02em; } .lt-field input:focus { outline: none; box-shadow: 0 0 0 3px var(--accent); } .lt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 18px; } .lt-styles { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; } .lt-styles .chip { min-height: 40px; padding: 8px 16px; font-size: 14.5px; } .lt-styles .chip.is-on { background: var(--text); color: var(--bg); } .lt-looks { display: inline-flex; gap: 6px; padding: 4px; border-radius: 999px; background: var(--card); } .lt-looks button { width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; } .lt-looks button.is-on { border-color: var(--accent); } .lt-looks [data-look="mix"] { background: conic-gradient(#F6F0DF 0 25%, #1F3B2E 0 50%, #FBEDEC 0 75%, #E7F0FA 0); } .lt-looks [data-look="light"] { background: #fff; box-shadow: inset 0 0 0 1px var(--line); } .lt-looks [data-look="dark"] { background: #141416; } .lt-shuffle { min-height: 40px; padding: 8px 16px; } .lt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .lt-card { display: grid; grid-template-rows: auto auto; border-radius: 26px; overflow: hidden; background: var(--card); box-shadow: 0 1px 0 var(--line); animation: lt-in .55s var(--ease) both; animation-delay: var(--d, 0s); } @keyframes lt-in { from { opacity: 0; transform: translateY(16px) scale(.98); } } .lt-logo { position: relative; display: grid; place-content: center; justify-items: center; gap: 0; aspect-ratio: 3 / 2; padding: 20px; background: var(--lt-bg); color: var(--lt-fg); text-decoration: none !important; text-align: center; overflow: hidden; transition: background-color .4s var(--ease), color .4s var(--ease); } .lt-grid[data-look="light"] .lt-logo { background: #fff; color: #1C1C1E; } .lt-grid[data-look="dark"] .lt-logo { background: #141416; color: #F5F5F7; } .lt-mark { display: block; max-width: 100%; white-space: nowrap; line-height: 1.3; padding: .1em .15em; font-size: 64px; opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .35s var(--ease); } .lt-card.is-ready .lt-mark { opacity: 1; transform: none; } .lt-tagline { font: 600 11.5px var(--font); letter-spacing: .2em; text-transform: uppercase; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lt-tagline[hidden], .lt-note[hidden] { display: none; } .lt-note { position: absolute; left: 0; right: 0; bottom: 10px; font: 500 11px var(--font); opacity: .6; } .lt-logo:hover .lt-mark { transform: scale(1.04); } .lt-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 12px 16px 14px; font-size: 13.5px; } .lt-meta a { color: var(--text); text-decoration: none; } .lt-meta a:hover { color: var(--accent-text); } .lt-meta span { color: var(--sub); text-align: right; } .lt-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; } .lt-more[hidden] { display: none; } @media (max-width: 980px) { .lt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .lt { margin-top: 48px; } .lt-head, .lt-ctrl { grid-template-columns: minmax(0, 1fr); } .lt-field input { height: 62px; } .lt-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 6px; scroll-padding: 16px; } .lt-grid::-webkit-scrollbar { display: none; } .lt-card { scroll-snap-align: start; } .lt-logo { aspect-ratio: 4 / 3; } .lt-styles { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; } .lt-styles::-webkit-scrollbar { display: none; } } @media (prefers-reduced-motion: reduce) { .lt-card { animation: none; } .lt-mark { transition: none; } } /* ---------------- Recent orders note ---------------- */ .recent { position: fixed; left: 16px; bottom: 16px; z-index: 60; max-width: min(360px, calc(100vw - 32px)); opacity: 0; transform: translateY(16px) scale(.98); pointer-events: none; transition: opacity .45s var(--ease), transform .45s var(--spring); } .recent.is-on { opacity: 1; transform: none; pointer-events: auto; } .recent.no-motion { transition: opacity .2s; transform: none; } .recent-in { display: flex; align-items: center; gap: 12px; padding: 10px 40px 10px 10px; border-radius: 20px; background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: var(--shadow), inset 0 0 0 1px var(--glass-line); color: var(--text); text-decoration: none !important; } .recent-in img { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; flex: none; } .recent-txt { display: grid; gap: 1px; font-size: 13.5px; line-height: 1.3; } .recent-txt b { font-size: 15.5px; } .recent-txt small { color: var(--sub); font-size: 12.5px; } .recent-x { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--sub); font-size: 20px; cursor: pointer; } .recent-x:hover { background: var(--fill); color: var(--text); } @media (max-width: 760px) { .recent { bottom: 92px; } } /* ================= 2.0 — Type system, colour bands, motion ================= */ /* Headlines in our own Kunire Grotesk across the site; one weight, never fake-bolded. */ :root { --display: "IbraDisplay", var(--font); --accent-font: "IbraAccent", var(--font); } h1, h2, .woocommerce-products-header__title, .page-title { font-family: var(--display); font-weight: 400; font-synthesis: none; letter-spacing: -.015em; } h1 { line-height: 1; } .entry h2 { letter-spacing: -.025em; line-height: 1.08; } .card-name, .lt-meta b, .bundle-card h3 { letter-spacing: -.01em; } /* Calm colour bands */ .band { position: relative; margin: 64px 0 0; padding: clamp(28px, 4vw, 56px); border-radius: clamp(28px, 3vw, 44px); } .band > section { margin-top: 0 !important; } .band-sand { background: var(--t-sand); } .band-sage { background: var(--t-sage); } .band-sky { background: var(--t-sky); } .band-sand .lt-field input, .band-sand .lt-looks, .band-sand .chip:not(.is-on) { background: var(--card); } .band-sage .story-uses li { background: var(--card); } @media (max-width: 760px) { .band { margin-top: 44px; padding: 26px 16px; border-radius: 28px; } .band .lt-grid, .band .lt-styles { margin: 0 -16px; } } /* Aurora behind the hero headline */ .hero-head { position: relative; isolation: isolate; } .aurora { position: absolute; inset: -40px -10% -20px; z-index: -1; pointer-events: none; overflow: hidden; } .aurora i { position: absolute; width: 46vw; max-width: 620px; aspect-ratio: 1; border-radius: 50%; filter: blur(70px); opacity: .55; animation: aurora 22s ease-in-out infinite alternate; } .aurora i:nth-child(1) { background: var(--t-rose); left: 2%; top: -30%; } .aurora i:nth-child(2) { background: var(--t-sky); right: 4%; top: -10%; animation-delay: -7s; animation-duration: 26s; } .aurora i:nth-child(3) { background: var(--t-sand); left: 38%; top: 10%; animation-delay: -13s; animation-duration: 30s; } @keyframes aurora { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(6%, 8%, 0) scale(1.12); } 100% { transform: translate3d(-5%, -4%, 0) scale(.95); } } [data-theme="dark"] .aurora i { opacity: .35; } /* Ticker: font names in their own fonts */ .ticker { --tk-size: clamp(28px, 3.2vw, 42px); margin: 28px 0 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .tk-track { display: inline-flex; align-items: center; gap: 28px; white-space: nowrap; padding: 14px 0; animation: tk 70s linear infinite; } .tk-dup { display: inline-flex; align-items: center; gap: 28px; } .ticker:hover .tk-track { animation-play-state: paused; } @keyframes tk { to { transform: translateX(-50%); } } .tk-item { font-size: var(--tk-size); line-height: 1.45; padding: 0 .12em; color: var(--text); text-decoration: none !important; opacity: 0; transition: opacity .6s var(--ease), color .2s; } .tk-item.is-ready { opacity: 1; } .tk-item:hover { color: var(--accent); } .tk-star { color: var(--accent); font-size: 18px; opacity: .7; } /* Proof band (DaFont numbers) */ .proof { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 14px; margin-top: 64px; padding: clamp(24px, 3.5vw, 44px); border-radius: clamp(28px, 3vw, 44px); background: var(--t-sky); color: var(--i-sky); } .proof-item { display: grid; gap: 6px; align-content: end; } .proof-n { font-family: var(--display); font-weight: 400; font-synthesis: none; font-size: clamp(44px, 6vw, 88px); line-height: .95; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--text); } .proof-main .proof-n { font-size: clamp(56px, 8vw, 120px); color: var(--i-sky); } .proof-item > span { font-size: 15.5px; color: var(--sub); } .proof-item a { color: var(--i-sky); font-weight: 700; } .proof-note { grid-column: 1 / -1; margin: 6px 0 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--sub); } .proof-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: gwPulse 2.4s infinite; } @media (max-width: 760px) { .proof { grid-template-columns: 1fr 1fr; margin-top: 44px; } .proof-main { grid-column: 1 / -1; } } /* Bundles */ .bundles { margin-top: 64px; } .bundle-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .bundle-card { position: relative; display: grid; grid-template-rows: 1fr auto; min-height: 340px; padding: 22px; border-radius: 30px; background: var(--b-bg); color: var(--text); text-decoration: none !important; overflow: hidden; transition: transform .35s var(--spring), box-shadow .35s var(--ease); } .bundle-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .bundle-card.is-hero { grid-column: span 2; grid-row: span 2; min-height: 100%; } .bundle-stack { position: relative; min-height: 170px; } .bundle-card.is-hero .bundle-stack { min-height: 300px; } .bundle-stack span { position: absolute; left: calc(var(--k) * 16%); top: calc(var(--k) * 10px); width: 62%; aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 30px rgba(0, 0, 0, .16); transform: rotate(calc(-6deg + var(--k) * 6deg)); transition: transform .5s var(--spring); } .bundle-card:hover .bundle-stack span { transform: rotate(calc(-9deg + var(--k) * 9deg)) translateY(-6px); } .bundle-stack img { width: 100%; height: 100%; object-fit: cover; display: block; } .bundle-card.is-hero .bundle-stack span { width: 58%; } .bundle-txt { position: relative; z-index: 2; display: grid; gap: 6px; padding-top: 16px; } .bundle-count { justify-self: start; padding: 5px 12px; border-radius: 999px; background: var(--card); color: var(--b-ink); font-size: 13px; font-weight: 700; } .bundle-txt h3 { margin: 0; font-family: var(--display); font-weight: 400; font-synthesis: none; font-size: clamp(22px, 2vw, 28px); letter-spacing: -.02em; line-height: 1.05; } .bundle-card.is-hero h3 { font-size: clamp(30px, 3.4vw, 48px); } .bundle-uses-line { margin: 0; color: var(--b-ink); font-size: 13.5px; line-height: 1.4; } .bundle-price { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; } .bundle-price del { color: var(--sub); font-size: 15px; } .bundle-price strong { font-size: 24px; } .bundle-save { padding: 4px 10px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 700; } .bundle-list { columns: 3 160px; padding-left: 18px; } @media (max-width: 980px) { .bundle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .bundle-grid { grid-template-columns: minmax(0, 1fr); } .bundle-card.is-hero { grid-column: auto; grid-row: auto; } } /* Titles rise out of a mask */ .wipe { clip-path: inset(0 0 100% 0); transform: translateY(.35em); transition: clip-path .9s var(--ease), transform .9s var(--ease); } .wipe.is-in { clip-path: inset(-.3em -.3em -.4em -.3em); transform: none; } @media (prefers-reduced-motion: reduce) { .aurora i, .tk-track, .proof-dot { animation: none; } .ticker { overflow-x: auto; } .bundle-card, .bundle-stack span { transition: none; } } .card-price.is-free, .card-price .is-free { color: #1D7533; } [data-theme="dark"] .card-price .is-free { color: var(--green); } .term-description { max-width: 760px; color: var(--sub); font-size: 17px; line-height: 1.6; margin: 0 0 18px; } .term-description p { margin: 0; } .term-more { max-width: 820px; margin: 48px 0 8px; padding: clamp(22px, 3vw, 36px); border-radius: 28px; background: var(--card); font-size: 16.5px; line-height: 1.65; } .term-more h2 { font-size: clamp(26px, 3vw, 36px); margin: 0 0 12px; } .term-more p { margin: 0 0 12px; } .term-more a { text-decoration: underline; text-underline-offset: 3px; } .legacy-font { display: flex; align-items: center; gap: 18px; margin: 0 0 32px; padding: 14px; border-radius: 24px; background: var(--card); box-shadow: 0 1px 0 var(--line); } .legacy-font-img { flex: 0 0 160px; border-radius: 16px; overflow: hidden; } .legacy-font-img img { display: block; width: 100%; height: auto; border-radius: 0 !important; } .legacy-font p { margin: 0; } .legacy-font-k { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); } .legacy-font-n { font-family: var(--display); font-size: 30px; line-height: 1.1; letter-spacing: -.02em; } .legacy-font-n a { color: var(--text); text-decoration: none !important; } .legacy-font-p { font-size: 15px; color: var(--sub); margin: 4px 0 10px; display: flex; flex-wrap: wrap; gap: 4px 10px; } .legacy-font-a .btn { min-height: 40px; padding: 8px 16px; text-decoration: none !important; } @media (max-width: 560px) { .legacy-font { align-items: flex-start; } .legacy-font-img { flex-basis: 96px; } .legacy-font-n { font-size: 24px; } } /* ================= 2.1 — Hero slider: unveil, recede, settle ================= */ .slider.is-js .slide { transform: none !important; opacity: 0; visibility: hidden; z-index: 0; transition: none; } .slider.is-js .slide.is-active { opacity: 1; visibility: visible; z-index: 1; } .slider.is-js .slide.is-to { z-index: 3; clip-path: inset(0 0 0 100%); } .slider.is-js .slide.is-to[data-dir="prev"] { clip-path: inset(0 100% 0 0); } .slider.is-js .slide.is-to.is-in { clip-path: inset(0 0 0 0); transition: clip-path 1.15s cubic-bezier(.77, 0, .18, 1); } .slider.is-js .slide.is-from { z-index: 2; } /* Images: the new one settles from a slight zoom; the old one drifts back and dims. Ken Burns continues slowly. */ .slider .slide .slide-img, .slider .slide.is-active .slide-img { transform: none; scale: 1; translate: 0 0; transition: scale 7s cubic-bezier(.2, .6, .2, 1), translate 1.15s cubic-bezier(.77, 0, .18, 1), filter 1.15s ease; } .slider .slide.is-active .slide-img { scale: 1.06; transform: none; } .slider.is-js .slide.is-to:not(.is-in) .slide-img { scale: 1.16; translate: 6% 0; transition: none; } .slider.is-js .slide.is-to[data-dir="prev"]:not(.is-in) .slide-img { translate: -6% 0; } .slider.is-js .slide.is-to.is-in .slide-img { scale: 1.06; translate: 0 0; transition: scale 7s cubic-bezier(.2, .6, .2, 1), translate 1.15s cubic-bezier(.77, 0, .18, 1); } .slider.is-js .slide.is-from .slide-img { translate: -8% 0; filter: brightness(.45) saturate(.8); } .slider.is-js .slide.is-from[data-dir="prev"] .slide-img { translate: 8% 0; } /* Pointer tilt now uses its own property, so it never fights the transition. */ .slider.has-tilt .slide .slide-img, .slider.has-tilt .slide.is-active .slide-img { transform: translate3d(calc(var(--px, 0) * -10px), calc(var(--py, 0) * -8px), 0); transition: scale 7s cubic-bezier(.2, .6, .2, 1), translate 1.15s cubic-bezier(.77, 0, .18, 1), filter 1.15s ease, transform .1s linear; } .slider.has-scroll-px .slide .slide-img, .slider.has-scroll-px .slide.is-active .slide-img { transform: translate3d(0, calc(var(--sy, 0) * 18px), 0); } /* Caption: lines rise out of a mask after the wipe has started. */ .slide.is-active .caption > * { animation: none; } .slide .caption > * { clip-path: inset(0 0 0 0); } .slider.is-js .slide.is-in .caption > *, .slider.is-js .slide.is-active:not(.is-from) .caption > * { animation: cap-in .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.35s + var(--c, 0) * .09s); } .caption > *:nth-child(2) { --c: 1; } .caption > *:nth-child(3) { --c: 2; } @keyframes cap-in { from { opacity: 0; transform: translateY(28px); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(-10% -10% -10% -10%); } } .cap-name { font-family: var(--display); font-weight: 400; font-synthesis: none; font-size: clamp(32px, 3.4vw, 46px); letter-spacing: -.01em; line-height: 1.05; } /* Progress line, counter and "next" label */ .slider-progress { position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 5; background: rgba(255, 255, 255, .14); } .slider-progress span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; background: rgba(255, 255, 255, .9); animation: sp-fill var(--dur, 6000ms) linear forwards; } .slider.is-paused .slider-progress span { animation-play-state: paused; } @keyframes sp-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } } .slide-count { position: absolute; left: 28px; top: 22px; z-index: 5; margin: 0; color: #fff; font-family: var(--display); font-size: 15px; letter-spacing: .08em; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); pointer-events: none; } .slide-count b { font-weight: 400; font-size: 26px; letter-spacing: 0; } .slide-count span { opacity: .7; } .slider-ctrls { z-index: 5; } .next-up { color: rgba(255, 255, 255, .78); font-size: 13.5px; padding: 0 6px 0 12px; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; } .next-up b { color: #fff; font-weight: 600; } @media (max-width: 760px) { .next-up { display: none; } .slide-count { left: 16px; top: 14px; } .slider.is-js .slide.is-from .slide-img { translate: -5% 0; } } @media (prefers-reduced-motion: reduce) { .slider.is-js .slide.is-to, .slider.is-js .slide.is-to.is-in { clip-path: none; transition: none; } .slider .slide-img, .slider.is-js .slide-img { scale: 1 !important; translate: 0 0 !important; transition: none !important; filter: none !important; } .slider.is-js .slide .caption > * { animation: none !important; } .slider-progress span { animation: none; transform: scaleX(1); opacity: .3; } } /* ---------- 2.1.3: Namotaru spacing + the living dot ---------- */ /* Namotaru is drawn tight; negative tracking made letters collide. Keep the gentle "kiss", lose the overlap. */ h1, h2, .woocommerce-products-header__title, .page-title, .home .section-head h2, .home .lt-title, .home .finder-banner h2, .home .promo h2, .story-name, .home .story-name, .bundle-txt h3, .legacy-font-n, .cap-name { letter-spacing: 0; } .home .hero-title { letter-spacing: .012em; line-height: 1.04; } .hero-dot { display: inline-block; transform-origin: 50% 100%; animation: dot-hop 4.2s cubic-bezier(.3, .7, .3, 1) 1.8s infinite; } @keyframes dot-hop { 0%, 62%, 100% { transform: none; } 70% { transform: translateY(-.22em) scale(.92, 1.08); } 78% { transform: translateY(0) scale(1.18, .8); } 84% { transform: translateY(-.05em) scale(.96, 1.04); } 90% { transform: none; } } @media (prefers-reduced-motion: reduce) { .hero-dot { animation: none; } } /* ---------- 2.2.1: Font Finder chips are live shortcuts ---------- */ .finder-chips li { padding: 0; background: none; box-shadow: none; transform: none !important; animation: fc-bob 5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.8s); } .finder-chip { --r: -2deg; display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 18px; background: var(--card); color: var(--text); font-weight: 600; font-size: 15px; text-decoration: none !important; box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .3); transform: rotate(var(--r)); transition: transform .4s var(--spring), box-shadow .3s var(--ease), background-color .25s, color .25s; } .finder-chips li:nth-child(even) .finder-chip { --r: 2deg; translate: 0 6px; } .fc-emoji { display: inline-block; transition: transform .45s var(--spring); } .fc-go { display: inline-block; width: 0; opacity: 0; overflow: hidden; color: var(--accent-text); transform: translateX(-6px); transition: width .3s var(--ease), opacity .25s, transform .3s var(--ease); } .finder-chip:hover, .finder-chip:focus-visible { transform: rotate(0) translateY(-5px) scale(1.06); box-shadow: 0 18px 32px -14px rgba(0, 0, 0, .35); outline: none; } .finder-chip:hover .fc-emoji, .finder-chip:focus-visible .fc-emoji { transform: rotate(-12deg) scale(1.3); } .finder-chip:hover .fc-go, .finder-chip:focus-visible .fc-go { width: 1em; opacity: 1; transform: none; } .finder-chip:focus-visible { box-shadow: 0 0 0 3px var(--accent); } .finder-chip:active { transform: scale(.96); } .finder-chips.is-going .finder-chip:not(.is-picked) { opacity: .35; transform: rotate(var(--r)) scale(.94); } .finder-chip.is-picked { background: var(--accent); color: #fff; transform: rotate(0) scale(1.12); } .finder-chip.is-picked .fc-go { width: 1em; opacity: 1; transform: translateX(4px); color: #fff; } @keyframes fc-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } } @media (prefers-reduced-motion: reduce) { .finder-chips li { animation: none; } .finder-chip, .fc-emoji, .fc-go { transition: none; } } /* ---------- 2.3.0: font kit previews (set in the kit's real fonts) ---------- */ .kit-scene { position: relative; width: 100%; aspect-ratio: 3 / 2; background: var(--ks-bg); color: var(--text); border-radius: 22px; overflow: hidden; isolation: isolate; } .kit-scene::before { content: ""; position: absolute; inset: 12px; border: 1px solid color-mix(in srgb, var(--ks-ink) 22%, transparent); border-radius: 14px; pointer-events: none; } .kit-scene::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, #fff 55%, transparent), transparent 60%); opacity: .7; } .ks-inner { position: absolute; inset: 9% 8%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .ks-line { display: block; white-space: nowrap; max-width: none; font-size: 24px; line-height: 1.2; opacity: 0; translate: 0 12px; transition: opacity .6s var(--ease), translate .8s var(--ease); transition-delay: calc(var(--n, 0) * 110ms + 60ms); } .kit-scene.is-ready .ks-line { opacity: 1; translate: 0 0; } .ks-hero { color: var(--ks-ink); } .ks-script { color: color-mix(in srgb, var(--ks-ink) 80%, var(--text)); } .ks-kicker, .ks-meta { color: color-mix(in srgb, var(--text) 82%, transparent); font-weight: 400; } .ks-sub { color: color-mix(in srgb, var(--text) 86%, transparent); } .ks-s-feature { aspect-ratio: 4 / 3; } .ks-s-wide { aspect-ratio: 16 / 10; } .kit-scene.ks-s-hero { aspect-ratio: 1 / 1; border-radius: 28px; } .ks-s-pair { aspect-ratio: 2 / 1; } .ks-s-roll { aspect-ratio: 5 / 2; border-radius: 16px; } .ks-s-roll::before { inset: 8px; border-radius: 10px; } .ks-s-roll .ks-inner { inset: 10% 8%; } @media (prefers-reduced-motion: reduce) { .ks-line { transition: none; translate: none; } } /* Homepage cards */ .bundle-scene { margin: -8px -8px 0; } .bundle-card .kit-scene { border-radius: 22px; } .bundle-card .kit-scene::before { border-color: color-mix(in srgb, var(--ks-ink) 16%, transparent); } .bundle-card:hover .ks-hero { translate: 0 -3px; } .bundle-card.is-hero .bundle-scene { margin: -8px -8px 6px; } /* Product page */ .kit-hero { position: relative; } .kit-hero-cap { margin: 10px 4px 0; color: var(--sub); font-size: 13px; } .kit-show { margin-top: 56px; } .kit-why { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px 40px; align-items: end; } .kit-why h2 { margin: 6px 0 0; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.18; max-width: 30ch; } .kit-uses { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .kit-uses li { padding: 8px 14px; border-radius: 999px; background: var(--card); font-size: 14.5px; font-weight: 600; box-shadow: 0 1px 0 var(--line); } .kit-uses.is-small li { padding: 5px 11px; font-size: 13px; } .kit-value { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 30px 0 8px; } .kit-value > div { display: grid; gap: 4px; padding: 18px 20px; border-radius: 22px; background: var(--card); } .kit-value span:last-child { color: var(--sub); font-size: 14px; } .kit-value-n { font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; letter-spacing: -.01em; line-height: 1.1; } .kit-value-n del { color: var(--sub); font-weight: 500; } .kit-value .is-save { background: var(--accent); color: #fff; } .kit-value .is-save span:last-child { color: rgba(255, 255, 255, .85); } .kit-h { margin: 44px 0 16px; font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.2vw, 30px); } .kit-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .kit-pair { margin: 0; } .kit-pair figcaption { display: flex; justify-content: space-between; gap: 10px; padding: 10px 6px 0; font-size: 14px; } .kit-pair figcaption span { color: var(--sub); text-align: right; } .kit-roll { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .kit-roll a { display: grid; gap: 8px; color: var(--text); text-decoration: none !important; } .kit-roll a .kit-scene { transition: transform .35s var(--spring), box-shadow .3s var(--ease); } .kit-roll a:hover .kit-scene { transform: translateY(-3px); box-shadow: var(--shadow); } .kit-roll-meta { display: grid; padding: 0 4px; font-size: 14px; } .kit-roll-meta small { color: var(--sub); font-size: 12.5px; } .kit-know { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 40px; } .kit-know p { margin: 0; padding: 18px 20px; border-radius: 22px; background: var(--card); color: var(--sub); font-size: 15px; line-height: 1.55; } .kit-know b { color: var(--text); } @media (max-width: 900px) { .kit-why { grid-template-columns: minmax(0, 1fr); } .kit-value { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kit-roll { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .kit-pairs, .kit-know { grid-template-columns: minmax(0, 1fr); } } /* Bundles page */ .kits-head { max-width: 760px; margin: 8px 0 34px; } .kits-head h1 { margin: 6px 0 12px; font-size: clamp(38px, 5.4vw, 72px); line-height: 1.04; } .kits-lead { margin: 0; color: var(--sub); font-size: 17px; line-height: 1.55; } .kits-list { display: grid; gap: 18px; } .kit-row { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: 16px; border-radius: 32px; background: var(--card); } .kit-row:nth-child(even) .kit-row-media { order: 2; } .kit-row-media { display: block; } .kit-row-media .kit-scene { transition: transform .4s var(--spring); } .kit-row-media:hover .kit-scene { transform: scale(1.015); } .kit-row-txt { display: grid; gap: 10px; padding: 8px 12px 8px 0; justify-items: start; } .kit-row:nth-child(even) .kit-row-txt { padding: 8px 0 8px 12px; } .kit-row-txt h2 { margin: 0; font-size: clamp(28px, 3vw, 40px); line-height: 1.08; } .kit-row-txt h2 a { color: var(--text); text-decoration: none; } .kit-row-txt > p { margin: 0; color: var(--sub); font-size: 16px; line-height: 1.5; max-width: 48ch; } .kit-row-fonts { font-size: 13.5px !important; color: var(--b-ink) !important; } .kit-row-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 6px; } @media (max-width: 820px) { .kit-row { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 12px; border-radius: 28px; } .kit-row:nth-child(even) .kit-row-media { order: 0; } .kit-row-txt, .kit-row:nth-child(even) .kit-row-txt { padding: 4px 8px 10px; } } .kit-value-n .amount, .kit-value-n bdi { font-size: inherit; font-weight: inherit; } .kit-value-n del .amount { font-weight: 500; } /* ---------- 2.5.0: colour roles ---------- * Red = action only (buttons you press, cart count). One clear "do this" colour. * Green = gain (Save %, % off, Free) — reads as money kept, not as an alarm. * Calm blue/white = information (New). * Buttons: flat tinted fill with the softest tonal shift and a hairline top light — modern, not 3D. */ :root { --btn-red: linear-gradient(180deg, #E4484E 0%, #D3373F 100%); --btn-red-hover: linear-gradient(180deg, #EA5157 0%, #D93D45 100%); --btn-rim: inset 0 1px 0 rgba(255, 255, 255, .16); --btn-glow: 0 1px 2px rgba(120, 18, 32, .16), 0 8px 18px -10px rgba(211, 55, 63, .55); --gain-bg: #E3F4E8; --gain-ink: #1E7A3C; --info-bg: #E6EFFA; --info-ink: #2A5E93; } [data-theme="dark"] { --gain-bg: rgba(48, 209, 88, .16); --gain-ink: #6FE08F; --info-bg: rgba(100, 160, 255, .16); --info-ink: #9CC4FF; --btn-glow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 20px -10px rgba(255, 90, 90, .45); } .btn-accent, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt { background: var(--btn-red); color: #fff; text-shadow: none; box-shadow: var(--btn-rim), var(--btn-glow); transition: transform .3s var(--spring), box-shadow .25s var(--ease), background .25s var(--ease), filter .2s; } .btn-accent:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce button.button.alt:hover, .woocommerce a.button.alt:hover { background: var(--btn-red-hover); color: #fff; transform: translateY(-1px); box-shadow: var(--btn-rim), 0 2px 4px rgba(120, 18, 32, .14), 0 12px 24px -12px rgba(211, 55, 63, .6); } .btn-accent:active, .woocommerce a.button:active, .woocommerce button.button:active { transform: scale(.97); filter: brightness(.96); box-shadow: var(--btn-rim), 0 1px 2px rgba(120, 18, 32, .2); transition-duration: .12s; } .btn-accent:focus-visible, .woocommerce a.button:focus-visible, .woocommerce button.button:focus-visible { outline: none; box-shadow: var(--btn-rim), 0 0 0 3px var(--bg), 0 0 0 5px rgba(228, 72, 78, .5); } .woocommerce button.button:disabled, .woocommerce button.button.disabled, .woocommerce button.button.alt.disabled { background: var(--fill) !important; color: var(--sub); box-shadow: none; transform: none; } @media (prefers-reduced-motion: reduce) { .btn-accent:hover { transform: none; } } /* Gain = green, quiet tinted pills. */ .bundle-save, .badge-gain { background: var(--gain-bg); color: var(--gain-ink); box-shadow: none; } .kit-value .is-save { background: var(--gain-bg); color: var(--gain-ink); box-shadow: none; } .kit-value .is-save span:last-child { color: color-mix(in srgb, var(--gain-ink) 75%, transparent); } /* On the dark slider caption the pills turn glassy. */ .caption .badge-gain { background: rgba(48, 209, 88, .2); color: #8BF0A9; } .caption .badge-new { background: rgba(255, 255, 255, .18); color: #fff; } .badge-new { background: var(--info-bg); color: var(--info-ink); } .finder-chip.is-picked { background: var(--btn-red); box-shadow: var(--btn-rim); } /* ---------- 2.4.0: hero title — calmer size, descenders never clipped ---------- */ .home .hero-title { font-size: clamp(44px, 6.2vw, 92px); line-height: 1.08; padding-bottom: .08em; } .hero-title .hw, .hero-title.is-revealing .hl { padding: .06em 0 .2em; margin: -.06em 0 -.2em; } /* 2.5.1: phone — the big kit card hugs its content (no empty gap under the photo stack). */ @media (max-width: 560px) { .bundle-card, .bundle-card.is-hero { min-height: 0; grid-template-rows: auto auto; } .bundle-card.is-hero .bundle-stack { min-height: 175px; } .bundle-card .bundle-stack { min-height: 150px; } } /* ---------- 2.6.0: hero title rotates through three fonts (sizes and spacing set per font by the head script) ---------- */ .home .hero-title { font-size: calc(clamp(44px, 6.2vw, 92px) * var(--hero-scale, 1)); line-height: var(--hero-lh, 1.08); padding-bottom: var(--hero-pb, .08em); } .home .hero-title .hero-accent { display: block; } /* ---------- 2.7.0: dark mode — "midnight velvet" instead of flat black ---------- * A warm ink base (not #000), a low wine glow from the top-left, a faint champagne light top-right, * a deep plum pool at the bottom, fine film grain, and champagne hairlines on cards. Calm, rich, expensive. */ :root[data-theme="dark"] { --bg: #0C0B0E; --card: #17151A; --text: #F4F1EC; --sub: #A9A39D; --strike: #8F8984; --fill: rgba(255, 244, 230, .08); --line: rgba(255, 236, 214, .1); --glass: rgba(26, 22, 28, .62); --glass-line: rgba(255, 236, 214, .12); --glass-hi: rgba(255, 244, 230, .07); --seg-thumb: #3A3439; --promo: #1D191F; --shadow: 0 24px 50px -18px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 236, 214, .06); --lux-hair: rgba(255, 228, 196, .09); --t-rose: #2A1A1F; --t-peach: #2A1E18; --t-sand: #252019; --t-sage: #15221C; --t-sky: #131C29; --t-lilac: #1E192B; } html[data-theme="dark"] body { background-color: var(--bg); background-image: radial-gradient(1100px 680px at 8% -12%, rgba(142, 34, 58, .26), transparent 62%), radial-gradient(900px 560px at 96% -6%, rgba(214, 170, 110, .11), transparent 60%), radial-gradient(1200px 900px at 50% 118%, rgba(78, 46, 112, .16), transparent 62%); background-attachment: fixed; } /* Film grain: tiny, static, barely there — it's what makes the black feel like velvet instead of a screen. */ html[data-theme="dark"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .9 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Champagne hairlines and a soft top light on surfaces. */ html[data-theme="dark"] :is(.card, .lt-card, .bundle-card, .band, .post-card, .kit-row, .kit-value > div, .kit-know p, .finder-banner, .promo, .story, .ff-card, .pd-specs, .pd-about) { box-shadow: inset 0 1px 0 rgba(255, 244, 230, .05), 0 0 0 1px var(--lux-hair); } html[data-theme="dark"] :is(.card, .post-card, .kit-row, .ff-card) { background-image: linear-gradient(180deg, rgba(255, 244, 230, .035), rgba(255, 244, 230, 0) 38%); } html[data-theme="dark"] .finder-banner { background: linear-gradient(135deg, #2A1A22, #1E192B); } html[data-theme="dark"] .promo-dark { background: linear-gradient(160deg, #221C24, #141216); } html[data-theme="dark"] .aurora i { opacity: .28; mix-blend-mode: screen; } html[data-theme="dark"] .aurora i:nth-child(1) { background: #6E1E33; } html[data-theme="dark"] .aurora i:nth-child(2) { background: #3A2F5E; } html[data-theme="dark"] .aurora i:nth-child(3) { background: #5A4524; } html[data-theme="dark"] ::selection { background: rgba(214, 170, 110, .35); color: #fff; } html[data-theme="dark"] :is(.card, .bundle-card, .post-card, .lt-card):hover { box-shadow: inset 0 1px 0 rgba(255, 244, 230, .06), 0 0 0 1px rgba(255, 228, 196, .14), 0 24px 50px -18px rgba(0, 0, 0, .8); } .aurora { -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }