/* =========================================================== WolfTrack TR The marketing surface. Depends on css/tokens.css for every colour. ====================================================================== */ /* Kept here, not in base.css: base.css is switched off while the journal is mounted, and an unstyled skip link would drop into view at the top of the app. landing.css stays attached throughout. */ /* Skip the whole navigation with one keystroke. Hidden ABOVE the page, not off to the left: in a right-to-left document (the journal in Arabic, Hebrew, Persian or Urdu sets dir="rtl" on ) whatever overflows on the left is scrollable, and left:-9999px turned /demo into a page nine thousand pixels wide. Overflow above the top is never scrollable, in either direction. */ .skip{position:absolute; top:0; inset-inline-start:0; z-index:100; transform:translateY(-120%); background:var(--wine); color:#fff; padding:12px 20px; border-end-end-radius:var(--r-sm)} .skip:focus{transform:none; text-decoration:none; color:#fff} /* =================================================================== nav */ .nav{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--rule); } .nav .wrap{display:flex; align-items:center; gap:24px; height:68px} .nav-links{display:flex; gap:4px; margin-left:auto} .nav-links a{ padding:9px 14px; border-radius:var(--r-sm); color:var(--dim); font-size:14.5px; font-weight:500; white-space:nowrap; } .nav-links a:hover{color:var(--ink); background:var(--panel2); text-decoration:none} .nav-cta{display:flex; align-items:center; gap:10px} .nav-toggle{display:none; margin-left:auto; padding:9px; border:1px solid var(--rule); border-radius:var(--r-sm); background:var(--paper); cursor:pointer} .nav-toggle span{display:block; width:18px; height:2px; background:var(--ink); border-radius:2px} .nav-toggle span+span{margin-top:4px} /* ================================================================== hero */ .hero{position:relative; padding:76px 0 72px; overflow:hidden} /* a single soft wash of the brand behind the fold — no image, no request */ .hero::before{ content:""; position:absolute; inset:-30% -20% auto -20%; height:640px; z-index:-1; background: radial-gradient(52% 58% at 22% 18%, rgba(233,169,186,.42) 0%, rgba(233,169,186,0) 70%), radial-gradient(46% 52% at 82% 6%, rgba(108,43,123,.16) 0%, rgba(108,43,123,0) 72%); } .hero-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center} .lockup{display:flex; align-items:center; gap:14px; margin-bottom:26px} .lockup img{width:60px; height:60px} .lockup .word{ font:600 30px/1 var(--sans); letter-spacing:.085em; text-transform:uppercase; color:var(--ink); } .lockup .word b{ font-weight:600; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; } .hero h1{font-size:clamp(34px,4.6vw,54px); letter-spacing:-.028em; margin-bottom:20px} .hero h1 em{ font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; } /* The three beats. Set in the mono face and spaced out so they read as a stamp rather than as a sentence — and "Track it" takes the brand colour, because it is the product's own name doing the work. */ .beats{ font:600 14px/1.5 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:22px; } .beats b{color:var(--wine); font-weight:600} .hero .lede{font-size:19px; max-width:34em} .hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px} .hero-note{ margin-top:20px; font-size:13.5px; color:var(--dim2); display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .hero-note b{color:var(--dim); font-weight:600} /* ======================================================= the product shot A real capture of /demo inside a browser frame of our own. The frame is markup so it stays crisp and picks up the brand; only the screen itself is a bitmap. Re-run src/capture-shot.ps1 after any visual change to the journal, or the site starts advertising a version that no longer exists. */ .shot{ display:block; position:relative; color:inherit; text-decoration:none; background:var(--paper); border:1px solid var(--rule); border-radius:var(--r); box-shadow:var(--shadow-lg); overflow:hidden; font-size:13px; transition:box-shadow .2s, transform .2s, border-color .2s; } a.shot:hover{ text-decoration:none; color:inherit; transform:translateY(-3px); border-color:var(--wine); box-shadow:0 2px 6px rgba(43,17,25,.08),0 30px 70px -28px rgba(43,17,25,.4); } /* the invitation only appears on hover, so the still-life stays a still-life */ .shot-open{ position:absolute; inset:auto 0 0 0; z-index:2; padding:13px 16px; text-align:center; font:600 13.5px/1 var(--sans); color:#fff; background:linear-gradient(to top, rgba(43,17,25,.92), rgba(43,17,25,.72)); opacity:0; transform:translateY(6px); transition:opacity .2s, transform .2s; } a.shot:hover .shot-open, a.shot:focus-visible .shot-open{opacity:1; transform:none} .shot-bar{ display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--rule); background:var(--panel2); } .shot-bar i{width:9px; height:9px; border-radius:50%; background:var(--rule); display:block} .shot-bar i:first-child{background:var(--rose)} .shot-bar .u{ margin-left:10px; font:400 11.5px/1 var(--mono); color:var(--dim2); letter-spacing:.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* The capture is taller than it is wide once the whole dashboard is in it. Rather than shrink it until nothing is readable, the frame crops the bottom: the header, the cumulative result and the curve are the part that has to land, and the fade says there is more below without pretending the image ends there. */ .shot-img{ display:block; width:100%; height:auto; border:0; max-height:min(62vh,540px); object-fit:cover; object-position:top center; } .shot::after{ content:""; position:absolute; inset:auto 0 0 0; height:86px; pointer-events:none; background:linear-gradient(to top, var(--paper) 8%, rgba(255,255,255,0) 100%); } a.shot:hover::after,a.shot:focus-visible::after{opacity:0; transition:opacity .2s} /* ============================================================== demo bar Lives on /demo, above the journal. Its class names are deliberately its own: on that route journal.css is attached and owns .btn, .card and .row, so anything generic here would be repainted by the app's design system. z-index stays below the journal's modals (which sit at 60+) so a dialog can still cover it. */ .demo-bar{ position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:11px 20px; background:var(--grad); color:#fff; font-size:14px; line-height:1.45; box-shadow:0 1px 0 rgba(0,0,0,.08); } .demo-bar[hidden]{display:none} .demo-tag{ flex:0 0 auto; font:600 10.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; background:rgba(255,255,255,.18); padding:6px 10px; border-radius:99px; } .demo-text{flex:1 1 320px; min-width:0} .demo-text b{font-weight:600} .demo-clock{ flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:99px; background:rgba(255,255,255,.16); font:400 13px/1 var(--mono); letter-spacing:.02em; } .demo-clock b{font-weight:600; font-variant-numeric:tabular-nums} /* the last minute earns a heartbeat, and nothing before it does */ .demo-clock.urgent{background:rgba(255,255,255,.3); animation:demoPulse 1s ease-in-out infinite} @keyframes demoPulse{0%,100%{opacity:1} 50%{opacity:.55}} /* ------------------------------------------------- when the clock runs out */ .demo-over{min-height:72vh; display:grid; place-items:center; padding:60px 24px; text-align:center} .demo-over-in{max-width:480px} .demo-over img{width:72px; height:72px; margin:0 auto 24px} .demo-over h1{font-size:28px; margin-bottom:14px} .demo-over p{color:var(--dim); font-size:16px; line-height:1.65; margin-bottom:30px} .demo-over .btn-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap} .demo-bar .demo-reset, .demo-bar .demo-cta, .demo-bar .demo-back{ flex:0 0 auto; cursor:pointer; text-decoration:none; white-space:nowrap; font:600 13.5px/1 var(--sans); padding:9px 15px; border-radius:var(--r-sm); border:1px solid rgba(255,255,255,.34); background:transparent; color:#fff; transition:background-color .16s,border-color .16s; } .demo-bar .demo-reset:hover, .demo-bar .demo-back:hover{background:rgba(255,255,255,.14); border-color:#fff; text-decoration:none; color:#fff} .demo-bar .demo-cta{background:#fff; color:var(--wine-deep); border-color:#fff} .demo-bar .demo-cta:hover{background:var(--rose); color:var(--plum); text-decoration:none} @media (max-width:760px){ /* On a phone the bar wraps to three rows — 150px of a 812px screen. Pinned there it would cost a fifth of the journal for the whole visit, so it scrolls away instead and comes back at the top. */ .demo-bar{position:static; padding:10px 16px; gap:10px} .demo-text{flex-basis:100%; font-size:13px} .demo-bar .demo-reset{display:none} } /* =============================================================== section */ .sec{padding:84px 0} .sec.tint{background:var(--paper); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)} .sec-head{max-width:36em; margin-bottom:44px} .sec-head.mid{margin-left:auto; margin-right:auto; text-align:center} .sec-head h2{font-size:clamp(26px,3.1vw,36px); margin-bottom:16px} .sec-head p{font-size:17.5px; color:var(--dim); line-height:1.65} /* ================================================================= cards */ .cards{display:grid; gap:18px} .cards.c3{grid-template-columns:repeat(3,1fr)} .cards.c4{grid-template-columns:repeat(4,1fr)} .tile{ background:var(--paper); border:1px solid var(--rule); border-radius:var(--r); padding:24px 22px; transition:border-color .18s, box-shadow .18s, transform .18s; } .tile:hover{border-color:var(--rose); box-shadow:var(--shadow); transform:translateY(-2px)} .tile h3{font-size:16.5px; margin-bottom:9px} .tile p{font-size:14.5px; color:var(--dim); line-height:1.62} .tile .ic{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--rose-wash); color:var(--wine); margin-bottom:16px; } .tile .ic svg{width:19px; height:19px} /* ======================================================= the pip-value bit The one feature nothing else does, so it gets a section to itself. */ .split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center} .chain{ background:var(--paper); border:1px solid var(--rule); border-radius:var(--r); padding:26px 24px; box-shadow:var(--shadow); } /* The whole point of the panel: this trade is being typed in months late. */ .chain-late{ display:inline-block; margin-bottom:8px; padding:6px 12px; border-radius:99px; background:var(--rose-wash); border:1px solid var(--rose); color:var(--wine); font:600 10.5px/1 var(--mono); letter-spacing:.11em; text-transform:uppercase; } .chain-step{display:flex; gap:14px; align-items:flex-start; padding:13px 0} .chain-step+.chain-step{border-top:1px dashed var(--rule)} .chain-step .n{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--grad); color:#fff; font:600 12px/1 var(--mono); } .chain-step .pair{font:600 14px/1.4 var(--mono); letter-spacing:.02em} .chain-step .said{font-size:13.5px; color:var(--dim); margin-top:3px; line-height:1.55} .chain-out{ margin-top:18px; padding:16px 18px; border-radius:var(--r-sm); background:var(--rose-wash); border:1px solid var(--rose); } .chain-out u{display:block; text-decoration:none; font:600 10px/1 var(--mono); letter-spacing:.11em; text-transform:uppercase; color:var(--wine); margin-bottom:7px} .chain-out b{font:600 21px/1 var(--sans)} .chain-out span{font-size:13px; color:var(--dim); display:block; margin-top:6px} /* ================================================================= steps */ .steps{counter-reset:s; display:grid; grid-template-columns:repeat(3,1fr); gap:34px} .step{position:relative; padding-top:52px} .step::before{ counter-increment:s; content:counter(s); position:absolute; top:0; left:0; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--grad); color:#fff; font:600 16px/1 var(--mono); } .step h3{font-size:17px; margin-bottom:9px} .step p{font-size:14.5px; color:var(--dim); line-height:1.62} /* =============================================================== pricing */ .plans{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; max-width:820px; margin:0 auto} .plan{ background:var(--paper); border:1px solid var(--rule); border-radius:var(--r); padding:30px 26px; display:flex; flex-direction:column; position:relative; } .plan.featured{border-color:var(--wine); box-shadow:var(--shadow-lg)} .plan.featured::before{ content:attr(data-badge); position:absolute; top:-11px; left:26px; background:var(--grad); color:#fff; padding:5px 12px; border-radius:99px; font:600 10.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; } .plan h3{font-size:15px; letter-spacing:.09em; text-transform:uppercase; font-family:var(--mono); color:var(--dim); margin-bottom:14px} .plan .cost{display:flex; align-items:baseline; gap:7px; margin-bottom:12px} .plan .cost b{font:600 42px/1 var(--sans); letter-spacing:-.03em} .plan .cost span{font-size:14px; color:var(--dim2)} /* the free month, stated under the price rather than dressed up as it */ .plan .trial{ margin:-4px 0 14px; padding:9px 12px; border-radius:var(--r-sm); background:var(--rose-wash); border:1px solid var(--rose); font-size:13px; line-height:1.5; color:var(--dim); } .plan .trial b{color:var(--wine-deep); font-weight:600} .plan .blurb{font-size:14.5px; color:var(--dim); line-height:1.6; margin-bottom:22px} .plan ul{list-style:none; margin:0 0 26px; padding:0; display:grid; gap:13px} .plan li{display:flex; gap:10px; font-size:14.5px; line-height:1.5} .plan li svg{flex:0 0 auto; width:17px; height:17px; margin-top:2px; color:var(--wine)} /* the second line of a feature that needs qualifying — a reset date, a caveat, the eight panels spelled out. Small, dim, never a footnote mark. */ .plan li .sub{display:block; margin-top:4px; font-size:12.5px; line-height:1.5; color:var(--dim2)} .plan .btn{margin-top:auto} .plan-note{text-align:center; margin-top:26px; font-size:13.5px; color:var(--dim2)} /* =================================================================== faq */ .faq{max-width:760px; margin:0 auto; border-top:1px solid var(--rule)} .faq details{border-bottom:1px solid var(--rule)} .faq summary{ padding:20px 40px 20px 0; cursor:pointer; font-weight:600; font-size:16px; list-style:none; position:relative; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:""; position:absolute; right:6px; top:27px; width:9px; height:9px; border-right:2px solid var(--wine); border-bottom:2px solid var(--wine); transform:rotate(45deg); transition:transform .18s; } .faq details[open] summary::after{transform:rotate(-135deg)} .faq p{padding:0 0 22px; color:var(--dim); font-size:15px; line-height:1.68; max-width:62ch} /* ================================================================== band */ .band{padding:78px 0; text-align:center} .band h2{font-size:clamp(26px,3.2vw,38px); margin-bottom:16px; color:#fff} .band .lede{max-width:44ch; margin:0 auto 32px} .band .btn-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap} /* ================================================================ footer */ .foot{background:var(--plum); color:rgba(255,255,255,.66); padding:56px 0 34px; font-size:14px} .foot a{color:rgba(255,255,255,.66)} .foot a:hover{color:#fff} .foot-top{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px; margin-bottom:44px} .foot h4{font:600 10.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.42); margin-bottom:16px} .foot ul{list-style:none; margin:0; padding:0; display:grid; gap:11px} .foot .blurb{margin-top:16px; max-width:34ch; line-height:1.65; color:rgba(255,255,255,.55)} /* ----------------------------------------------------------------- motto The flame is drawn, not typed: an emoji is painted by the operating system's own colour font and cannot be tinted, so 🔥 would have arrived orange on every machine. As a path it takes the brand wine. */ .motto{ display:inline-flex; align-items:center; gap:7px; margin-top:22px; font:600 11px/1 var(--mono); letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.5); } .motto .flame{width:14px; height:14px; flex:0 0 auto; color:var(--wine-bright)} .motto .flame path{transform-origin:12px 20px; animation:flicker 2.6s ease-in-out infinite} @keyframes flicker{0%,100%{transform:scaleY(1)} 42%{transform:scaleY(1.09) scaleX(.96)}} .foot-bot{ border-top:1px solid rgba(255,255,255,.12); padding-top:24px; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:13px; color:rgba(255,255,255,.45); } /* ============================================================ responsive Four moves, each triggered by the thing that actually breaks first rather than by a device name: the shot needs room, the four-up grid runs out of line length, the navigation runs out of width, then the phone. */ /* A real screenshot needs pixels. On a wide desktop the hero is allowed past the 1120 container so the dashboard is read rather than guessed at. */ @media (min-width:1180px){ .hero .hero-grid{max-width:1240px} .hero-grid{grid-template-columns:1fr 1.14fr} } @media (max-width:980px){ .hero-grid,.split{grid-template-columns:1fr; gap:44px} .cards.c4{grid-template-columns:repeat(2,1fr)} .foot-top{grid-template-columns:1fr 1fr} /* full width now, so the crop would swallow half the dashboard */ .shot-img{max-height:420px} } /* Three tiles across stop working before the phone does: below this the line length inside each one drops under about 28 characters. */ @media (max-width:860px){ .cards.c3{grid-template-columns:repeat(2,1fr)} .steps{grid-template-columns:1fr 1fr; gap:28px} } /* The navigation collapses well before the rest of the page does: four links plus two buttons stop fitting on one line around 900px, and "How it works" wrapping onto three lines looks broken long before anything overflows. */ @media (max-width:900px){ .nav-links{ display:none; position:absolute; top:68px; left:0; right:0; flex-direction:column; background:var(--paper); border-bottom:1px solid var(--rule); padding:10px 16px 16px; gap:2px; box-shadow:var(--shadow); } .nav-links.open{display:flex} .nav-links a{padding:12px 10px} .nav-toggle{display:block} .nav-cta{margin-left:14px} } @media (max-width:760px){ /* At 375 the header has to carry a wordmark, a menu button and a call to action. Full-size they add up to 422px, so the gutter, the wordmark and the button all come down a notch rather than one of them being dropped. */ .wrap{padding:0 16px} .nav .wrap{gap:12px} .nav .nav-cta .btn.plain{display:none} .nav-cta{margin-left:auto} .nav-cta .btn{padding:10px 15px; font-size:14px} .nav-toggle{padding:8px; margin-left:auto} .nav-toggle+.nav-links+.nav-cta{margin-left:0} .brand img{width:28px; height:28px} .brand .word{font-size:16.5px; letter-spacing:.04em} .sec{padding:62px 0} .hero{padding:52px 0 56px} .hero-grid,.split{gap:34px} .cards.c3,.cards.c4,.steps,.plans{grid-template-columns:1fr} .foot-top{grid-template-columns:1fr; gap:30px} .lockup img{width:46px; height:46px} .lockup .word{font-size:23px} .shot-img{max-height:300px} .shot-bar{padding:9px 12px} .shot-bar .u{font-size:10.5px} .sec-head{margin-bottom:34px} .sec-head p,.hero .lede{font-size:16.5px} .chain{padding:20px 18px} .plan{padding:26px 22px} .plan .cost b{font-size:36px} .faq summary{font-size:15.5px; padding-right:34px} .faq p{font-size:14.5px} /* the hero note reads as two half-sentences when it wraps mid-phrase */ .hero-note{display:block} .hero-note b{display:block; margin-bottom:2px} } /* On a phone two calls to action of different widths read as an accident. Below this they stack and share one edge. */ @media (max-width:540px){ .hero-cta{flex-direction:column; align-items:stretch} .hero-cta .btn,.band .btn-row .btn{width:100%} .band .btn-row{flex-direction:column} }