/* === 00-base.css === */ /* ========================================================================= ChoreShark v3 The site is the water column. You arrive at the surface and the page gets darker the further down you scroll, from lit blue to the abyss. That is one gradient on , stretched over the whole document, so the descent costs no JavaScript and no scroll listener. The palette follows how water actually behaves rather than a set of blues: water absorbs red first, then orange and yellow, so the shallows read green-cyan and only blue survives at depth. The hue shifts as well as the value, which is the difference between water and a gradient. Register: Forest and Fabulous rather than Linear and Stripe. One saturated colour floods everything, the type is heavy and large, the buttons are chunky and have depth, and the shark carries the page. ChoreShark is a game with a pet you feed, so it should not be laid out like a procurement decision. ========================================================================= */ /* ---------- tokens ------------------------------------------------------ */ :root { /* * Depth stops. Water does not simply get darker, it changes hue: it absorbs * red first, then orange and yellow, so shallow water reads green-cyan and * only the blues survive further down. The previous set was six shades of * one blue, which is why it looked like a gradient rather than water. * * Hue runs 184 -> 196 -> 202 -> 207 -> 210 across the descent, so the top is * turquoise and the bottom is a cold blue-black. */ --surface: #1fb3ad; /* sunlit shallows, green-cyan */ --shallow: #0e8fa6; /* the red is gone, cyan left */ --mid: #0b6684; /* teal-blue */ --deep: #0a4260; /* blue */ --trench: #072639; /* almost only blue left */ --abyss: #03101a; /* no light */ /* Token names are kept from the earlier light build so the pages that use them do not all need editing; the values now point into the water. */ --paper: var(--deep); --paper-sunk: rgba(4, 18, 27, 0.42); /* a recessed panel in the water */ --paper-edge: rgba(180, 224, 240, 0.2); /* hairlines, now translucent */ --ink: #eefaff; /* primary text */ --ink-soft: #b3d4e4; /* secondary text */ --ink-faint: #7ea8bd; /* labels, captions */ --foam: #eefaff; --foam-soft: #b3d4e4; --deep-edge: rgba(180, 224, 240, 0.22); --signal: #2f6fe4; /* the app's brand blue, from the shark mark */ --signal-lift: #5a8dee; --signal-shade: #1d4aa0; /* the button's depth edge */ --coin: #f2b33d; /* coins and XP, same as the app */ --brass: #f2b33d; /* The app's own faces. Sora goes to 800 here: the whole category runs heavy display type, and Sora at 600 read like a SaaS dashboard. */ --display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif; --body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace; --s1: 0.5rem; --s2: 0.75rem; --s3: 1rem; --s4: 1.5rem; --s5: 2rem; --s6: 3rem; --s7: 4.5rem; --s8: 6.5rem; --s9: 9rem; --measure: 62ch; --gutter: clamp(1.25rem, 5vw, 3.5rem); } /* ---------- reset ------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--abyss); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* * The descent. The gradient is on , which is as tall as the document, * so scrolling down is scrolling deeper. Percentages rather than pixels mean * a short page still runs the full range: /contact reaches the trench too, it * just gets there faster. */ body { margin: 0; color: var(--ink); background: linear-gradient( 180deg, var(--surface) 0%, var(--shallow) 12%, var(--mid) 30%, var(--deep) 50%, var(--trench) 74%, var(--abyss) 100% ); font-family: var(--body); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.6; -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; margin: 0; color: var(--foam); } p { margin: 0; } ul, ol { margin: 0; padding: 0; } a { color: inherit; } :where(a, button, input, textarea, select):focus-visible { outline: 3px solid var(--coin); outline-offset: 3px; } .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--foam); color: var(--abyss); padding: var(--s2) var(--s3); font-weight: 700; } .skip:focus { left: var(--s3); top: var(--s3); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---------- layout primitives ------------------------------------------- */ .shell { width: 100%; max-width: 78rem; margin-inline: auto; padding-inline: var(--gutter); } .shell-tight { max-width: 58rem; } .shell-wide { max-width: 88rem; } .band { padding-block: var(--s7); } .band-lg { padding-block: var(--s8); } .band-sm { padding-block: var(--s6); } /* * Sections carry no background at all. Tinting alternate bands drew a * hard-edged rectangle across the descent at every boundary, which read as the * colour switching rather than the water deepening. Separation now comes from * spacing and from the panels inside a section, never from the band itself. */ .band-sunk, .band-deep { background: none; } .rule { border: 0; border-top: 1px solid var(--paper-edge); margin: 0; } /* ---------- type styles ------------------------------------------------- */ .label { font-family: var(--display); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--coin); margin: 0; } /* Large, because everything in this category is large. */ .headline { font-size: clamp(3rem, 1.6rem + 6.2vw, 6.25rem); letter-spacing: -0.045em; } .title { font-size: clamp(2.2rem, 1.4rem + 3.2vw, 4rem); letter-spacing: -0.04em; } .subtitle { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); letter-spacing: -0.03em; } .lede { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem); line-height: 1.5; color: var(--foam-soft); max-width: 44ch; } .prose { max-width: var(--measure); } .prose > * + * { margin-top: var(--s3); } .prose p { color: var(--ink-soft); } /* ---------- buttons ----------------------------------------------------- */ /* * Chunky, with a hard bottom edge that compresses when pressed. Every app in * this category does some version of this; a flat 1px-border button reads as * a settings dialog rather than a game. */ .button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 3.5rem; padding: 0.9rem 1.9rem; border: 0; border-radius: 1rem; font-family: var(--display); font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.01em; text-decoration: none; cursor: pointer; transition: transform 0.06s ease, box-shadow 0.06s ease, background-color 0.14s ease; } .button-solid { background: var(--signal); color: #fff; box-shadow: 0 5px 0 0 var(--signal-shade); } .button-solid:hover { background: var(--signal-lift); } .button-solid:active { transform: translateY(4px); box-shadow: 0 1px 0 0 var(--signal-shade); } .button-quiet { background: rgba(238, 250, 255, 0.12); color: var(--foam); box-shadow: 0 5px 0 0 rgba(4, 18, 27, 0.5); } .button-quiet:hover { background: rgba(238, 250, 255, 0.2); } .button-quiet:active { transform: translateY(4px); box-shadow: 0 1px 0 0 rgba(4, 18, 27, 0.5); } .button-small { min-height: 2.75rem; padding: 0.5rem 1.1rem; font-size: 0.9375rem; border-radius: 0.75rem; box-shadow: 0 4px 0 0 var(--signal-shade); } .button-small:active { transform: translateY(3px); box-shadow: 0 1px 0 0 var(--signal-shade); } .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); } .text-link { font-weight: 700; color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--signal); } .text-link:hover { color: var(--signal-lift); } .arrow-link { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--display); font-weight: 800; font-size: 1.0625rem; text-decoration: none; color: var(--coin); } .arrow-link::after { content: '\2192'; transition: transform 0.16s ease; } .arrow-link:hover::after { transform: translateX(5px); } .arrow-link:hover { text-decoration: underline; text-underline-offset: 4px; } /* ---------- masthead ---------------------------------------------------- */ .masthead { position: sticky; top: 0; z-index: 50; background: rgba(4, 18, 27, 0.72); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(180, 224, 240, 0.14); } .masthead-inner { max-width: 88rem; margin-inline: auto; padding: 0 var(--gutter); min-height: 4.5rem; display: flex; align-items: center; gap: var(--s4); } .wordmark { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--display); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.04em; text-decoration: none; white-space: nowrap; color: var(--foam); } .wordmark img { width: 30px; height: 30px; } .site-menu { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); } .menu-list { display: flex; align-items: center; gap: var(--s1); list-style: none; } .menu-link { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.85rem; border: 0; background: transparent; font: inherit; font-family: var(--display); font-size: 0.9375rem; font-weight: 700; color: var(--foam-soft); text-decoration: none; cursor: pointer; border-radius: 0.6rem; } .menu-link:hover { color: var(--foam); background: rgba(238, 250, 255, 0.1); } .menu-link[aria-current='page'] { color: var(--foam); } .menu-caret { width: 0.4rem; height: 0.4rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); transition: transform 0.18s ease; } .menu-parent { position: relative; } .menu-parent.is-open .menu-caret { transform: rotate(225deg) translate(-1px, -1px); } .submenu { display: none; position: absolute; top: calc(100% + 0.6rem); left: 0; width: 21rem; padding: var(--s2); list-style: none; background: #06202e; border: 1px solid rgba(180, 224, 240, 0.18); border-radius: 1rem; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); } /* Invisible bridge covering the 0.6rem gap so moving the cursor from the nav button into the submenu never leaves the hover tree. */ .submenu::before { content: ''; position: absolute; top: -0.75rem; left: 0; right: 0; height: 0.75rem; } .menu-parent.is-open .submenu { display: block; } @media (min-width: 60.01rem) { .menu-parent:hover .submenu { display: block; } .menu-parent:hover .menu-caret { transform: rotate(225deg) translate(-1px, -1px); } } .submenu a { display: block; padding: 0.6rem 0.75rem; text-decoration: none; border-radius: 0.6rem; } .submenu a:hover { background: rgba(238, 250, 255, 0.1); } .submenu b { display: block; font-family: var(--display); font-size: 0.9375rem; font-weight: 800; color: var(--foam); } .submenu span { display: block; font-size: 0.8125rem; color: var(--ink-faint); line-height: 1.4; } .masthead-actions { display: flex; align-items: center; gap: var(--s4); } .menu-button { display: none; align-items: center; gap: 0.5rem; margin-left: auto; padding: 0.6rem 0.9rem; background: rgba(238, 250, 255, 0.12); border: 0; border-radius: 0.7rem; font-family: var(--display); font-size: 0.9375rem; font-weight: 800; color: var(--foam); cursor: pointer; } .menu-button-bars { position: relative; width: 1rem; height: 2px; background: currentColor; } .menu-button-bars::before, .menu-button-bars::after { content: ''; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; } .menu-button-bars::before { top: -5px; } .menu-button-bars::after { top: 5px; } @media (max-width: 60rem) { .menu-button { display: inline-flex; } .site-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: var(--s3); padding: var(--s4) var(--gutter) var(--s5); background: #06202e; border-bottom: 1px solid rgba(180, 224, 240, 0.18); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45); } .masthead.is-open .site-menu { display: flex; } .menu-list { flex-direction: column; align-items: stretch; gap: 0; } .menu-link { width: 100%; justify-content: space-between; padding: 0.8rem 0; font-size: 1.1rem; } .menu-link:hover { background: transparent; } .submenu { position: static; width: auto; border: 0; box-shadow: none; background: transparent; padding: 0 0 var(--s2) var(--s3); border-left: 2px solid var(--paper-edge); } .masthead-actions { flex-direction: column; align-items: stretch; gap: var(--s3); } .masthead-actions .button { width: 100%; } } /* ---------- colophon ---------------------------------------------------- */ /* The seabed. Nothing below this, so it is the darkest thing on the page. */ .colophon { background: var(--abyss); color: var(--ink-soft); padding-block: var(--s7) var(--s5); font-size: 0.9375rem; } .colophon-inner, .colophon-base { max-width: 78rem; margin-inline: auto; padding-inline: var(--gutter); } .colophon-inner { display: grid; gap: var(--s6); } @media (min-width: 56rem) { .colophon-inner { grid-template-columns: 18rem 1fr; gap: var(--s7); } } .colophon-brand p { margin-top: var(--s3); max-width: 26ch; } .colophon-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--s5); } .colophon-links h2 { font-family: var(--display); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coin); margin-bottom: var(--s2); } .colophon-links ul { list-style: none; display: grid; gap: 0.5rem; } .colophon-links a { text-decoration: none; } .colophon-links a:hover { color: var(--foam); text-decoration: underline; text-underline-offset: 3px; } .colophon-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid rgba(180, 224, 240, 0.16); font-size: 0.875rem; } .colophon-note { opacity: 0.7; } /* === 10-home.css === */ /* ========================================================================= Home page The descent, top to bottom: surface (live tank) → the coin tiles → Today → the schedule → the seven species → the pair → the seabed closer. Nothing here uses a hairline rule or a data table. Those were the earlier build's B2B habits. Everything is a chunky, rounded, translucent object floating in water, because that is what the category does and what the product is. ========================================================================= */ /* ---------- hero: the surface ------------------------------------------- */ /* * One screen, exactly. The masthead is 4.5rem and sticky, so the hero takes * what is left; svh rather than vh so mobile browser chrome does not push the * buttons out of sight. Everything in the hero has to fit inside that, which * is why the headline here is capped below the global .headline size. */ .hero { position: relative; display: flex; align-items: center; height: calc(100svh - 4.5rem); min-height: 34rem; overflow: hidden; } /* * `isolation` matters. The scene positions its layers with z-indexes up to 14; * without its own stacking context those compete with the hero copy. */ .hero-water { position: absolute; inset: 0; z-index: 0; isolation: isolate; } .hero-fallback { width: 100%; height: 100%; object-fit: cover; } /* * The traverse, unchanged from the site's existing animation: 26s linear, out * to 150vw, flip, and back. The shark inside the track is the app's rig, so * the fins and tail animate off rig-meta.json while the track carries it * across the page. */ .hero-swimmer { position: absolute; top: 34%; left: -34%; width: min(64vw, 536px); aspect-ratio: 3 / 2; z-index: 10; opacity: 0.94; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55)); animation: swim-route 26s linear infinite; } @keyframes swim-route { 0% { transform: translate(0, 0) scaleX(1); } 50% { transform: translate(150vw, -40px) scaleX(1); } 50.01% { transform: translate(150vw, -40px) scaleX(-1); } 100% { transform: translate(0, 0) scaleX(-1); } } @media (prefers-reduced-motion: reduce) { /* Parked, not swimming, matching how the site has always handled this. */ .hero-swimmer { animation: none; top: 22%; left: auto; right: 2%; transform: none; } } /* Text over moving water needs its own ground, or a passing light shaft eats it. Weighted to the left, where the copy is. */ .hero::after { content: ''; position: absolute; inset: 0; z-index: 11; pointer-events: none; background: linear-gradient(to right, rgba(3, 16, 26, 0.92) 0%, rgba(3, 16, 26, 0.72) 30%, rgba(3, 16, 26, 0.15) 58%, transparent 78%), linear-gradient(to bottom, transparent 55%, rgba(3, 16, 26, 0.55) 100%); } .hero-inner { position: relative; z-index: 12; width: 100%; } .hero-copy { max-width: 34rem; } /* Capped below the global headline size: at 6.25rem the copy did not fit one screen and the buttons fell below the fold. */ .hero-copy .headline { margin-top: var(--s2); font-size: clamp(2.5rem, 1.2rem + 4.2vw, 4.5rem); } .hero-copy .lede { margin-top: var(--s3); max-width: 34ch; font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); } .hero-actions { margin-top: var(--s4); } .hero-note { margin-top: var(--s3); font-size: 0.9375rem; color: var(--foam-soft); } @media (max-width: 61.99rem) { .hero { align-items: flex-end; } .hero-inner { padding-bottom: var(--s6); } .hero-copy .headline { font-size: clamp(2.4rem, 1.4rem + 5vw, 3.4rem); } /* A narrow, tall hero compresses the ramp, so a three-stop gradient reads as an edge where the water "stops". More stops, spread wider, keeps it a fade. */ .hero::after { background: linear-gradient( to top, rgba(3, 16, 26, 0.97) 14%, rgba(3, 16, 26, 0.88) 32%, rgba(3, 16, 26, 0.62) 48%, rgba(3, 16, 26, 0.32) 64%, rgba(3, 16, 26, 0.1) 80%, transparent 94% ); } .hero-swimmer { top: 16%; width: min(78vw, 420px); } } /* ---------- coin tiles -------------------------------------------------- */ .premise-head { max-width: 40rem; } .premise-head .lede { margin-top: var(--s4); } /* * What a chore pays, as objects rather than a table. The earlier build set * this as a hairline ledger, which is how you show a billing summary. */ .coins { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--s3); margin-top: var(--s6); } .coin-tile { padding: var(--s4); border-radius: 1.25rem; background: rgba(238, 250, 255, 0.08); box-shadow: inset 0 1px 0 0 rgba(238, 250, 255, 0.14); } .coin-tile b { display: block; font-family: var(--display); font-size: 2.6rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--coin); } .coin-tile span { display: block; margin-top: var(--s2); font-weight: 600; } .coin-tile em { display: block; margin-top: 0.2rem; font-style: normal; font-size: 0.875rem; color: var(--ink-faint); } /* ---------- feature split ----------------------------------------------- */ .feature-split { display: grid; gap: var(--s6); align-items: center; } @media (min-width: 62rem) { .feature-split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: var(--s8); } } .feature-copy .title { margin-top: var(--s3); } .feature-copy .lede { margin-top: var(--s4); } .feature-copy > p:last-child { margin-top: var(--s5); } .notes { list-style: none; margin-top: var(--s5); display: grid; gap: var(--s3); color: var(--foam-soft); } .notes li { padding-left: 2rem; position: relative; } /* A bubble, not a bullet or a dash. */ .notes li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 0.7rem; height: 0.7rem; border-radius: 999px; background: var(--signal); box-shadow: 0 0 0 4px rgba(47, 111, 228, 0.2); } .feature-media { position: relative; } .phone { max-width: 22rem; margin-inline: auto; padding: 0.55rem; background: #04121b; border-radius: 2.25rem; box-shadow: inset 0 0 0 1px rgba(238, 250, 255, 0.16), 0 30px 60px rgba(0, 0, 0, 0.5); } .phone img { border-radius: 1.8rem; } .float-sheet { margin: 0; max-width: 20rem; } .float-sheet img { border-radius: 1rem; box-shadow: 0 22px 44px rgba(0, 0, 0, 0.5); } .float-sheet figcaption { margin-top: var(--s3); font-size: 0.875rem; font-weight: 600; color: var(--ink-faint); } @media (min-width: 48rem) { .float-sheet { position: absolute; left: 0; bottom: -3rem; width: 18rem; } } @media (max-width: 47.99rem) { .float-sheet { margin: var(--s5) auto 0; } } /* ---------- the schedule ------------------------------------------------ */ .lede-wide { max-width: 52ch; margin-top: var(--s4); } .cadence { list-style: none; display: grid; gap: var(--s3); margin-top: var(--s6); } @media (min-width: 52rem) { .cadence { grid-template-columns: repeat(4, 1fr); } } .cadence-step { padding: var(--s4); border-radius: 1.25rem; background: rgba(238, 250, 255, 0.07); box-shadow: inset 0 1px 0 0 rgba(238, 250, 255, 0.12); } /* Only the two steps that change something are lit. The other two are the app deliberately doing nothing, which is the point being made. */ .cadence-step.is-shift { background: rgba(47, 111, 228, 0.16); box-shadow: inset 0 0 0 2px rgba(90, 141, 238, 0.5); } .cadence-step.is-back { background: rgba(242, 179, 61, 0.16); box-shadow: inset 0 0 0 2px rgba(242, 179, 61, 0.45); } .cadence-count { font-family: var(--display); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); } .cadence-step.is-shift .cadence-count { color: var(--signal-lift); } .cadence-step.is-back .cadence-count { color: var(--coin); } .cadence-state { font-family: var(--display); font-size: 1.7rem; font-weight: 800; letter-spacing: -0.035em; margin-top: var(--s2); color: var(--foam); } .cadence-note { margin-top: var(--s2); font-size: 0.9375rem; line-height: 1.5; color: var(--foam-soft); } .cadence-foot { margin-top: var(--s5); color: var(--foam-soft); max-width: 56ch; } /* ---------- the seven species ------------------------------------------- */ .aquarium-head { display: grid; gap: var(--s4); } @media (min-width: 58rem) { .aquarium-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); align-items: end; } } .aquarium-head .title { margin-top: var(--s3); } .species { list-style: none; margin-top: var(--s6); display: grid; /* All seven have to be on screen at once. The great white is the payoff and it is the highlighted tile, so a horizontal scroller that pushed it off the right edge defeated the section. auto-fit wraps instead of scrolling. */ grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--s2); } @media (min-width: 64rem) { .species { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s3); } } .species li { padding: var(--s3) var(--s3) var(--s4); border-radius: 1.25rem; background: rgba(238, 250, 255, 0.07); box-shadow: inset 0 1px 0 0 rgba(238, 250, 255, 0.12); text-align: center; } /* The one you are climbing towards. */ .species li.is-last { background: rgba(47, 111, 228, 0.16); box-shadow: inset 0 0 0 2px rgba(90, 141, 238, 0.5); } .species img { width: 100%; max-width: 10rem; margin-inline: auto; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.5)); } .species b { display: block; margin-top: var(--s2); font-family: var(--display); font-size: 1rem; font-weight: 800; color: var(--foam); } .species span { display: block; margin-top: 0.15rem; font-size: 0.8125rem; font-weight: 700; color: var(--ink-faint); } .species li.is-last span { color: var(--signal-lift); } .aquarium-foot { display: grid; gap: var(--s4); margin-top: var(--s6); color: var(--foam-soft); } @media (min-width: 52rem) { .aquarium-foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s6); } } .aquarium-foot p { max-width: 56ch; } /* ---------- the pair ---------------------------------------------------- */ .pair { display: grid; gap: var(--s4); } @media (min-width: 52rem) { .pair { grid-template-columns: 1fr 1fr; gap: var(--s5); } } .pair article { padding: var(--s5); border-radius: 1.5rem; background: rgba(238, 250, 255, 0.07); box-shadow: inset 0 1px 0 0 rgba(238, 250, 255, 0.12); } .pair .subtitle { margin-top: var(--s2); } .pair article > p { margin-top: var(--s3); color: var(--foam-soft); } .pair article > p:last-child { margin-top: var(--s4); } /* ---------- the seabed -------------------------------------------------- */ .closer { text-align: center; } .closer-lede { margin: var(--s4) auto 0; } .closer-actions { justify-content: center; margin-top: var(--s6); } /* === 20-interior.css === */ /* ========================================================================= Interior pages Interior pages open on paper with a hairline under the title, rather than the dark hero the home page uses. That difference is deliberate: arriving on /features/today should feel like a different room in the same house, not a reskin of the front door. ========================================================================= */ /* ---------- page head --------------------------------------------------- */ .page-head { padding-block: var(--s7) var(--s6); border-bottom: 1px solid var(--paper-edge); } .page-head .headline, .page-head .title { margin-top: var(--s3); } .page-head .lede { margin-top: var(--s4); max-width: 50ch; } .page-head-title { font-size: clamp(1.75rem, 1.2rem + 2.5vw, 4rem); letter-spacing: -0.03em; overflow-wrap: break-word; } /* Breadcrumb back to the section index. Feature pages are deep in the tree and the nav alone does not say where you are. */ .crumb { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); text-decoration: none; } .crumb::before { content: '\2190'; } .crumb:hover { color: var(--signal); } /* ---------- generic content blocks -------------------------------------- */ /* Copy on one side, an image or diagram on the other. Alternating sides down a page gives rhythm without needing a new component each time. */ .duo { display: grid; gap: var(--s6); align-items: center; } @media (min-width: 60rem) { .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); } .duo-flip > *:first-child { order: 2; } } .duo .title { margin-top: var(--s3); } .duo .lede { margin-top: var(--s4); } .stack > * + * { margin-top: var(--s3); } .stack p { color: var(--ink-soft); max-width: 52ch; } /* ---------- lists ------------------------------------------------------- */ .steps { counter-reset: step; list-style: none; display: grid; gap: var(--s4); margin-top: var(--s5); } .steps li { counter-increment: step; position: relative; padding-left: 2rem; color: var(--ink-soft); max-width: 56ch; line-height: 1.5; } .steps li::before { content: counter(step); position: absolute; left: 0; top: 0; font-family: var(--mono); font-size: 0.8125rem; font-weight: 700; color: var(--signal); line-height: inherit; } .steps b { color: var(--ink); } .checks { list-style: none; display: grid; gap: var(--s3); margin-top: var(--s4); color: var(--ink-soft); } .checks li { padding-left: 1.6rem; position: relative; max-width: 56ch; } .checks li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 0.7rem; height: 1px; background: var(--signal); } .checks b { color: var(--ink); } /* Facts about a thing, set as a table rather than a row of cards. */ .spec { width: 100%; border-collapse: collapse; margin-top: var(--s4); font-size: 0.9375rem; } .spec tr { border-top: 1px solid var(--paper-edge); } .spec tr:last-child { border-bottom: 1px solid var(--paper-edge); } .spec th { text-align: left; font-family: var(--mono); font-weight: 400; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); padding: 0.85rem var(--s4) 0.85rem 0; white-space: nowrap; vertical-align: top; width: 1%; } .spec td { padding: 0.85rem 0; } /* ---------- index list (features, how, blog) ---------------------------- */ /* A list of links with descriptions, on rules. The v2 version of this was five identical bordered cards. */ .index-list { list-style: none; margin-top: var(--s5); } .index-list li { border-top: 1px solid var(--paper-edge); } .index-list li:last-child { border-bottom: 1px solid var(--paper-edge); } .index-list a { display: grid; gap: var(--s2); padding: var(--s4) 0; text-decoration: none; transition: background-color 0.14s ease; } @media (min-width: 46rem) { .index-list a { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto; align-items: baseline; gap: var(--s5); } } .index-list a:hover { background: var(--paper-sunk); } .index-list a:hover h2, .index-list a:hover h3 { color: var(--signal); } .index-list h2, .index-list h3 { font-size: 1.3rem; transition: color 0.14s ease; } .index-list p { color: var(--ink-soft); font-size: 0.9375rem; } .index-list .go { font-family: var(--mono); font-size: 0.75rem; color: var(--signal); white-space: nowrap; } /* ---------- article ----------------------------------------------------- */ .article { max-width: 44rem; margin-inline: auto; } .article p { margin-top: var(--s4); font-size: 1.125rem; line-height: 1.75; color: var(--ink-soft); } .article em { color: var(--ink); font-style: italic; } .article strong, .article b { color: var(--foam); } /* Standfirst */ .article-standfirst { font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem) !important; line-height: 1.55 !important; color: var(--foam) !important; font-weight: 500; margin-top: 0 !important; } .article h2 { margin-top: var(--s7); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); letter-spacing: -0.03em; color: var(--foam); } /* Byline */ .article-byline { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--paper-edge); } .byline-avatar { width: 2.75rem; height: 2.75rem; border-radius: 999px; background: rgba(4, 18, 27, 0.6); padding: 0.35rem; box-shadow: inset 0 0 0 1px rgba(180, 224, 240, 0.2); } .byline-info { display: flex; flex-direction: column; gap: 0.15rem; } .byline-name { font-family: var(--display); font-weight: 800; font-size: 1rem; color: var(--foam); } .byline-meta { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); } /* Pullquote */ .article-pullquote { margin: var(--s6) 0; padding: var(--s4) var(--s5); border-left: 3px solid var(--signal); background: rgba(238, 250, 255, 0.05); border-radius: 0 1rem 1rem 0; } .article-pullquote p { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); line-height: 1.45; color: var(--foam); letter-spacing: -0.02em; } /* Adaptive cadence preview in article */ .article-callout-cadence { margin: var(--s5) 0; display: grid; gap: var(--s3); align-items: center; } @media (min-width: 40rem) { .article-callout-cadence { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } } .cadence-mini-step { padding: var(--s4); border-radius: 1.25rem; background: rgba(238, 250, 255, 0.06); box-shadow: inset 0 1px 0 0 rgba(238, 250, 255, 0.12); } .cadence-mini-step.is-adapting { background: rgba(47, 111, 228, 0.14); box-shadow: inset 0 0 0 2px rgba(90, 141, 238, 0.45); } .cadence-mini-badge { display: block; font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); } .cadence-mini-step.is-adapting .cadence-mini-badge { color: var(--signal-lift); } .cadence-mini-step b { display: block; margin-top: var(--s2); font-family: var(--display); font-size: 1.25rem; font-weight: 800; color: var(--foam); } .cadence-mini-step p { margin-top: var(--s2); font-size: 0.9375rem; line-height: 1.5; color: var(--foam-soft); } .cadence-mini-arrow { text-align: center; font-family: var(--display); font-size: 1.5rem; color: var(--coin); transform: rotate(90deg); } @media (min-width: 40rem) { .cadence-mini-arrow { transform: none; } } /* Mid-article inline funnel banner */ .article-inline-funnel { margin: var(--s6) 0; padding: var(--s4); border-radius: 1.25rem; background: rgba(4, 18, 27, 0.55); border: 1px solid rgba(180, 224, 240, 0.22); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35); display: grid; gap: var(--s4); align-items: center; } @media (min-width: 44rem) { .article-inline-funnel { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s5); padding: var(--s5); margin: var(--s7) 0; border-radius: 1.5rem; } } .funnel-copy .funnel-title { margin-top: var(--s2); font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.6rem); color: var(--foam); } .funnel-copy p { margin-top: var(--s2); font-size: 0.9375rem; line-height: 1.5; color: var(--foam-soft); } .funnel-cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); } /* Tank figure in article */ .article-tank-figure { margin: var(--s6) 0; } .tank-figure-wrapper { background: #04121b; border-radius: 1.25rem; padding: 0.5rem; box-shadow: inset 0 0 0 1px rgba(238, 250, 255, 0.16), 0 24px 50px rgba(0, 0, 0, 0.5); overflow: hidden; } .tank-figure-wrapper img { border-radius: 0.9rem; width: 100%; height: auto; } .article-tank-figure figcaption { margin-top: var(--s3); font-size: 0.875rem; color: var(--ink-faint); line-height: 1.5; } /* Signature block */ .article-signature { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--paper-edge); } .signature-line { font-family: var(--display); font-weight: 800; font-size: 1.25rem; color: var(--foam); } .signature-role { margin-top: 0.2rem; font-size: 0.9375rem; color: var(--ink-faint); } /* Funnel closer (seabed closer) */ .article-closer { padding-block: var(--s7) var(--s8); border-top: 1px solid var(--paper-edge); background: linear-gradient(180deg, transparent 0%, rgba(3, 16, 26, 0.75) 100%); } .closer-checklist { list-style: none; margin-top: var(--s5); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s5); font-size: 0.9375rem; color: var(--foam-soft); } .closer-checklist li { display: inline-flex; align-items: center; gap: 0.45rem; } .closer-checklist .check-icon { color: var(--signal-lift); font-weight: 800; } @media (max-width: 34rem) { .closer-actions { flex-direction: column; width: 100%; align-items: stretch; } .closer-actions .button { width: 100%; } .closer-checklist { flex-direction: column; align-items: center; gap: var(--s2); } } /* ---------- forms ------------------------------------------------------- */ .form-layout { display: grid; gap: var(--s6); align-items: start; } @media (min-width: 58rem) { .form-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); gap: var(--s8); } } .field { display: grid; gap: 0.4rem; } .field + .field { margin-top: var(--s4); } .field label { font-family: var(--display); font-size: 0.9375rem; font-weight: 700; } .field input, .field select, .field textarea { font: inherit; font-size: 1rem; /* The field itself is white, so its text cannot use --ink, which is now near-white for the water. This is the one place the page needs dark ink. */ color: #08222f; background: #fff; border: 0; border-radius: 0.75rem; padding: 0.85rem 1rem; width: 100%; box-shadow: inset 0 0 0 2px transparent; } /* The unchosen placeholder option, which must not read as an answer. */ .field select:invalid { color: #5c7d8c; } .field textarea { resize: vertical; min-height: 9rem; } .field input:focus, .field select:focus, .field textarea:focus { box-shadow: inset 0 0 0 2px var(--signal); } .field [aria-invalid='true'] { box-shadow: inset 0 0 0 2px var(--signal); } .form-error { margin-top: var(--s4); color: var(--signal); font-size: 0.9375rem; font-weight: 600; } .form-status { margin-top: var(--s4); padding: var(--s3); background: var(--paper-sunk); border-left: 2px solid var(--brass); font-size: 0.9375rem; } .form-submit { margin-top: var(--s5); } .form-note { margin-top: var(--s3); font-size: 0.875rem; color: var(--ink-faint); max-width: 52ch; } .form-note a { color: var(--ink-soft); } .aside { padding: var(--s4); background: var(--paper-sunk); font-size: 0.9375rem; } .aside h2 { font-family: var(--body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; } .aside p { margin-top: var(--s2); color: var(--ink-soft); } .aside p + p { margin-top: var(--s3); } /* ---------- download ---------------------------------------------------- */ .download-hero { display: grid; gap: var(--s6); align-items: center; } @media (min-width: 52rem) { .download-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--s7); } } .download-card { margin-top: var(--s5); padding: var(--s5); background: var(--paper-sunk); border: 1px solid var(--paper-edge); border-radius: 12px; display: flex; flex-direction: column; gap: var(--s4); } .download-app-header { display: flex; align-items: center; gap: var(--s3); } .download-app-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--trench); padding: 8px; border: 1px solid var(--paper-edge); flex-shrink: 0; } .download-app-name { font-family: var(--headline); font-size: 1.25rem; font-weight: 700; color: var(--ink); line-height: 1.2; } .download-app-sub { font-size: 0.875rem; color: var(--ink-faint); margin-top: 2px; } .download-specs { display: flex; flex-wrap: wrap; gap: var(--s2); } .spec-pill { font-size: 0.8125rem; padding: 0.25rem 0.65rem; border-radius: 999px; background: rgba(180, 224, 240, 0.08); border: 1px solid var(--paper-edge); color: var(--ink-soft); } .spec-pill strong { color: var(--ink); font-weight: 600; margin-right: 0.25rem; } .download-action { display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; } .button-download { display: inline-flex; align-items: center; gap: var(--s2); padding: 0.85rem 1.6rem; font-size: 1.0625rem; font-weight: 700; } .download-icon { flex-shrink: 0; } .download-reassurance { font-size: 0.8125rem; color: var(--ink-faint); } .download-sync-note { font-size: 0.875rem; color: var(--ink-soft); line-height: 1.45; border-top: 1px solid var(--paper-edge); padding-top: var(--s3); margin-top: 0; } .install-steps { gap: var(--s4); } .install-steps li { max-width: 64ch; } .install-steps b { display: block; font-size: 1.0625rem; color: var(--ink); margin-bottom: 2px; } .install-steps p { margin: 0; color: var(--ink-soft); line-height: 1.45; } .test-card { padding: var(--s5); background: var(--paper-sunk); border: 1px solid var(--paper-edge); border-radius: 12px; } .test-card .checks { margin-top: var(--s4); } .test-card .checks li { margin-bottom: var(--s2); line-height: 1.45; } .test-hint { margin-top: var(--s3); color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.45; } .test-alert { margin-top: var(--s4); padding: var(--s3) var(--s4); border-radius: 6px; background: rgba(47, 111, 228, 0.08); border: 1px solid rgba(47, 111, 228, 0.25); } .test-alert-badge { display: inline-block; font-family: var(--body); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--signal); margin-bottom: 0.25rem; } .test-alert p { margin: 0; font-size: 0.875rem; color: var(--ink-soft); line-height: 1.4; } /* ---------- tailpiece --------------------------------------------------- */ /* The closing call to action every interior page ends on. Kept small: the home page gets the big one, and repeating that at full size on thirteen pages is exactly the sameness this redesign is trying to remove. */ .tailpiece { border-top: 1px solid var(--paper-edge); padding-block: var(--s6); } .tailpiece-inner { display: grid; gap: var(--s4); align-items: center; } @media (min-width: 46rem) { .tailpiece-inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s6); } } .tailpiece .subtitle { font-size: 1.5rem; } .tailpiece p { color: var(--ink-soft); margin-top: 0.35rem; } /* === 30-figures.css === */ /* ========================================================================= Figures and tables used on the feature pages. ========================================================================= */ /* A wide screenshot presented as a plate, with the caption doing the explaining rather than an overlay of floating labels. */ .tank-figure { margin: 0; } .tank-figure img { width: 100%; border-radius: 3px; box-shadow: 0 24px 60px rgba(20, 25, 28, 0.22); } .tank-figure figcaption { margin-top: var(--s3); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--ink-faint); } /* Relic art on paper. The art is painted on dark backgrounds in-app, so on paper each one sits on a sunk tile rather than floating on white. */ .relics { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); } @media (min-width: 34rem) { .relics { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 60rem) { .relics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); } } .relics li { text-align: center; } .relics img { width: 100%; background: var(--deep); border-radius: 3px; padding: var(--s3); } .relics span { display: block; margin-top: var(--s2); font-family: var(--mono); font-size: 0.75rem; color: var(--ink-faint); } /* ---------- comparison matrix ------------------------------------------- */ /* Three columns of rules rather than three cards. A card per type made the three look interchangeable, which is the opposite of the point. */ .matrix { width: 100%; border-collapse: collapse; font-size: 0.9375rem; text-align: left; } .matrix thead th { vertical-align: bottom; padding: 0 var(--s3) var(--s3) 0; border-bottom: 2px solid var(--ink); } .matrix thead th b { display: block; font-family: var(--display); font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; } .matrix thead th span { display: block; font-family: var(--mono); font-size: 0.7rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); } .matrix tbody tr { border-bottom: 1px solid var(--paper-edge); } .matrix tbody th { font-family: var(--mono); font-weight: 400; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); padding: var(--s3) var(--s4) var(--s3) 0; vertical-align: top; white-space: nowrap; } .matrix tbody td { padding: var(--s3) var(--s3) var(--s3) 0; vertical-align: top; color: var(--ink-soft); } /* Below the breakpoint a six-row, four-column table stops being readable, so it becomes one labelled block per type. */ @media (max-width: 46rem) { .matrix, .matrix thead, .matrix tbody, .matrix tr, .matrix th, .matrix td { display: block; } .matrix thead { display: none; } .matrix tbody tr { border-bottom: 0; padding-bottom: var(--s4); } .matrix tbody th { padding: var(--s4) 0 var(--s2); border-top: 1px solid var(--paper-edge); white-space: normal; } .matrix tbody td { padding: 0 0 0 var(--s3); border-left: 2px solid var(--paper-edge); } .matrix tbody td + td { margin-top: var(--s2); } /* Without the header row each cell needs to say which type it describes. */ .matrix tbody td::before { content: attr(data-type) ': '; color: var(--ink); font-weight: 600; } }