/* FrankieGPT public site. Warm editorial system built around the horse mascot: chestnut and gold on cream, Fraunces display serif, soft depth, no template grays. Shared by the landing, auth, settings, and legal pages. */ /* ============================ INVARIANTS ============================ Six rules, each of which was learned the hard way on this stylesheet. Read these before changing layout, colour, or an image rule. 1. NEVER put overflow-x on . When one axis is hidden and the other is visible, the visible one computes to auto, so body silently becomes a second scroll container and the page grows a second scrollbar. Horizontal clipping belongs to and nowhere else. This shipped and the owner spotted it. 2. A transform that moves an element DOWN creates page overflow. It does not move layout, but it does create scrollable overflow on the ancestor. The footer reveal added exactly 16px this way. Animate the contents of a box that already clips, never the box. 3. img must keep `height: auto` in the global rule. A width/height attribute is a presentational hint. A component rule that sets only a width lets the attribute supply the height, and the picture is squashed. This distorted the mascot on every page. 4. site.css is stamped with SITE_CSS_V from lib.php, and nothing else. Marketing, legal, 404, login, signup, reset and settings all load this file. Version it per page and a change reaches only some of them, for a year, because it is served immutable. Six surfaces were stuck on 2.1.0. 5. A link removed from the header bar at a breakpoint must appear in the menu at that same breakpoint. Hiding the primary links below 1080px without adding them to the menu made four pages and the login link unreachable on every phone and tablet. 6. Colours are chosen against the WORST background they sit on: --paper #FFFDF7, --cream #FAF4E8, --cream-2 #F4EAD6. 4.5:1 for body text, 3:1 for large. --amber, --faint and --good were all below that and were darkened to the smallest value that clears it. If you change a background tint, re-run /root/fg_a11y_audit.js. Two contrast checks are exempt ON PURPOSE, because the background is a photograph and no automated colour walk can see it: the footer legal line, which reads by its own text shadow, and .cta-card.photo, whose dark wash is fixed at a level that stays safe whatever the picture underneath does. ==================================================================== */ @font-face { font-family: 'Fraunces'; src: url('/fonts/fraunces-latin-var.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } :root { --cream: #FAF4E8; --cream-2: #F4EAD6; --paper: #FFFDF7; --ink: #2C2214; --mut: #6E5C44; --faint: #76674F; /* was #A5906F, 2.58:1, which failed AA everywhere */ --line: #E7DAC0; --amber: #9D5915; /* 4.54:1 on the worst background. See fg_a11y_audit.js */ --amber-deep: #8A4C0E; --amber-soft: #F3E2C4; --gold: #E9BC5C; --gold-soft: #F6E7BF; --dark: #2E2417; --dark-2: #3B2F1E; --good: #48753A; /* 4.53:1 on the worst background */ --serif: 'Fraunces', Georgia, 'Times New Roman', serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --radius: 18px; --shadow: 0 1px 2px rgba(60, 42, 16, .06), 0 12px 32px rgba(60, 42, 16, .08); } * { box-sizing: border-box; margin: 0; padding: 0; } /* Horizontal clipping lives HERE and only here. Putting overflow-x on body turns body into a scroll container and the page grows a second scrollbar. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; } @supports (overflow-x: clip) { html { overflow-x: clip; } } body { font-family: var(--sans); color: var(--ink); background: var(--cream); line-height: 1.6; font-size: 17px; } a { color: var(--amber); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } /* height: auto is not optional. A width/height attribute is a presentational hint, so a component rule that sets only a width lets the attribute supply the height and the picture gets squashed. Anything that truly needs a fixed height states it below and wins on specificity. */ img { max-width: 100%; height: auto; } h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; } .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; } /* ---------- Header ---------- */ .site-head { position: sticky; top: 0; z-index: 40; background: rgba(250, 244, 232, .88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .site-head .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; } .logo { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 650; font-size: 22px; color: var(--ink); letter-spacing: -0.01em; } .logo:hover { text-decoration: none; } .logo img { width: 38px; height: 38px; border-radius: 10px; } .logo .gpt { color: var(--amber); } .head-nav { display: flex; align-items: center; gap: 6px; } .head-nav a.plain { padding: 9px 14px; border-radius: 999px; color: var(--mut); font-weight: 600; font-size: 15.5px; } .head-nav a.plain:hover { background: var(--cream-2); color: var(--ink); text-decoration: none; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: 999px; font-weight: 700; font-size: 16px; border: 1px solid transparent; cursor: pointer; text-align: center; font-family: var(--sans); transition: transform .12s ease, background .12s ease, box-shadow .12s ease; } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn.primary { background: var(--amber); color: #FFF9EE; box-shadow: 0 2px 0 var(--amber-deep), 0 10px 24px rgba(168, 95, 23, .22); } .btn.primary:hover { background: var(--amber-deep); } .btn.outline { background: transparent; color: var(--amber-deep); border-color: #D9BE93; } .btn.outline:hover { background: var(--amber-soft); } .btn.big { padding: 15px 30px; font-size: 17.5px; } .btn.wide { width: 100%; } .btn[disabled] { opacity: .55; cursor: default; } .btn.danger { background: transparent; color: #A3341F; border-color: #E4BCA6; } .btn.danger:hover { background: #F9EAE0; } .btn.small { padding: 8px 15px; font-size: 14px; } .quiet-link { font-weight: 700; color: var(--amber-deep); font-size: 16.5px; } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; right: -180px; top: -140px; width: 720px; height: 720px; background: radial-gradient(closest-side, rgba(233, 188, 92, .38), rgba(233, 188, 92, 0)); pointer-events: none; } .hero .wrap { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; padding-top: 76px; padding-bottom: 84px; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px 7px 8px; font-size: 14.5px; font-weight: 700; color: var(--mut); margin-bottom: 22px; } .eyebrow img { width: 26px; height: 26px; } .hero h1 { font-size: 54px; line-height: 1.06; margin-bottom: 20px; font-weight: 620; } .hero h1 .uline { position: relative; white-space: nowrap; } .hero h1 .uline svg { position: absolute; left: 0; right: 0; bottom: -6px; width: 100%; height: 14px; } .hero .sub { font-size: 19px; color: var(--mut); margin-bottom: 30px; max-width: 32em; } .cta-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; } .cta-note { font-size: 14.5px; color: var(--faint); margin-top: 14px; } /* Phone mock */ .phone-scene { position: relative; display: flex; justify-content: center; } .phone-scene .horse-peek { position: absolute; top: -34px; left: calc(50% + 92px); width: 92px; transform: rotate(8deg); filter: drop-shadow(0 6px 14px rgba(60, 42, 16, .18)); z-index: 2; } .phone { width: 330px; background: var(--paper); border: 1px solid var(--line); border-radius: 38px; padding: 18px 16px 22px; box-shadow: var(--shadow); transform: rotate(-1.5deg); } .phone .p-head { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 650; font-size: 18px; padding: 2px 6px 13px; border-bottom: 1px solid var(--line); } .phone .p-head img { width: 30px; height: 30px; border-radius: 8px; } .phone .p-chat { padding: 15px 4px 0; display: flex; flex-direction: column; gap: 10px; } .bub { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.45; } .bub.u { align-self: flex-end; background: var(--amber); color: #FFF7EA; border-bottom-right-radius: 5px; } .bub.f { align-self: flex-start; background: var(--cream-2); border-bottom-left-radius: 5px; } .p-mic { margin: 18px auto 0; width: 64px; height: 64px; border-radius: 50%; background: var(--amber); display: grid; place-items: center; color: #FFF7EA; box-shadow: 0 2px 0 var(--amber-deep), 0 10px 22px rgba(168, 95, 23, .35); } /* ---------- Ribbon ---------- */ .ribbon { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); } .ribbon .wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 0; padding: 15px 24px; font-size: 15px; color: var(--mut); font-weight: 600; } .ribbon span.dot { color: var(--gold); margin: 0 14px; font-size: 11px; } /* ---------- Sections ---------- */ section.band { padding: 78px 0; } .kicker { font-family: var(--sans); color: var(--amber); font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: 12.5px; margin-bottom: 12px; } h2.sec { font-size: 38px; margin-bottom: 14px; font-weight: 620; } .sec-sub { color: var(--mut); max-width: 42em; margin-bottom: 40px; font-size: 18px; } /* Bento */ .bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(150px, auto); gap: 16px; } .bcard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; position: relative; overflow: hidden; } .bcard h3 { font-size: 21px; margin-bottom: 8px; font-weight: 620; } .bcard p { color: var(--mut); font-size: 15.5px; } .bcard .ico { color: var(--amber); margin-bottom: 14px; line-height: 0; } .bcard.hero-card { grid-column: span 2; grid-row: span 2; background: linear-gradient(165deg, #FFF9EC, #F8E9CC); display: flex; flex-direction: column; } .bcard.hero-card .mini-chat { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 20px; } .bcard.hero-card .mini-chat .bub { font-size: 14px; box-shadow: 0 1px 2px rgba(60,42,16,.05); } .bcard.hero-card .mini-chat .bub.f { background: var(--paper); } .bcard.wide { grid-column: span 2; } .bcard.tinted { background: var(--cream-2); } .chip-addr { display: inline-block; background: var(--gold-soft); border: 1px solid #E2C98F; color: #6B4A12; font-weight: 700; border-radius: 10px; padding: 8px 13px; font-size: 14.5px; margin-top: 12px; } .ru-note { font-family: var(--serif); color: var(--amber-deep); font-size: 19px; margin-top: 10px; } /* Steps */ /* Auto-fits however many steps a page has. Fixed at three columns this dropped a fourth step onto a row of its own and the sequence stopped reading as a sequence. */ .steps { display: grid; grid-template-columns: 1fr; gap: 34px 40px; position: relative; } @media (min-width: 620px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1000px) { .steps.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 26px; } } .steps.four .n { font-size: 44px; } .step { position: relative; } .step .n { font-family: var(--serif); font-size: 52px; font-weight: 550; color: var(--gold); line-height: 1; margin-bottom: 14px; } .step h3 { font-size: 21px; margin-bottom: 8px; font-weight: 620; } .step p { color: var(--mut); font-size: 15.5px; } /* Dark trust band */ .trust { background: var(--dark); color: #F4EAD6; } .trust .kicker { color: var(--gold); } .trust h2.sec { color: #FBF3DF; } .trust .sec-sub { color: #C9B896; } .trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 40px; } .trust-item { border-top: 1px solid var(--dark-2); padding: 20px 0 6px; } .trust-item b { display: block; font-family: var(--serif); font-weight: 600; font-size: 18.5px; color: #FBF3DF; margin-bottom: 6px; } .trust-item b::before { content: "✓ "; color: var(--gold); } .trust-item p { color: #C9B896; font-size: 15px; } /* FAQ */ .faq { max-width: 780px; } .faq details { border-bottom: 1px solid var(--line); } .faq summary { cursor: pointer; font-family: var(--serif); font-weight: 600; font-size: 19px; padding: 20px 44px 20px 2px; list-style: none; position: relative; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 10px; top: 16px; color: var(--faint); font-size: 26px; font-family: var(--sans); font-weight: 400; transition: transform .15s ease; } .faq details[open] summary::after { transform: rotate(45deg); } .faq .a { padding: 0 2px 22px; color: var(--mut); max-width: 60em; } /* CTA */ .cta-final { padding: 30px 0 90px; } .cta-card { background: linear-gradient(150deg, #FCEBD2, #F0CD96); border: 1px solid #E5CB9B; border-radius: 28px; padding: 58px 40px; text-align: center; position: relative; overflow: hidden; } .cta-card img.horse { width: 108px; margin-bottom: 8px; } .cta-card h2 { font-size: 36px; margin-bottom: 10px; font-weight: 620; } .cta-card p { color: #7A6238; margin-bottom: 28px; font-size: 17.5px; } /* ---------- Footer ---------- */ /* The old site footer was replaced by the shared .fg-foot below. */ /* ---------- Auth + settings forms ---------- */ .auth-main { display: grid; place-items: start center; padding: 52px 20px 72px; } .auth-card { width: 100%; max-width: 460px; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 36px 32px; box-shadow: var(--shadow); } .auth-card h1 { font-size: 30px; margin-bottom: 8px; font-weight: 620; } .auth-card .lead { color: var(--mut); margin-bottom: 26px; font-size: 15.5px; } .field { margin-bottom: 16px; } .field label { display: block; font-weight: 700; font-size: 14.5px; margin-bottom: 6px; } .field .hint { font-weight: 400; color: var(--faint); font-size: 13px; } .field input, .field select, .field textarea { width: 100%; padding: 12px 14px; font-size: 16px; border: 1px solid #D6C4A2; border-radius: 12px; background: #FFFEFA; color: var(--ink); font-family: inherit; } .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--gold-soft); border-color: var(--amber); } .form-err { background: #FAEDE4; border: 1px solid #E8C4A8; color: #93401E; border-radius: 12px; padding: 11px 14px; font-size: 15px; margin-bottom: 16px; } .form-ok { background: #EFF3E4; border: 1px solid #CBD9AC; color: var(--good); border-radius: 12px; padding: 11px 14px; font-size: 15px; margin-bottom: 16px; } .auth-alt { text-align: center; margin-top: 20px; color: var(--mut); font-size: 15px; } .legal-line { font-size: 13px; color: var(--faint); margin: 14px 0 18px; } /* Settings */ .settings-main { width: 100%; max-width: 740px; margin: 0 auto; padding: 40px 20px 84px; } .settings-main h1 { font-size: 34px; margin-bottom: 6px; font-weight: 620; } .settings-main .lead { color: var(--mut); margin-bottom: 28px; } .panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; margin-bottom: 22px; } .panel h2 { font-size: 22px; margin-bottom: 14px; font-weight: 620; } .panel .note { color: var(--faint); font-size: 14px; margin-top: 10px; } .inbox-chip { display: inline-block; background: var(--gold-soft); border: 1px solid #E2C98F; color: #6B4A12; font-weight: 700; border-radius: 10px; padding: 8px 13px; font-size: 15px; } .contact-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding: 13px 0; } .contact-row:first-of-type { border-top: 0; } .contact-row .who b { display: block; } .contact-row .who span { color: var(--mut); font-size: 14.5px; display: block; } .row-btns { display: flex; gap: 8px; flex-shrink: 0; } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } /* Legal pages */ .legal-main { width: 100%; max-width: 780px; margin: 0 auto; padding: 44px 20px 84px; } .legal-main h1 { font-size: 36px; margin-bottom: 18px; font-weight: 620; } .legal-main h2 { font-size: 23px; margin: 30px 0 10px; font-weight: 620; } .legal-main p, .legal-main li { color: var(--mut); margin-bottom: 12px; } .legal-main ul { padding-left: 22px; } /* ---------- Responsive ---------- */ @media (max-width: 960px) { /* The section links need more room than a tablet header has; below 960 the header is the lockup plus the two account buttons only. */ .head-nav a.plain { display: none; } .hero .wrap { grid-template-columns: 1fr; gap: 48px; padding-top: 48px; padding-bottom: 56px; } .hero h1 { font-size: 40px; } .bento { grid-template-columns: 1fr 1fr; } .bcard.hero-card { grid-column: span 2; grid-row: auto; } .steps { grid-template-columns: 1fr; gap: 30px; } .trust-grid { grid-template-columns: 1fr; } .two-col { grid-template-columns: 1fr; } section.band { padding: 56px 0; } } @media (max-width: 560px) { .hero h1 { font-size: 33px; } .bento { grid-template-columns: 1fr; } .bcard.hero-card, .bcard.wide { grid-column: span 1; } .phone { width: 100%; max-width: 310px; transform: none; } .phone-scene .horse-peek { width: 74px; top: -26px; left: calc(50% + 72px); } .head-nav a.plain { display: none; } h2.sec { font-size: 30px; } .cta-card { padding: 44px 24px; } .cta-card h2 { font-size: 28px; } } /* ---------- Palm Springs life: photos, story, and motion ---------- */ /* Hero atmosphere: a slow-drifting sun glow and swaying palm silhouettes. */ .hero::before { animation: sunDrift 16s ease-in-out infinite alternate; } @keyframes sunDrift { 0% { transform: translate(0, 0) scale(1); opacity: .9; } 100% { transform: translate(-90px, 40px) scale(1.12); opacity: 1; } } .palm-sil { position: absolute; bottom: -6px; color: #8A6A33; opacity: .16; pointer-events: none; } .palm-sil svg { display: block; transform-origin: 50% 100%; animation: sway 7s ease-in-out infinite alternate; } .palm-sil.left { left: -30px; width: 190px; } .palm-sil.right { right: -20px; width: 150px; } .palm-sil.right svg { animation-duration: 8.5s; animation-delay: 1.2s; } @keyframes sway { 0% { transform: rotate(-2.2deg); } 100% { transform: rotate(2.2deg); } } /* The phone feels live: bubbles arrive one by one, the mic breathes, the mascot bobs, and a small equalizer shows Frankie listening. */ /* Fill-mode both keeps bubbles hidden only DURING the entrance; a browser that never runs the animation simply shows them, so the phone is never empty. */ .p-chat .bub { animation: rise .55s ease-out both; } .p-chat .bub:nth-child(1) { animation-delay: .2s; } .p-chat .bub:nth-child(2) { animation-delay: .7s; } .p-chat .bub:nth-child(3) { animation-delay: 1.2s; } .p-chat .bub:nth-child(4) { animation-delay: 1.7s; } @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .phone-scene .horse-peek { animation: floaty 5s ease-in-out infinite; } @keyframes floaty { 0%, 100% { transform: rotate(8deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-7px); } } .p-mic { position: relative; } .p-mic::before, .p-mic::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(168, 95, 23, .45); animation: pulseRing 2.8s ease-out infinite; } .p-mic::after { animation-delay: 1.4s; } @keyframes pulseRing { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } } .eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; margin-left: auto; } .eq span { width: 4px; border-radius: 2px; background: var(--amber); animation: eqBar .8s ease-in-out infinite alternate; } .eq span:nth-child(1) { height: 6px; animation-delay: 0s; } .eq span:nth-child(2) { height: 13px; animation-delay: .15s; } .eq span:nth-child(3) { height: 9px; animation-delay: .3s; } .eq span:nth-child(4) { height: 15px; animation-delay: .45s; } .eq span:nth-child(5) { height: 7px; animation-delay: .6s; } @keyframes eqBar { from { transform: scaleY(.4); } to { transform: scaleY(1); } } /* Ribbon becomes a slow marquee. */ .ribbon { overflow: hidden; } .ribbon .wrap { max-width: none; padding: 0; display: block; } .ribbon .track { display: inline-flex; align-items: center; white-space: nowrap; padding: 15px 0; animation: marquee 36s linear infinite; will-change: transform; } .ribbon .track > span { font-size: 15px; color: var(--mut); font-weight: 600; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* The story: Palm Springs photos in warm frames beside the narrative. */ .story-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 56px; align-items: center; } .collage { position: relative; min-height: 480px; } .ph { position: absolute; background: #FFFDF7; border: 1px solid var(--line); border-radius: 14px; padding: 10px 10px 14px; box-shadow: 0 18px 44px rgba(60, 42, 16, .16); } .ph img { display: block; border-radius: 8px; width: 100%; height: 100%; object-fit: cover; } .ph.horse { width: 66%; left: 0; top: 24px; transform: rotate(-2.5deg); z-index: 2; } .ph.horse img { aspect-ratio: 4 / 3.4; } .ph.palms { width: 52%; right: 0; bottom: 0; transform: rotate(3deg); z-index: 3; } .ph.palms img { aspect-ratio: 4 / 3; } .ph .cap { font-size: 13px; color: var(--faint); padding: 9px 4px 0; font-weight: 600; } .story-copy p { color: var(--mut); margin-bottom: 16px; font-size: 16.5px; } .story-copy p b { color: var(--ink); } .story-copy .hoof { display: flex; align-items: center; gap: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-top: 22px; } .story-copy .hoof img { width: 44px; height: 44px; } .story-copy .hoof span { font-size: 15px; color: var(--mut); } /* Closing card carries the owner's Palm Springs aerial. */ .cta-card.photo { background: linear-gradient(rgba(44, 30, 12, .5), rgba(44, 30, 12, .62)), image-set(url('/img/ps-aerial-1600.webp') type('image/webp'), url('/img/ps-aerial-1600.jpg') type('image/jpeg')) center 40% / cover no-repeat; border-color: #C9A76A; } .cta-card.photo h2 { color: #FFF6E4; } .cta-card.photo p { color: #F1DFBC; } @media (max-width: 960px) { .story-grid { grid-template-columns: 1fr; gap: 40px; } .collage { min-height: 420px; } } @media (max-width: 560px) { .collage { min-height: 330px; } .palm-sil.left { width: 120px; } .palm-sil.right { display: none; } .cta-card.photo { background-image: linear-gradient(rgba(44, 30, 12, .52), rgba(44, 30, 12, .64)), image-set(url('/img/ps-aerial-900.webp') type('image/webp'), url('/img/ps-aerial-900.jpg') type('image/jpeg')); } } @media (prefers-reduced-motion: reduce) { .hero::before, .palm-sil svg, .p-chat .bub, .horse-peek, .p-mic::before, .p-mic::after, .eq span, .ribbon .track { animation: none !important; } .p-chat .bub { opacity: 1; } } /* ---------- Voice sample chip (landing hero) ---------- */ .voice-chip { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 11px 18px; border: 1.5px solid var(--gold); border-radius: 999px; background: var(--paper); color: var(--amber); font: inherit; font-size: 15.5px; font-weight: 700; cursor: pointer; transition: background .2s, box-shadow .2s; } .voice-chip:hover { background: var(--gold-soft); } .vc-play { width: 0; height: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; } .voice-chip.playing .vc-play { border: none; width: 11px; height: 14px; background: linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px, currentColor 7px 11px); } @media (prefers-reduced-motion: no-preference) { .voice-chip.playing { animation: vcpulse 1.6s ease-in-out infinite; } @keyframes vcpulse { 50% { box-shadow: 0 0 0 9px rgba(233, 188, 92, .22); } } } /* ---------- Password reset page ---------- */ .form-ok { background: #EAF3E0; border: 1px solid #C4D8A8; color: #3E6420; border-radius: 12px; padding: 11px 14px; font-size: 15px; margin-bottom: 16px; } /* ---------- Copy button beside the permanent address ---------- */ .chip-copy { display: inline-block; margin-left: 10px; padding: 8px 14px; border: 1.5px solid var(--gold); border-radius: 10px; background: var(--paper); color: var(--amber); font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; transition: background .2s; } .chip-copy:hover { background: var(--gold-soft); } /* ---------- Frankie's contact card, in Settings ---------- A preview of what the phone is about to save, so somebody can see the face and the number before they commit to anything, and so the card on the phone afterwards is recognisably the same thing they tapped here. */ .fc-why { color: var(--mut); font-size: 15px; margin-bottom: 16px; } /* Photo and name on one row, the details full width underneath. The obvious layout, photo beside a block holding all three lines, fell over: the email address is long enough that the block could not fit next to the photo, so it wrapped and left the photo sitting alone on a line of its own. This shape has no width at which it can do that. */ .fc-card { background: var(--gold-soft); border: 1px solid #E2C98F; border-radius: 14px; padding: 16px; margin-bottom: 18px; } .fc-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; } /* Square source in a square box, so neither axis is stretched. */ .fc-photo { width: 76px; height: 76px; border-radius: 50%; flex: 0 0 auto; display: block; } .fc-lines { min-width: 0; } .fc-name { font-size: 21px; font-weight: 700; color: var(--ink); min-width: 0; } .fc-row { font-size: 15px; margin-top: 3px; } .fc-lbl { display: inline-block; min-width: 62px; color: var(--mut); } .fc-val { color: var(--ink); font-weight: 600; } /* An address is long and has no spaces in it, so it is allowed to break anywhere at all, or it pushes the whole panel sideways on a narrow phone. ONLY the address. A phone number that breaks between its digits is a phone number somebody reads out wrong, so it moves to the next line whole. */ .fc-mail { overflow-wrap: anywhere; } a.fc-val { color: #6B4A12; white-space: nowrap; } .fc-save { display: inline-block; text-decoration: none; text-align: center; } .fc-steps { color: var(--mut); font-size: 15px; margin-top: 14px; } .fc-after { color: var(--ink); font-weight: 600; } /* The home screen app case. Amber rather than grey: it is the one message on this panel that says "this will not work here", and it has to be read. */ .fc-or { margin-top: 14px; font-size: 15.5px; color: var(--mut); } .fc-or a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .fc-standalone { background: #FDF3E0; border: 1.5px solid var(--gold); border-radius: 12px; padding: 12px 14px; color: var(--ink); margin-top: 12px; } @media (max-width: 420px) { /* Full width, because a button that matters this much should not be a small target sitting in the corner of a panel. */ .fc-save { display: block; width: 100%; } .fc-lbl { min-width: 0; margin-right: 8px; } } /* ---------- The real home screen tile, shown in step three ---------- */ .homescreen { margin-top: 18px; display: inline-flex; flex-direction: column; align-items: center; gap: 8px; } .homescreen img { width: 86px; height: 86px; display: block; filter: drop-shadow(0 8px 18px rgba(60, 42, 16, .26)); } .homescreen span { font-size: 13.5px; font-weight: 700; color: var(--mut); letter-spacing: .01em; } .cta-card.photo img.horse { filter: drop-shadow(0 8px 20px rgba(20, 12, 4, .5)); } /* ---------- FrankieGPT shared footer ---------- One footer on every surface: the oasis picture with the horses, and the copyright line sitting inside it just above their heads. It is a normal footer at the end of the document, pushed down by the flex column when a page is short, so it can never sit on top of content. It fades in the first time it enters the viewport, unless the reader asked for reduced motion. Identical in site.css, app.css and admin.css apart from the image path, because the three surfaces do not share a stylesheet. ---------- */ /* dvh follows the phone toolbar as it hides and shows; vh does not, and the difference is a page that reports itself taller than the screen really is. */ body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } body > .fg-foot { margin-top: auto; } .fg-foot { flex: 0 0 auto; position: relative; width: 100%; height: auto; aspect-ratio: 2416 / 474; min-height: 190px; overflow: hidden; background: #FAF4E8; transition: opacity .8s ease, transform .8s ease; } /* PAINT ORDER, and it matters: scenery, then the cream veil that dissolves the top edge into the page, then the herd on top of the veil so their ears stay crisp, then the legal line. Real elements paint in tree order, so each layer states its own z-index rather than relying on source position. */ .fg-foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100px; z-index: 1; background: linear-gradient(to bottom, #FAF4E8, rgba(250, 244, 232, .55) 52%, rgba(250, 244, 232, 0)); } /* The scenery fills the strip; the herd is sized by HEIGHT and centred so no face is ever cropped, whatever the window width. The 76% here and the `bottom` of .fg-foot-text are independent: the text is pinned to the bottom edge, not to the horses. */ .fg-foot-scene { position: absolute; inset: 0; display: block; z-index: 0; } .fg-foot-herd { position: absolute; inset: 0; display: block; z-index: 2; } .fg-foot-scene img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; display: block; } .fg-foot-herd img { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); height: 76%; width: auto; max-width: none; display: block; } /* The legal line sits at the very bottom of the picture, across the horses. The owner removed the cream veil on purpose (2026-08-03); the text reads by its own shadow now, so do not bring the background back. */ .fg-foot-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; text-align: center; padding: 22px 20px 9px; font-size: 11.8px; line-height: 1.7; color: #FFF6E4; text-shadow: 0 1px 2px rgba(30, 22, 10, .72), 0 0 12px rgba(30, 22, 10, .4); } .fg-foot-text p { margin: 0; } .fg-foot-text a { color: inherit; font-weight: 700; text-decoration: none; } .fg-foot-text a:hover, .fg-foot-text a:focus-visible { color: #E9BC5C; text-decoration: underline; } .fg-foot-text .dot { margin: 0 7px; opacity: .55; } /* Set by fg-foot.js only; without JavaScript the footer is simply visible. */ /* The lift is applied to the footer's CONTENTS, not to the footer box. The box clips its own overflow, so the animation cannot add scrollable height to the page. Transforming .fg-foot itself is what grew the second bar. */ .fg-foot.fg-pending { opacity: 0; } .fg-foot.fg-pending > * { transform: translateY(16px); } .fg-foot.fg-shown { opacity: 1; } .fg-foot.fg-shown > * { transform: none; } .fg-foot > * { transition: transform .8s ease; } @media (prefers-reduced-motion: reduce) { .fg-foot, .fg-foot > * { transition: none; } .fg-foot.fg-pending { opacity: 1; } .fg-foot.fg-pending > * { transform: none; } } @media (max-width: 1199px) { .fg-foot::before { height: 82px; } .fg-foot-herd img { height: 74%; } .fg-foot-text { padding: 18px 20px 9px; } } @media (max-width: 767px) { .fg-foot::before { height: 72px; } .fg-foot-herd img { height: 70%; } /* The extra left padding keeps the centred block clear of the accessibility launcher, which is fixed to the bottom left corner of the window and would otherwise sit on the first link once the page is scrolled to the end. */ .fg-foot-text { padding: 15px 12px 9px 66px; font-size: 10.6px; line-height: 1.6; } .fg-foot-text .dot { margin: 0 5px; } } /* On the narrowest screens the support address is dropped so the links fit two lines instead of three. It is still on every legal page and in Settings. */ @media (max-width: 560px) { .fg-foot-text p + p a:last-of-type, .fg-foot-text p + p span.dot:last-of-type { display: none; } } /* ---------- Wordmark ---------- The header carries the full lockup rather than a face plus type, so the tagline comes with it. Sized by height; the width follows. ---------- */ .logo { gap: 0; } .logo img { width: auto; height: 52px; border-radius: 0; display: block; } @media (max-width: 960px) { .logo img { height: 46px; } } /* On phones everything stays on ONE row (owner rule 2026-08-03): the lockup sized so both account buttons still fit beside it on a 320 wide screen. */ @media (max-width: 560px) { .site-head .wrap { height: 58px; gap: 8px; padding-left: 14px; padding-right: 14px; } .logo img { width: auto; height: 34px; } .head-nav { gap: 6px; } .head-nav .btn { padding: 8px 12px; font-size: 13.5px; white-space: nowrap; } } @media (max-width: 374px) { .site-head .wrap { padding-left: 10px; padding-right: 10px; } .logo img { height: 31px; } .head-nav .btn { padding: 7px 9px; font-size: 12.5px; } } /* Printing a legal page should give the words, not a page of horses. */ @media print { .fg-foot { height: auto; background: none; } .fg-foot-scene, .fg-foot-herd { display: none; } .fg-foot-text { position: static; background: none; color: #000; text-shadow: none; padding: 12px 0 0; font-size: 9pt; } } /* A phone in landscape has almost no height to spare. */ @media (max-height: 520px) and (orientation: landscape) { .fg-foot { height: 126px; } .fg-foot-herd img { height: 68%; } } /* ---------- Credits panel on Settings ---------- */ .cred-balance { font-size: 17px; margin-bottom: 6px; } .cred-balance b { font-size: 27px; font-family: var(--serif); } .cred-unit { color: var(--mut); font-size: 15px; } .cred-note { color: var(--mut); font-size: 15px; margin-bottom: 14px; } .cred-quick { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 14px; } .cred-head { font-size: 13px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--mut); margin: 18px 0 4px; } .cred-row { display: flex; gap: 12px; align-items: baseline; font-size: 14.5px; color: var(--mut); padding: 7px 0; border-top: 1px solid var(--line); } .cred-row .cred-what { flex: 1 1 auto; color: var(--ink); } .cred-row b.pos { color: #3E6420; } .cred-row b.neg { color: #A3341F; } .del-zone { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 16px; } .del-zone h3 { font-size: 17px; margin-bottom: 6px; } #delBox { margin-top: 14px; } /* The public pages get the same steady scrollbar gutter as the panel, so walking between a long page and a short one never shifts the column. */ html { overflow-y: scroll; scrollbar-gutter: stable; } /* A visible focus ring everywhere, not just where a component happened to define one. This is the baseline; the accessibility panel can make it stronger still. */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid #A85F17; outline-offset: 2px; border-radius: 3px; } /* ========================================================================== MARKETING SITE, v3. Added 2026-08-04 with the repositioning and the new pages. Everything above this line is the original single-page site and is still in use; these are the components the multi-page site needed, plus the design refresh that goes with them. Rules that keep this file honest: - No horizontal overflow, ever. Wide things scroll inside their own box. - Nothing here may put overflow on . That grew a second scrollbar once already; see the note by the html rule near the top. - Every interactive thing keeps a visible focus ring. ========================================================================== */ /* ---------- Header: room for real navigation ---------- */ .head-nav a.plain.on { color: var(--ink); background: var(--cream-2); } .head-nav a.plain.login { display: none; } @media (min-width: 1080px) { .head-nav a.plain.login { display: inline-flex; } } /* The overflow menu is a

so it works with no JavaScript at all, which also means the CSP has nothing to block. */ .nav-more { position: relative; } .nav-more > summary { list-style: none; cursor: pointer; padding: 9px 14px; border-radius: 999px; color: var(--mut); font-weight: 600; font-size: 15.5px; white-space: nowrap; } .nav-more > summary::-webkit-details-marker { display: none; } .nav-more > summary::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); } .nav-more > summary:hover { background: var(--cream-2); color: var(--ink); } .nav-more[open] > summary { background: var(--cream-2); color: var(--ink); } .nav-more-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 250px; padding: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 44px rgba(60, 40, 15, .16); display: flex; flex-direction: column; } .nav-more-panel a { padding: 10px 14px; border-radius: 10px; color: var(--ink); font-weight: 600; font-size: 15.5px; } .nav-more-panel a:hover { background: var(--cream-2); text-decoration: none; } /* Below the widest phones the primary links collapse into the menu, so the header never wraps onto two lines or pushes the page sideways. */ @media (max-width: 1079px) { .head-nav a.plain:not(.login) { display: none; } .nav-more > summary { padding: 8px 12px; font-size: 14.5px; } } @media (max-width: 420px) { .nav-more-panel { min-width: min(78vw, 250px); } } /* ---------- Hero, reworked for a broader claim ---------- */ .hero h1 .uline svg { bottom: -2px; } .hero .sub { max-width: 41ch; } /* Three proof points directly under the hero copy. These carry the three things competitors do not have, so they are the first thing read. */ .hero-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; max-width: 560px; } .hero-proof li { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 12px 13px; } .hero-proof b { display: block; font-size: 14.5px; line-height: 1.3; color: var(--ink); } .hero-proof span { display: block; margin-top: 3px; font-size: 12.8px; color: var(--mut); line-height: 1.45; } @media (max-width: 620px) { .hero-proof { grid-template-columns: 1fr; gap: 8px; } .hero-proof li { padding: 10px 12px; } } /* ---------- Audience cards, the use case entry points ---------- */ /* Three across on a wide screen, so six cards read as two tidy rows rather than four and a stray two. */ .aud-grid { display: grid; gap: 18px; margin-top: 30px; grid-template-columns: 1fr; } @media (min-width: 660px) { .aud-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .aud-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .aud { display: flex; flex-direction: column; gap: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 20px; color: inherit; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } a.aud:hover { text-decoration: none; transform: translateY(-3px); border-color: #E3CFA5; box-shadow: 0 14px 34px rgba(90, 62, 20, .10); } .aud .ico { color: var(--amber); } .aud h3 { font-family: var(--serif); font-size: 20px; font-weight: 650; margin: 0; letter-spacing: -.01em; } .aud p { margin: 0; color: var(--mut); font-size: 15.3px; line-height: 1.62; } .aud .go { margin-top: auto; padding-top: 10px; font-weight: 700; font-size: 15px; color: var(--amber); } .aud .go::after { content: " \2192"; } /* ---------- Capability table: what it actually does, scannable ---------- */ .cap-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 28px; border-radius: var(--radius); } .cap-table { width: 100%; border-collapse: collapse; min-width: 560px; background: var(--paper); } .cap-table th, .cap-table td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--line); vertical-align: top; } .cap-table thead th { font-size: 13px; letter-spacing: .07em; text-transform: uppercase; color: var(--mut); font-weight: 700; background: var(--cream-2); } .cap-table tbody th { font-weight: 700; font-size: 16px; color: var(--ink); width: 34%; } .cap-table td { color: var(--mut); font-size: 15.4px; line-height: 1.6; } .cap-table tbody tr:last-child th, .cap-table tbody tr:last-child td { border-bottom: 0; } /* ---------- Numbered scenario blocks ---------- */ .scenes { display: grid; gap: 18px; margin-top: 30px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); } .scene { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; } .scene h3 { font-family: var(--serif); font-size: 19.5px; font-weight: 650; margin: 0 0 8px; letter-spacing: -.01em; } .scene p { margin: 0 0 10px; color: var(--mut); font-size: 15.3px; line-height: 1.62; } .scene p:last-child { margin-bottom: 0; } .scene .said { display: block; margin: 10px 0 0; padding: 11px 14px; border-radius: 12px; background: var(--cream-2); border-left: 3px solid var(--gold); font-size: 15px; line-height: 1.55; color: var(--ink); } .scene .said b { display: block; font-size: 12.4px; text-transform: uppercase; letter-spacing: .06em; color: var(--mut); margin-bottom: 3px; font-weight: 700; } /* ---------- Pricing ---------- */ .price-grid { display: grid; gap: 18px; margin-top: 30px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); } .price { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; } .price.feature { border-color: var(--gold); box-shadow: 0 14px 34px rgba(90, 62, 20, .10); } .price .tag { font-size: 12.6px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; color: var(--amber); } .price h3 { font-family: var(--serif); font-size: 22px; font-weight: 650; margin: 0; } .price .amt { font-family: var(--serif); font-size: 38px; font-weight: 650; letter-spacing: -.02em; line-height: 1.1; } .price .amt small { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--mut); letter-spacing: 0; } .price ul { margin: 6px 0 0; padding: 0 0 0 2px; list-style: none; display: grid; gap: 8px; } .price li { position: relative; padding-left: 26px; font-size: 15.2px; line-height: 1.55; color: var(--mut); } .price li::before { content: ""; position: absolute; left: 2px; top: .42em; width: 13px; height: 7px; border-left: 2.4px solid var(--good); border-bottom: 2.4px solid var(--good); transform: rotate(-45deg); } .price .foot { margin-top: auto; padding-top: 14px; } .meter { margin-top: 26px; } .meter-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: 0; padding: 0; list-style: none; } .meter-list li { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; } .meter-list b { display: block; font-family: var(--serif); font-size: 21px; font-weight: 650; } .meter-list span { display: block; font-size: 14.4px; color: var(--mut); margin-top: 2px; line-height: 1.5; } /* ---------- Prose for the longer pages ---------- */ .prose { max-width: 72ch; } .prose p { color: var(--mut); font-size: 17px; line-height: 1.72; margin: 0 0 16px; } .prose h3 { font-family: var(--serif); font-size: 23px; font-weight: 650; margin: 30px 0 10px; letter-spacing: -.01em; color: var(--ink); } .prose ul { margin: 0 0 18px; padding-left: 0; list-style: none; display: grid; gap: 9px; } .prose ul li { position: relative; padding-left: 24px; color: var(--mut); font-size: 16.4px; line-height: 1.65; } .prose ul li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); } .prose b, .prose strong { color: var(--ink); } /* ---------- Page intro used by every inner page ---------- */ .page-top { padding: 54px 0 8px; } /* Same left edge as every other section. Constrain the TEXT, never the wrap, or the page develops two different margins. */ .page-top .lede, .page-top h1 { max-width: 62ch; } .page-top h1 { font-family: var(--serif); font-size: clamp(34px, 5.4vw, 54px); font-weight: 650; letter-spacing: -.025em; line-height: 1.08; margin: 8px 0 16px; } .page-top .lede { font-size: clamp(17px, 2.1vw, 20px); line-height: 1.6; color: var(--mut); max-width: 62ch; } .crumbs { font-size: 14px; color: var(--faint); margin: 0 0 4px; } .crumbs a { color: var(--mut); font-weight: 600; } .crumbs .sep { padding: 0 7px; opacity: .6; } /* ---------- Related links strip ---------- */ .related { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } .related a { padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font-weight: 600; font-size: 14.8px; color: var(--ink); } .related a:hover { text-decoration: none; border-color: var(--gold); background: var(--cream-2); } /* ---------- Long quote / positioning statement ---------- */ .statement { margin-top: 30px; padding: 30px 32px; border-radius: var(--radius); background: var(--cream-2); border: 1px solid var(--line); } .statement p { font-family: var(--serif); font-size: clamp(19px, 2.6vw, 25px); line-height: 1.45; letter-spacing: -.012em; color: var(--ink); margin: 0; } .statement .by { display: block; margin-top: 14px; font-family: var(--sans); font-size: 14.5px; color: var(--mut); font-weight: 600; letter-spacing: 0; } /* ---------- Keep every table and pre inside its own box ---------- */ .band table:not(.cap-table) { display: block; overflow-x: auto; max-width: 100%; } /* Alternating section tint, so a long page reads as chapters rather than one unbroken scroll. Kept subtle: this palette lives on warmth, not contrast. */ section.band.alt { background: var(--cream-2); } section.band.alt .bcard, section.band.alt .aud, section.band.alt .scene, section.band.alt .price, section.band.alt .meter-list li { background: var(--paper); } /* The invitation-only notice on the signup page. Deliberately calm: it is an explanation, not a rejection, and the person reading it is someone we want. */ .invite-note { background: var(--cream-2); border: 1px solid var(--gold); border-radius: 14px; padding: 16px 18px; margin-bottom: 22px; } .invite-note b { display: block; font-size: 16px; color: var(--ink); margin-bottom: 6px; } .invite-note p { margin: 0; color: var(--mut); font-size: 15px; line-height: 1.6; } #fInvite { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-family: var(--sans); } #fInvite::placeholder { letter-spacing: .08em; font-weight: 400; text-transform: none; } /* ---------- Header menu, corrected ---------- THE RULE: a link removed from the bar at a breakpoint must appear in the menu at that same breakpoint. Below 1080px the bar keeps only the logo and Get started, so the menu carries everything, including Log in. Above it the bar carries the primary links and the menu hides its duplicates. Getting this wrong made four pages and the login link unreachable on every phone and tablet, which is most visitors. */ .nav-more-panel .nm-rule { display: block; height: 1px; margin: 6px 8px; background: var(--line); } .nav-more-panel .nm-cta { margin-top: 4px; text-align: center; background: var(--amber); color: #FFF8EC; font-weight: 700; border-radius: 999px; padding: 11px 14px; } .nav-more-panel .nm-cta:hover { background: var(--amber-deep); text-decoration: none; } .nm-narrow { display: inline; } .nm-wide { display: none; } @media (min-width: 1080px) { /* Wide: the bar shows them, so the menu must not repeat them. */ .nav-more-panel .nm-dup, .nav-more-panel .nm-cta { display: none; } .nav-more-panel .nm-rule:last-of-type { display: none; } .nm-narrow { display: none; } .nm-wide { display: inline; } } /* The panel can now be long on a small screen, so it scrolls inside itself rather than running off the bottom of the viewport. */ .nav-more-panel { max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); overflow-y: auto; } /* ---------- .trust-item made safe on any background ---------- These colours were written for the dark band only: near-white headings and #C9B896 body. Used inside a normal light .band on /features/ they measured 1.01:1 and 1.78:1, which is invisible, and nothing about the markup hinted at the dependency. The base treatment now reads on the page, and the light treatment applies only inside .trust. Use .trust-grid anywhere you like. */ .trust-item { border-top-color: var(--line); } .trust-item b { color: var(--ink); } .trust-item b::before { color: var(--amber); } .trust-item p { color: var(--mut); } .trust .trust-item { border-top-color: var(--dark-2); } .trust .trust-item b { color: #FBF3DF; } .trust .trust-item b::before { color: var(--gold); } .trust .trust-item p { color: #C9B896; } /* ---------- Closing card: guarantee the overlay, do not hope ---------- The card puts cream text on a photograph behind a dark wash. At 50 to 62 percent the wash was fine over the mountains but would have fallen to about 3.7:1 over a bright patch, and a photograph is not something a contrast check can measure. Raising it to 62 to 74 percent keeps the picture legible and puts the text safely past 4.5:1 no matter what is underneath. */ .cta-card.photo::after { content: ; position: absolute; inset: 0; z-index: 0; background: linear-gradient(rgba(30, 20, 8, .30), rgba(30, 20, 8, .38)); pointer-events: none; } .cta-card.photo > * { position: relative; z-index: 1; }