/* ---------- self-hosted fonts ---------- */ @font-face { font-family: "VCR OSD Mono"; src: url("assets/fonts/vcr-osd-mono.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* ---------- tokens ---------- */ :root { /* Win9x palette */ --silver: #c0c0c0; --silver-light: #dfdfdf; --silver-dark: #808080; --silver-darker: #404040; --white: #ffffff; --black: #000000; --title-blue-1: #000080; --title-blue-2: #1084d0; --teal: #008080; /* accents */ --pink: #ff3eb5; --pink-glow: rgba(255, 62, 181, 0.55); /* fonts. --font-vcr → chunky CRT pixel font, reserved for headlines/titles/labels. --font-body → Arial for paragraph copy (ledes, card bodies, lists). --font-system / --font-mono → VT323 for UI chrome + subheaders. */ --font-body: Arial, Helvetica, "Helvetica Neue", sans-serif; --body-letter-spacing: 0.04em; --font-system: "VT323", "Courier New", ui-monospace, monospace; --font-mono: "VT323", "Courier New", ui-monospace, monospace; --font-vcr: "VCR OSD Mono", "VT323", "Courier New", ui-monospace, monospace; --font-cyber: "Audiowide", system-ui, sans-serif; --font-chrome: "Bagel Fat One", "Audiowide", system-ui, sans-serif; /* feature-number pulse colors */ --pulse-1: #ff3eb5; --pulse-2: #6ad6ff; --pulse-3: #b8ff6a; --pulse-4: #ffb84a; /* Sticky-note grids: portrait, near-square cells (width is fluid via grid 1fr) */ --sticky-note-ratio: 5 / 6; /* Gap between hero/read_me and ticker, and ticker → problem/fix stickies */ --ticker-adjacent-gap: clamp(20px, 4vw, 36px); } /* ---------- reset ---------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* SEO: visually-hidden h1 so crawlers see a primary heading without altering layout. */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } body { font-family: var(--font-body); color: var(--black); min-height: 100vh; /* Teal fallback shows briefly while the wallpaper loads (and as the body of the viewport before the fixed pseudo paints). */ background-color: var(--teal); cursor: none; } input, textarea, .email-input { cursor: text; } /* ---------- dolphin cursor (DOM element, captured by screen recording) ---------- */ #dolphin-cursor { position: fixed; top: 0; left: 0; width: 32px; height: 32px; pointer-events: none; z-index: 10000; opacity: 0; transform: translate3d(-100px, -100px, 0); will-change: transform; transition: opacity 120ms ease; } .dolphin-cursor__inner { width: 100%; height: 100%; background: url("assets/cursor-dolphin.svg") center / contain no-repeat; filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, 0.35)); animation: dolphin-bob 1.7s ease-in-out infinite; transform-origin: 50% 60%; user-select: none; } @keyframes dolphin-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-2px) rotate(3deg); } } @media (hover: none), (prefers-reduced-motion: reduce) { #dolphin-cursor { display: none; } body { cursor: auto; } } /* Wallpaper + vignette + pixel-grid layered on a single fixed pseudo so the image stays anchored to the viewport on mobile (where background-attachment: fixed on is silently ignored by iOS Safari and friends). Layer order (top → bottom): pixel grid, vignette, wallpaper. WebP first, JPG fallback. */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-color: var(--teal); background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.35) 100%), url("assets/wallpaper-rainbow.jpg"); background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.35) 100%), -webkit-image-set( url("assets/wallpaper-rainbow.webp") type("image/webp"), url("assets/wallpaper-rainbow.jpg") type("image/jpeg") ); background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.35) 100%), image-set( url("assets/wallpaper-rainbow.webp") type("image/webp"), url("assets/wallpaper-rainbow.jpg") type("image/jpeg") ); background-size: 4px 4px, 100% 100%, cover; background-position: 0 0, center, center; background-repeat: repeat, no-repeat, no-repeat; } /* Smaller wallpaper on phones — saves ~50KB on cellular. */ @media (max-width: 768px) { body::before { background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.35) 100%), url("assets/wallpaper-rainbow.jpg"); background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.35) 100%), -webkit-image-set( url("assets/wallpaper-rainbow-mobile.webp") type("image/webp"), url("assets/wallpaper-rainbow.jpg") type("image/jpeg") ); background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.35) 100%), image-set( url("assets/wallpaper-rainbow-mobile.webp") type("image/webp"), url("assets/wallpaper-rainbow.jpg") type("image/jpeg") ); } } /* ---------- layout ---------- */ .desktop { position: relative; z-index: 1; max-width: clamp(320px, 92vw, 880px); margin: 0 auto; padding: var(--ticker-adjacent-gap) clamp(14px, 4vw, 24px) clamp(40px, 8vw, 72px); display: flex; flex-direction: column; align-items: stretch; gap: clamp(24px, 5vw, 44px); } /* ---------- window ---------- */ .window { background: var(--silver); border-top: 2px solid var(--white); border-left: 2px solid var(--white); border-right: 2px solid var(--silver-darker); border-bottom: 2px solid var(--silver-darker); box-shadow: inset -1px -1px 0 var(--silver-dark), inset 1px 1px 0 var(--silver-light), 4px 4px 0 rgba(0, 0, 0, 0.35); padding: 3px; max-width: 100%; overflow-x: clip; } .title-bar { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(90deg, var(--title-blue-1) 0%, var(--title-blue-2) 100%); color: var(--white); padding: 4px 4px 4px 8px; font-family: var(--font-vcr); font-weight: 400; font-size: 15px; user-select: none; position: relative; overflow: hidden; } /* CRT scanlines on title bars (static — no flicker) */ .title-bar::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( 0deg, rgba(255, 255, 255, 0.06) 0px, rgba(255, 255, 255, 0.06) 1px, transparent 1px, transparent 3px ); mix-blend-mode: overlay; } .title-bar__text { letter-spacing: 0.04em; text-shadow: 0 0 4px rgba(120, 200, 255, 0.6); position: relative; z-index: 1; } .title-bar__controls { display: flex; gap: 2px; } .tb-btn { width: 18px; height: 16px; font-family: var(--font-system); font-size: 10px; font-weight: 700; line-height: 1; background: var(--silver); color: var(--black); border-top: 1px solid var(--white); border-left: 1px solid var(--white); border-right: 1px solid var(--silver-darker); border-bottom: 1px solid var(--silver-darker); cursor: pointer; padding: 0; } .tb-btn:active { border-top: 1px solid var(--silver-darker); border-left: 1px solid var(--silver-darker); border-right: 1px solid var(--white); border-bottom: 1px solid var(--white); } /* Title-bar chrome buttons pop in (_, ▢, ✕) */ .title-bar:not(.title-bar--controls-in) .title-bar__controls .tb-btn { opacity: 0; scale: 0.35; pointer-events: none; } .title-bar--controls-in .title-bar__controls .tb-btn { animation: tb-btn-pop-in 260ms cubic-bezier(0.34, 1.25, 0.64, 1) forwards; pointer-events: auto; } .title-bar--controls-in .title-bar__controls .tb-btn:nth-child(1) { animation-delay: 0ms; } .title-bar--controls-in .title-bar__controls .tb-btn:nth-child(2) { animation-delay: 70ms; } .title-bar--controls-in .title-bar__controls .tb-btn:nth-child(3) { animation-delay: 140ms; } @keyframes tb-btn-pop-in { 0% { opacity: 0; scale: 0.35; translate: 0 3px; } 72% { opacity: 1; scale: 1.1; translate: 0 -1px; } 100% { opacity: 1; scale: 1; translate: 0 0; } } .window__body { background: var(--silver); padding: clamp(18px, 4vw, 28px) clamp(16px, 4vw, 26px); text-align: center; min-width: 0; max-width: 100%; overflow-x: clip; box-sizing: border-box; } .window__body--center { text-align: center; padding: clamp(28px, 6vw, 44px) clamp(16px, 4vw, 26px); } .window-header { font-family: var(--font-system); font-weight: 700; font-size: clamp(18px, 3.6vw, 24px); margin: 0 0 12px; color: var(--black); } .window-body { font-family: var(--font-body); font-size: clamp(14px, 2.6vw, 16px); line-height: 1.55; margin: 0 auto; max-width: 56ch; color: #1a1a1a; } .feature-num { font-family: var(--font-vcr); font-size: 30px; margin-right: 6px; vertical-align: -2px; color: var(--silver-darker); } /* Pulse the leading "01"/"02"/"03"/"04" in the feature headers. */ .window-header { position: relative; } .window-header::first-letter, .window-header { /* placeholder so the rule above doesn't clobber */ } /* Color-pulse the entire feature header so the number + label feel alive without changing layout. Each window gets a different hue via :nth-of-type. */ /* ---------- hero / cta ---------- */ .window--hero .window__body--center { padding: 44px 22px 40px; } .logo { display: block; margin: 0 auto 8px; max-width: 420px; width: 85%; height: auto; } .logo--text { font-family: var(--font-cyber); font-size: 56px; letter-spacing: 0.04em; color: var(--black); text-shadow: 3px 3px 0 var(--silver-dark); } .sub { font-family: var(--font-mono); font-size: clamp(26px, 4.5vw, 42px); line-height: 1.2; margin: 6px 0 22px; color: var(--silver-darker); letter-spacing: 0.02em; } /* ---------- open sections (no window) ---------- */ .open-section { text-align: center; padding: 28px 12px 20px; } .section-cta { text-align: left; align-self: flex-start; margin: clamp(14px, 2vw, 22px) 0 0; } .open-section .open-section__sub, .open-section .closing-sub, .open-section .closing-aside, .open-section .section-cta { margin-left: auto; margin-right: auto; text-align: center; } .open-section .section-cta { display: block; width: fit-content; text-align: center; } .moresec-card .section-cta { width: 100%; margin: 0; align-self: stretch; text-align: center; } .moresec-card__cta { position: relative; padding-top: 12px; margin-top: clamp(4px, 0.8vw, 8px); } .moresec-card__cta .mask-tape { position: absolute; top: 1px; left: 50%; width: clamp(74px, 54%, 120px); height: clamp(14px, 2.1vw, 17px); transform: translateX(-50%) rotate(-5deg); transform-origin: center center; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.08) 38%, rgba(0, 0, 0, 0.04) 100% ), rgba(244, 228, 188, 0.94); border-left: 1px solid rgba(255, 255, 255, 0.55); border-right: 1px solid rgba(0, 0, 0, 0.07); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.06); opacity: 0.96; z-index: 2; pointer-events: none; } .moresec-card__cta .btn { position: relative; z-index: 1; } .moresec-card .section-cta .btn--block { display: block; width: 100%; max-width: 100%; box-sizing: border-box; text-align: center; white-space: nowrap; padding-left: clamp(8px, 2.5vw, 16px); padding-right: clamp(8px, 2.5vw, 16px); font-size: clamp(12px, 3.1vw, 16px); letter-spacing: 0.02em; } .whimsy__lede + .section-cta { max-width: 72ch; } .connect__col-text .section-cta { max-width: 60ch; } .builtdiff__lede + .section-cta { max-width: 70ch; } .coopsec__lede + .section-cta { max-width: 72ch; } .open-section__sub { font-family: var(--font-mono); font-size: clamp(26px, 4.5vw, 44px); line-height: 1.2; color: var(--black); margin: 8px 0 24px; text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.7), 0 0 10px rgba(255, 255, 255, 0.5); } /* ---------- neo-cyber pink ---------- */ .neo-cyber { font-family: var(--font-cyber); color: var(--pink); text-shadow: 4px 4px 0 var(--black), 8px 8px 14px rgba(0, 0, 0, 0.55); letter-spacing: 0.02em; margin: 0; } .neo-cyber--xl { font-size: clamp(40px, 7vw, 64px); line-height: 1.05; } .neo-cyber--header { font-size: clamp(28px, 4.5vw, 40px); margin: 0 0 12px; line-height: 1.1; /* The base .neo-cyber shadow is sized for the 64px XL closing header, so at this smaller size it reads as a smudgy double-render. Scale it down proportionally so the pink stays crisp. */ text-shadow: 2px 2px 0 var(--black), 3px 3px 6px rgba(0, 0, 0, 0.35); } .closing-header { margin-bottom: 18px; } .closing-sub { font-family: var(--font-mono); font-size: clamp(26px, 4.5vw, 44px); line-height: 1.2; color: var(--black); text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.7), 0 0 10px rgba(255, 255, 255, 0.5); margin: 0; } .closing-aside { font-family: var(--font-body); font-size: clamp(11px, 1.05vw, 13px); line-height: 1.35; font-style: italic; letter-spacing: 0.02em; color: rgba(0, 0, 0, 0.62); margin: clamp(4px, 0.8vw, 8px) 0 clamp(16px, 2.2vw, 24px); text-shadow: 0 0 8px rgba(255, 255, 255, 0.55); } /* ---------- chrome (silver Y2K) ---------- */ .chrome { font-family: var(--font-chrome); font-weight: 900; letter-spacing: 0.04em; background: linear-gradient( 180deg, #ffffff 0%, #e8e8e8 18%, #9a9a9a 48%, #6f6f6f 52%, #b8b8b8 72%, #f4f4f4 100% ); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 1px rgba(0, 0, 0, 0.55); text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35); display: inline-block; } .chrome--statement { font-size: clamp(28px, 5vw, 44px); margin: 18px 0 4px; } .chrome--header { font-size: clamp(28px, 4.5vw, 40px); margin: 0 0 12px; } .chrome--inline { font-size: 1em; vertical-align: baseline; } /* ---------- buttons ---------- */ .btn { display: inline-block; font-family: var(--font-system); font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; padding: 10px 18px; background: var(--silver); color: var(--black); border-top: 2px solid var(--white); border-left: 2px solid var(--white); border-right: 2px solid var(--silver-darker); border-bottom: 2px solid var(--silver-darker); box-shadow: inset -1px -1px 0 var(--silver-dark), inset 1px 1px 0 var(--silver-light), 2px 2px 0 rgba(0, 0, 0, 0.4); transform: translate(0, 0); transition: transform 0.06s ease, box-shadow 0.06s ease, background 0.12s ease; } .btn:hover { background: var(--silver-light); transform: translate(-1px, -1px); box-shadow: inset -1px -1px 0 var(--silver-dark), inset 1px 1px 0 var(--white), 3px 3px 0 rgba(0, 0, 0, 0.4); } .btn:active { border-top: 2px solid var(--silver-darker); border-left: 2px solid var(--silver-darker); border-right: 2px solid var(--white); border-bottom: 2px solid var(--white); transform: translate(1px, 1px); box-shadow: inset 1px 1px 0 var(--silver-dark), 0 0 0 rgba(0, 0, 0, 0.4); } .btn:focus-visible { outline: 1px dotted var(--black); outline-offset: -5px; } .btn--primary { font-family: var(--font-cyber); font-size: 16px; letter-spacing: 0.04em; padding: 14px 24px; color: var(--black); background: linear-gradient(180deg, #ffd6ee 0%, var(--silver-light) 18%, var(--silver) 60%, #d8b9cd 100%); } .btn--primary:hover { background: linear-gradient(180deg, #ffe1f3 0%, #ffffff 18%, var(--silver-light) 60%, #e6c8da 100%); text-shadow: 0 0 6px var(--pink-glow); } /* ---------- form ---------- */ .waitlist-form { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: stretch; margin-top: 4px; max-width: 100%; width: 100%; box-sizing: border-box; } .email-input { flex: 1 1 240px; min-width: 0; font-family: var(--font-system); font-size: 15px; padding: 10px 12px; background: var(--white); color: var(--black); border-top: 2px solid var(--silver-darker); border-left: 2px solid var(--silver-darker); border-right: 2px solid var(--white); border-bottom: 2px solid var(--white); box-shadow: inset 1px 1px 0 var(--silver-dark); outline: none; } .email-input:focus { outline: 1px dotted var(--black); outline-offset: -4px; } .hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .waitlist-msg { font-family: var(--font-mono); font-size: 18px; color: var(--silver-darker); margin: 14px 0 0; min-height: 1.2em; } .waitlist-msg.is-success { color: #006400; } .waitlist-msg.is-error { color: #a00000; } .waitlist-disclaimer { font-family: var(--font-body); font-size: clamp(11px, 1.1vw, 13px); line-height: 1.5; color: var(--silver-darker); letter-spacing: var(--body-letter-spacing); margin: 14px auto 0; opacity: 0.85; max-width: 100%; width: 100%; box-sizing: border-box; white-space: normal; overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; animation: none !important; transition: none !important; } .waitlist-disclaimer::after, .waitlist-disclaimer::before { content: none !important; display: none !important; } /* ---------- footer ---------- */ .footer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px 0 12px; color: var(--white); font-family: var(--font-mono); font-size: 20px; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.7), 0 0 8px rgba(0, 0, 0, 0.55); } .footer__socials { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; } .footer__game-btn { font-family: var(--font-vcr); font-size: 14px; letter-spacing: 0.06em; text-transform: lowercase; color: var(--black); cursor: pointer; padding: 8px 16px; background: var(--silver); border-top: 2px solid var(--white); border-left: 2px solid var(--white); border-right: 2px solid var(--silver-darker); border-bottom: 2px solid var(--silver-darker); box-shadow: inset -1px -1px 0 var(--silver-dark), inset 1px 1px 0 var(--silver-light), 3px 3px 0 rgba(0, 0, 0, 0.45); transform: rotate(-0.6deg); } .footer__game-btn:hover { background: var(--silver-light); transform: rotate(-0.6deg) translate(-1px, -1px); } .footer__game-btn:active { border-top: 2px solid var(--silver-darker); border-left: 2px solid var(--silver-darker); border-right: 2px solid var(--white); border-bottom: 2px solid var(--white); transform: rotate(-0.6deg) translate(1px, 1px); } .footer__caught-up { margin: -2px 0 0; font-family: var(--font-vcr); font-size: 18px; letter-spacing: 0.02em; text-align: center; } /* ---------- modals ---------- */ .modal-overlay { display: none; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; padding: clamp(12px, 3vw, 24px); background: rgba(0, 0, 0, 0.6); box-sizing: border-box; } .modal-overlay.is-open { display: flex; } .waitlist-modal-window { max-width: 480px; width: 100%; position: relative; z-index: 1; } /* Waitlist modal close button is always visible (not gated by scroll-reveal animation) */ #waitlist-modal .title-bar__controls .tb-btn { opacity: 1; scale: 1; pointer-events: auto; animation: none; width: 22px; height: 18px; font-size: 12px; position: relative; z-index: 2; } .waitlist-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1100; } .minesweeper-window { /* 9×30px board + chrome + leaderboard (~332×520px game) */ width: min(100%, 348px); max-height: 96vh; display: flex; flex-direction: column; } .minesweeper-window__body { padding: 4px; overflow: visible; flex: 0 1 auto; min-height: 0; background: var(--silver); display: flex; flex-direction: column; gap: 4px; } .minesweeper-help { flex-shrink: 0; margin: 0; padding: 6px 8px; background: #e8e8e8; border: 2px inset var(--silver-darker); font-family: var(--font-vcr); font-size: clamp(10px, 2.6vw, 12px); line-height: 1.45; color: var(--black); letter-spacing: 0.02em; } .minesweeper-help__line { margin: 0; } .minesweeper-help__line + .minesweeper-help__line { margin-top: 4px; } .minesweeper-help__label { display: inline-block; min-width: 4.2rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; } .minesweeper-frame { display: block; width: 100%; flex: 0 0 auto; height: 532px; min-height: 532px; border: 2px inset var(--silver-darker); background: #c0c0c0; } @media (max-height: 720px) { .minesweeper-modal.modal-overlay { align-items: flex-start; overflow-y: auto; } .minesweeper-window { margin: auto 0; } } .footer__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--silver); color: var(--black); border-top: 2px solid var(--white); border-left: 2px solid var(--white); border-right: 2px solid var(--silver-darker); border-bottom: 2px solid var(--silver-darker); box-shadow: inset -1px -1px 0 var(--silver-dark), inset 1px 1px 0 var(--silver-light), 2px 2px 0 rgba(0, 0, 0, 0.4); text-decoration: none; transform: translate(0, 0); transition: transform 0.06s ease, box-shadow 0.06s ease, background 0.12s ease; } .footer__icon:hover { background: var(--silver-light); transform: translate(-1px, -1px); box-shadow: inset -1px -1px 0 var(--silver-dark), inset 1px 1px 0 var(--white), 3px 3px 0 rgba(0, 0, 0, 0.4); } .footer__icon:active { border-top: 2px solid var(--silver-darker); border-left: 2px solid var(--silver-darker); border-right: 2px solid var(--white); border-bottom: 2px solid var(--white); transform: translate(1px, 1px); box-shadow: inset 1px 1px 0 var(--silver-dark); } /* ---------- language switcher ---------- */ .lang-switcher { display: inline-flex; align-items: center; margin-left: 6px; } .lang-switcher__select { font-family: var(--font-system); font-size: 13px; padding: 4px 8px; background: var(--silver); color: var(--black); border-top: 2px solid var(--white); border-left: 2px solid var(--white); border-right: 2px solid var(--silver-darker); border-bottom: 2px solid var(--silver-darker); box-shadow: inset -1px -1px 0 var(--silver-dark), inset 1px 1px 0 var(--silver-light); cursor: pointer; } /* ---------- window pop (X-button easter egg) ---------- */ .window.is-popping { animation: window-pop 480ms ease-out; pointer-events: none; } @keyframes window-pop { 0% { transform: scale(1) rotate(0deg); opacity: 1; } 18% { transform: scale(1.04) rotate(-1deg); opacity: 1; } 35% { transform: scale(0.6) rotate(2deg); opacity: 0; } 60% { transform: scale(0.6) rotate(2deg); opacity: 0; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } } /* ---------- window MAXIMIZE (cram + wiggle, then back) ---------- */ .window.is-maxing { overflow: hidden; pointer-events: none; } .window.is-maxing > *:not(.title-bar) { animation: window-cram 1100ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both; transform-origin: top left; } @keyframes window-cram { 0% { transform: scale(1) rotate(0deg); filter: blur(0); } 12% { transform: scale(1.18) rotate(-0.6deg); filter: blur(0); } 22% { transform: scale(1.14) rotate(0.8deg); filter: blur(0.2px); } 32% { transform: scale(1.28) rotate(-0.8deg); filter: blur(0); } 42% { transform: scale(1.16) rotate(0.6deg); filter: blur(0.2px); } 52% { transform: scale(1.32) rotate(-0.4deg); filter: blur(0); } 62% { transform: scale(1.22) rotate(0.5deg); filter: blur(0); } 74% { transform: scale(1.08) rotate(-0.2deg); filter: blur(0); } 86% { transform: scale(1.02) rotate(0.1deg); filter: blur(0); } 100% { transform: scale(1) rotate(0deg); filter: blur(0); } } /* ---------- window MINIMIZE (CRT shut-off, then back) ---------- */ .window.is-minning { animation: window-tv 1050ms ease-in-out; pointer-events: none; transform-origin: center center; } @keyframes window-tv { 0% { transform: scaleY(1) scaleX(1); opacity: 1; filter: brightness(1); } 22% { transform: scaleY(1) scaleX(1.02); opacity: 1; filter: brightness(1.3); } 34% { transform: scaleY(0.04) scaleX(1); opacity: 1; filter: brightness(2); } 42% { transform: scaleY(0.04) scaleX(0.06); opacity: 0.6; filter: brightness(2.5); } 52% { transform: scaleY(0.02) scaleX(0.01); opacity: 0; filter: brightness(0); } 60% { transform: scaleY(0.02) scaleX(0.01); opacity: 0; filter: brightness(0); } 68% { transform: scaleY(0.04) scaleX(0.06); opacity: 0.6; filter: brightness(2.5); } 78% { transform: scaleY(0.04) scaleX(1); opacity: 1; filter: brightness(2); } 90% { transform: scaleY(1) scaleX(1.02); opacity: 1; filter: brightness(1.3); } 100% { transform: scaleY(1) scaleX(1); opacity: 1; filter: brightness(1); } } /* Particle burst from clicked X */ .fx-particle { position: fixed; pointer-events: none; z-index: 10001; font-size: 22px; line-height: 1; animation: fx-burst 1100ms cubic-bezier(.15,.7,.4,1) forwards; will-change: transform, opacity; } .fx-particle--confetti { width: 10px; height: 14px; background: var(--c, #ff3eb5); border-radius: 1px; } .fx-particle--dolphin { width: 28px; height: 28px; background: url("assets/cursor-dolphin.svg") center/contain no-repeat; } @keyframes fx-burst { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--rot, 0)); opacity: 0; } } /* ---------- cursor trail (water bubbles + occasional sparkle) ---------- */ #cursor-trail { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; } .bubble, .sparkle { position: absolute; pointer-events: none; will-change: transform, opacity; } .bubble { width: 20px; height: 20px; margin: -10px 0 0 -10px; background: url("assets/bubble.svg") center/contain no-repeat; animation: bubble-rise 1100ms ease-out forwards; } .sparkle { width: 14px; height: 14px; margin: -7px 0 0 -7px; background: url("assets/sparkle.svg") center/contain no-repeat; animation: sparkle-fade 760ms ease-out forwards; } @keyframes bubble-rise { 0% { opacity: 0; transform: scale(0.35) translate(0, 0); } 20% { opacity: 0.95; transform: scale(var(--s, 1)) translate(0, -2px); } 100% { opacity: 0; transform: scale(calc(var(--s, 1) * 1.15)) translate(var(--dx, 0px), -32px); } } @keyframes sparkle-fade { 0% { opacity: 0; transform: rotate(var(--r, 0deg)) scale(0.3) translateY(0); } 20% { opacity: 1; transform: rotate(var(--r, 0deg)) scale(var(--s, 1)) translateY(0); } 100% { opacity: 0; transform: rotate(var(--r, 0deg)) scale(var(--s, 1)) translateY(-10px); } } @media (prefers-reduced-motion: reduce) { .title-bar:not(.title-bar--controls-in) .title-bar__controls .tb-btn { opacity: 1; scale: 1; pointer-events: auto; } .title-bar--controls-in .title-bar__controls .tb-btn { animation: none; } .window.is-popping { animation: none; } .window.is-maxing { overflow: visible; } .window.is-maxing > *:not(.title-bar) { animation: none; } .window.is-minning { animation: none; } #cursor-trail { display: none; } } /* ---------- responsive (most sizing is fluid via clamp() above) ---------- */ @media (max-width: 540px) { .sub { font-size: clamp(22px, 6vw, 30px); } .waitlist-disclaimer { font-size: clamp(12px, 3.4vw, 16px); } .open-section__sub, .closing-sub { font-size: clamp(22px, 6vw, 32px); } .logo--text { font-size: 38px; } .waitlist-form { flex-direction: column; } .email-input { flex: 1 1 auto; width: 100%; } .btn--primary { width: 100%; } .footer { flex-wrap: wrap; gap: 10px; } .desktop { gap: clamp(18px, 4.5vw, 28px); padding-bottom: clamp(28px, 7vw, 48px); } } /* ---------- mobile ambient dolphin (touch-only) ---------- */ @media (hover: none) { #ambient-dolphin { position: fixed; top: 0; left: 0; width: 38px; height: 38px; pointer-events: none; z-index: 9999; animation: swim-across var(--swim-dur, 18s) linear infinite; will-change: transform; } .ambient-dolphin__inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 34px; line-height: 1; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); animation: dolphin-bob 1.7s ease-in-out infinite; transform-origin: 50% 60%; user-select: none; } @keyframes swim-across { 0% { transform: translate(-60px, 22vh); } 25% { transform: translate(28vw, 30vh); } 50% { transform: translate(55vw, 20vh); } 75% { transform: translate(78vw, 32vh); } 100% { transform: translate(calc(100vw + 60px), 26vh); } } } @media (prefers-reduced-motion: reduce) { #ambient-dolphin { display: none; } } /* ============================================================ HERO REDESIGN Topbar (Win9x taskbar) + 2-col hero on rainbow wallpaper + black scrolling ticker bar at the bottom of the fold. Replaces the old `.window--hero` block. ============================================================ */ #waitlist { scroll-margin-top: 12px; } /* ---------- topbar (full-width Win9x taskbar) ---------- */ .topbar { position: relative; z-index: 2; background: var(--silver); border-bottom: 2px solid var(--silver-darker); box-shadow: inset 0 1px 0 var(--white), inset 0 -1px 0 var(--silver-dark), 0 2px 0 rgba(0, 0, 0, 0.35); padding: 8px clamp(14px, 4vw, 24px); } .topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1180px; margin: 0 auto; } .topbar__brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--black); flex-shrink: 0; line-height: 0; } .topbar__logo { display: block; height: 36px; width: auto; filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.3)); transition: transform 0.15s ease, filter 0.15s ease; } .topbar__brand:hover .topbar__logo { transform: translate(-1px, -1px); filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.4)); } /* ---------- hamburger button (mobile only) ---------- */ .topbar__hamburger { display: none; /* shown via @media below */ flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 36px; padding: 8px 10px; background: var(--silver); cursor: pointer; border-top: 2px solid var(--white); border-left: 2px solid var(--white); border-right: 2px solid var(--silver-darker); border-bottom: 2px solid var(--silver-darker); box-shadow: inset -1px -1px 0 var(--silver-dark), inset 1px 1px 0 var(--silver-light), 2px 2px 0 rgba(0, 0, 0, 0.4); } .topbar__hamburger:active, .topbar__hamburger[aria-expanded="true"] { border-top: 2px solid var(--silver-darker); border-left: 2px solid var(--silver-darker); border-right: 2px solid var(--white); border-bottom: 2px solid var(--white); box-shadow: inset 1px 1px 0 var(--silver-dark); } .topbar__hamburger-line { display: block; width: 100%; height: 2px; background: var(--black); transition: transform 0.2s ease, opacity 0.15s ease; transform-origin: center; } .topbar__hamburger[aria-expanded="true"] .topbar__hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); } .topbar__hamburger[aria-expanded="true"] .topbar__hamburger-line:nth-child(2) { opacity: 0; } .topbar__hamburger[aria-expanded="true"] .topbar__hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---------- mobile dropdown menu ---------- */ .topbar__mobile-menu { display: none; /* shown via @media below when not [hidden] */ background: var(--silver); border-top: 2px solid var(--silver-darker); box-shadow: inset 0 1px 0 var(--white), 0 6px 0 rgba(0, 0, 0, 0.3); padding: 6px; flex-direction: column; gap: 4px; animation: mobile-menu-drop 0.18s ease-out; } @keyframes mobile-menu-drop { from { transform: translateY(-8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .topbar__mobile-link { display: block; font-family: var(--font-vcr); font-size: 18px; letter-spacing: 0.04em; color: var(--title-blue-1); text-decoration: underline; text-align: left; padding: 14px 16px; background: var(--silver); border-top: 2px solid var(--white); border-left: 2px solid var(--white); border-right: 2px solid var(--silver-darker); border-bottom: 2px solid var(--silver-darker); box-shadow: inset 1px 1px 0 var(--silver-light); } .topbar__mobile-link:hover, .topbar__mobile-link:focus-visible { background: var(--silver-light); color: var(--pink); text-shadow: 0 0 6px var(--pink-glow); outline: none; } .topbar__mobile-link:active { border-top: 2px solid var(--silver-darker); border-left: 2px solid var(--silver-darker); border-right: 2px solid var(--white); border-bottom: 2px solid var(--white); } .topbar__mobile-link--primary { font-family: var(--font-cyber); font-size: 17px; color: var(--black); text-decoration: none; background: linear-gradient(180deg, #ffd6ee 0%, var(--silver-light) 18%, var(--silver) 60%, #d8b9cd 100%); } .topbar__mobile-link--primary:hover { background: linear-gradient(180deg, #ffe1f3 0%, #ffffff 18%, var(--silver-light) 60%, #e6c8da 100%); color: var(--black); } .topbar__nav { display: flex; gap: clamp(8px, 2.5vw, 22px); flex-wrap: wrap; justify-content: center; flex: 1 1 auto; } .topbar__link { font-family: var(--font-vcr); font-size: 16px; color: var(--title-blue-1); text-decoration: underline; letter-spacing: 0.04em; white-space: nowrap; } .topbar__link:hover { color: var(--pink); text-shadow: 0 0 6px var(--pink-glow); } .topbar__cta { flex-shrink: 0; font-size: 14px; padding: 10px 18px; } /* ---------- hero-redesign (2-col under nav) ---------- */ /* ---------- BRAND MARK (centered logo + sticker tagline) ---------- */ .brand-mark { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; padding: clamp(40px, 7vw, 84px) clamp(14px, 4vw, 28px) clamp(36px, 6vw, 64px); } .brand-mark__inner { position: relative; display: inline-block; max-width: 100%; } .brand-mark__logo { display: block; width: clamp(240px, 48vw, 520px); max-width: 100%; height: auto; filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, 0.35)); } .brand-mark__tag { position: absolute; /* Anchor at the bottom-right of the logo (under the "ger" of Bridger), hanging off the edge slightly like a sticker tacked on. */ left: 56%; top: 100%; margin-top: -10px; background: #fff79e; color: var(--black); font-family: var(--font-vcr); font-size: clamp(11px, 1.4vw, 15px); letter-spacing: 0.06em; text-transform: lowercase; white-space: nowrap; padding: 8px 14px; border: 2px solid var(--black); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.7); transform: rotate(-2deg); } .hero-redesign { position: relative; z-index: 1; padding: clamp(8px, 2vw, 20px) clamp(14px, 4vw, 28px) var(--ticker-adjacent-gap); } .hero-redesign__inner { max-width: 1180px; margin: 0 auto; } .hero-redesign__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: start; } .hero-redesign__col--text { background: var(--silver); border-top: 2px solid var(--white); border-left: 2px solid var(--white); border-right: 2px solid var(--silver-darker); border-bottom: 2px solid var(--silver-darker); box-shadow: inset -1px -1px 0 var(--silver-dark), inset 1px 1px 0 var(--silver-light), 4px 4px 0 rgba(0, 0, 0, 0.35); padding: 3px; display: flex; flex-direction: column; } .hero-redesign__col-body { padding: clamp(22px, 4vw, 36px) clamp(20px, 4vw, 32px); display: flex; flex-direction: column; gap: clamp(14px, 2vw, 20px); } .hero-tag { align-self: flex-start; display: inline-block; background: #fff79e; color: var(--black); font-family: var(--font-vcr); font-size: 14px; letter-spacing: 0.06em; text-transform: lowercase; padding: 8px 14px; border: 2px solid var(--black); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.7); transform: rotate(-1.5deg); } .hero-headline { font-family: var(--font-vcr); font-weight: 400; font-size: clamp(26px, 4.2vw, 56px); line-height: 1.05; color: var(--black); margin: 4px 0 0; text-shadow: 3px 3px 0 var(--silver-dark), 6px 6px 0 rgba(0, 0, 0, 0.22); letter-spacing: 0.005em; } .hero-lede { font-family: var(--font-vcr); font-size: clamp(15px, 1.8vw, 17px); line-height: 1.55; color: #111; max-width: 52ch; margin: 4px 0 6px; } /* The hero waitlist form should stay left-aligned, not the centered default. */ .hero-redesign__col--text .waitlist-form { justify-content: flex-start; } /* ---------- not_another_feed.exe ("NO ___" list) ---------- */ .hero-redesign__col--window { align-self: stretch; display: flex; align-items: center; justify-content: flex-end; } .window--feed { width: 100%; max-width: 480px; transform: rotate(1.8deg); transform-origin: center center; } .window--feed .title-bar { padding-right: 4px; } .no-list { list-style: none; margin: 0; padding: clamp(16px, 2.8vw, 22px); background: var(--silver); display: flex; flex-direction: column; gap: 12px; } .no-pill { font-family: var(--font-vcr); font-size: clamp(13px, 1.7vw, 16px); letter-spacing: 0.06em; color: var(--black); text-align: left; padding: 14px 18px; border-top: 2px solid var(--white); border-left: 2px solid var(--white); border-right: 2px solid var(--silver-darker); border-bottom: 2px solid var(--silver-darker); box-shadow: inset -1px -1px 0 var(--silver-dark), inset 1px 1px 0 var(--silver-light), 2px 2px 0 rgba(0, 0, 0, 0.4); } .no-pill--green { background: #c8f7a2; } .no-pill--yellow { background: #fff39e; } .no-pill--pink { background: #ffc6e3; } .no-pill--cyan { background: #b9efff; } .no-pill--purple { background: #ddc7ff; } /* ---------- ticker bar (seamless infinite marquee) ---------- */ .ticker-bar { position: relative; z-index: 1; background: var(--black); color: var(--white); border-top: 2px solid var(--silver-dark); border-bottom: 2px solid var(--silver-dark); padding: 12px 0; margin-bottom: clamp(24px, 5vw, 44px); } .ticker-bar__viewport { overflow: hidden; width: 100%; } .ticker-bar__track { display: flex; flex-wrap: nowrap; width: max-content; align-items: center; font-family: var(--font-vcr); font-size: clamp(13px, 1.8vw, 17px); letter-spacing: 0.08em; text-shadow: 0 0 6px rgba(255, 255, 255, 0.3); will-change: transform; animation: ticker-scroll var(--ticker-duration, 36s) linear infinite; } .ticker-bar__group { display: inline-flex; flex-shrink: 0; align-items: center; gap: clamp(16px, 3vw, 32px); white-space: nowrap; padding-right: clamp(16px, 3vw, 32px); } .ticker-bar__sep { color: var(--pink); text-shadow: 0 0 6px var(--pink-glow); } @keyframes ticker-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--ticker-shift, -50%), 0, 0); } } @media (prefers-reduced-motion: reduce) { .ticker-bar__track { animation: none; } } /* ---------- compare section (THE PROBLEM / THE FIX sticky notes) ---------- */ .compare-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; align-items: stretch; gap: clamp(20px, 3.5vw, 36px); padding: 0 clamp(12px, 3vw, 24px); margin: 0 auto; max-width: min(100%, 58rem); box-sizing: border-box; } .compare-section > .sticky-card { width: 100%; max-width: min(100%, clamp(20rem, 42vw, 27rem)); height: 100%; min-height: 100%; align-self: stretch; } .compare-section > .sticky-card .sticky-card__list { flex: 1; } .sticky-card { position: relative; border: 2px solid var(--black); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.45); padding: clamp(20px, 3vw, 30px); display: flex; flex-direction: column; gap: clamp(10px, 1.5vw, 16px); width: min(100%, 19.5rem); max-width: 19.5rem; justify-self: center; box-sizing: border-box; } .sticky-card { transform: rotate(var(--base-rotate, 0deg)) skewX(var(--wind-skew, 0deg)); transform-origin: top center; border-bottom-left-radius: var(--wind-curl-l, 0); border-bottom-right-radius: var(--wind-curl-r, 0); will-change: transform, border-radius; } .sticky-card--red { background: #ffd2d2; --base-rotate: -1.4deg; } .sticky-card--green { background: #d4f5b8; --base-rotate: 1.4deg; } .sticky-card__tag { flex-shrink: 0; align-self: flex-start; display: inline-block; background: #fff; border: 2px solid var(--black); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5); padding: 5px 12px; font-family: var(--font-vcr); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--black); } .sticky-card__title { font-family: var(--font-vcr); font-size: clamp(26px, 3.2vw, 38px); margin: 6px 0 0; line-height: 1.05; letter-spacing: 0.01em; text-transform: lowercase; } .sticky-card__title--red { color: #c41f2e; } .sticky-card__title--green { color: #2c8a17; } .sticky-card__divider { height: 2px; background: rgba(0, 0, 0, 0.35); margin: 4px 0 6px; } .sticky-card__lede { font-family: var(--font-vcr); font-size: clamp(14px, 1.5vw, 17px); color: var(--black); line-height: 1.45; margin: 2px 0 0; font-weight: 400; } .sticky-card__list { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: clamp(8px, 1vw, 12px); } .sticky-card__list li { font-family: var(--font-vcr); font-size: clamp(13px, 1.3vw, 15px); color: var(--black); line-height: 1.45; display: flex; gap: 10px; align-items: flex-start; } .sticky-card__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 12px; line-height: 1; margin-top: 2px; font-weight: 700; } .sticky-card__icon--x { color: #c41f2e; } .sticky-card__icon--check { color: #2c8a17; } /* ---------- WHIMSY (feature_01 — big window + 4 mini sticky cards) ---------- */ .whimsy__body { padding: clamp(22px, 4vw, 40px) clamp(18px, 3vw, 32px) clamp(22px, 4vw, 36px); display: flex; flex-direction: column; gap: clamp(14px, 2vw, 22px); position: relative; min-width: 0; overflow-x: clip; } .whimsy__tag { flex-shrink: 0; align-self: flex-start; display: inline-block; background: #fff79e; color: var(--black); font-family: var(--font-vcr); font-size: 13px; letter-spacing: 0.06em; text-transform: lowercase; padding: 7px 12px; border: 2px solid var(--black); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55); transform: rotate(-1deg); } .whimsy__headline { font-family: var(--font-vcr); font-weight: 400; font-size: clamp(22px, 3.4vw, 40px); line-height: 1.1; color: var(--black); margin: 6px 0 0; letter-spacing: 0.005em; text-shadow: 2px 2px 0 var(--silver-dark), 4px 4px 0 rgba(0, 0, 0, 0.22); } .whimsy__lede { font-family: var(--font-vcr); font-size: clamp(14px, 1.5vw, 16px); line-height: 1.55; color: #111; max-width: 72ch; margin: 2px 0 6px; } .whimsy__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 14px); margin-top: clamp(6px, 1vw, 12px); width: 100%; max-width: 100%; } .whimsy-card { border: 2px solid var(--black); box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5); padding: clamp(10px, 1.2vw, 14px); display: flex; flex-direction: column; gap: 6px; width: 100%; aspect-ratio: var(--sticky-note-ratio); box-sizing: border-box; min-width: 0; overflow: hidden; transform: rotate(var(--base-rotate, 0deg)) skewX(var(--wind-skew, 0deg)); transform-origin: top center; border-bottom-left-radius: var(--wind-curl-l, 0); border-bottom-right-radius: var(--wind-curl-r, 0); will-change: transform, border-radius; } .whimsy-card--yellow { background: #fff39e; } .whimsy-card--orange { background: #ffd9a8; } .whimsy-card--red { background: #ffb3b3; } .whimsy-card--pink { background: #ffc6e3; } .whimsy-card--purple { background: #ddc7ff; } .whimsy-card--cyan { background: #b9efff; } .whimsy-card--green { background: #c8f7a2; } .whimsy-card__icon { font-family: var(--font-vcr); font-size: clamp(16px, 1.6vw, 20px); line-height: 1; color: var(--black); margin-bottom: 0; flex-shrink: 0; font-variant-emoji: text; } .whimsy-card__title { font-family: var(--font-vcr); font-size: clamp(15px, 1.5vw, 18px); font-weight: 400; margin: 0; color: var(--black); letter-spacing: 0.02em; text-transform: lowercase; line-height: 1.15; flex-shrink: 0; } .whimsy-card__body { font-family: var(--font-body); font-size: clamp(12px, 1.2vw, 14px); line-height: 1.4; letter-spacing: 0.02em; color: #222; margin: 0; flex: 1; min-height: 0; } @media (min-width: 681px) { .whimsy__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 540px) { .whimsy__headline { font-size: clamp(20px, 6.5vw, 30px); } .whimsy__body { padding: clamp(16px, 4vw, 24px) clamp(14px, 3.5vw, 20px); gap: clamp(10px, 2.5vw, 14px); } .whimsy__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 4px; } .whimsy-card, .profile-card, .builtdiff-card { aspect-ratio: auto; height: auto; padding: 10px; } .whimsy-card__body, .profile-card__body, .builtdiff-card__body { flex: 0 1 auto; } } /* ---------- CONNECT (feature_02 — corkboard + pinned poster & lined sheet) ---------- */ .connect { width: 100%; } .connect__board { position: relative; width: 100%; min-width: 0; overflow-x: clip; padding: clamp(22px, 4vw, 40px) clamp(18px, 3vw, 32px); border: clamp(6px, 1.2vw, 10px) solid #6b4423; border-radius: 2px; box-shadow: inset 0 0 0 2px #8b5a2b, inset 0 0 28px rgba(0, 0, 0, 0.22), 6px 8px 0 rgba(0, 0, 0, 0.45); background-color: #b8885a; background-image: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px), radial-gradient(circle at 70% 60%, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px), radial-gradient(circle at 45% 80%, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px), repeating-linear-gradient( 90deg, rgba(0, 0, 0, 0.03) 0, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 4px ), repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0.025) 0, rgba(0, 0, 0, 0.025) 1px, transparent 1px, transparent 5px ), linear-gradient(145deg, #c4956a 0%, #a8734a 48%, #9a6840 100%); transform: rotate(0.4deg); transform-origin: center center; } .connect__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3.5vw, 44px); align-items: center; } .connect__col-text { display: flex; flex-direction: column; gap: clamp(14px, 2.2vw, 20px); position: relative; min-width: 0; justify-content: center; } .connect__tag-wrap { position: relative; align-self: flex-start; margin-left: clamp(4px, 1vw, 12px); padding: 4px 0 0 14px; } .connect__tag { display: inline-block; background: #ffc6e3; color: var(--black); font-family: var(--font-vcr); font-size: clamp(12px, 1.3vw, 14px); letter-spacing: 0.06em; text-transform: lowercase; padding: 8px 18px; min-width: 10rem; border: 2px solid var(--black); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45); transform: rotate(-2deg); } .connect__poster { position: relative; padding: clamp(22px, 3.2vw, 32px) clamp(18px, 2.8vw, 26px); background: #fff; border: 2px solid var(--black); box-shadow: 6px 7px 0 rgba(0, 0, 0, 0.42); transform: rotate(-0.5deg); transform-origin: center center; } .connect__poster .push-pin--tl { top: 8px; left: 8px; } .connect__poster .push-pin--tr { top: 8px; right: 8px; } .connect__poster .push-pin--bl { bottom: 8px; left: 8px; } .connect__poster .push-pin--br { bottom: 8px; right: 8px; } .connect__sheet { position: relative; width: 100%; height: auto; min-height: 0; padding: clamp(16px, 2.4vw, 22px) clamp(14px, 2.4vw, 20px) clamp(12px, 1.8vw, 16px); background-color: #fffef6; background-image: linear-gradient(to right, rgba(255, 80, 80, 0.35) 0, rgba(255, 80, 80, 0.35) 1px, transparent 1px), repeating-linear-gradient( to bottom, transparent 0, transparent calc(1.35rem - 1px), rgba(100, 140, 200, 0.28) calc(1.35rem - 1px), rgba(100, 140, 200, 0.28) 1.35rem ); background-size: 100% 100%, 100% 1.35rem; background-position: clamp(18px, 4vw, 28px) 0, 0 0; border: 2px solid rgba(0, 0, 0, 0.14); box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.65); transform: rotate(0.8deg); transform-origin: center center; } .connect__sheet > .push-pin--center { top: 4px; } .connect__sheet .profile__grid { padding: clamp(6px, 1vw, 10px) 0 0; margin: 0; } .connect__headline { font-family: var(--font-vcr); font-weight: 400; font-size: clamp(22px, 3.4vw, 40px); line-height: 1.1; color: var(--black); margin: 0; letter-spacing: 0.005em; text-shadow: none; } .connect__lede { font-family: var(--font-vcr); font-size: clamp(14px, 1.5vw, 16px); line-height: 1.55; color: #111; max-width: none; margin: clamp(10px, 1.5vw, 14px) 0 0; } .connect__cta-wrap { position: relative; align-self: flex-start; margin: 0 0 0 clamp(4px, 1vw, 12px); padding: 4px 0 0 14px; } .connect__cta-wrap .btn { transform: rotate(1.5deg); } .connect__col-stickies { min-width: 0; display: flex; align-items: center; justify-content: center; } .profile__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 14px); padding: clamp(4px, 0.8vw, 8px) 0 0; width: 100%; max-width: 100%; background: transparent; } .profile-card { position: relative; width: 100%; aspect-ratio: var(--sticky-note-ratio); box-sizing: border-box; overflow: visible; padding: clamp(10px, 1.2vw, 13px); gap: 6px; border: 2px solid var(--black); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.42); display: flex; flex-direction: column; min-width: 0; transform: rotate(var(--base-rotate, 0deg)) skewX(var(--wind-skew, 0deg)); transform-origin: top center; border-bottom-left-radius: var(--wind-curl-l, 0); border-bottom-right-radius: var(--wind-curl-r, 0); will-change: transform, border-radius; } /* Push pin / tack */ .push-pin, .profile-card__pin { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #ff9a9a 0%, #e63939 42%, #9b1c1c 100%); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.45), inset -1px -2px 2px rgba(0, 0, 0, 0.25); z-index: 2; pointer-events: none; } .push-pin--center { top: 2px; left: 50%; margin-left: -6.5px; } .push-pin--tl { top: 6px; left: 10px; } .push-pin--tr { top: 6px; right: 10px; left: auto; } .push-pin--bl { bottom: 10px; left: 12px; top: auto; } .push-pin--br { bottom: 10px; right: 12px; left: auto; top: auto; } .connect__tag-wrap .push-pin--tl, .connect__cta-wrap .push-pin--tl { top: 2px; left: 2px; margin-left: 0; } .profile-card__pin { top: -8px; left: 50%; margin-left: -6.5px; } .profile-card:nth-child(2) .profile-card__pin, .profile-card:nth-child(4) .profile-card__pin { background: radial-gradient(circle at 32% 28%, #9ad4ff 0%, #3a9fd4 42%, #1a5f8a 100%); } .profile-card:nth-child(3) .profile-card__pin { background: radial-gradient(circle at 32% 28%, #ffe566 0%, #e6b800 42%, #a67c00 100%); } .profile-card--yellow { background: #fff39e; } .profile-card--orange { background: #ffd9a8; } .profile-card--red { background: #ffb3b3; } .profile-card--pink { background: #ffc6e3; } .profile-card--purple { background: #ddc7ff; } .profile-card--cyan { background: #b9efff; } .profile-card--green { background: #c8f7a2; } .profile-card__icon { font-family: var(--font-vcr); font-size: clamp(16px, 1.6vw, 20px); color: var(--black); line-height: 1; margin-bottom: 0; flex-shrink: 0; font-variant-emoji: text; } .profile-card__title { font-family: var(--font-vcr); font-size: clamp(14px, 1.4vw, 17px); font-weight: 400; margin: 0; color: var(--black); text-transform: lowercase; letter-spacing: 0.02em; line-height: 1.15; flex-shrink: 0; } .profile-card__body { font-family: var(--font-body); font-size: clamp(11px, 1.1vw, 13px); line-height: 1.4; letter-spacing: 0.02em; color: #111; margin: 0; flex: 1; min-height: 0; } /* tablet: stack columns */ @media (max-width: 900px) { .connect__grid { grid-template-columns: 1fr; gap: clamp(16px, 4vw, 22px); } .connect__board { padding: clamp(16px, 3.5vw, 24px) clamp(14px, 3vw, 20px); transform: none; } .connect__col-text { gap: clamp(10px, 2.5vw, 14px); justify-content: flex-start; } .connect__poster, .connect__sheet { transform: none; } .connect__col-stickies { justify-content: center; } } /* phone: tighter connect + sticky sizing */ @media (max-width: 540px) { .connect__headline { font-size: clamp(20px, 6.5vw, 30px); } .connect__poster { padding: clamp(14px, 3.8vw, 20px) clamp(14px, 3.5vw, 18px); } .connect__lede { margin-top: clamp(8px, 2vw, 10px); font-size: clamp(13px, 3.4vw, 15px); } .connect__sheet { padding: clamp(12px, 3vw, 16px) clamp(12px, 2.8vw, 16px) clamp(10px, 2.5vw, 12px); } .connect__sheet .profile__grid { gap: 8px; padding: 4px 0 0; } .profile__grid { gap: 8px; } } /* very narrow phone: keep 2×2 profile stickies on connect sheet */ @media (max-width: 380px) { .profile__grid { grid-template-columns: 1fr; } .connect__sheet .profile__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- BUILT DIFFERENT (feature_03 — 8 sticky notes in 4x2 grid) ---------- */ .builtdiff__body { padding: clamp(22px, 4vw, 40px) clamp(18px, 3vw, 32px) clamp(22px, 4vw, 36px); display: flex; flex-direction: column; gap: clamp(14px, 2vw, 22px); position: relative; min-width: 0; overflow-x: clip; } .builtdiff__tag { flex-shrink: 0; align-self: flex-start; display: inline-block; background: #b9efff; color: var(--black); font-family: var(--font-vcr); font-size: 13px; letter-spacing: 0.06em; text-transform: lowercase; padding: 7px 12px; border: 2px solid var(--black); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55); transform: rotate(-1deg); } .builtdiff__headline { font-family: var(--font-vcr); font-weight: 400; font-size: clamp(22px, 3.4vw, 40px); line-height: 1.1; color: var(--black); margin: 6px 0 0; letter-spacing: 0.005em; text-shadow: 2px 2px 0 var(--silver-dark), 4px 4px 0 rgba(0, 0, 0, 0.22); } .builtdiff__lede { font-family: var(--font-vcr); font-size: clamp(14px, 1.5vw, 16px); line-height: 1.55; color: #111; max-width: 70ch; margin: 2px 0 6px; } .builtdiff__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 14px); margin-top: clamp(6px, 1vw, 12px); width: 100%; max-width: 100%; } .builtdiff-card { border: 2px solid var(--black); box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5); padding: clamp(10px, 1.2vw, 14px); display: flex; flex-direction: column; gap: 6px; width: 100%; aspect-ratio: var(--sticky-note-ratio); box-sizing: border-box; min-width: 0; overflow: hidden; transform: rotate(var(--base-rotate, 0deg)) skewX(var(--wind-skew, 0deg)); transform-origin: top center; border-bottom-left-radius: var(--wind-curl-l, 0); border-bottom-right-radius: var(--wind-curl-r, 0); will-change: transform, border-radius; } .builtdiff-card--yellow { background: #fff39e; } .builtdiff-card--orange { background: #ffd9a8; } .builtdiff-card--red { background: #ffb3b3; } .builtdiff-card--pink { background: #ffc6e3; } .builtdiff-card--purple { background: #ddc7ff; } .builtdiff-card--cyan { background: #b9efff; } .builtdiff-card--green { background: #c8f7a2; } .builtdiff-card__icon { font-family: var(--font-vcr); font-size: clamp(16px, 1.6vw, 20px); line-height: 1; color: var(--black); margin-bottom: 0; flex-shrink: 0; font-variant-emoji: text; } .builtdiff-card__title { font-family: var(--font-vcr); font-size: clamp(14px, 1.4vw, 17px); font-weight: 400; margin: 0; color: var(--black); letter-spacing: 0.02em; text-transform: lowercase; line-height: 1.15; flex-shrink: 0; } .builtdiff-card__body { font-family: var(--font-body); font-size: clamp(11px, 1.1vw, 13px); line-height: 1.4; letter-spacing: 0.02em; color: #222; margin: 0; flex: 1; min-height: 0; } /* Subtle sticky-note tilt — same vibe as one_vote / privacy_first / mission. 7-step cycle so grids of different lengths don't repeat in a stale pattern. */ .whimsy-card:nth-child(7n+1), .builtdiff-card:nth-child(7n+1), .profile-card:nth-child(7n+1) { --base-rotate: -1.1deg; } .whimsy-card:nth-child(7n+2), .builtdiff-card:nth-child(7n+2), .profile-card:nth-child(7n+2) { --base-rotate: 0.75deg; } .whimsy-card:nth-child(7n+3), .builtdiff-card:nth-child(7n+3), .profile-card:nth-child(7n+3) { --base-rotate: -0.45deg; } .whimsy-card:nth-child(7n+4), .builtdiff-card:nth-child(7n+4), .profile-card:nth-child(7n+4) { --base-rotate: 1.15deg; } .whimsy-card:nth-child(7n+5), .builtdiff-card:nth-child(7n+5), .profile-card:nth-child(7n+5) { --base-rotate: -0.85deg; } .whimsy-card:nth-child(7n+6), .builtdiff-card:nth-child(7n+6), .profile-card:nth-child(7n+6) { --base-rotate: 0.55deg; } .whimsy-card:nth-child(7n+7), .builtdiff-card:nth-child(7n+7), .profile-card:nth-child(7n+7) { --base-rotate: -1.25deg; } @media (min-width: 681px) { .builtdiff__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 540px) { .builtdiff__headline { font-size: clamp(20px, 6.5vw, 30px); } .builtdiff__body { padding: clamp(16px, 4vw, 24px) clamp(14px, 3.5vw, 20px); gap: clamp(10px, 2.5vw, 14px); } .builtdiff__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } } /* ---------- WAY MORE (compact square-ish sticky, inset from full-width sections) ---------- */ .moresec { width: 100%; display: flex; justify-content: center; padding: 0 clamp(12px, 3vw, 28px); box-sizing: border-box; } .moresec-card { --base-rotate: 0.9deg; width: min(100%, clamp(16.5rem, 34vw, 21.5rem)); max-width: clamp(16.5rem, 34vw, 21.5rem); margin: 0 auto; padding: clamp(16px, 2.6vw, 24px); box-sizing: border-box; justify-self: center; } .moresec-card__inner { display: flex; flex-direction: column; align-items: stretch; gap: clamp(10px, 1.6vw, 14px); width: 100%; } .moresec-card__headline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.12em; width: 100%; margin: 0; text-align: left; line-height: 1.05; } .moresec-card__plus { display: inline; font: inherit; color: inherit; text-shadow: inherit; letter-spacing: inherit; } .moresec-card .sticky-card__divider { width: 100%; margin: 0; } .moresec-card .sticky-card__lede { width: 100%; max-width: none; margin: 0; text-align: left; font-size: clamp(12px, 1.25vw, 14px); line-height: 1.42; } .moresec-card__headline.neo-cyber--header { font-size: clamp(22px, 4.2vw, 32px); } @media (max-width: 540px) { .moresec-card { width: min(92%, 19rem); max-width: min(92%, 19rem); } } /* ---------- COOP SECTION (feature_04 — 3 nested colored mini windows) ---------- */ .coopsec__body { padding: clamp(22px, 4vw, 40px) clamp(18px, 3vw, 32px) clamp(22px, 4vw, 36px); display: flex; flex-direction: column; gap: clamp(14px, 2vw, 22px); position: relative; } .coopsec__tag { flex-shrink: 0; align-self: flex-start; display: inline-block; background: #b9efff; color: var(--black); font-family: var(--font-vcr); font-size: 13px; letter-spacing: 0.06em; text-transform: lowercase; padding: 7px 12px; border: 2px solid var(--black); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55); transform: rotate(-1deg); } .coopsec__headline { font-family: var(--font-vcr); font-weight: 400; font-size: clamp(22px, 3.4vw, 40px); line-height: 1.1; color: var(--black); margin: 6px 0 0; letter-spacing: 0.005em; text-shadow: 2px 2px 0 var(--silver-dark), 4px 4px 0 rgba(0, 0, 0, 0.22); } .coopsec__lede { font-family: var(--font-vcr); font-size: clamp(14px, 1.5vw, 16px); line-height: 1.55; color: #111; max-width: 72ch; margin: 2px 0 6px; } .coopsec__windows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); margin-top: clamp(6px, 1vw, 12px); align-items: stretch; } /* Colored title-bar variants (override the default blue gradient) */ .title-bar--green, .title-bar--yellow, .title-bar--pink { background: var(--silver); color: var(--black); text-shadow: none; } .title-bar--green { background: #c8f7a2; } .title-bar--yellow { background: #fff39e; } .title-bar--pink { background: #ffc6e3; } .title-bar--green::after, .title-bar--yellow::after, .title-bar--pink::after { display: none; } .title-bar--green .title-bar__text, .title-bar--yellow .title-bar__text, .title-bar--pink .title-bar__text { text-shadow: none; color: var(--black); } /* Mini window in the coop grid */ .window--mini { display: flex; flex-direction: column; box-shadow: inset -1px -1px 0 var(--silver-dark), inset 1px 1px 0 var(--silver-light), 4px 4px 0 rgba(0, 0, 0, 0.45); } .window--mini__body { background: #fdfdfd; padding: clamp(16px, 2vw, 22px); display: flex; flex-direction: column; gap: 10px; flex: 1; } .window--mini__icon { font-family: var(--font-vcr); font-size: clamp(20px, 2vw, 24px); line-height: 1; color: var(--black); margin-bottom: 4px; font-variant-emoji: text; } .window--mini__title { font-family: var(--font-vcr); font-size: clamp(17px, 1.9vw, 21px); font-weight: 400; margin: 6px 0 0; color: var(--black); letter-spacing: 0.02em; text-transform: lowercase; line-height: 1.2; } .window--mini__text { font-family: var(--font-vcr); font-size: clamp(12px, 1.2vw, 14px); line-height: 1.5; color: #222; margin: 0; } /* tablet: stack 3 mini windows to 1-col */ @media (max-width: 900px) { .coopsec__windows { grid-template-columns: 1fr; } } @media (max-width: 540px) { .coopsec__headline { font-size: clamp(20px, 6.5vw, 30px); } .window--mini__body { padding: 16px; } } /* ---------- mobile (collapse nav into hamburger, stack hero) ---------- */ @media (max-width: 768px) { /* Hide desktop nav + CTA; show hamburger */ .topbar__nav, .topbar__cta { display: none; } .topbar__hamburger { display: flex; } /* Show the mobile dropdown when it's not hidden (JS toggles [hidden]) */ .topbar__mobile-menu { display: flex; } /* Browser default still applies display:none when [hidden] is set, which overrides the rule above. Keep both rules for clarity. */ .topbar__mobile-menu[hidden] { display: none; } .topbar__logo { height: 32px; } .hero-redesign__grid { grid-template-columns: 1fr; align-items: stretch; } .hero-headline { font-size: clamp(24px, 7.5vw, 40px); text-shadow: 2px 2px 0 var(--silver-dark), 4px 4px 0 rgba(0, 0, 0, 0.22); } .hero-tag { font-size: 12px; } .hero-redesign__col--window { justify-content: center; } .window--feed { width: 100%; transform: none; } .compare-section { grid-template-columns: 1fr; gap: 28px; max-width: min(100%, 27rem); } .compare-section > .sticky-card { max-width: 100%; } /* On mobile, drop the tag below the logo and center it (no overflow). */ .brand-mark { padding: 32px 16px 28px; } .brand-mark__logo { width: clamp(200px, 65vw, 340px); } .brand-mark__tag { position: static; display: inline-block; margin-top: 18px; transform: rotate(-1.5deg); font-size: 12px; } .brand-mark__inner { display: flex; flex-direction: column; align-items: center; } } @media (max-width: 900px) and (min-width: 769px) { .hero-redesign__grid { grid-template-columns: 1fr; gap: 24px; align-items: stretch; } .hero-headline { font-size: clamp(32px, 5.5vw, 52px); } .hero-redesign__col--window { justify-content: center; } .window--feed { width: 100%; transform: rotate(1deg); } } /* Drop the chunky drop-shadow from headlines that live inside windows. The window chrome + title bar already establish enough visual weight; shadow-less headlines read cleaner and let the actual letterforms breathe. Placed after the mobile media queries so it overrides those shadows too. */ .hero-headline, .whimsy__headline, .connect__headline, .builtdiff__headline, .coopsec__headline { text-shadow: none; } /* ---------- body-copy font override ---------- Headlines, titles, tags, and subheaders keep --font-vcr / --font-mono / --font-cyber. All paragraph copy uses --font-body (Arial). */ .hero-lede, .waitlist-disclaimer, .sticky-card__lede, .sticky-card__list li, .whimsy__lede, .whimsy-card__body, .connect__lede, .profile-card__body, .builtdiff__lede, .builtdiff-card__body, .coopsec__lede, .window--mini__text, .window-body { font-family: var(--font-body); line-height: 1.5; letter-spacing: var(--body-letter-spacing); font-weight: 400; } /* Divider between title and body inside whimsy / built-diff / profile cards so the title visually separates from the description (matches the divider pattern used by the red/green compare-section sticky cards). */ .whimsy-card__title, .builtdiff-card__title, .profile-card__title { padding-bottom: 6px; border-bottom: 2px solid rgba(0, 0, 0, 0.35); margin-bottom: 0; } /* Fun-font (VCR) titles always step above Arial body in the same block */ .window--mini__title { font-size: clamp(17px, 1.9vw, 21px); } .hero-lede { font-size: clamp(18px, 2.1vw, 21px); } .waitlist-disclaimer { font-size: clamp(12px, 1.6vw, 18px); } .sticky-card__lede { font-size: clamp(17px, 1.8vw, 21px); } .sticky-card__list li { font-size: clamp(16px, 1.6vw, 19px); } .whimsy__lede { font-size: clamp(17px, 1.8vw, 20px); } .connect__lede { font-size: clamp(17px, 1.8vw, 20px); } .builtdiff__lede { font-size: clamp(17px, 1.8vw, 20px); } .coopsec__lede { font-size: clamp(17px, 1.8vw, 20px); } .window--mini__text { font-size: clamp(15px, 1.5vw, 18px); } /* ---------- scroll reveal (sections fade in on scroll) ---------- */ .scroll-reveal:not(.is-in-view) { opacity: 0; translate: 0 28px; } .scroll-reveal.is-in-view { opacity: 1; translate: 0 0; transition: opacity 0.48s ease, translate 0.48s ease; } /* Built different: stickies pop up one-by-one (left→right, top→bottom) */ .builtdiff__cards.scroll-reveal:not(.is-in-view) { opacity: 1; translate: none; } .builtdiff__cards.scroll-reveal:not(.is-in-view) .builtdiff-card { opacity: 0; translate: 0 36px; scale: 0.94; } .builtdiff__cards.scroll-reveal.is-in-view .builtdiff-card { opacity: 1; translate: 0 0; scale: 1; transition: opacity 0.4s ease, translate 0.45s cubic-bezier(0.22, 1, 0.36, 1), scale 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .builtdiff__cards.scroll-reveal.is-in-view .builtdiff-card:nth-child(1) { transition-delay: 0ms; } .builtdiff__cards.scroll-reveal.is-in-view .builtdiff-card:nth-child(2) { transition-delay: 85ms; } .builtdiff__cards.scroll-reveal.is-in-view .builtdiff-card:nth-child(3) { transition-delay: 170ms; } .builtdiff__cards.scroll-reveal.is-in-view .builtdiff-card:nth-child(4) { transition-delay: 255ms; } .builtdiff__cards.scroll-reveal.is-in-view .builtdiff-card:nth-child(5) { transition-delay: 340ms; } .builtdiff__cards.scroll-reveal.is-in-view .builtdiff-card:nth-child(6) { transition-delay: 425ms; } .builtdiff__cards.scroll-reveal.is-in-view .builtdiff-card:nth-child(7) { transition-delay: 510ms; } .builtdiff__cards.scroll-reveal.is-in-view .builtdiff-card:nth-child(8) { transition-delay: 595ms; } @media (prefers-reduced-motion: reduce) { .scroll-reveal:not(.is-in-view) { opacity: 1; translate: none; } .scroll-reveal.is-in-view { transition: none; } .builtdiff__cards.scroll-reveal:not(.is-in-view) .builtdiff-card, .builtdiff__cards.scroll-reveal.is-in-view .builtdiff-card { opacity: 1; translate: none; scale: 1; transition: none; } } /* ---------- typewriter (headers + body on scroll) ---------- */ .typewriter { white-space: pre-wrap; } /* Inline section tags type on one line */ .whimsy__tag.typewriter, .connect__tag.typewriter, .builtdiff__tag.typewriter, .coopsec__tag.typewriter { white-space: nowrap; } .typewriter.is-typing::after { content: ""; display: inline-block; width: 2px; height: 0.9em; margin-left: 2px; vertical-align: text-bottom; background: currentColor; animation: typewriter-cursor-blink 0.9s step-end infinite; } .typewriter.is-type-done::after { content: none; display: none; } @keyframes typewriter-cursor-blink { 0%, 45% { opacity: 1; } 50%, 100% { opacity: 0; } } .open-section .typewriter::after, .moresec-card .typewriter::after, .waitlist-disclaimer::after, .sticky-card .typewriter::after, .whimsy-card .typewriter::after, .profile-card .typewriter::after, .builtdiff-card .typewriter::after { display: none !important; } @media (prefers-reduced-motion: reduce) { .typewriter.is-typing::after { animation: none; opacity: 0; } }