/* ========================================================================== JayHackPro · jhp.css One stylesheet for the whole site. Green on black, hairline grids, the terminal as imagery. Motion is enhancement only: every element is visible and readable with animation off. ========================================================================== */ /* 1. Tokens ------------------------------------------------------------- */ :root { --bg: #050807; --bg-2: #070c09; --panel: #0b120e; --panel-2: #0f1a13; --line: rgba(78, 240, 138, .14); --line-strong: rgba(78, 240, 138, .32); --green: #46f08a; --green-bright: #8effb6; --green-dim: #2aa863; --green-ink: #04140a; --green-wash: rgba(70, 240, 138, .08); --ink: #d4ded4; --ink-soft: #a3b5a8; --ink-dim: #6e8074; --white: #f2f7f3; --crit: #ff6b6b; --high: #ffa94d; --med: #ffd43b; --low: #57c8ff; --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace; --wrap: 1120px; --gutter: clamp(20px, 5vw, 48px); --head-h: 68px; --r-sm: 8px; --r: 14px; --r-lg: 22px; --ease: cubic-bezier(.2, .7, .2, 1); --spring: linear(0, .1195, .3552, .5913, .7781, .9047, .9789, 1.0152, 1.0275, 1.0271, 1.0212, 1.0142, 1.0083, 1.004, 1.0013, .9999, 1, 1); --shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(78, 240, 138, .06); --glow: 0 0 0 1px var(--line-strong), 0 20px 60px -20px rgba(70, 240, 138, .35); color-scheme: dark; } @property --fill { syntax: ""; inherits: false; initial-value: 0%; } @font-face { font-family: "Schibsted Grotesk"; src: url("../fonts/schibsted-grotesk.woff2") format("woff2"); font-weight: 400 900; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; } /* 2. Reset --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 24px); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { margin: 0; min-height: 100dvh; background: var(--bg); overflow-x: clip; } body.menu-open { overflow: hidden; } img, svg, video { display: block; max-width: 100%; height: auto; } svg { height: auto; } h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.02em; color: var(--white); line-height: 1.15; text-wrap: balance; } p { margin: 0; } a { color: var(--green); text-decoration: none; text-underline-offset: .18em; } a:hover { text-decoration: underline; } ul, ol { margin: 0; padding: 0; list-style: none; } [hidden] { display: none !important; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } a, button, summary, [role="button"] { -webkit-tap-highlight-color: transparent; } input, textarea, select { font: inherit; color: inherit; } code, kbd, pre { font-family: var(--mono); font-size: .92em; } sup { font-size: .55em; vertical-align: super; line-height: 0; margin-left: .06em; } ::selection { background: var(--green); color: var(--green-ink); } :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 2px; } .brand:focus-visible, .icon-btn:focus-visible, .btn:focus-visible { border-radius: 999px; outline-offset: 4px; } .sr-only, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 14px; background: var(--green); color: var(--green-ink); border-radius: var(--r-sm); font-weight: 600; } .skip:focus { top: 12px; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: #16261c; border-radius: 99px; border: 2px solid var(--bg); } /* 3. Layout ---------------------------------------------------------------- */ .wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; } main { display: block; } section { position: relative; } .home > section, .product-page > section { padding-block: clamp(72px, 10vw, 128px); } .home > section + section, .product-page > section + section { border-top: 1px solid var(--line); } .home > .hero, .product-page > .hero { padding-block: 0; border-top: 0; } .sec-head { max-width: 60ch; margin-bottom: clamp(36px, 5vw, 56px); } .sec-title { font-size: clamp(1.9rem, 3.8vw, 2.9rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.06; } .sec-title .soft { color: var(--ink-soft); font-weight: 500; } .lede { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6; color: var(--ink-soft); max-width: 58ch; text-wrap: pretty; } .sec-head .lede { margin-top: 18px; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--green); } .eyebrow sup { font-size: .6em; } .dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-wash); flex: none; } .eyebrow a { color: inherit; } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } /* 4. Buttons -------------------------------------------------------------- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 15px; line-height: 1; letter-spacing: -.005em; white-space: nowrap; text-decoration: none !important; border: 1px solid transparent; transition: transform .3s var(--spring), background-color .25s, border-color .25s, color .25s, box-shadow .3s; overflow: hidden; isolation: isolate; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0) scale(.985); transition-duration: .1s; } .btn .ico { width: 17px; height: 17px; flex: none; transition: transform .35s var(--spring); } .btn:hover .ico-arrow { transform: translateX(3px); } .btn-lg { padding: 15px 24px; font-size: 16px; } .btn-sm { padding: 9px 15px; font-size: 14px; } .btn-primary { background: var(--green); color: var(--green-ink); box-shadow: 0 10px 30px -12px rgba(70, 240, 138, .55); } .btn-primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ease); } .btn-primary:hover { background: var(--green-bright); box-shadow: 0 14px 34px -12px rgba(70, 240, 138, .7); } .btn-primary:hover::after { transform: translateX(120%); } .btn-ghost { color: var(--white); background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); } .btn-ghost:hover { border-color: var(--line-strong); background: var(--green-wash); color: var(--green-bright); } .btn-line { color: var(--green); border-color: var(--line-strong); background: transparent; } .btn-line:hover { background: var(--green-wash); border-color: var(--green); } .btn-link { padding: 0; border: 0; color: var(--green); } .btn[aria-disabled="true"], .btn:disabled { opacity: .55; pointer-events: none; } /* 5. Header --------------------------------------------------------------- */ .site-head { position: sticky; top: 0; z-index: 100; height: var(--head-h); background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid transparent; transition: border-color .3s, background-color .3s; view-transition-name: head; } .site-head.is-scrolled { border-bottom-color: var(--line); background: color-mix(in srgb, var(--bg) 84%, transparent); } @supports not (backdrop-filter: blur(1px)) { .site-head { background: var(--bg); } } .head-row { display: flex; align-items: center; gap: 20px; height: 100%; } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--white); font-weight: 700; letter-spacing: -.02em; font-size: 17px; text-decoration: none !important; } .brand-mark { width: 30px; height: 30px; color: var(--green); filter: drop-shadow(0 0 10px rgba(70, 240, 138, .35)); transition: transform .5s var(--spring), filter .3s; } .brand:hover .brand-mark { transform: rotate(-6deg) scale(1.06); filter: drop-shadow(0 0 14px rgba(70, 240, 138, .6)); } .brand-name sup { color: var(--green); } .nav { margin-inline: auto; } .nav ul { display: flex; gap: 4px; } .nav a { position: relative; display: block; padding: 8px 12px; color: var(--ink-soft); font-weight: 500; font-size: 15px; border-radius: 999px; text-decoration: none !important; transition: color .2s; } .nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 1.5px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); } .nav a:hover, .nav a[aria-current] { color: var(--white); } .nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); } .head-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; } .icon-btn { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ink-soft); transition: color .2s, background-color .2s; } .icon-btn .ico { width: 21px; height: 21px; } .icon-btn:hover { color: var(--white); background: rgba(255, 255, 255, .06); text-decoration: none; } .cart-count { position: absolute; top: 4px; right: 2px; min-width: 17px; height: 17px; padding-inline: 4px; border-radius: 99px; background: var(--green); color: var(--green-ink); font: 700 10.5px/17px var(--mono); text-align: center; } .head-cta { margin-left: 8px; } .nav-toggle { display: none; } .nav-toggle .ico-close { display: none; } .nav-toggle[aria-expanded="true"] .ico-menu { display: none; } .nav-toggle[aria-expanded="true"] .ico-close { display: block; } .ico-menu path { transition: transform .3s var(--ease); transform-box: fill-box; transform-origin: center; } .nav-toggle:hover .i-m1 { transform: translateX(2px); } .nav-toggle:hover .i-m3 { transform: translateX(-2px); } /* Full-screen menu */ .menu { position: fixed; inset: 0; z-index: 90; background: var(--bg); padding-top: var(--head-h); opacity: 0; transition: opacity .35s var(--ease); } .menu::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 80% 20%, rgba(70, 240, 138, .12), transparent 70%), radial-gradient(circle at 1px 1px, rgba(78, 240, 138, .16) 1px, transparent 1.5px); background-size: auto, 28px 28px; mask-image: linear-gradient(to bottom, #000 40%, transparent); pointer-events: none; } .menu.is-open { opacity: 1; } .menu-inner { position: relative; display: flex; flex-direction: column; height: calc(100dvh - var(--head-h)); padding-block: 8vh 24px; } .menu-list li { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i) * 55ms + 60ms); } .menu.is-open .menu-list li { opacity: 1; transform: none; } .menu-list a { display: flex; align-items: baseline; gap: 18px; padding: 10px 0; font-size: clamp(2rem, 8vw, 3.6rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; color: var(--white); text-decoration: none !important; border-bottom: 1px solid var(--line); transition: color .2s, padding-left .3s var(--ease); } .menu-list a:hover, .menu-list a[aria-current] { color: var(--green); padding-left: 8px; } .menu-n { font: 500 12px/1 var(--mono); color: var(--green); letter-spacing: .1em; } .menu-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; font: 500 14px/1 var(--mono); opacity: 0; transition: opacity .5s .35s; } .menu.is-open .menu-foot { opacity: 1; } .menu-foot a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); } .menu-foot a:hover { color: var(--green); text-decoration: none; } .menu-foot .ico { width: 18px; height: 18px; } .menu-social { display: inline-flex; gap: 6px; margin-left: auto; } .menu-social a { padding: 8px; } /* 6. Hero ------------------------------------------------------------------- */ .hero { --mx: 50%; --my: 35%; min-height: calc(100svh - var(--head-h)); display: grid; align-items: center; padding-block: clamp(48px, 8vh, 96px); overflow: hidden; } .hero-bg { position: absolute; inset: 0; pointer-events: none; } .hero-grid { position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(78, 240, 138, .18) 1px, transparent 1.6px); background-size: 28px 28px; mask-image: radial-gradient(70% 70% at 60% 40%, #000 20%, transparent 80%); opacity: .8; } .hero-glow { position: absolute; inset: -20%; background: radial-gradient(38% 42% at var(--mx) var(--my), rgba(70, 240, 138, .16), transparent 70%); transition: background-position .2s; will-change: auto; } .hero-sweep { position: absolute; left: 0; right: 0; top: 0; height: 120px; background: linear-gradient(to bottom, transparent, rgba(70, 240, 138, .12) 70%, rgba(142, 255, 182, .55) 99%, transparent); transform: translateY(-140px); opacity: 0; } .hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; } .hero-eyebrow { margin-bottom: 26px; } .hero-title { font-size: clamp(2.7rem, 5.6vw, 4.6rem); font-weight: 700; letter-spacing: -.04em; line-height: .98; text-wrap: initial; } .hero-title em { font-style: normal; color: var(--green); } .hero-product .hero-title { font-size: clamp(2.5rem, 5vw, 4.15rem); } .hl-line { display: block; } .hero-lede { margin-top: 26px; font-size: clamp(1.08rem, 1.5vw, 1.24rem); max-width: 52ch; } .hero-btns { margin-top: 34px; } .hero-cmd { margin-top: 26px; max-width: 520px; } .trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 36px; font: 500 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); } .trust li { display: inline-flex; align-items: center; gap: 8px; } .trust li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--green-dim); } .trust a { color: var(--ink-soft); } .trust a:hover { color: var(--green); text-decoration: none; } .hero-demo { position: relative; perspective: 1400px; } .hero-demo::before { content: ""; position: absolute; inset: -14%; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 62%, rgba(70, 240, 138, .35) 100%); mask-image: radial-gradient(circle, transparent 60%, #000 61%, #000 66%, transparent 67%); opacity: .55; pointer-events: none; } .hero-demo::after { content: ""; position: absolute; inset: 6%; border-radius: 50%; box-shadow: 0 0 120px 30px rgba(70, 240, 138, .09); pointer-events: none; z-index: -1; } @media (prefers-reduced-motion: no-preference) and (pointer: fine) { .hero-demo::before { animation: spin 14s linear infinite; } } @media (max-width: 960px) { .hero-demo::before, .hero-demo::after { display: none; } } .term-hero { transform: rotateY(-5deg) rotateX(2deg); transition: transform .8s var(--ease), box-shadow .5s; box-shadow: var(--shadow), var(--glow); } .hero-demo:hover .term-hero { transform: none; } /* Load-in choreography (motion only) */ @media (prefers-reduced-motion: no-preference) { .hero-eyebrow, .hero-title .hl-line, .hero-lede, .hero-btns, .hero-cmd, .trust { animation: rise .9s var(--ease) both; } .hero-eyebrow { animation-delay: .05s; } .hero-title .hl-line:nth-child(1) { animation-delay: .12s; } .hero-title .hl-line:nth-child(2) { animation-delay: .22s; } .hero-lede { animation-delay: .34s; } .hero-btns { animation-delay: .44s; } .hero-cmd { animation-delay: .5s; } .trust { animation-delay: .56s; } .hero-demo { animation: rise-in 1.1s var(--ease) .3s both; } .hero-sweep { animation: sweep 2.6s cubic-bezier(.6, 0, .3, 1) .35s both; } } @keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } @keyframes rise-in { from { opacity: 0; transform: translateY(30px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes sweep { 0% { transform: translateY(-140px); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateY(100vh); opacity: 0; } } /* Ticker */ .ticker { display: flex; align-items: center; gap: 18px; padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); font: 500 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); overflow: hidden; } .ticker-label { flex: none; padding: 0 0 0 var(--gutter); color: var(--green); } .ticker-label::after { content: ""; display: inline-block; width: 1px; height: 14px; margin-left: 18px; vertical-align: middle; background: var(--line-strong); } .ticker-clip { flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .ticker-track { display: flex; width: max-content; animation: ticker 48s linear infinite; } .ticker:hover .ticker-track { animation-play-state: paused; } .ticker-item { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; white-space: nowrap; } .ticker-item::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--green-dim); } @keyframes ticker { to { transform: translateX(-50%); } } /* 7. Terminal ---------------------------------------------------------------- */ .term { position: relative; min-width: 0; max-width: 100%; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; } .term::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 30%); } .term-bar { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); font: 500 12px/1 var(--mono); color: var(--ink-dim); } .term-dots { display: inline-flex; gap: 6px; } .term-dots i { width: 10px; height: 10px; border-radius: 50%; background: #1e2a22; } .term-dots i:nth-child(1) { background: #4a2a2a; } .term-dots i:nth-child(2) { background: #4a4224; } .term-dots i:nth-child(3) { background: #214a30; } .term-title { color: var(--ink-soft); } .term-hint { margin-left: auto; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; } .term-body { margin: 0; padding: 18px 18px 20px; font: 400 12.5px/1.65 var(--mono); color: var(--ink); white-space: pre; overflow-x: auto; tab-size: 4; -webkit-overflow-scrolling: touch; } .tl { display: block; min-height: 1.62em; } .tl-ps { color: var(--green); font-weight: 600; } .tl-cmd { color: var(--white); font-weight: 500; } .tl-dim { color: var(--ink-dim); } .tl-ok { color: var(--green); } .tl-crit { color: var(--crit); } .tl-out i { font-style: normal; color: var(--ink-dim); } .sev { display: inline-block; font-weight: 700; letter-spacing: .04em; } .sev-crit { color: var(--crit); } .sev-high { color: var(--high); } .sev-med { color: var(--med); } .sev-low { color: var(--low); } .term.is-typing .tl:not(.on) { visibility: hidden; } .tl.typing::after { content: "▍"; color: var(--green); animation: blink 1s steps(2) infinite; } .term.is-typed .tl-cmd:last-of-type::after { content: "▍"; color: var(--green); animation: blink 1.1s steps(2) infinite; } @keyframes blink { to { opacity: 0; } } /* Copyable command */ .cmd { display: flex; min-width: 0; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; font: 500 14px/1 var(--mono); max-width: 100%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03); } .cmd-ps { color: var(--green); font-weight: 700; } .cmd-text { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; color: var(--white); scrollbar-width: none; } .cmd-text::-webkit-scrollbar { display: none; } .cmd-copy { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; color: var(--ink-soft); background: rgba(255, 255, 255, .04); border: 1px solid transparent; font: 500 12px/1 var(--mono); transition: color .2s, background-color .2s, border-color .2s; } .cmd-copy .ico { width: 15px; height: 15px; } .cmd-copy .ico-done { display: none; } .cmd-copy:hover { color: var(--white); border-color: var(--line-strong); } .cmd-copy.is-done { color: var(--green-ink); background: var(--green); } .cmd-copy.is-done .ico-copy { display: none; } .cmd-copy.is-done .ico-done { display: block; } .cmd-copy.is-done .ico-done path { stroke-dasharray: 1; animation: draw .5s var(--ease) both; } /* 8. Cards ------------------------------------------------------------------ */ .cards { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } .cards-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .card { --px: 50%; --py: 0%; position: relative; display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 2.4vw, 30px); background: var(--bg); overflow: hidden; transition: background-color .3s; } .card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(240px 200px at var(--px) var(--py), rgba(70, 240, 138, .12), transparent 70%); opacity: 0; transition: opacity .4s; pointer-events: none; } .card:hover { background: var(--bg-2); } .card:hover::before { opacity: 1; } .card-ico { position: relative; display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; color: var(--green); background: var(--green-wash); border: 1px solid var(--line); transition: transform .4s var(--spring), border-color .3s; } .card:hover .card-ico { transform: translateY(-2px); border-color: var(--line-strong); } .card-ico .ico { width: 24px; height: 24px; } .card-title { position: relative; font-size: 1.08rem; font-weight: 600; letter-spacing: -.015em; margin-top: 4px; } .card-text { position: relative; font-size: .95rem; line-height: 1.55; color: var(--ink-soft); flex: 1; } .card-tag { position: relative; align-self: flex-start; margin-top: 6px; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; } .principles-list .card-tag { order: -1; margin: 0 0 4px; border: 0; padding: 0; color: var(--green); font-size: 12px; } .flagship-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 36px; } .flagship-cta .cmd { flex: 1 1 380px; max-width: 560px; } /* Icon choreography */ .ico { overflow: visible; } .i-draw { stroke-dasharray: 1; stroke-dashoffset: 1; } .is-in .i-draw { animation: draw 1s var(--ease) .35s both; } .card:hover .i-draw, .step:hover .i-draw, .store-empty:hover .i-draw, .final-panel:hover .i-draw { animation: draw2 .8s var(--ease) both; } .i-d2 { animation-delay: .5s !important; } .i-d3 { animation-delay: .65s !important; } .i-d4 { animation-delay: .8s !important; } .card:hover .i-d2 { animation-delay: .1s !important; } .card:hover .i-d3 { animation-delay: .2s !important; } .card:hover .i-d4 { animation-delay: .3s !important; } @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes draw2 { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } .i-blink { transition: opacity .2s; } .card:hover .i-blink { animation: blink .9s steps(2) infinite; } .i-pulse { transition: transform .35s var(--spring); transform-box: fill-box; } .card:hover .i-pulse { transform: translateX(2.5px); } .i-pupil { transition: transform .5s var(--spring); } .card:hover .i-pupil { animation: look 1.6s var(--ease) infinite alternate; } @keyframes look { from { transform: translateX(-2.2px); } to { transform: translateX(2.2px); } } .i-slide { transform: translate(-7px, -7px) scale(.6); opacity: 0; transform-box: fill-box; transform-origin: center; transition: transform .6s var(--spring), opacity .3s; } .is-in .i-slide, .card:hover .i-slide { transform: none; opacity: 1; } .card:hover .i-slide { transition-delay: 0s; } .is-in .i-slide { transition-delay: .5s; } .i-swing { transform-box: view-box; transform-origin: 5px 19px; } .card:hover .i-swing { animation: swing 1.1s var(--ease) infinite; } @keyframes swing { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(-24deg); } } .i-spin, .i-spin-slow, .i-spin-back { transform-box: view-box; transform-origin: 12px 12px; } .step:hover .i-spin, .is-active .i-spin { animation: spin 1.8s linear infinite; } .i-ping { opacity: 0; } .step:hover .i-ping, .is-active .i-ping { animation: ping 1.8s ease-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes ping { 0%, 60% { opacity: 0; } 70% { opacity: 1; } 100% { opacity: 0; } } .i-spin-slow { transition: transform .8s var(--spring); } .step:hover .i-spin-slow, .is-active .i-spin-slow { transform: rotate(90deg); } .i-spin-back { transition: transform .9s var(--spring); } .step:hover .i-spin-back, .is-active .i-spin-back { transform: rotate(-360deg); } .i-open-l, .i-open-r { transition: transform .4s var(--spring); transform-box: fill-box; } .card:hover .i-open-l { transform: translateX(-2px); } .card:hover .i-open-r { transform: translateX(2px); } .i-ring { transition: opacity .6s; } .is-in .i-r1 { animation: fade-out 1.2s .9s both; } .is-in .i-r2 { animation: fade-out 1.2s 1.05s both; } .card:hover .i-r1, .card:hover .i-r2 { animation: fade-out .5s both; } @keyframes fade-out { to { opacity: .18; } } .i-float { transform-box: fill-box; transform-origin: center; transition: transform .6s var(--spring); } .card:hover .i-float { animation: float 2.2s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-2px) rotate(-4deg); } } .i-shackle { transition: transform .5s var(--spring); transform-box: fill-box; } .store-empty:hover .i-shackle, .final-panel:hover .i-shackle { transform: translateY(-2px); } /* 9. Manifesto ---------------------------------------------------------------- */ .statement { font-size: clamp(1.55rem, 3.4vw, 2.6rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.22; color: var(--ink); } .statement .hl { color: var(--white); background-image: linear-gradient(var(--green), var(--green)); background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .9s var(--ease); } .is-in .statement .hl:nth-of-type(1) { transition-delay: .25s; } .is-in .statement .hl:nth-of-type(2) { transition-delay: .55s; } .is-in .statement .hl:nth-of-type(3) { transition-delay: .85s; } .is-in .statement .hl { background-size: 100% 2px; } .manifesto .lede { margin-top: 28px; } .manifesto-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .85fr); gap: clamp(40px, 6vw, 96px); align-items: center; } .rules { display: grid; border-top: 1px solid var(--line); } .rule { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 18px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--line); opacity: 0; transform: translateX(14px); transition: opacity .7s var(--ease), transform .8s var(--ease); } .is-in .rule:nth-child(1) { transition-delay: .35s; } .is-in .rule:nth-child(2) { transition-delay: .65s; } .is-in .rule:nth-child(3) { transition-delay: .95s; } .is-in .rule { opacity: 1; transform: none; } .rule-ico { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; color: var(--green); background: var(--green-wash); border: 1px solid var(--line); box-shadow: 0 0 0 0 rgba(70, 240, 138, 0); transition: box-shadow .8s var(--ease), border-color .4s; } .is-in .rule .rule-ico { border-color: var(--line-strong); box-shadow: 0 0 34px -6px rgba(70, 240, 138, .5); } .is-in .rule:nth-child(1) .rule-ico { transition-delay: .9s; } .is-in .rule:nth-child(2) .rule-ico { transition-delay: 1.2s; } .is-in .rule:nth-child(3) .rule-ico { transition-delay: 1.5s; } .rule-ico .ico { width: 23px; height: 23px; } .is-in .rule .i-float { animation: float 2.4s ease-in-out 1.2s 2; } .is-in .rule .i-draw { animation: draw 1s var(--ease) 1.6s both; } .rule h3 { font-size: 1.05rem; letter-spacing: -.01em; } .rule p { margin-top: 5px; font-size: .93rem; line-height: 1.55; color: var(--ink-soft); } .reveal-ready .manifesto-grid[data-reveal] { transform: none; } html:not(.reveal-ready) .rule { opacity: 1; transform: none; } /* 10. Process ------------------------------------------------------------------ */ .process-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; } .steps { display: grid; gap: 4px; margin-top: 8px; } .step { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; padding: 20px 18px 20px 20px; border-radius: var(--r); border: 1px solid transparent; cursor: pointer; transition: background-color .3s, border-color .3s; } .step:hover, .step.is-active { background: var(--panel); border-color: var(--line); } .step-n { grid-row: 1 / span 2; align-self: start; font: 600 12px/1 var(--mono); color: var(--ink-dim); letter-spacing: .1em; padding-top: 12px; transition: color .3s; } .step.is-active .step-n { color: var(--green); } .step-ico { position: absolute; right: 18px; top: 18px; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: var(--green); background: var(--green-wash); border: 1px solid var(--line); } .step-ico .ico { width: 20px; height: 20px; } .step h3 { font-size: 1.15rem; padding-right: 56px; } .step p { margin-top: 6px; font-size: .95rem; color: var(--ink-soft); line-height: 1.55; } .step-term { display: none; grid-column: 1 / -1; margin-top: 16px; } .specline { margin-top: 28px; font: 400 12px/1.8 var(--mono); color: var(--ink-dim); letter-spacing: .02em; } .specline i { font-style: normal; color: var(--green-dim); margin-inline: 4px; } .process-panel { position: sticky; top: calc(var(--head-h) + 32px); display: grid; } .process-term { grid-area: 1 / 1; min-width: 0; opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .45s var(--ease), transform .55s var(--ease); pointer-events: none; } .process-panel[data-active="scan"] [data-for="scan"], .process-panel[data-active="quarantine"] [data-for="quarantine"], .process-panel[data-active="restore"] [data-for="restore"] { opacity: 1; transform: none; pointer-events: auto; z-index: 1; } .process-term .term { box-shadow: var(--shadow), var(--glow); } /* 11. Panels (store CTA, final CTA, empty states) ------------------------------- */ .store-cta-panel, .final-panel, .store-empty { position: relative; overflow: hidden; padding: clamp(32px, 5vw, 64px); border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--panel), var(--bg-2)); } .store-cta-panel::before, .final-panel::before, .store-empty::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 100% 0%, rgba(70, 240, 138, .16), transparent 60%), radial-gradient(circle at 1px 1px, rgba(78, 240, 138, .12) 1px, transparent 1.5px); background-size: auto, 26px 26px; mask-image: linear-gradient(115deg, transparent 35%, #000); pointer-events: none; } .store-cta-panel { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; align-items: center; gap: 32px; } .store-cta-panel > * { position: relative; } .final-panel, .store-empty { text-align: center; display: grid; justify-items: center; gap: 18px; } .final-panel > *, .store-empty > * { position: relative; } .final-panel .lede, .store-empty p { text-align: center; } .final-ico, .store-empty-ico { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; color: var(--green); background: var(--green-wash); border: 1px solid var(--line-strong); box-shadow: 0 0 60px -10px rgba(70, 240, 138, .5); } .final-ico .ico, .store-empty-ico .ico { width: 30px; height: 30px; } .store-empty h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.03em; } .store-empty p { color: var(--ink-soft); max-width: 56ch; } /* 12. Plans, compare, quickstart, FAQ -------------------------------------------- */ .plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; } .plan { --rx: 0deg; --ry: 0deg; position: relative; display: flex; flex-direction: column; padding: clamp(26px, 3vw, 40px); border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .35s var(--ease), border-color .3s, box-shadow .4s; transform-style: preserve-3d; } .plan:hover { border-color: var(--line-strong); box-shadow: var(--shadow); } .plan-pro { background: linear-gradient(var(--panel), var(--panel)) padding-box, linear-gradient(140deg, var(--green) 0%, rgba(70, 240, 138, .25) 40%, rgba(70, 240, 138, .05) 100%) border-box; border-color: transparent; } .plan-pro::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(70% 50% at 100% 0%, rgba(70, 240, 138, .18), transparent 70%); pointer-events: none; } .plan > * { position: relative; z-index: 1; } .plan-name { display: flex; align-items: center; gap: 12px; font-size: 1.25rem; } .plan-badge { font: 600 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--green-ink); background: var(--green); padding: 6px 9px; border-radius: 999px; } .plan-price { display: flex; align-items: baseline; gap: 10px; margin-top: 20px; } .plan-amount { font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 700; letter-spacing: -.04em; color: var(--white); line-height: 1; } .plan-pro .plan-amount { font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 600; letter-spacing: -.02em; color: var(--green); } .plan-per { font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); } .plan-desc { margin-top: 16px; color: var(--ink-soft); line-height: 1.55; min-height: 3.1em; } .plan-head .btn { margin-top: 24px; align-self: flex-start; } .plan-list { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); display: grid; gap: 11px; } .plan-list li { display: flex; align-items: flex-start; gap: 11px; font-size: .96rem; color: var(--ink); } .plan-list .ico { width: 18px; height: 18px; flex: none; color: var(--green); margin-top: 2px; } .plan-list .plan-lead { color: var(--ink-soft); font-weight: 500; } .table-scroll { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-2); } .compare-table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: .96rem; } .compare-table th, .compare-table td { padding: 15px 20px; border-bottom: 1px solid var(--line); text-align: left; } .compare-table thead th { font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--green); background: var(--panel); position: sticky; top: var(--head-h); z-index: 1; } .compare-table tbody th { font-weight: 500; color: var(--ink); } .compare-table td { color: var(--ink-soft); width: 22%; text-align: center; } .compare-table thead th:not(:first-child) { text-align: center; } .compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; } .compare-table tbody tr:hover { background: rgba(70, 240, 138, .04); } .compare-table .yes, .compare-table .no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; } .compare-table .yes { color: var(--green); background: var(--green-wash); } .compare-table .no { color: var(--ink-dim); } .compare-table .ico { width: 15px; height: 15px; } .quick-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 64px); align-items: start; } .quick-cmd { position: sticky; top: calc(var(--head-h) + 32px); } .quick-cmd .cmd { padding-block: 12px; font-size: 15px; } .quick-steps { display: grid; gap: 4px; } .quick-steps li { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; padding: 18px 20px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); } .quick-steps .step-n { grid-row: 1 / span 2; padding-top: 4px; } .quick-steps h3 { font-size: 1.05rem; } .quick-steps p { margin-top: 4px; color: var(--ink-soft); font-size: .95rem; line-height: 1.55; } .quick-steps code { color: var(--green); background: var(--green-wash); padding: 2px 6px; border-radius: 5px; font-size: .85em; } .faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(24px, 5vw, 64px); } .faq-item { border-top: 1px solid var(--line); } .faq-item:last-child { border-bottom: 1px solid var(--line); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; font-size: 1.1rem; font-weight: 600; color: var(--white); cursor: pointer; list-style: none; letter-spacing: -.01em; transition: color .2s; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--green); } .faq-ico { width: 22px; height: 22px; flex: none; color: var(--green); transition: transform .45s var(--spring); } .faq-item[open] .faq-ico { transform: rotate(135deg); } .faq-a { padding-bottom: 24px; color: var(--ink-soft); line-height: 1.65; max-width: 62ch; } @supports (interpolate-size: allow-keywords) { .faq-item { interpolate-size: allow-keywords; } .faq-item::details-content { height: 0; overflow: clip; transition: height .45s var(--ease), content-visibility .45s allow-discrete; } .faq-item[open]::details-content { height: auto; } } /* 13. Reading pages ---------------------------------------------------------------- */ .page-hero { padding: clamp(48px, 8vw, 96px) 0 clamp(28px, 4vw, 48px); } .page-title { font-size: clamp(2.4rem, 5.4vw, 4.2rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; } .page-hero .lede { margin-top: 22px; } .reading-grid { display: grid; grid-template-columns: minmax(0, 720px) minmax(220px, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; padding-bottom: clamp(64px, 10vw, 128px); } .reading-aside { position: sticky; top: calc(var(--head-h) + 32px); } .prose { font-size: 1.05rem; line-height: 1.7; color: var(--ink); } .prose > * + * { margin-top: 1.1em; } .prose h2 { font-size: 1.6rem; margin-top: 2.2em; letter-spacing: -.025em; scroll-margin-top: calc(var(--head-h) + 24px); } .prose h3 { font-size: 1.2rem; margin-top: 1.8em; } .prose h4, .prose h5 { font-size: 1.02rem; margin-top: 1.4em; color: var(--ink); } .prose h5 { font: 600 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--green); } .prose p, .prose li { color: var(--ink-soft); } .prose strong { color: var(--ink); font-weight: 600; } .prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: .45em; } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose li::marker { color: var(--green); } .prose a { text-decoration: underline; text-decoration-color: var(--line-strong); } .prose a:hover { text-decoration-color: var(--green); } .prose blockquote, .wp-block-quote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--green); color: var(--ink); font-size: 1.1em; } .prose pre, .wp-block-code, .wp-block-preformatted { padding: 18px 20px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); overflow-x: auto; font-size: .88rem; line-height: 1.6; color: var(--ink); } .prose code { color: var(--green-bright); background: var(--green-wash); padding: 2px 6px; border-radius: 5px; } .prose pre code { background: none; padding: 0; color: inherit; } .prose table, .wp-block-table table { width: 100%; border-collapse: collapse; font-size: .95rem; } .prose th, .prose td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; } .prose th { color: var(--green); font: 600 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; } .prose hr, .wp-block-separator { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; } .prose img, .wp-block-image img { border-radius: var(--r); border: 1px solid var(--line); } .prose figcaption { font: 400 13px/1.5 var(--mono); color: var(--ink-dim); margin-top: 10px; } .prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; } .prose .wp-block-button__link { display: inline-flex; padding: 12px 20px; border-radius: 999px; background: var(--green); color: var(--green-ink); font-weight: 600; text-decoration: none; } .prose details { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 18px; } .prose summary { cursor: pointer; font-weight: 600; color: var(--white); } .prose .alignwide, .prose .alignfull { max-width: none; } .prose .btn-row { display: flex; } .post-figure { margin: 0 0 2em; } .toc { padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); } .toc-title { font: 600 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--green); margin-bottom: 14px; } .toc ol { display: grid; gap: 2px; counter-reset: toc; } .toc a { display: block; padding: 6px 0 6px 26px; position: relative; color: var(--ink-soft); font-size: .92rem; line-height: 1.35; border-radius: 6px; } .toc a::before { counter-increment: toc; content: counter(toc, decimal-leading-zero); position: absolute; left: 0; top: 7px; font: 500 11px/1.4 var(--mono); color: var(--ink-dim); } .toc a:hover { color: var(--green); text-decoration: none; } .facts dl { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--panel); } .facts dl > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); } .facts dl > div:last-child { border-bottom: 0; } .facts dt { font: 500 11px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); } .facts dd { margin: 0; font-size: .95rem; color: var(--ink); } .facts-note { display: flex; align-items: center; gap: 10px; margin-top: 18px; font: 500 13px/1.4 var(--mono); color: var(--ink-soft); } /* Forms */ .form { display: grid; gap: 18px; } .field { display: grid; gap: 8px; } .field label, .form-row label, .woocommerce form .form-row label { font: 500 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); } .field input, .field textarea, .search input, .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce-input-wrapper select, .woocommerce-EditAccountForm input[type="file"] { width: 100%; padding: 13px 15px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--white); font-size: 16px; line-height: 1.4; transition: border-color .2s, box-shadow .2s, background-color .2s; -webkit-appearance: none; appearance: none; } .field textarea { resize: vertical; min-height: 160px; } .field input:focus, .field textarea:focus, .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus, .search input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px var(--green-wash); background: var(--bg-2); } .field input:user-invalid, .field textarea:user-invalid { border-color: var(--crit); } .hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; } .form-status { font: 500 13px/1.5 var(--mono); color: var(--ink-soft); min-height: 1.5em; } .form-status.is-ok { color: var(--green); } .form-status.is-err { color: var(--crit); } .form.is-sending .btn { opacity: .6; pointer-events: none; } .contact-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr); gap: clamp(32px, 6vw, 96px); align-items: start; padding-bottom: clamp(64px, 10vw, 128px); } .contact-aside { display: grid; gap: 24px; } .aside-block { padding: 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); } .aside-block p { margin-top: 10px; font-size: .92rem; color: var(--ink-soft); line-height: 1.55; } .aside-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; font-weight: 600; color: var(--white); } .aside-link .ico { width: 18px; height: 18px; color: var(--green); } .aside-link:hover { color: var(--green); text-decoration: none; } .foot-h { font: 600 11.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--green); } .search { display: flex; gap: 8px; max-width: 460px; margin-top: 28px; } .search button { flex: none; width: 50px; border-radius: var(--r-sm); background: var(--panel); border: 1px solid var(--line); color: var(--ink-soft); display: grid; place-items: center; } .search button:hover { color: var(--green); border-color: var(--line-strong); } .search .ico { width: 20px; height: 20px; } /* 14. Blog ---------------------------------------------------------------------- */ .blog .wrap { padding-bottom: clamp(64px, 10vw, 128px); } .post-list { display: grid; border-top: 1px solid var(--line); } .post-card { border-bottom: 1px solid var(--line); } .post-card-link { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 30px 0; color: inherit; text-decoration: none !important; transition: padding-left .3s var(--ease); } .post-card-link:hover { padding-left: 10px; } .post-card-link .eyebrow { margin: 0; color: var(--ink-dim); } .post-card-title { font-size: 1.35rem; letter-spacing: -.02em; transition: color .2s; } .post-card-link:hover .post-card-title { color: var(--green); } .post-card-x { grid-column: 2; margin-top: 8px; color: var(--ink-soft); font-size: .96rem; } .post-card-more { grid-column: 3; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--green); } .post-card-more .ico { width: 16px; height: 16px; transition: transform .35s var(--spring); } .post-card-link:hover .post-card-more .ico { transform: translateX(4px); } .pagination { margin-top: 32px; } .pagination .nav-links { display: flex; gap: 6px; flex-wrap: wrap; } .pagination .page-numbers { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding-inline: 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-soft); font: 500 13px/1 var(--mono); } .pagination .page-numbers.current, .pagination .page-numbers:hover { background: var(--green); color: var(--green-ink); border-color: var(--green); text-decoration: none; } .post-hero .eyebrow a { color: inherit; } .author-card { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); } .author-card img { width: 48px; height: 48px; border-radius: 50%; } .author-card div { display: grid; } .author-card span { font: 400 12px/1.4 var(--mono); color: var(--ink-dim); } .post-tags a { font: 500 12px/1 var(--mono); color: var(--ink-dim); margin-right: 8px; } .post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-bottom: clamp(64px, 10vw, 128px); } .post-nav a { display: grid; gap: 6px; padding: 22px; border: 1px solid var(--line); border-radius: var(--r); color: var(--white); font-weight: 600; text-decoration: none !important; transition: border-color .2s, background-color .2s; } .post-nav a:hover { border-color: var(--line-strong); background: var(--panel); } .post-nav-next { text-align: right; } .post-nav .eyebrow { margin: 0; } /* 15. WooCommerce ------------------------------------------------------------------ */ .store { padding-bottom: clamp(64px, 10vw, 128px); } .store-page .page-hero { padding-bottom: 8px; } .woocommerce-notices-wrapper:empty { display: none; } .woocommerce-message, .woocommerce-error, .woocommerce-info, .wc-block-components-notice-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 24px; padding: 14px 18px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--panel); color: var(--ink); font-size: .95rem; list-style: none; } .woocommerce-error, .wc-block-components-notice-banner.is-error { border-color: rgba(255, 107, 107, .5); } .woocommerce-message .button, .woocommerce-info .button, .wc-block-components-notice-banner .button { margin-left: auto; } .wc-block-components-notice-banner > svg { display: none; } .wc-block-components-notice-banner__content { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; } .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce-button, .wc-block-components-button, .woocommerce .checkout-button, .woocommerce #place_order, .woocommerce-form-login__submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 999px; background: var(--green); color: var(--green-ink); font: 600 15px/1 var(--sans); border: 1px solid transparent; cursor: pointer; text-decoration: none !important; transition: transform .3s var(--spring), background-color .2s; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce-button:hover, .woocommerce #place_order:hover, .woocommerce .checkout-button:hover { background: var(--green-bright); transform: translateY(-1px); } .woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--green); } .woocommerce a.button.wc-forward, .woocommerce-button--view, .woocommerce-MyAccount-content .button, .woocommerce a.button:not(.checkout-button):not(.alt):not(.add_to_cart_button), .woocommerce button.button[name="update_cart"], .woocommerce button.button[name="apply_coupon"] { background: transparent; color: var(--green); border-color: var(--line-strong); } .woocommerce a.button.wc-forward:hover, .woocommerce-MyAccount-content .button:hover, .woocommerce button.button[name="update_cart"]:hover, .woocommerce button.button[name="apply_coupon"]:hover { background: var(--green-wash); } .woocommerce button.button:disabled, .woocommerce button.button[disabled] { opacity: .45; cursor: default; } .woocommerce .products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .woocommerce ul.products li.product { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); transition: border-color .3s, transform .4s var(--spring), box-shadow .4s; } .woocommerce ul.products li.product:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--shadow); } .woocommerce ul.products li.product a.woocommerce-LoopProduct-link { display: contents; color: inherit; text-decoration: none !important; } .woocommerce ul.products li.product img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; border-radius: var(--r); background: var(--bg-2); border: 1px solid var(--line); } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1.15rem; margin-top: 8px; } .woocommerce ul.products li.product .price, .woocommerce div.product p.price { font: 600 1.05rem/1 var(--mono); color: var(--green); } .woocommerce ul.products li.product .price del, .woocommerce div.product p.price del { color: var(--ink-dim); font-weight: 400; margin-right: 8px; } .woocommerce ul.products li.product .button { align-self: flex-start; margin-top: 6px; } .woocommerce ul.products li.product .card-tag { margin: 0; } /* Single product */ .woocommerce div.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; padding-top: clamp(32px, 6vw, 72px); } .woocommerce div.product .woocommerce-product-gallery { position: sticky; top: calc(var(--head-h) + 32px); opacity: 1 !important; } .woocommerce div.product .woocommerce-product-gallery img { border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-2); } .woocommerce div.product .woocommerce-product-gallery__trigger { display: none; } .woocommerce div.product .summary .product_title { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.035em; line-height: 1; } .woocommerce div.product p.price { font-size: 1.5rem; margin-top: 18px; } .woocommerce div.product .woocommerce-product-details__short-description { margin-top: 18px; color: var(--ink-soft); line-height: 1.6; } .woocommerce div.product form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; } .woocommerce div.product form.cart .quantity input { width: 80px; padding: 11px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--white); text-align: center; } .woocommerce div.product .product_meta { margin-top: 24px; font: 400 12.5px/1.8 var(--mono); color: var(--ink-dim); } .woocommerce div.product .product_meta span { display: block; } .trust-list { display: grid; gap: 8px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .93rem; color: var(--ink-soft); } .trust-list li { display: flex; align-items: center; gap: 10px; } .trust-list .ico { width: 16px; height: 16px; color: var(--green); } .woocommerce div.product .woocommerce-tabs { grid-column: 1 / -1; margin-top: 16px; } .woocommerce div.product .woocommerce-tabs ul.tabs { display: none; } .woocommerce div.product .woocommerce-tabs .panel { display: block !important; } .woocommerce div.product .woocommerce-tabs ul.tabs.jhp-multi { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { display: block; padding: 12px 4px; margin-right: 20px; color: var(--ink-soft); font-weight: 600; border-bottom: 2px solid transparent; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--white); border-color: var(--green); text-decoration: none; } .woocommerce div.product .woocommerce-tabs .panel { max-width: 70ch; color: var(--ink-soft); line-height: 1.7; } .woocommerce div.product .woocommerce-tabs .panel h2:first-child { display: none; } /* Tables: cart, orders */ .woocommerce table.shop_table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--bg-2); } .woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 15px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; } .woocommerce table.shop_table thead th, .woocommerce table.shop_table tfoot th { font: 600 11.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--green); background: var(--panel); } .woocommerce table.shop_table tbody tr:last-child td { border-bottom: 0; } .woocommerce table.shop_table td.product-thumbnail img { width: 64px; border-radius: 8px; border: 1px solid var(--line); } .woocommerce table.shop_table td.product-name a { color: var(--white); font-weight: 600; } .woocommerce table.shop_table .product-remove a { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--ink-dim); border: 1px solid var(--line); font-weight: 600; } .woocommerce table.shop_table .product-remove a:hover { color: var(--crit); border-color: var(--crit); text-decoration: none; } .woocommerce table.shop_table .quantity input { width: 72px; padding: 9px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--white); text-align: center; } .woocommerce table.shop_table td.actions { padding: 16px; } .woocommerce table.shop_table .coupon { display: inline-flex; gap: 8px; align-items: center; } .woocommerce table.shop_table .coupon input { width: 180px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--white); } .woocommerce table.shop_table .coupon label { display: none; } .woocommerce table.shop_table td.actions > .button { float: right; } .woocommerce .cart-collaterals { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); justify-content: end; margin-top: 32px; } .woocommerce .cart_totals { grid-column: 2; padding: 26px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--panel); } .woocommerce .cart_totals h2 { font-size: 1.2rem; margin-bottom: 16px; } .woocommerce .cart_totals table.shop_table { border: 0; background: transparent; } .woocommerce .cart_totals table.shop_table th, .woocommerce .cart_totals table.shop_table td { padding: 12px 0; background: transparent; } .woocommerce .cart_totals .order-total td { font: 700 1.25rem/1 var(--sans); color: var(--white); } .woocommerce .cart_totals .wc-proceed-to-checkout { margin-top: 20px; } .woocommerce .cart_totals .checkout-button { width: 100%; padding: 15px; font-size: 16px; } .woocommerce .cart-empty, .woocommerce-cart .return-to-shop { text-align: center; } .woocommerce .cart-empty { font-size: 1.4rem; font-weight: 600; color: var(--white); margin: 40px 0 16px; } /* Checkout */ .woocommerce form.checkout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-rows: auto 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; } .woocommerce form.checkout #order_review_heading { grid-column: 2; grid-row: 1; margin: 0; font-size: 1.2rem; } .woocommerce form.checkout #order_review { grid-column: 2; grid-row: 2; position: sticky; top: calc(var(--head-h) + 32px); padding: 26px; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--panel); } .woocommerce form.checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; display: grid; gap: 28px; } .woocommerce form.checkout h3 { font-size: 1.2rem; margin-bottom: 14px; } .woocommerce form .form-row { display: grid; gap: 7px; margin: 0 0 14px; } .woocommerce form .form-row .required { color: var(--green); text-decoration: none; } .woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; } .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } .woocommerce-billing-fields__field-wrapper .form-row-wide, .woocommerce-address-fields__field-wrapper .form-row-wide, .woocommerce-shipping-fields__field-wrapper .form-row-wide { grid-column: 1 / -1; } .woocommerce form .form-row .select2-container, .woocommerce form .form-row select { width: 100%; } .woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--crit); } .woocommerce form .form-row.woocommerce-validated input.input-text { border-color: var(--green-dim); } .woocommerce-checkout #order_review table.shop_table { border: 0; background: transparent; } .woocommerce-checkout #order_review table.shop_table th, .woocommerce-checkout #order_review table.shop_table td { padding: 12px 0; background: transparent; } .woocommerce-checkout #order_review .order-total td { font: 700 1.25rem/1 var(--sans); color: var(--white); } .woocommerce-checkout-payment { margin-top: 20px; } .woocommerce-checkout-payment ul.payment_methods { display: grid; gap: 8px; } .woocommerce-checkout-payment ul.payment_methods li { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); } .woocommerce-checkout-payment ul.payment_methods li label { font-weight: 600; color: var(--white); margin-left: 8px; } .woocommerce-checkout-payment .payment_box { margin-top: 10px; font-size: .92rem; color: var(--ink-soft); } .woocommerce-checkout-payment .place-order { margin-top: 18px; } .woocommerce-checkout-payment #place_order { width: 100%; padding: 15px; font-size: 16px; } .woocommerce-terms-and-conditions-wrapper, .woocommerce-privacy-policy-text { font-size: .88rem; color: var(--ink-dim); margin-top: 12px; } .woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: 8px; font-size: .95rem; color: var(--ink-soft); text-transform: none; letter-spacing: 0; font-family: var(--sans); } .woocommerce form input[type="checkbox"] { accent-color: var(--green); width: 16px; height: 16px; } .woocommerce-form-coupon-toggle .woocommerce-info { margin-bottom: 20px; } .woocommerce form.checkout_coupon { display: flex; gap: 10px; align-items: end; margin-bottom: 24px; } .woocommerce form.checkout_coupon .form-row { margin: 0; flex: 1; } .woocommerce-additional-fields textarea { min-height: 100px; } .woocommerce-NoticeGroup { grid-column: 1 / -1; } .woocommerce-password-strength, .woocommerce-password-hint { font-size: .85rem; color: var(--ink-dim); margin-top: 6px; } .woocommerce-password-strength.strong { color: var(--green); } .woocommerce-password-strength.bad, .woocommerce-password-strength.short { color: var(--crit); } .woocommerce-password-strength.good { color: var(--med); } /* Order received */ .woocommerce-order { max-width: 760px; padding-top: 32px; } .woocommerce-thankyou-order-received { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 600; color: var(--white); letter-spacing: -.03em; margin-bottom: 20px; } .woocommerce-order-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 32px; } .woocommerce-order-overview li { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); font: 500 11px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); } .woocommerce-order-overview li strong { display: block; font: 600 1rem/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--white); } .woocommerce-order h2, .woocommerce-order h3 { font-size: 1.2rem; margin: 28px 0 14px; } .woocommerce-customer-details address { font-style: normal; padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); color: var(--ink-soft); } /* Account */ .woocommerce-account .woocommerce { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; padding-top: clamp(24px, 4vw, 48px); } .woocommerce-account:not(.logged-in) .woocommerce { display: block; } .woocommerce-account .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; } .woocommerce-MyAccount-navigation { position: sticky; top: calc(var(--head-h) + 32px); } .acct-id { display: flex; align-items: center; gap: 14px; padding: 16px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); } .acct-id img { width: 48px; height: 48px; border-radius: 50%; } .acct-id div { display: grid; min-width: 0; } .acct-id strong { color: var(--white); } .acct-id span { font: 400 12px/1.4 var(--mono); color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; } .woocommerce-MyAccount-navigation ul { display: grid; gap: 2px; } .woocommerce-MyAccount-navigation a { display: block; padding: 11px 14px; border-radius: var(--r-sm); color: var(--ink-soft); font-weight: 500; } .woocommerce-MyAccount-navigation a:hover { background: var(--panel); color: var(--white); text-decoration: none; } .woocommerce-MyAccount-navigation .is-active a { background: var(--green-wash); color: var(--green); } .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--ink-dim); margin-top: 8px; } .woocommerce-MyAccount-content { min-width: 0; color: var(--ink-soft); line-height: 1.65; } .woocommerce-MyAccount-content > p:first-child { color: var(--ink); font-size: 1.05rem; } .woocommerce-MyAccount-content a:not(.button) { color: var(--green); } .woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3 { font-size: 1.2rem; margin: 20px 0 12px; } .woocommerce-MyAccount-content fieldset { border: 1px solid var(--line); border-radius: var(--r); padding: 18px; margin: 20px 0; } .woocommerce-MyAccount-content legend { padding: 0 8px; font: 600 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--green); } .woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .woocommerce-Address { padding: 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); } .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .woocommerce-Address-title h2 { font-size: 1.05rem; margin: 0; } .woocommerce-Address address { font-style: normal; } .woocommerce-orders-table__cell-order-actions .button { padding: 8px 14px; font-size: 13px; } .jhp-avatar-row { display: flex; gap: 18px; align-items: center; } .jhp-avatar-preview img { width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--line); } .jhp-avatar-field label { display: block; margin-bottom: 8px; color: var(--ink); font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: .95rem; } .jhp-avatar-field small { color: var(--ink-dim); } .jhp-avatar-remove { margin-top: 10px; font-size: .9rem; } /* Login / register */ .woocommerce-account:not(.logged-in) .woocommerce > h2 { max-width: 460px; margin: clamp(24px, 4vw, 48px) auto 0; font-size: 1.5rem; } .woocommerce-account:not(.logged-in) .woocommerce form.login, .woocommerce-account:not(.logged-in) .woocommerce form.register, .woocommerce-ResetPassword, .woocommerce form.lost_reset_password { max-width: 460px; margin: 16px auto 0; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); } .woocommerce-account:not(.logged-in) .u-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .woocommerce-account:not(.logged-in) .u-columns h2 { font-size: 1.4rem; margin-bottom: 18px; } .woocommerce-account:not(.logged-in) .u-columns form { margin: 0; max-width: none; } .woocommerce form.login .form-row:has(.woocommerce-form-login__rememberme) { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .woocommerce form.login .woocommerce-form-login__submit, .woocommerce form.register .woocommerce-form-register__submit, .woocommerce-ResetPassword .button { width: 100%; padding: 14px; } .woocommerce .lost_password { margin-top: 14px; font-size: .92rem; text-align: center; } .woocommerce .show-password-input { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; cursor: pointer; opacity: .6; } .woocommerce .password-input { position: relative; } .woocommerce .show-password-input::after { content: ""; display: block; width: 20px; height: 20px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E") center / contain no-repeat; color: var(--ink-soft); } .woocommerce .woocommerce-privacy-policy-text p { margin: 0; } /* 16. Footer, to-top, cookie ------------------------------------------------------ */ .site-foot { position: relative; margin-top: 0; border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--bg), #030504); overflow: hidden; } .foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(32px, 5vw, 72px); padding: clamp(56px, 7vw, 88px) 0 clamp(40px, 5vw, 56px); } .foot-brand p { margin-top: 18px; color: var(--ink-soft); max-width: 34ch; font-size: .96rem; } .foot-social { display: flex; gap: 6px; margin-top: 22px; } .foot-social a { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink-soft); transition: color .2s, border-color .2s, transform .3s var(--spring); } .foot-social a:hover { color: var(--green); border-color: var(--line-strong); transform: translateY(-2px); text-decoration: none; } .foot-social .ico { width: 18px; height: 18px; } .foot-col ul { display: grid; gap: 12px; margin-top: 18px; } .foot-col a { color: var(--ink-soft); font-size: .96rem; } .foot-col a:hover { color: var(--green); text-decoration: none; } .foot-meta { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 32px; padding: 22px 0 28px; border-top: 1px solid var(--line); font: 400 12.5px/1.6 var(--mono); color: var(--ink-dim); } .foot-meta a { color: var(--ink-soft); } .foot-meta a:hover { color: var(--green); } .foot-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; } .foot-host, .foot-place { text-align: right; white-space: nowrap; } .foot-mark { --fill: -8%; pointer-events: none; text-align: center; line-height: .8; margin-bottom: -.05em; padding-inline: var(--gutter); overflow: hidden; } .foot-mark span { display: inline-block; max-width: 100%; padding: .04em .1em 0 .04em; font-size: clamp(3.2rem, 11.4vw, 10.4rem); font-weight: 800; letter-spacing: -.05em; color: transparent; /* padding keeps the glyph ink inside the box: the green is a background clipped to the text, so anything outside the box is unpainted */ background-image: linear-gradient(90deg, var(--green-bright) 0%, var(--green) calc(var(--fill) - 12%), rgba(70, 240, 138, .1) calc(var(--fill) + 2%)); -webkit-background-clip: text; background-clip: text; } /* Fills left to right the first time the footer comes into view. The reveal observer adds .is-in. */ .foot-mark.is-in span { animation: markfill 1.8s cubic-bezier(.3, .6, .2, 1) .15s forwards; } @keyframes markfill { from { --fill: -8%; } to { --fill: 112%; } } .reveal-ready .foot-mark[data-reveal] { transform: none; } @supports not (background-clip: text) { .foot-mark span { color: var(--green-dim); background: none; } } .to-top { position: fixed; right: 18px; bottom: 18px; z-index: 80; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px 10px 12px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line-strong); color: var(--green); font: 500 12px/1 var(--mono); text-decoration: none !important; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s, transform .4s var(--spring), background-color .2s; } .to-top.is-on { opacity: 1; transform: none; pointer-events: auto; } body.has-cookie .to-top { opacity: 0; transform: translateY(12px); pointer-events: none; } .to-top:hover { background: var(--green); color: var(--green-ink); } .to-top .ico { width: 16px; height: 16px; } .cookie { position: fixed; left: 50%; bottom: 16px; transform: translate(-50%, 14px); z-index: 85; display: flex; align-items: center; gap: 12px 18px; width: min(720px, calc(100% - 32px)); padding: 12px 12px 12px 18px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line-strong); box-shadow: var(--shadow); font-size: .9rem; color: var(--ink-soft); line-height: 1.5; opacity: 0; transform: translateY(14px); transition: opacity .35s, transform .45s var(--spring); } .cookie.is-on { opacity: 1; transform: translate(-50%, 0); } .cookie p { flex: 1 1 auto; min-width: 0; font-size: 13.5px; line-height: 1.45; } .cookie strong { color: var(--white); } .cookie .btn { flex: none; } /* 17. 404 ---------------------------------------------------------------------------- */ .page-404 .wrap { padding: clamp(48px, 8vw, 96px) 0 clamp(64px, 10vw, 128px); } .page-404 .wrap > * { max-width: 720px; } .term-404 { margin-bottom: 36px; } .page-404 .page-title { margin-bottom: 16px; } .page-404 .btn-row { margin-top: 28px; } /* 18. Reveal system, motion, view transitions ------------------------------------------- */ .reveal-ready [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); } .reveal-ready [data-reveal].is-in { opacity: 1; transform: none; } .reveal-ready .hero [data-reveal] { opacity: 1; transform: none; } @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; } ::view-transition-old(head), ::view-transition-new(head) { animation: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .term-hero { transform: none; } .i-draw { stroke-dashoffset: 0; } .i-slide { transform: none; opacity: 1; } .statement .hl { background-size: 100% 2px; } .foot-mark { --fill: 112%; } .hero-sweep { display: none; } ::view-transition-group(*) { animation: none !important; } } /* 19. Responsive ------------------------------------------------------------------------ */ @media (max-width: 1100px) { .cards-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .cards-5 > .card { grid-column: span 2; } .cards-5 > .card:nth-child(4), .cards-5 > .card:nth-child(5) { grid-column: span 3; } .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 960px) { :root { --head-h: 60px; } .nav, .head-cta { display: none; } .nav-toggle { display: inline-grid; } .hero { min-height: 0; padding-block: clamp(40px, 8vw, 72px) 56px; } .hero-inner { grid-template-columns: minmax(0, 1fr); } .term-hero { transform: none; } .hero-demo { animation-delay: .5s; } .process-grid { grid-template-columns: minmax(0, 1fr); } .manifesto-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } .rules { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; } .rule { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px 0 8px; border-bottom: 0; } .process-panel { display: none; } .step-term { display: block; } .step { cursor: default; } .step .term { box-shadow: var(--shadow); } .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px 32px; } .foot-brand { grid-column: 1 / -1; } .foot-meta { grid-template-columns: 1fr; gap: 6px; } .foot-host, .foot-place { text-align: left; white-space: normal; } .foot-legal { margin-bottom: 6px; } .plan-grid { grid-template-columns: minmax(0, 1fr); } .quick-grid, .faq-grid, .reading-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); } .quick-cmd, .reading-aside { position: static; } .table-scroll { overflow-x: auto; contain: paint; } /* paint containment keeps mobile Chrome from widening the layout viewport to the table */ .compare-table thead th { position: static; } .reading-aside { order: -1; } .woocommerce .products { grid-template-columns: repeat(2, minmax(0, 1fr)); } .woocommerce div.product, .woocommerce form.checkout { grid-template-columns: minmax(0, 1fr); } .woocommerce div.product .woocommerce-product-gallery, .woocommerce form.checkout #order_review { position: static; } .woocommerce form.checkout { grid-template-rows: none; } .woocommerce form.checkout #order_review_heading, .woocommerce form.checkout #order_review, .woocommerce form.checkout #customer_details { grid-column: 1; grid-row: auto; } .woocommerce-account .woocommerce { grid-template-columns: minmax(0, 1fr); } .woocommerce-MyAccount-navigation { position: static; } .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 4px; } .woocommerce .cart-collaterals { grid-template-columns: minmax(0, 1fr); } .woocommerce .cart_totals { grid-column: 1; } .store-cta-panel { grid-template-columns: minmax(0, 1fr); } .post-card-link { grid-template-columns: minmax(0, 1fr); gap: 6px; } .post-card-x { grid-column: 1; } .post-card-more { grid-column: 1; grid-row: auto; margin-top: 10px; } .post-nav { grid-template-columns: minmax(0, 1fr); } .post-nav-next { text-align: left; } } @media (max-width: 640px) { html { font-size: 16px; } .cards-5, .cards-4 { grid-template-columns: minmax(0, 1fr); } .rules { grid-template-columns: minmax(0, 1fr); gap: 0; } .rule { grid-template-columns: 42px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); } .rule-ico { width: 42px; height: 42px; } .card { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; } .card-ico { width: 42px; height: 42px; } .card-title { flex: 1; margin-top: 10px; min-width: 0; } .card-text, .card-tag { flex-basis: 100%; } .card-text { margin-top: 2px; } .hero-title { font-size: clamp(2.5rem, 12vw, 3.4rem); } .hero-btns .btn { flex: 1 1 auto; } .trust { gap: 8px 16px; } .term-body { font-size: 12px; padding: 14px; } .step { grid-template-columns: 36px minmax(0, 1fr); padding: 16px 14px; } .step-ico { right: 12px; top: 14px; width: 34px; height: 34px; } .step h3 { padding-right: 44px; } .woocommerce .products { grid-template-columns: minmax(0, 1fr); } .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper, .woocommerce-Addresses, .woocommerce-account:not(.logged-in) .u-columns { grid-template-columns: minmax(0, 1fr); } .woocommerce table.shop_table_responsive thead { display: none; } .woocommerce table.shop_table_responsive tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); } .woocommerce table.shop_table_responsive td { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 0; padding: 8px 14px; } .woocommerce table.shop_table_responsive td::before { content: attr(data-title); font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); } .woocommerce table.shop_table_responsive td.product-remove::before, .woocommerce table.shop_table_responsive td.actions::before, .woocommerce table.shop_table_responsive td.product-thumbnail::before { content: none; } .woocommerce table.shop_table td.actions { display: grid; gap: 12px; } .woocommerce table.shop_table td.actions > .button { float: none; width: 100%; } .woocommerce table.shop_table .coupon { width: 100%; } .woocommerce table.shop_table .coupon input { flex: 1; width: auto; } .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 24px; padding-bottom: 36px; } .foot-brand p { max-width: none; } .foot-col ul { gap: 11px; } .foot-col a { font-size: .93rem; } .foot-meta { padding: 20px 0 24px; } .foot-meta { font-size: 12px; } .cookie { bottom: 12px; width: calc(100% - 24px); flex-wrap: wrap; padding: 12px 14px; } .cookie p { font-size: 13px; } .cookie-more { display: none; } .cookie .btn { margin-left: auto; } .to-top { right: 12px; bottom: 12px; } .to-top span { display: none; } .flagship-cta .cmd { flex-basis: 100%; } .cmd { font-size: 13px; } .cmd-copy-t { display: none; } .menu-list a { font-size: clamp(2rem, 11vw, 2.8rem); } .compare-table { min-width: 0; font-size: .84rem; } .compare-table th, .compare-table td { padding: 12px 8px; } .compare-table td { width: 23%; } .compare-table tbody th { font-size: .86rem; } .ticker { padding: 11px 0; } .ticker-label { display: none; } .hero-demo::before, .hero-demo::after { display: none; } } @media print { .site-head, .site-foot, .to-top, .cookie, .menu, .hero-bg { display: none !important; } html { background: #fff; color: #000; } } /* ---------- Cart drawer ---------- */ .cart-drawer { position: fixed; inset: 0; z-index: 400; } .cart-backdrop { position: absolute; inset: 0; background: rgba(5, 8, 7, .55); opacity: 0; transition: opacity .45s var(--ease); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .cart-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; background: var(--panel); border-left: 1px solid var(--line-strong); box-shadow: -40px 0 90px -30px rgba(0, 0, 0, .8); outline: 0; transform: translateX(104%); transition: transform .55s var(--spring); } .cart-panel::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--green) 35%, var(--green) 65%, transparent); opacity: .75; } .cart-panel::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 140px; pointer-events: none; background: linear-gradient(90deg, rgba(70, 240, 138, .06), transparent); } .cart-drawer.is-open .cart-backdrop { opacity: 1; } .cart-drawer.is-open .cart-panel { transform: none; } html.cart-open { overflow: hidden; } .cart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 16px 24px; border-bottom: 1px solid var(--line); } .cart-title { font-size: 1.1rem; letter-spacing: -.01em; } .cart-n { margin-left: 6px; font: 500 .74rem/1 var(--mono); letter-spacing: .1em; color: var(--ink-dim); text-transform: uppercase; } .cart-close { width: 40px; height: 40px; } .cart-flash { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); } .cart-flash > span { overflow: hidden; display: flex; align-items: center; gap: 10px; margin: 0 24px; padding: 0; font: 600 .82rem/1 var(--mono); letter-spacing: .06em; color: var(--green); transition: padding .4s var(--ease); } .cart-flash.is-on { grid-template-rows: 1fr; } .cart-flash.is-on > span { padding: 14px 0 2px; } .cart-flash .ico { width: 18px; height: 18px; } .cart-flash.is-on .ico path { animation: draw .6s var(--ease) both; } .cart-body { overflow: auto; overscroll-behavior: contain; padding: 4px 24px 16px; } .cart-item { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); opacity: 0; transform: translateX(18px); animation: cartin .55s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 70ms + 140ms); } @keyframes cartin { to { opacity: 1; transform: none; } } .cart-item.is-busy { opacity: .45; pointer-events: none; } .cart-thumb { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; color: var(--green); background: var(--green-wash); border: 1px solid var(--line); } .cart-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .cart-thumb .ico { width: 26px; height: 26px; } .cart-name { font-weight: 600; font-size: .98rem; line-height: 1.3; } .cart-name a { color: inherit; } .cart-meta { margin-top: 5px; font: 500 .68rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); } .cart-end { display: grid; justify-items: end; align-content: space-between; gap: 8px; } .cart-price { font: 500 .95rem/1 var(--mono); color: var(--ink); white-space: nowrap; } .cart-each { font: 400 .7rem/1 var(--mono); color: var(--ink-dim); } .qty { display: inline-flex; align-items: center; margin-top: 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(5, 8, 7, .5); } .qty button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; background: none; color: var(--ink-soft); cursor: pointer; border-radius: 50%; transition: color .2s, background .2s; } .qty button:hover { color: var(--green); background: var(--green-wash); } .qty button:disabled { color: var(--ink-dim); opacity: .5; cursor: default; background: none; } .qty button .ico { width: 14px; height: 14px; } .qty output { min-width: 28px; text-align: center; font: 500 .9rem/1 var(--mono); color: var(--ink); } .cart-remove { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; background: none; color: var(--ink-dim); font: 500 .72rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: color .2s; } .cart-remove:hover { color: var(--crit); } .cart-remove .ico { width: 13px; height: 13px; } .cart-empty { display: grid; justify-items: center; text-align: center; padding: 56px 8px 32px; } .cart-empty-ico { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; color: var(--green); background: var(--green-wash); border: 1px solid var(--line); animation: cartpop .7s var(--spring) both; } @keyframes cartpop { from { transform: scale(.6); opacity: 0; } } .cart-empty-ico .ico { width: 30px; height: 30px; } .cart-empty h3 { margin-top: 22px; font-size: 1.15rem; letter-spacing: -.01em; } .cart-empty p { margin-top: 10px; max-width: 30ch; color: var(--ink-soft); font-size: .95rem; } .cart-empty .btn-row { margin-top: 22px; justify-content: center; } .cart-err { padding: 24px 0; color: var(--ink-soft); } .cart-skel { display: grid; gap: 0; } .cart-skel i { display: block; height: 100px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, transparent 20%, rgba(70, 240, 138, .06) 50%, transparent 80%) 0 0 / 200% 100%; animation: skel 1.4s linear infinite; } @keyframes skel { to { background-position: -200% 0; } } .cart-foot { display: grid; gap: 10px; padding: 18px 24px 22px; border-top: 1px solid var(--line); background: linear-gradient(180deg, transparent, rgba(70, 240, 138, .05)); } .cart-row { display: flex; align-items: baseline; justify-content: space-between; font-size: .95rem; color: var(--ink-soft); } .cart-row strong { font: 600 1.25rem/1 var(--mono); color: var(--ink); letter-spacing: -.02em; } .cart-note { margin-bottom: 6px; font-size: .8rem; color: var(--ink-dim); } .btn-block { width: 100%; } .cart-count.is-bump { animation: bump .5s var(--spring); } @keyframes bump { 40% { transform: scale(1.45); } } .add_to_cart_button.is-busy, .single_add_to_cart_button.is-busy { opacity: .6; pointer-events: none; } @media (max-width: 480px) { .cart-panel { width: 100%; } .cart-head, .cart-body, .cart-foot { padding-inline: 18px; } .cart-flash > span { margin-inline: 18px; } } @media (prefers-reduced-motion: reduce) { .cart-panel, .cart-backdrop, .cart-flash { transition: none; } .cart-item, .cart-empty-ico { animation: none; opacity: 1; transform: none; } }