/* ============================================================ Tribble Digital — Redesign v2 · "Editorial Performance" Bright, warm, premium brand-studio / automotive-magazine. (Local preview only — not committed.) ============================================================ */ /* Self-hosted fonts (woff2 in /fonts). The critical latin weights are preloaded in each page , so the real font is ready at first paint — no swap flash, correct font on cold loads too. Each file is a variable font: one file covers the whole 400–900 weight range (plus Fraunces' opsz axis via font-optical-sizing). */ @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("fonts/fraunces-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("fonts/fraunces-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400 900; font-display: swap; src: url("fonts/fraunces-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400 900; font-display: swap; src: url("fonts/fraunces-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/figtree-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/figtree-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Figtree"; font-style: italic; font-weight: 400 800; font-display: swap; src: url("fonts/figtree-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Figtree"; font-style: italic; font-weight: 400 800; font-display: swap; src: url("fonts/figtree-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { --bone: #F4EFE7; --bone-2: #ECE5D9; --paper: #FBF8F2; --ink: #16130D; --ink-soft: #423C32; --muted: #655E51; --faint: #938A78; --line: #D3C8B6; --line-2: #BEB29C; --cobalt: #1E3CFF; --cobalt-d: #1730C8; --clay: #C5532A; --green: #1E7A52; --serif: "Fraunces", Georgia, serif; --sans: "Figtree", system-ui, sans-serif; --maxw: 1280px; --pad: clamp(24px, 5vw, 80px); --ease: cubic-bezier(.22,.68,.18,1); } *,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; } body { font-family: var(--sans); background: var(--bone); color: var(--ink); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; width: 100%; max-width: 100%; position: relative; } /* paper grain */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"); mix-blend-mode: multiply; } body > * { position: relative; z-index: 1; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; } ul { list-style: none; } ::selection { background: var(--cobalt); color: #fff; } :focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; } /* ---------- type ---------- */ .eyebrow { font-family: var(--sans); font-weight: 600; font-size: .76rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 12px; } .eyebrow .no { color: var(--cobalt); font-variant-numeric: tabular-nums; } .eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--ink); opacity: .35; } .eyebrow.bare::before { display: none; } .display { font-family: var(--serif); font-weight: 400; line-height: 1.0; letter-spacing: -.018em; font-size: clamp(2.3rem, 7.4vw, 6.6rem); font-optical-sizing: auto; overflow-wrap: break-word; } .display em { font-style: normal; font-weight: 600; color: var(--cobalt); } .h2 { font-family: var(--serif); font-weight: 400; line-height: 1.04; letter-spacing: -.015em; font-size: clamp(2rem, 4.6vw, 3.6rem); overflow-wrap: break-word; } .h2 em { font-style: normal; font-weight: 600; color: var(--cobalt); } .h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.08; letter-spacing: -.01em; } .lead { font-size: clamp(1.1rem, 1.6vw, 1.32rem); color: var(--ink-soft); line-height: 1.5; max-width: 54ch; } .muted { color: var(--muted); } /* ---------- layout ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } .section { padding-block: clamp(72px, 11vw, 160px); } .section.tight { padding-block: clamp(48px, 7vw, 96px); } .rule { height: 1px; background: var(--line); border: 0; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 12px; font-family: var(--sans); font-weight: 600; font-size: 1rem; padding: 17px 30px; border-radius: 2px; transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); border: 1px solid var(--ink); } .btn .a { transition: transform .3s var(--ease); } .btn:hover .a { transform: translateX(5px); } .btn-fill { background: var(--ink); color: var(--paper); } .btn-fill:hover { background: var(--cobalt); border-color: var(--cobalt); transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(30,60,255,.6); } .btn-ghost { background: transparent; color: var(--ink); } .btn-ghost:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); } .btn-lg { padding: 20px 38px; font-size: 1.06rem; } .btn-light { border-color: rgba(255,255,255,.4); color: var(--paper); } .btn-light:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); } /* ---------- announcement + nav ---------- */ .topbar { background: var(--ink); color: var(--paper); text-align: center; padding: 9px 16px; font-size: .82rem; letter-spacing: .01em; } .topbar b { color: #fff; } .topbar .gp { color: #8FE3B6; font-weight: 600; } .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bone) 82%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; } .nav.stuck { border-bottom-color: var(--line); background: color-mix(in srgb, var(--bone) 92%, transparent); } .nav-in { display: flex; align-items: center; justify-content: space-between; height: 78px; } .brand { display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-weight: 600; font-size: 1.3rem; letter-spacing: -.01em; } .brand img { height: 24px; } .nav-right { display: flex; align-items: center; gap: 26px; } .nav-link { font-weight: 500; font-size: .95rem; color: var(--ink-soft); } .nav-link:hover { color: var(--cobalt); } .nav .btn { padding: 12px 22px; font-size: .92rem; } /* ---------- hero ---------- */ .hero { padding-top: clamp(22px, 3.4vw, 44px); padding-bottom: clamp(28px,4vw,56px); position: relative; } .hero-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(28px,4vw,64px); align-items: end; } .hero-grid > *, .s-head > *, .guar-in > *, .compare > *, .pillar > * { min-width: 0; } .hero h1 { margin: 0; } .hero .display { font-size: clamp(2rem, 5.2vw, 4.5rem); } .hero .index { font-family: var(--sans); font-weight: 600; font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); } .hero-lead { margin-top: clamp(14px,1.6vw,20px); max-width: 46ch; } .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(18px,2vw,26px); } .hero-guar { margin-top: clamp(13px,1.4vw,18px); display: inline-flex; align-items: center; gap: 11px; font-weight: 600; font-size: .98rem; } .hero-guar .tick { width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; flex: none; } .hero-guar .tick svg { width: 14px; height: 14px; } .hero-guar b { color: var(--green); } .hero-fig { position: relative; } .hero-fig img { width: 100%; aspect-ratio: 4/5; max-height: clamp(340px, 52vh, 540px); object-fit: cover; border-radius: 3px; } .hero-fig figcaption { font-family: var(--sans); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-top: 12px; display: flex; justify-content: space-between; } /* stats — big editorial numerals */ .stats { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,3vw,48px); margin-top: clamp(28px,3.5vw,48px); padding-top: clamp(24px,3vw,36px); border-top: 1px solid var(--line); } .stat .n { font-family: var(--serif); font-weight: 500; font-size: clamp(2.8rem,5.5vw,4.6rem); line-height: .9; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .stat .n em { font-style: normal; color: var(--cobalt); } .stat .l { margin-top: 14px; color: var(--muted); font-size: .96rem; max-width: 24ch; } /* ---------- marquee strip ---------- */ .strip { background: var(--ink); color: var(--paper); overflow: hidden; padding-block: 16px; } .strip-track { display: flex; gap: 0; width: max-content; animation: scroll 36s linear infinite; } .strip:hover .strip-track { animation-play-state: paused; } .strip-item { display: inline-flex; align-items: baseline; gap: 12px; padding-inline: 30px; white-space: nowrap; } .strip-item .v { font-family: var(--serif); font-style: normal; font-weight: 600; font-size: 1.5rem; } .strip-item .r { font-size: .82rem; letter-spacing: .08em; color: #8FE3B6; } .strip-item .d { color: var(--faint); } @keyframes scroll { to { transform: translateX(-50%); } } /* ---------- section head ---------- */ .s-head { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px,4vw,56px); align-items: end; } .s-head .left { max-width: 42ch; } .s-head .eyebrow { margin-bottom: 20px; } .s-head .right { text-align: right; color: var(--muted); align-self: end; max-width: 30ch; justify-self: end; font-size: .98rem; } @media (max-width: 820px){ .s-head { grid-template-columns: 1fr; } .s-head .right { text-align: left; justify-self: start; } } /* ---------- how it works (3 steps) ---------- */ .steps { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,3vw,40px); margin-top: 52px; counter-reset: s; } .steps > * { min-width: 0; } .step { border-top: 2px solid var(--ink); padding-top: 24px; position: relative; } .step .sn { font-family: var(--serif); font-size: clamp(2.4rem,4vw,3.4rem); line-height: 1; color: var(--cobalt); font-variant-numeric: tabular-nums; } .step h3 { margin: 16px 0 10px; } .step p { color: var(--muted); font-size: 1rem; line-height: 1.55; } .step .arrow { position: absolute; top: 30px; right: -8%; color: var(--line-2); font-size: 1.6rem; } @media (max-width: 820px){ .steps { grid-template-columns: 1fr; gap: 0; } .step { border-top: 1px solid var(--line); padding-block: 26px; } .step:first-child { border-top: 2px solid var(--ink); } } /* ---------- guarantee (dark inset spread) ---------- */ .guarantee { background: var(--ink); color: var(--paper); border-radius: 4px; overflow: hidden; position: relative; } .guar-in { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(30px,5vw,64px); align-items: center; padding: clamp(40px,6vw,90px); } .guar-eyebrow { font-weight: 600; font-size: .76rem; letter-spacing: .22em; text-transform: uppercase; color: #8FE3B6; } .guar-statement { font-family: var(--serif); font-weight: 400; line-height: 1.0; letter-spacing: -.02em; font-size: clamp(2.4rem,5.4vw,4.4rem); margin-top: 22px; } .guar-statement .big { font-style: normal; color: #8FE3B6; } .guar-statement .pay { font-style: normal; } .guar-sub { margin-top: 26px; color: #C9C2B5; max-width: 52ch; line-height: 1.55; } .guar-points { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } .guar-points span { border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 9px 16px; font-size: .82rem; font-weight: 500; } .guar-points span.hl { border-color: #8FE3B6; color: #8FE3B6; } .guar-cta { margin-top: 34px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .guar-terms { margin-top: 20px; font-size: .8rem; color: #8a8474; max-width: 60ch; line-height: 1.5; } .guar-terms a { color: #C9C2B5; text-decoration: underline; text-underline-offset: 2px; } /* seal */ .seal { width: 100%; max-width: 290px; aspect-ratio: 1; margin-inline: auto; display: block; } .seal .ring-text { animation: spin 28s linear infinite; transform-origin: 100px 100px; } .seal .ring-text text { font-family: var(--sans); font-weight: 600; font-size: 9.5px; letter-spacing: 1.5px; fill: #8FE3B6; text-transform: uppercase; } .seal .r { fill: none; stroke: rgba(255,255,255,.25); } .seal .rg { fill: none; stroke: #8FE3B6; opacity: .6; } .seal .big { font-family: var(--serif); font-style: italic; font-weight: 500; fill: #fff; font-size: 44px; text-anchor: middle; } .seal .sm { font-family: var(--sans); font-weight: 600; fill: #C9C2B5; font-size: 8.5px; letter-spacing: 2px; text-anchor: middle; text-transform: uppercase; } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 880px){ .guar-in { grid-template-columns: 1fr; } .guar-fig { order: -1; } .seal { max-width: 220px; } } /* ---------- compare ---------- */ .compare { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,3vw,40px); margin-top: 56px; } .col h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .col .tag { font-family: var(--sans); font-weight: 700; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; padding: 5px 10px; border-radius: 2px; } .col.bad .tag { background: rgba(197,83,42,.12); color: var(--clay); } .col.good .tag { background: rgba(30,122,82,.12); color: var(--green); } .col li { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); color: var(--ink-soft); } .col li .m { flex: none; font-weight: 700; } .col.bad .m { color: var(--clay); } .col.good .m { color: var(--green); } .col.good li { color: var(--ink); } /* ---------- funnel ---------- */ .funnel-frame { margin-top: 50px; border: 1px solid rgba(22,19,13,.22); border-radius: 4px; overflow: hidden; background: #fff; padding: clamp(8px,1.4vw,18px); box-shadow: 0 40px 70px -34px rgba(22,19,13,.42); position: relative; } .funnel-frame::before { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%; background: var(--cobalt); } .funnel-frame img { width: 100%; border-radius: 2px; } /* ---------- pillars ---------- */ .pillars { margin-top: 30px; } .pillar { display: grid; grid-template-columns: 80px 1fr 1fr; gap: clamp(20px,4vw,56px); align-items: center; padding-block: clamp(36px,5vw,68px); border-top: 1px solid var(--line); } .pillar .pn { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--cobalt); } .pillar-txt h3 { margin-bottom: 14px; } .pillar-txt p { color: var(--muted); } .pillar-txt .cue { margin-top: 16px; font-weight: 600; color: var(--ink); } .pillar-txt .cue em { font-style: normal; color: var(--cobalt); } .pillar-fig { grid-column: 3; } .pillar-fig img { width: 100%; aspect-ratio: 5/4; object-fit: cover; border-radius: 3px; } .pillar .pn { grid-column: 1; } .pillar-txt { grid-column: 2; } .pillar:nth-child(even) .pillar-fig { grid-column: 2; } .pillar:nth-child(even) .pillar-txt { grid-column: 3; } @media (max-width: 860px){ .pillar { grid-template-columns: 1fr; gap: 20px; } .pillar .pn, .pillar-txt, .pillar-fig, .pillar:nth-child(even) .pillar-fig, .pillar:nth-child(even) .pillar-txt { grid-column: 1; } .pillar .pn { font-size: 1.2rem; } } /* ---------- results ---------- */ .results { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,2.5vw,32px); margin-top: 52px; } .rcard { border-top: 2px solid var(--ink); padding-top: 22px; } .rcard .chan { display: inline-flex; align-items: center; gap: 9px; font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); } .rcard .chan .badge { width: 27px; height: 27px; border-radius: 50%; background: #fff; border: 1px solid var(--line-2); display: grid; place-items: center; box-shadow: 0 1px 3px rgba(22,19,13,.10); } .rcard .chan .badge img { width: 16px; height: 16px; object-fit: contain; } .rcard .rev { font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem,4vw,3.2rem); line-height: 1; margin-top: 12px; font-variant-numeric: tabular-nums; } .rcard .roas { color: var(--cobalt); font-style: normal; font-weight: 600; white-space: nowrap; } .rcard .meta { margin-top: 10px; color: var(--muted); font-size: .92rem; } .rcard .shot { margin-top: 18px; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; background:#fff; } .rcard .shot img { width: 100%; aspect-ratio: 16/10; object-fit: cover; } .results-more { margin-top: 36px; font-family: var(--serif); font-style: normal; font-size: 1.3rem; color: var(--muted); text-align: center; } @media (max-width: 820px){ .results { grid-template-columns: 1fr; } } /* ---------- booking ---------- */ .book-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,3vw,36px); margin-top: 36px; } .book-steps div { color: var(--ink-soft); font-size: .98rem; line-height: 1.5; } .book-steps span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--ink); font-family: var(--serif); font-style: italic; font-size: 1rem; margin-bottom: 10px; } .book-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; } .book-trust span { border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 15px; font-size: .8rem; font-weight: 500; color: var(--muted); } .book-trust span.hl { border-color: var(--green); color: var(--green); } @media (max-width: 720px){ .book-steps { grid-template-columns: 1fr; gap: 14px; max-width: 340px; margin-inline: auto; } } /* ---------- pull quote (vision/mission) ---------- */ .quote { text-align: center; max-width: 800px; margin-inline: auto; } .quote .tabs { display: inline-flex; gap: 6px; margin-bottom: 34px; border: 1px solid var(--line-2); border-radius: 999px; padding: 5px; } .quote .tabs button { padding: 9px 20px; border-radius: 999px; font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .quote .tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); } .quote blockquote { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem,3.6vw,2.7rem); line-height: 1.16; letter-spacing: -.015em; max-width: 18ch; margin-inline: auto; } .quote blockquote em { font-style: normal; color: var(--cobalt); } .quote blockquote[hidden] { display: none; } /* ---------- triad ---------- */ .triad { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,3vw,48px); margin-top: 52px; } .tri { padding-top: 26px; border-top: 1px solid var(--line); } .tri .ic { width: 40px; height: 40px; color: var(--cobalt); margin-bottom: 20px; } .tri .ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .tri .n { font-family: var(--serif); font-style: italic; color: var(--faint); font-size: 1.1rem; } .tri h3 { margin: 6px 0 12px; } .tri p { color: var(--muted); } @media (max-width: 820px){ .triad { grid-template-columns: 1fr; } } /* ---------- full-bleed band ---------- */ .bleed { position: relative; min-height: clamp(420px,60vw,640px); display: grid; align-items: center; overflow: hidden; } .bleed img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .bleed::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,8,6,.78), rgba(10,8,6,.30) 70%, transparent); } .bleed .wrap { position: relative; z-index: 2; color: var(--paper); } .bleed blockquote { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem,5vw,3.8rem); line-height: 1.05; letter-spacing: -.015em; max-width: 18ch; text-shadow: 0 2px 24px rgba(8,6,4,.55); } .bleed blockquote em { font-style: normal; color: #fff; } .bleed cite { display: block; margin-top: 24px; font-family: var(--sans); font-style: normal; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.7); } /* ---------- final CTA ---------- */ .final { text-align: center; } .final .display { margin: 22px 0 0; } .final .btn { margin-top: 38px; } .final .fine { margin-top: 18px; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } /* ---------- footer ---------- */ .footer { border-top: 1px solid var(--line); padding-block: 56px 40px; } .footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: center; } .footer-social { display: flex; gap: 10px; } .footer-social a { width: 42px; height: 42px; border: 1px solid var(--line-2); border-radius: 50%; display: grid; place-items: center; transition: .25s var(--ease); } .footer-social a:hover { background: var(--ink); border-color: var(--ink); transform: translateY(-2px); } .footer-social img { width: 18px; height: 18px; filter: invert(1) brightness(.12); } .footer-social a:hover img { filter: none; } .footer-bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--faint); font-size: .82rem; } .footer-links { display: flex; gap: 20px; } .footer-links a:hover { color: var(--ink); } /* ---------- legal pages ---------- */ .legal { padding-top: clamp(40px,6vw,70px); padding-bottom: clamp(60px,8vw,110px); } .legal .wrap { max-width: 820px; } .legal-head { border-bottom: 1px solid var(--line); padding-bottom: 30px; margin-bottom: 40px; } .legal-head h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem,6vw,4.4rem); letter-spacing: -.02em; line-height: 1; } .legal-head .meta { margin-top: 16px; color: var(--muted); font-size: .9rem; } .legal-head .meta a { color: var(--cobalt); } .legal-body h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.4rem,2.6vw,1.9rem); letter-spacing: -.01em; margin: 44px 0 14px; scroll-margin-top: 100px; } .legal-body h2:first-child { margin-top: 0; } .legal-body p { color: var(--ink-soft); margin-bottom: 14px; line-height: 1.7; } .legal-body ul { margin: 0 0 18px; } .legal-body li { color: var(--ink-soft); margin-bottom: 9px; padding-left: 22px; position: relative; line-height: 1.6; } .legal-body li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 8px; height: 1px; background: var(--cobalt); } .legal-body a { color: var(--cobalt); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; } .legal-body strong { color: var(--ink); font-weight: 600; } .legal-body .addr { font-style: normal; color: var(--ink); line-height: 1.7; } .legal-guarantee { border: 1px solid var(--green); background: rgba(30,122,82,.05); border-radius: 4px; padding: clamp(22px,3.4vw,36px); margin: 36px 0; } .legal-guarantee h2 { margin-top: 0; color: var(--green); } /* ---------- blog ---------- */ .blog-hero, .kb-hero { padding-top: clamp(42px,7vw,86px); padding-bottom: clamp(44px,7vw,82px); border-bottom: 1px solid var(--line); } .blog-hero .lead, .kb-hero .lead { margin-top: 24px; } .blog-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; color: var(--muted); font-size: .9rem; } .blog-meta span { border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 13px; background: color-mix(in srgb, var(--paper) 55%, transparent); } .post-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(22px,3vw,38px); margin-top: 46px; } .post-card { border-top: 2px solid var(--ink); padding-top: 22px; display: grid; gap: 14px; } .post-card .kicker, .article-kicker { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cobalt); } .post-card h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.45rem,2.8vw,2.1rem); line-height: 1.08; letter-spacing: -.01em; } .post-card p { color: var(--muted); line-height: 1.58; } .post-card a { justify-self: start; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--ink); } .article { padding-block: clamp(44px,7vw,90px); } .article .wrap { max-width: 900px; } .article-head { border-bottom: 1px solid var(--line); padding-bottom: 34px; margin-bottom: 42px; } .article-head .display { max-width: 11ch; margin-top: 18px; } .article-head .lead { margin-top: 24px; } .article-body { max-width: 760px; } .article-body h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.7rem,3vw,2.35rem); line-height: 1.08; letter-spacing: -.01em; margin: 48px 0 16px; } .article-body h2:first-child { margin-top: 0; } .article-body h3 { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; line-height: 1.14; margin: 30px 0 10px; } .article-body p { color: var(--ink-soft); margin-bottom: 17px; line-height: 1.72; } .article-body ul { list-style: none; margin: 0 0 22px; } .article-body li { color: var(--ink-soft); margin-bottom: 10px; padding-left: 22px; position: relative; line-height: 1.62; } .article-body li::before { content: ""; position: absolute; left: 1px; top: 14px; width: 9px; height: 1px; background: var(--cobalt); } .article-callout { margin: 38px 0; padding: clamp(24px,4vw,36px); border: 1px solid var(--green); background: rgba(30,122,82,.05); border-radius: 4px; } .article-callout p { margin-bottom: 0; color: var(--ink); font-weight: 600; } .article-nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 46px; padding-top: 28px; border-top: 1px solid var(--line); } .article-nav a { border: 1px solid var(--line-2); border-radius: 999px; padding: 9px 15px; font-size: .84rem; font-weight: 600; color: var(--muted); } .article-nav a:hover { color: var(--ink); border-color: var(--ink); } .kb-hero-grid { display: grid; grid-template-columns: 1fr minmax(280px, 430px); gap: clamp(28px,5vw,70px); align-items: end; } .kb-search { border: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 72%, transparent); padding: clamp(18px,2.4vw,26px); border-radius: 4px; box-shadow: 0 24px 50px -36px rgba(22,19,13,.45); } .kb-search label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .kb-search-box { display: grid; grid-template-columns: 32px 1fr; align-items: center; border: 1px solid var(--line-2); background: #fff; border-radius: 4px; overflow: hidden; } .kb-search-box span { display: grid; place-items: center; height: 46px; color: var(--cobalt); font-weight: 800; border-right: 1px solid var(--line); } .kb-search input { width: 100%; min-width: 0; height: 46px; border: 0; background: transparent; padding: 0 14px; font: inherit; color: var(--ink); outline: none; } .kb-search p { margin-top: 12px; font-size: .86rem; color: var(--muted); } .kb-shell { display: grid; grid-template-columns: 230px 1fr; gap: clamp(30px,5vw,70px); padding-block: clamp(44px,7vw,96px); align-items: start; } .kb-side { position: sticky; top: 104px; border-right: 1px solid var(--line); padding-right: 22px; display: grid; gap: 6px; } .kb-side-title { font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; } .kb-side a { display: block; padding: 8px 0; color: var(--muted); font-size: .94rem; font-weight: 600; } .kb-side a:hover { color: var(--cobalt); } .kb-main { min-width: 0; } .kb-feature { display: grid; grid-template-columns: 1fr auto; gap: clamp(24px,4vw,48px); align-items: end; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); border-radius: 4px; padding: clamp(28px,4.5vw,48px); margin-bottom: 44px; } .kb-feature h2 { font-family: var(--serif); font-weight: 500; line-height: 1.05; letter-spacing: -.01em; font-size: clamp(1.9rem,4vw,3rem); margin-top: 12px; max-width: 13ch; } .kb-feature p { color: #C9C2B5; margin-top: 16px; max-width: 56ch; } .kb-feature .kicker { color: #8FE3B6; } .kb-feature a { color: var(--paper); border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 12px 18px; font-weight: 700; white-space: nowrap; } .kb-feature a:hover { background: var(--paper); color: var(--ink); } .kb-group { scroll-margin-top: 110px; padding-top: 22px; border-top: 1px solid var(--line); margin-top: 34px; } .kb-group[hidden] { display: none; } .kb-group-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; } .kb-group-head span { font-family: var(--serif); font-style: italic; color: var(--cobalt); } .kb-group-head h2 { font-family: var(--serif); font-size: clamp(1.35rem,2.4vw,2rem); font-weight: 500; letter-spacing: -.01em; } .kb-list { display: grid; gap: 10px; } .kb-row { display: grid; grid-template-columns: 138px 1fr; gap: 8px clamp(16px,3vw,30px); align-items: baseline; border: 1px solid transparent; border-radius: 4px; padding: 16px 18px; transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); } .kb-row:hover { background: color-mix(in srgb, var(--paper) 70%, transparent); border-color: var(--line); transform: translateX(3px); } .kb-row[hidden] { display: none; } .kb-row span { color: var(--cobalt); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .kb-row strong { color: var(--ink); font-size: 1.02rem; line-height: 1.25; } .kb-row em { grid-column: 2; color: var(--muted); font-style: normal; font-size: .94rem; line-height: 1.45; } .kb-empty { border: 1px solid var(--line); background: var(--paper); border-radius: 4px; padding: 24px; color: var(--muted); font-weight: 600; } @media (max-width: 900px){ .kb-hero-grid, .kb-shell { grid-template-columns: 1fr; } .kb-side { position: static; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 18px; grid-template-columns: repeat(2,minmax(0,1fr)); } .kb-side-title { grid-column: 1 / -1; } .kb-feature { grid-template-columns: 1fr; } .kb-feature a { justify-self: start; } } @media (max-width: 760px){ .post-grid { grid-template-columns: 1fr; } .article-head .display { max-width: 100%; } .kb-row { grid-template-columns: 1fr; } .kb-row em { grid-column: 1; } } @media (max-width: 520px){ .kb-side { grid-template-columns: 1fr; } } /* ---------- sticky mobile cta ---------- */ .mcta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none; padding: 12px 16px calc(12px + env(safe-area-inset-bottom,0px)); background: var(--ink); transform: translateY(130%); transition: transform .4s var(--ease); } .mcta.show { transform: none; } .mcta .btn { width: 100%; justify-content: center; background: var(--paper); color: var(--ink); border-color: var(--paper); } .mcta .gp { display: block; text-align: center; margin-top: 7px; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #8FE3B6; } /* ---------- reveal ---------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal.in { opacity: 1; transform: none; } [data-d="1"]{transition-delay:.08s}[data-d="2"]{transition-delay:.16s}[data-d="3"]{transition-delay:.24s}[data-d="4"]{transition-delay:.32s} /* ---------- responsive ---------- */ @media (max-width: 920px){ .hero-grid { grid-template-columns: 1fr; } .hero-fig { display: none; } .stats { grid-template-columns: 1fr; gap: 28px; } .stat { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; } .stat .l { text-align: right; margin-top: 0; } } @media (max-width: 720px){ .compare { grid-template-columns: 1fr; } .mcta { display: block; } body { padding-bottom: 84px; } .nav-link { display: none; } } @media (max-width: 600px){ .display { font-size: clamp(1.85rem, 8.4vw, 2.55rem); line-height: 1.06; } .h2 { font-size: clamp(1.7rem, 7vw, 2.3rem); } .hero h1 { hyphens: none; } } @media (prefers-reduced-motion: reduce){ *,*::before,*::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } }