/* =================================================================== travee+ landing — DESIGN A, "Daylight". White paper, one cyan, ink type. Everything is scoped to .tv so the signed-in app's style.css is untouched: this file must never change how /app looks. `.hidden` stays !important in style.css, which is what keeps the login / register / OTP toggling working underneath. A second treatment of the same content lives at /landing-b. =================================================================== */ html { scroll-behavior: smooth; scroll-padding-top: 92px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } } /* The palette, separated from the page styling below it. * * .tv-nav and .tv-foot carry it too because the masthead and the footer are * shared with the app shell's logged-out branch (partials/masthead.php, * partials/footer.php), whose is not .tv — without this every colour in * them resolved to nothing there. Only the variables are shared: the * background, text colour and font below stay on .tv, so including the chrome * on a catalogue page does not restyle the catalogue. */ .tv, .tv-nav, .tv-foot { --cyan: #25A8CB; --cyan-d: #17819F; --cyan-w: #E8F6FA; --ink: #0B1015; --ink-2: #4C5860; --ink-3: #7B888F; --paper: #FFFFFF; --paper-2: #F6F9FA; --line: #E3EAEE; --line-2: #D3DEE3; } /* The chrome keeps the public site's face on a page set in the app's Poppins. */ .tv-nav, .tv-foot { font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif; } .tv { background: var(--paper); color: var(--ink); font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif; overflow-x: hidden; -webkit-font-smoothing: antialiased; } .tv ::selection { background: var(--cyan); color: #fff; } /* Border-box and no default margin, once, for everything this sheet styles. * Every width in here assumes it — .tv-btn { width: 100% } carries its own * padding, so under content-box a full-width button on a phone is 44px wider * than the gutter it is supposed to sit inside. The front door used to inherit * the reset from style.css; it no longer loads it, and the other public pages * never loaded it at all. Scoped to the public chrome, so /app is untouched * (style.css resets it there already, to the same value). */ .tv, .tv *, .tv *::before, .tv *::after, .tv-nav, .tv-nav *, .tv-foot, .tv-foot * { box-sizing: border-box; } body.tv { margin: 0; } /* A fixed gutter rather than a percentage: 92vw on a 375px phone leaves 15px of margin, which reads as text jammed against the bezel. */ .tv-wrap { width: min(1180px, 100% - 44px); margin-inline: auto; } @media (max-width: 480px) { .tv-wrap { width: calc(100% - 36px); } } .tv-serif { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; } /* ---- the loading screen ---------------------------------------- */ /* Removed on window.load, and unconditionally after 2.2s. A splash that can outlive a slow font request is a splash that locks people out. */ #boot { display: none } .js #boot { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: #fff; transition: opacity .55s ease, visibility .55s; } #boot.gone { opacity: 0; visibility: hidden; pointer-events: none; } .boot-in { display: grid; justify-items: center; gap: 26px; } .boot-pin { width: 76px; height: 76px; animation: boot-drop .9s cubic-bezier(.2,.9,.25,1) both; } @keyframes boot-drop { 0% { transform: translateY(-26px) scale(.86); opacity: 0 } 60% { transform: translateY(4px) scale(1.02); opacity: 1 } 100% { transform: none; opacity: 1 } } /* The ground ripple lands as the pin does — it is what makes it read as a pin dropping onto a map rather than a logo fading in. */ .boot-ring { width: 74px; height: 12px; border-radius: 50%; margin-top: -8px; border: 1.5px solid var(--cyan); opacity: 0; animation: boot-ring 1.5s .55s ease-out infinite; } @keyframes boot-ring { 0% { transform: scale(.3); opacity: .7 } 100% { transform: scale(1.5); opacity: 0 } } .boot-word { font-size: 1.5rem; font-weight: 700; font-style: italic; letter-spacing: -.03em; color: var(--cyan); animation: boot-fade .7s .25s both; } .boot-word span { color: var(--ink); font-style: normal; font-weight: 300; letter-spacing: 0; } @keyframes boot-fade { from { opacity: 0; transform: translateY(8px) } to { opacity: 1 } } .boot-bar { width: 168px; height: 3px; border-radius: 99px; background: var(--line); overflow: hidden; } .boot-bar i { display: block; height: 100%; width: 34%; border-radius: 99px; background: var(--cyan); animation: boot-slide 1.15s ease-in-out infinite; } @keyframes boot-slide { 0% { transform: translateX(-110%) } 100% { transform: translateX(330%) } } @media (prefers-reduced-motion: reduce) { .boot-pin, .boot-word, .boot-ring, .boot-bar i { animation: none } } /* ---- masthead --------------------------------------------------- */ .tv-nav { position: sticky; top: 0; z-index: 60; /* the drop panel is absolute against this, full-bleed rather than inside the content column — a menu that stops at the gutter looks like a mistake */ background: rgba(255,255,255,.86); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s; } .tv-nav.stuck { border-bottom-color: var(--line); box-shadow: 0 10px 30px -24px rgba(11,16,21,.55); } .tv-nav .tv-wrap { display: flex; align-items: center; gap: 22px; height: 70px; } .tv-mark { display: flex; align-items: center; gap: 9px; text-decoration: none; } .tv-mark img { width: 30px; height: 30px; } .tv-mark b { font-size: 1.28rem; font-weight: 700; font-style: italic; letter-spacing: -.035em; color: var(--cyan); } .tv-nav nav { margin-left: auto; display: flex; align-items: center; gap: 28px; } /* Log in and the burger, outside #tvMenu so neither ever collapses into it. Log in used to be the menu's last item, which on a phone put the one thing a returning user came for two taps away behind the burger. */ .tv-actions { display: flex; align-items: center; gap: 10px; margin-left: 18px; flex: none; } .tv-nav nav a { color: var(--ink-2); text-decoration: none; font-size: .93rem; font-weight: 500; position: relative; padding: 4px 0; } .tv-nav nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px; background: var(--cyan); transition: right .22s; } .tv-nav nav a:hover { color: var(--ink); } .tv-nav nav a:hover::after { right: 0; } /* ---- mobile masthead -------------------------------------------- */ /* Below 860px the links move into a panel that drops from the bar. Hiding them instead (which is what tv-hide-sm used to do) left a phone with a masthead that could not reach half the site. */ .tv-burger { display: none; width: 42px; height: 42px; flex: none; align-items: center; justify-content: center; border: 1.5px solid var(--line-2); border-radius: 11px; background: #fff; color: var(--ink); font-size: 1.02rem; cursor: pointer; transition: .18s; } .tv-burger:hover { border-color: var(--ink); } .tv-burger .fa-xmark { display: none; } .tv-nav.open .tv-burger .fa-xmark { display: block; } .tv-nav.open .tv-burger .fa-bars { display: none; } @media (max-width: 860px) { .tv-burger { display: inline-flex; } /* The menu leaves the flow below this width, so the actions take the gap. */ .tv-actions { margin-left: auto; } .tv-nav .tv-wrap { height: 62px; } .tv-nav nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--line); padding: 6px 4vw 18px; box-shadow: 0 22px 40px -26px rgba(11,16,21,.5); /* Collapsed by height rather than display:none, so it can animate and so the links stay in the accessibility tree while it is opening. */ max-height: 0; overflow: hidden; visibility: hidden; transition: max-height .3s cubic-bezier(.2,.8,.2,1), visibility .3s; } .tv-nav.open nav { max-height: 70vh; overflow-y: auto; visibility: visible; } /* The panel's contents settle a beat after it opens. A list that is fully drawn before the panel finishes moving reads as a jump, not a menu. */ .tv-nav nav > * { opacity: 0; transform: translateY(-6px); transition: opacity .26s ease, transform .26s ease; } .tv-nav.open nav > * { opacity: 1; transform: none; transition-delay: .09s; } .tv-nav nav a { padding: 14px 4px; font-size: 1rem; border-bottom: 1px solid var(--line); } .tv-nav nav a::after { display: none; } .tv-nav nav a:last-of-type { border-bottom: 0; } .tv-nav nav .tv-btn { margin-top: 14px; justify-content: center; width: 100%; } } @media (prefers-reduced-motion: reduce) { .tv-nav nav, .tv-nav nav > * { transition: none } .tv-nav nav > * { opacity: 1; transform: none } } /* ---- buttons ---------------------------------------------------- */ .tv-btn { display: inline-flex; align-items: center; gap: 9px; border-radius: 999px; font: inherit; font-size: .95rem; font-weight: 600; padding: 12px 24px; cursor: pointer; border: 1.5px solid transparent; text-decoration: none; transition: transform .16s, box-shadow .2s, background .2s, color .2s; } .tv-btn:active { transform: translateY(1px); } .tv-solid { background: var(--cyan); color: #fff; box-shadow: 0 8px 22px -10px rgba(37,168,203,.9); } .tv-solid:hover { background: var(--cyan-d); box-shadow: 0 14px 30px -12px rgba(37,168,203,.95); } .tv-ink { background: var(--ink); color: #fff; } .tv-ink:hover { background: #1B2530; } .tv-line { border-color: var(--line-2); color: var(--ink); background: #fff; } .tv-line:hover { border-color: var(--ink); } .tv-sm { padding: 9px 18px; font-size: .9rem; } /* ---- hero ------------------------------------------------------- */ .tv-hero { position: relative; padding: 68px 0 40px; overflow: hidden; } /* Two soft cyan washes and a hairline grid. On white, a flat panel reads as an empty div; this reads as paper with light on it. */ .tv-hero::before { content: ''; position: absolute; inset: -20% -10% auto -10%; height: 620px; z-index: 0; background: radial-gradient(46% 60% at 78% 18%, rgba(37,168,203,.18) 0%, rgba(37,168,203,0) 70%), radial-gradient(40% 52% at 12% 4%, rgba(37,168,203,.10) 0%, rgba(37,168,203,0) 72%); } .tv-grid-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 62px 62px; mask-image: radial-gradient(70% 60% at 50% 20%, #000 0%, transparent 78%); opacity: .5; } .tv-hero-grid { position: relative; z-index: 2; display: grid; gap: 54px; grid-template-columns: 1.05fr .95fr; align-items: start; } /* The front door's hero: one centred column. It was the left half of the grid above, with the sign-in card on the right; sign-in lives at /login now, and a two-column hero with one column empty reads as a layout with a hole in it. */ .tv-hero-solo { position: relative; z-index: 2; max-width: 880px; text-align: center; padding: 16px 0 22px; } .tv-hero-solo .tv-lede { margin-inline: auto; max-width: 58ch; } .tv-hero-solo .tv-cta { justify-content: center; } .tv-hero-solo .tv-trust { justify-content: center; gap: 20px 44px; } .tv-pill { display: inline-flex; align-items: center; gap: 9px; background: var(--cyan-w); color: var(--cyan-d); border: 1px solid rgba(37,168,203,.24); border-radius: 999px; padding: 7px 15px 7px 8px; font-size: .82rem; font-weight: 600; } .tv-pill b { background: var(--cyan); color: #fff; border-radius: 999px; padding: 3px 10px; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; } .tv-h1 { margin: 24px 0 0; font-size: clamp(2.6rem, 5.6vw, 4.35rem); line-height: 1.02; letter-spacing: -.035em; font-weight: 600; } .tv-h1 em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; color: var(--cyan); letter-spacing: -.01em; } .tv-lede { color: var(--ink-2); font-size: 1.09rem; line-height: 1.68; margin: 22px 0 0; max-width: 48ch; font-weight: 300; } .tv-lede b { color: var(--ink); font-weight: 600; } .tv-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .tv-trust { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); } .tv-trust div b { display: block; font-size: 1.42rem; font-weight: 700; letter-spacing: -.02em; } .tv-trust div span { color: var(--ink-3); font-size: .84rem; } /* ---- the auth card ---------------------------------------------- */ .tv-card { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 26px 26px 28px; box-shadow: 0 28px 60px -34px rgba(11,16,21,.3); } .tv-card-hd h2 { margin: 0 0 5px; font-size: 1.3rem; letter-spacing: -.02em; } .tv-card-hd p { margin: 0 0 18px; color: var(--ink-3); font-size: .92rem; } .tv .tabs { display: flex; gap: 6px; background: var(--paper-2); padding: 4px; border-radius: 12px; margin-bottom: 18px; } .tv .tabs button { flex: 1; border: 0; background: transparent; font: inherit; font-size: .92rem; font-weight: 600; color: var(--ink-3); padding: 9px; border-radius: 9px; cursor: pointer; transition: .18s; } .tv .tabs button.active { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(11,16,21,.12); } /* Direct child only. `.field span` also matched the nested required marker, so the asterisk became its own block and pushed the input down a line. */ .tv .field > span { display: block; font-size: .82rem; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; } .tv .field .req { display: inline; color: var(--cyan); margin: 0 0 0 2px; } .tv .field > span .muted { font-weight: 400; } .tv .field input { width: 100%; border: 1.5px solid var(--line); border-radius: 11px; padding: 11px 13px; font: inherit; font-size: .95rem; background: #fff; color: var(--ink); transition: border-color .16s, box-shadow .16s; } .tv .field input:focus { outline: 0; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(37,168,203,.16); } .tv .stack { display: grid; gap: 13px; } .tv .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; } .tv .btn.block { width: 100%; } .tv .btn.lg { padding: 13px 20px; font-size: .98rem; } .tv .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--cyan); color: #fff; border: 1.5px solid var(--cyan); border-radius: 11px; font: inherit; font-weight: 600; padding: 11px 18px; cursor: pointer; transition: .18s; } .tv .btn:hover { background: var(--cyan-d); border-color: var(--cyan-d); } .tv .btn.ghost { background: #fff; color: var(--ink); border-color: var(--line-2); } .tv .btn.ghost:hover { background: var(--paper-2); border-color: var(--ink-3); } .tv .btn-link { background: none; border: 0; color: var(--cyan-d); font: inherit; font-size: .9rem; cursor: pointer; } .tv .btn-link.block { width: 100%; } .tv .small { font-size: .84rem; } .tv .muted { color: var(--ink-3); } .tv .center { text-align: center; } /* auth.js toggles the login / register / OTP forms by adding and removing this class. It lives in style.css, which the APP loads — the public pages load only this sheet, so without a copy here every form on /login showed at once. The !important matches style.css so the two behave identically. */ .hidden { display: none !important; } /* ---- section furniture ------------------------------------------ */ .tv-sec { padding: 92px 0; } .tv-sec.alt { background: var(--paper-2); border-block: 1px solid var(--line); } .tv-kicker { display: inline-flex; align-items: center; gap: 9px; color: var(--cyan-d); font-size: .76rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; } .tv-kicker::before { content: ''; width: 26px; height: 1.5px; background: var(--cyan); } .tv-h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.1; letter-spacing: -.032em; margin: 16px 0 0; font-weight: 600; } .tv-h2 em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; color: var(--cyan); } .tv-sub { color: var(--ink-2); font-size: 1.03rem; line-height: 1.66; margin: 16px 0 0; max-width: 60ch; font-weight: 300; } /* ---- what we do (bento) ----------------------------------------- */ .tv-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 44px; } .tv-tile { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px; grid-column: span 2; transition: border-color .2s, transform .2s, box-shadow .2s; } .tv-tile:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: 0 18px 40px -28px rgba(11,16,21,.4); } .tv-tile.wide { grid-column: span 3; } .tv-tile.full { grid-column: span 6; background: var(--ink); color: #fff; border-color: var(--ink); } .tv-tile.full .tv-tile-b { color: rgba(255,255,255,.68); } .tv-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--cyan-w); color: var(--cyan-d); font-size: 1.05rem; margin-bottom: 16px; } .tv-tile.full .tv-ico { background: rgba(255,255,255,.12); color: #7FD4EA; } .tv-tile h3 { margin: 0 0 8px; font-size: 1.08rem; letter-spacing: -.015em; } .tv-tile-b { color: var(--ink-2); font-size: .94rem; line-height: 1.6; margin: 0; font-weight: 300; } /* ---- steps ------------------------------------------------------- */ .tv-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 48px; } .tv-step { padding: 26px 22px 0; border-top: 2px solid var(--line); position: relative; } .tv-step::before { content: ''; position: absolute; top: -2px; left: 0; width: 0; height: 2px; background: var(--cyan); transition: width .5s ease; } .tv-step.lit::before { width: 100%; } .tv-step b { display: block; font-size: .78rem; color: var(--cyan-d); letter-spacing: .12em; margin-bottom: 10px; } .tv-step h3 { margin: 0 0 8px; font-size: 1.06rem; letter-spacing: -.015em; } .tv-step p { margin: 0; color: var(--ink-2); font-size: .92rem; line-height: 1.6; font-weight: 300; } /* ---- regions ----------------------------------------------------- */ .tv-regions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; } .tv-region { border: 1px solid var(--line); border-radius: 18px; padding: 24px; background: #fff; position: relative; overflow: hidden; transition: border-color .25s, transform .25s, box-shadow .25s; } .tv-region:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: 0 18px 40px -30px rgba(11,16,21,.45); } .tv-region::after { content: ''; position: absolute; right: -28px; bottom: -28px; width: 110px; height: 110px; border-radius: 50%; background: var(--cyan-w); } .tv-region > * { position: relative; z-index: 1; } /* An icon in a disc, not a flag emoji: the emoji renders as a different size, weight and even a different picture on every platform, and on Windows it is two letters in a box. Font Awesome is the same everywhere. */ .tv-flag { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--cyan-w); color: var(--cyan-d); font-size: 1.12rem; transition: transform .25s cubic-bezier(.2,.9,.25,1), background .25s, color .25s; } .tv-region:hover .tv-flag { transform: rotate(-6deg) scale(1.06); background: var(--cyan); color: #fff; } .tv-code { font-size: .68rem; font-weight: 700; letter-spacing: .14em; color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 5px; padding: 2px 6px; vertical-align: middle; margin-left: 6px; } .tv-region h3 { margin: 12px 0 6px; font-size: 1.1rem; letter-spacing: -.015em; } .tv-region p { margin: 0; color: var(--ink-2); font-size: .9rem; line-height: 1.55; font-weight: 300; } /* ---- pricing ----------------------------------------------------- */ .tv-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 44px; } .tv-plan { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; } .tv-plan.hot { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(37,168,203,.14); } .tv-plan .tag { /* align-self, not display:inline-block: the card is a flex column, so a block child stretches to the full width and the pill becomes a banner. */ align-self: flex-start; background: var(--cyan); color: #fff; border-radius: 999px; padding: 4px 12px; font-size: .69rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; } .tv-plan h3 { margin: 0 0 6px; font-size: 1.16rem; letter-spacing: -.015em; } .tv-plan .price { font-size: 2.15rem; font-weight: 700; letter-spacing: -.035em; margin: 10px 0 2px; } .tv-plan .price small { font-size: .88rem; font-weight: 400; color: var(--ink-3); letter-spacing: 0; } .tv-plan .blurb { color: var(--ink-2); font-size: .92rem; line-height: 1.55; margin: 0 0 18px; font-weight: 300; } .tv-plan ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; } .tv-plan li { display: flex; gap: 10px; align-items: flex-start; font-size: .93rem; color: var(--ink-2); } .tv-plan li i { color: var(--cyan); font-size: .78rem; margin-top: .35em; } .tv-plan .tv-btn { margin-top: auto; justify-content: center; } /* ---- closer + footer --------------------------------------------- */ .tv-end { background: var(--ink); color: #fff; border-radius: 26px; padding: 64px 40px; text-align: center; margin: 92px auto; position: relative; overflow: hidden; } .tv-end::before { content: ''; position: absolute; inset: auto -10% -60% -10%; height: 340px; background: radial-gradient(50% 100% at 50% 100%, rgba(37,168,203,.55) 0%, rgba(37,168,203,0) 72%); } .tv-end > * { position: relative; z-index: 1; } .tv-end h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); line-height: 1.1; letter-spacing: -.032em; margin: 0; font-weight: 600; } .tv-end h2 em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; color: #7FD4EA; } .tv-end p { color: rgba(255,255,255,.66); margin: 18px auto 30px; max-width: 52ch; font-weight: 300; } .tv-foot { border-top: 1px solid var(--line); padding: 34px 0 46px; background: var(--paper); } .tv-foot .tv-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; } .tv-foot nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 24px; } .tv-foot nav a { color: var(--ink-3); text-decoration: none; font-size: .9rem; } .tv-foot nav a:hover { color: var(--cyan-d); } /* ---- reveal on scroll -------------------------------------------- */ .js .tv-up { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); } .js .tv-up.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .tv-up { opacity: 1; transform: none } } /* ---- responsive --------------------------------------------------- */ @media (max-width: 980px) { .tv-hero-grid { grid-template-columns: 1fr; gap: 40px; } .tv-steps, .tv-regions { grid-template-columns: repeat(2, 1fr); } .tv-tile, .tv-tile.wide { grid-column: span 3; } } @media (max-width: 640px) { .tv-sec { padding: 64px 0 } .tv-steps, .tv-regions { grid-template-columns: 1fr; } .tv-tile, .tv-tile.wide, .tv-tile.full { grid-column: span 6; } .tv-end { padding: 46px 22px; border-radius: 20px; } .tv .grid-2 { grid-template-columns: 1fr; } } /* ===================================================================== Shared page furniture — pricing, privacy, terms. The landing sections above are one-offs; these are what any additional page is built from, so a fourth page is markup rather than more CSS. ===================================================================== */ /* ---- page head (a shorter hero for an inside page) ------------------ */ .tv-head { position: relative; padding: 62px 0 52px; overflow: hidden; border-bottom: 1px solid var(--line); } .tv-head::before { content: ''; position: absolute; inset: -60% -10% auto -10%; height: 460px; z-index: 0; background: radial-gradient(44% 62% at 72% 60%, rgba(37,168,203,.16) 0%, rgba(37,168,203,0) 70%); } .tv-head .tv-wrap { position: relative; z-index: 1; } .tv-head h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.06; letter-spacing: -.038em; margin: 16px 0 0; font-weight: 600; max-width: 20ch; } .tv-head h1 em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; color: var(--cyan); } .tv-head p { color: var(--ink-2); font-size: 1.04rem; line-height: 1.68; margin: 16px 0 0; max-width: 58ch; font-weight: 300; } /* ---- crumbs --------------------------------------------------------- */ .tv-crumb { display: flex; align-items: center; gap: 9px; font-size: .84rem; color: var(--ink-3); } .tv-crumb a { color: var(--ink-3); text-decoration: none; } .tv-crumb a:hover { color: var(--cyan-d); } .tv-crumb i { font-size: .6rem; } /* ---- long-form prose ------------------------------------------------ */ .tv-prose { max-width: 74ch; } .tv-prose h2 { font-size: 1.42rem; letter-spacing: -.024em; margin: 44px 0 12px; font-weight: 600; scroll-margin-top: 96px; } .tv-prose h2:first-child { margin-top: 0; } .tv-prose h3 { font-size: 1.05rem; letter-spacing: -.015em; margin: 26px 0 8px; font-weight: 600; } .tv-prose p, .tv-prose li { color: var(--ink-2); font-size: 1rem; line-height: 1.78; font-weight: 300; } .tv-prose p { margin: 0 0 14px; } .tv-prose ul, .tv-prose ol { margin: 0 0 18px; padding-left: 22px; } .tv-prose li { margin-bottom: 8px; } .tv-prose b, .tv-prose strong { color: var(--ink); font-weight: 600; } .tv-prose a { color: var(--cyan-d); } .tv-prose hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; } .tv-note { background: var(--cyan-w); border: 1px solid rgba(37,168,203,.22); border-radius: 14px; padding: 18px 20px; margin: 0 0 26px; } .tv-note p { margin: 0; color: var(--ink-2); } .tv-note b { color: var(--ink); } /* ---- a sticky contents rail beside the prose ------------------------ */ .tv-doc { display: grid; grid-template-columns: 220px 1fr; gap: 54px; align-items: start; } .tv-toc { position: sticky; top: 96px; } .tv-toc span { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; } .tv-toc a { display: block; padding: 7px 0 7px 14px; border-left: 2px solid var(--line); color: var(--ink-2); text-decoration: none; font-size: .9rem; transition: .16s; } .tv-toc a:hover { border-left-color: var(--cyan); color: var(--ink); } /* ---- comparison table ----------------------------------------------- */ .tv-table-wrap { overflow-x: auto; margin-top: 40px; border: 1px solid var(--line); border-radius: 16px; background: #fff; } .tv-table { width: 100%; border-collapse: collapse; min-width: 640px; } .tv-table th, .tv-table td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line); font-size: .94rem; } .tv-table thead th { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; background: var(--paper-2); } .tv-table tbody tr:last-child td { border-bottom: 0; } .tv-table td.c, .tv-table th.c { text-align: center; } .tv-table .yes { color: var(--cyan); } .tv-table .no { color: var(--line-2); } .tv-table tbody tr { transition: background .16s; } .tv-table tbody tr:hover { background: var(--paper-2); } /* ---- FAQ (native details, so it works with no JavaScript) ----------- */ .tv-faq { margin-top: 40px; border-top: 1px solid var(--line); } .tv-faq details { border-bottom: 1px solid var(--line); } .tv-faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font-size: 1.04rem; font-weight: 600; letter-spacing: -.015em; } .tv-faq summary::-webkit-details-marker { display: none; } .tv-faq summary::after { content: '\f067'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: .8rem; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: var(--cyan); transition: transform .25s; } .tv-faq details[open] summary::after { content: '\f068'; } .tv-faq .a { padding: 0 0 22px; color: var(--ink-2); line-height: 1.75; font-weight: 300; max-width: 74ch; } .tv-faq .a p { margin: 0 0 12px; } .tv-faq .a p:last-child { margin: 0; } /* ---- a small CTA band ------------------------------------------------ */ .tv-band { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; border: 1px solid var(--line); border-radius: 20px; padding: 28px 30px; background: var(--paper-2); margin-top: 56px; } .tv-band h3 { margin: 0 0 4px; font-size: 1.16rem; letter-spacing: -.02em; } .tv-band p { margin: 0; color: var(--ink-2); font-size: .95rem; font-weight: 300; } .tv-band .tv-btn { margin-left: auto; } @media (max-width: 900px) { .tv-doc { grid-template-columns: 1fr; gap: 30px; } .tv-toc { position: static; display: none; } .tv-band .tv-btn { margin-left: 0; } } /* ===================================================================== Entrances. Two mechanisms, deliberately: .tv-rise fires on load with a stagger (the hero, which is on screen before anyone scrolls), .tv-up fires on scroll (everything below it). Both are keyed off .js and both stand down under prefers-reduced-motion — an entrance that hides content from someone who asked for less motion is not an entrance, it is a bug. ===================================================================== */ .js .tv-rise { opacity: 0; transform: translateY(18px); animation: tv-rise .78s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: var(--d, 0s); } @keyframes tv-rise { to { opacity: 1; transform: none } } @media (prefers-reduced-motion: reduce) { .js .tv-rise { opacity: 1; transform: none; animation: none } } /* The hero wash drifts, very slowly. Static, it reads as a flat panel; at this speed it reads as light moving across paper and nobody consciously sees it. */ @media (prefers-reduced-motion: no-preference) { .tv-hero::before { animation: tv-drift 22s ease-in-out infinite alternate; } } @keyframes tv-drift { from { transform: translate3d(0, 0, 0) scale(1) } to { transform: translate3d(-2.5%, 1.5%, 0) scale(1.06) } } /* Counters land on their real number; the element carries the final text as its content so a page without JavaScript still reads correctly. */ .tv-trust div b { font-variant-numeric: tabular-nums; } /* Buttons get a sweep on hover rather than only a colour change — it is the difference between "this is clickable" and "this responded to me". */ .tv-btn { position: relative; overflow: hidden; } .tv-btn > * { position: relative; z-index: 1; } .tv-btn::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.28) 50%, transparent 80%); transform: translateX(-120%); } .tv-btn:hover::after { transform: translateX(120%); transition: transform .7s cubic-bezier(.3,.7,.3,1); } /* …and a lift. The sweep alone is easy to miss on the outline buttons. */ .tv-btn:hover { transform: translateY(-1.5px); } .tv-btn:active { transform: translateY(1px); } @media (prefers-reduced-motion: reduce) { .tv-btn::after { display: none } .tv-btn:hover { transform: none } } /* Nav condenses once the page has moved, so the content gets the height back. */ .tv-nav .tv-wrap { transition: height .25s cubic-bezier(.2,.8,.2,1); } .tv-nav.stuck .tv-wrap { height: 60px; } /* The masthead mark nudges on hover — a two-pixel tell that it is a link home. */ .tv-mark img { transition: transform .3s cubic-bezier(.2,.9,.25,1); } .tv-mark:hover img { transform: translateY(-2px) rotate(-8deg); } /* Bento icons lift with their tile. */ .tv-ico { transition: transform .25s cubic-bezier(.2,.9,.25,1); } .tv-tile:hover .tv-ico { transform: translateY(-3px) scale(1.06); } /* Focus ring, once, for everything that takes focus. Keyboard users get a visible target without the mouse ever seeing a ring. */ .tv a:focus-visible, .tv button:focus-visible, .tv summary:focus-visible, .tv input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; } /* ===================================================================== Mobile pass. The breakpoints above reflow the grids; these tune the things that only look wrong once a grid is one column — type that is too large for the measure, section padding sized for a desktop, and touch targets. ===================================================================== */ @media (max-width: 640px) { .tv-h1 { font-size: clamp(2.15rem, 9.4vw, 2.9rem); letter-spacing: -.03em; } .tv-h2 { font-size: clamp(1.68rem, 7.4vw, 2.2rem); } .tv-lede { font-size: 1rem; } .tv-hero { padding: 40px 0 24px; } .tv-hero-grid { gap: 34px; } /* Full-width buttons on a phone: two 48%-wide buttons side by side is two targets that are both slightly too small. */ .tv-cta { flex-direction: column; align-items: stretch; } .tv-cta .tv-btn { justify-content: center; width: 100%; padding: 14px 22px; } .tv-trust { gap: 18px 26px; } .tv-trust div { min-width: 44%; } .tv-card { padding: 22px 18px 24px; border-radius: 18px; } .tv-tile { padding: 22px 20px; } .tv-region { padding: 20px; } .tv-plan { padding: 24px 22px; } .tv-step { padding: 22px 0 0; } .tv-head { padding: 40px 0 36px; } .tv-prose h2 { font-size: 1.24rem; margin-top: 34px; } .tv-prose p, .tv-prose li { font-size: .97rem; line-height: 1.72; } .tv-end { padding: 40px 20px; margin: 60px auto; border-radius: 18px; } .tv-end .tv-btn { width: 100%; justify-content: center; } .tv-band { padding: 22px; border-radius: 16px; } .tv-band .tv-btn { width: 100%; justify-content: center; } .tv-foot { padding: 26px 0 36px; } .tv-foot .tv-wrap { flex-direction: column; align-items: flex-start; gap: 16px; } .tv-foot nav { margin-left: 0; gap: 14px 20px; } .tv-faq summary { font-size: .98rem; padding: 17px 34px 17px 0; } } /* Never let a long word or a wide table push the page sideways. */ .tv { overflow-x: hidden; } .tv-h1, .tv-h2, .tv-prose h2, .tv-head h1 { overflow-wrap: break-word; } /* ---- footer columns ------------------------------------------------- */ .tv-foot-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; padding-bottom: 30px; } .tv-foot-brand p { color: var(--ink-3); font-size: .92rem; line-height: 1.6; margin: 14px 0 0; max-width: 34ch; font-weight: 300; } .tv-foot nav { display: flex; flex-direction: column; gap: 10px; margin-left: 0; } .tv-foot nav span { font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--ink); margin-bottom: 2px; } .tv-foot-base { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 20px; color: var(--ink-3); font-size: .86rem; } @media (max-width: 780px) { .tv-foot-cols { grid-template-columns: 1fr 1fr; gap: 26px; } .tv-foot-brand { grid-column: 1 / -1; } } @media (max-width: 460px) { .tv-foot-cols { grid-template-columns: 1fr; } } /* ---- centred single-column page (login) ----------------------------- */ .tv-auth-wrap { display: grid; place-items: center; padding: 54px 0 84px; min-height: 62vh; } .tv-auth { width: min(440px, 100%); } .tv-auth .tv-card { padding: 30px 28px 32px; } .tv-auth-foot { text-align: center; margin-top: 18px; color: var(--ink-3); font-size: .9rem; } .tv-auth-foot a { color: var(--cyan-d); } /* ---- about: values / desks ------------------------------------------ */ .tv-two { display: grid; grid-template-columns: 1.1fr .9fr; gap: 54px; align-items: start; } @media (max-width: 900px) { .tv-two { grid-template-columns: 1fr; gap: 32px; } } .tv-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; } .tv-stat-row div { border-left: 2px solid var(--cyan); padding-left: 16px; } .tv-stat-row b { display: block; font-size: 1.7rem; font-weight: 700; letter-spacing: -.03em; } .tv-stat-row span { color: var(--ink-3); font-size: .86rem; } @media (max-width: 700px) { .tv-stat-row { grid-template-columns: 1fr 1fr; gap: 22px; } } /* ---- contact channels ------------------------------------------------ */ .tv-channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 40px; } .tv-channel { border: 1px solid var(--line); border-radius: 18px; padding: 26px; background: #fff; transition: border-color .2s, transform .2s; } .tv-channel:hover { border-color: var(--line-2); transform: translateY(-2px); } .tv-channel h3 { margin: 14px 0 6px; font-size: 1.05rem; letter-spacing: -.015em; } .tv-channel p { margin: 0 0 14px; color: var(--ink-2); font-size: .93rem; line-height: 1.6; font-weight: 300; } .tv-channel .tv-btn { width: 100%; justify-content: center; } /* Honeypot. Positioned off-screen rather than display:none — some bots skip inputs that are display:none, which is exactly the ones we want them to fill. aria-hidden and tabindex="-1" on the field keep it away from real people. */ .tv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Selects match the text inputs — a form where one control is styled and the next is the browser default reads as unfinished. */ .tv .field select { width: 100%; border: 1.5px solid var(--line); border-radius: 11px; padding: 11px 13px; font: inherit; font-size: .95rem; background: #fff; color: var(--ink); transition: border-color .16s, box-shadow .16s; } .tv .field select:focus { outline: 0; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(37,168,203,.16); } .tv .field textarea { width: 100%; border: 1.5px solid var(--line); border-radius: 11px; padding: 11px 13px; font: inherit; font-size: .95rem; background: #fff; color: var(--ink); resize: vertical; transition: border-color .16s, box-shadow .16s; } .tv .field textarea:focus { outline: 0; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(37,168,203,.16); } /* ---- grouped nav dropdowns ------------------------------------------------ No JavaScript: hover opens it for a mouse, :focus-within opens it for a keyboard. The button takes focus first, which satisfies :focus-within and reveals the links, so they become tabbable in the same motion. */ .tv-drop { position: relative; } .tv-drop-t { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; font: inherit; font-size: .93rem; font-weight: 500; color: var(--ink-2); cursor: pointer; padding: 0; transition: color .15s ease; } .tv-drop-t i { font-size: .62rem; transition: transform .18s ease; } .tv-drop:hover .tv-drop-t, .tv-drop:focus-within .tv-drop-t, .tv-drop.on .tv-drop-t { color: var(--ink); } .tv-drop:hover .tv-drop-t i, .tv-drop:focus-within .tv-drop-t i { transform: rotate(180deg); } .tv-drop.on .tv-drop-t { color: var(--cyan-d); } .tv-drop-m { position: absolute; top: calc(100% + 12px); left: 50%; translate: -50% 0; min-width: 230px; display: flex; flex-direction: column; gap: 2px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 8px; box-shadow: 0 18px 44px -18px rgba(11,16,21,.28); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; } /* A gap between the button and the panel would close the menu as the pointer crossed it. This bridges it without moving the panel. */ .tv-drop::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 14px; } .tv-drop:hover .tv-drop-m, .tv-drop:focus-within .tv-drop-m { opacity: 1; visibility: visible; transform: translateY(0); } .tv-nav nav .tv-drop-m a { padding: 9px 12px; border-radius: 9px; font-size: .91rem; white-space: nowrap; transition: background .14s ease, color .14s ease; } .tv-nav nav .tv-drop-m a::after { display: none; } .tv-nav nav .tv-drop-m a:hover { background: var(--paper-2); color: var(--ink); } .tv-nav nav .tv-drop-m a[aria-current=page] { color: var(--cyan-d); background: var(--cyan-w); } @media (max-width: 860px) { /* In the burger menu there is nothing to drop down into — the group becomes a heading with its links indented under it, always visible. */ .tv-drop { position: static; border-bottom: 1px solid var(--line); } .tv-drop::after { display: none; } .tv-drop-t { width: 100%; justify-content: space-between; padding: 14px 4px; font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); cursor: default; pointer-events: none; } .tv-drop-t i { display: none; } .tv-drop-m { position: static; translate: none; transform: none; opacity: 1; visibility: visible; min-width: 0; border: 0; box-shadow: none; padding: 0 0 10px; background: none; gap: 0; } .tv-nav nav .tv-drop-m a { padding: 11px 4px 11px 14px; border-bottom: 0; font-size: .97rem; } } /* The contextual strip under the masthead on catalogue pages — "← All packages" and the like. The masthead is the site's; this row is the page's. */ .pub-subnav { border-bottom: 1px solid var(--line, #E3EAEE); background: #fff; } .pub-subnav .tv-wrap { display: flex; align-items: center; gap: 18px; min-height: 48px; flex-wrap: wrap; } .pub-subnav a { font-size: .9rem; color: #4C5860; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; } .pub-subnav a:hover { color: #0B1015; } .pub-subnav a.active { color: #17819F; font-weight: 600; } /* ---- the auth card, on /login and on the home page ------------------------- One block for both: it is literally the same markup in two places, and the two had drifted into different spacing. Scoped to #authCard so it follows the card wherever it is rendered rather than to the page around it. */ #authCard { padding: clamp(26px, 4vw, 34px) clamp(22px, 3.4vw, 32px) clamp(26px, 3.4vw, 32px); } #authCard .tv-card-hd { margin-bottom: 22px; } #authCard .tv-card-hd h2 { margin: 0 0 6px; letter-spacing: -.02em; } #authCard .tv-card-hd p { margin: 0; color: var(--ink-3); font-size: .92rem; line-height: 1.5; } /* A 40px row is a real tap target; the old one was whatever the text needed. */ #authCard .tabs { margin-bottom: 22px; } #authCard .tabs button { min-height: 38px; } /* Fields breathe. 14px between a message-bearing field and the next label was tight enough that a red line looked like it belonged to the wrong input. */ #authCard .stack { gap: 17px; } #authCard .field > span { font-size: .84rem; margin-bottom: 7px; } /* No `#authCard input { padding }` here. An ID selector out-ranks every class-based rule, so it beat the padding-right that keeps a long password clear of the show/hide button in formcheck.css — the text ran underneath the eye. `.tv .field input` already sets the padding these inputs need. */ /* The primary action separated from the fields, and the alternative separated from the primary — three things in a row all 100% wide read as one block. */ #authCard .stack > .btn.block.lg { margin-top: 4px; } #authCard .stack > .btn.ghost.block { margin-top: 2px; position: relative; padding-top: 13px; padding-bottom: 13px; } #authCard .btn-link.block { width: 100%; margin-top: 2px; } /* The register form's two-up row is 440px wide at most; below that it is two 190px inputs, which is where "Full name" stops fitting its own placeholder. */ @media (max-width: 430px) { #authCard .grid-2 { grid-template-columns: 1fr; } } #authCard .small.muted.center { margin: 14px 0 0; line-height: 1.5; } /* The page around the card. */ .tv-auth-wrap { padding: clamp(38px, 6vw, 64px) 0 clamp(56px, 8vw, 88px); } .tv-auth-foot { margin-top: 20px; line-height: 1.6; }