/* ============================================================ ANTSTHROPIC — BRUTALIST REDESIGN Design system derived from design-example/shared/theme.css ============================================================ */ /* --- Fonts --- */ /* Space Grotesk / Work Sans are self-hosted via assets/fonts/fonts.css, loaded from index.html . */ /* --- Design Tokens --- */ :root { --yellow: #f5e642; --black: #111111; --off-white: #fcf9f8; --shadow: 6px 6px 0px 0px var(--black); --shadow-sm: 3px 3px 0px 0px var(--black); --shadow-hover: 8px 8px 0px 0px var(--black); --font-headline: 'Space Grotesk', sans-serif; --font-body: 'Work Sans', sans-serif; --red-accent: #e74c3c; --green-accent: #c8e6a0; --blue-accent: #a0c4e6; --purple-accent: #d4b8e8; --stone-accent: #d6cfc4; } /* --- Reset --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--black); min-height: 100vh; position: relative; cursor: crosshair; overflow-x: hidden; /* Honeycomb Pattern Background */ background-color: var(--off-white); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='%23000' fill-opacity='0.04'%3E%3Cpolygon points='13.99 9.25 7 14 1 11.89 1 4.11 7 2 13.99 6.75'/%3E%3Cpolygon points='27 4.11 21 2 14.01 6.75 14.01 15.25 21 20 27 17.89'/%3E%3Cpolygon points='27 17.89 21 20 14.01 15.25 14.01 24.75 21 29 27 26.89'/%3E%3Cpolygon points='27 31.11 27 26.89 21 29 14.01 24.75 14.01 33.25 21 38'/%3E%3Cpolygon points='1 25.89 7 28 13.99 23.25 13.99 14.75 7 10 1 12.11'/%3E%3Cpolygon points='13.99 37.25 7 42 1 39.89 1 32.11 7 30 13.99 34.75'/%3E%3C/g%3E%3C/svg%3E"); -webkit-tap-highlight-color: transparent; } /* Headlines double as ant terrain — unselectable so a mobile tap meant for an ant doesn't get swallowed by the browser's text-selection gesture. */ h1, h2, h3 { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } /* ============================================================ ANT CANVAS (Background Minigame) ============================================================ */ #ant-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } /* ============================================================ UTILITY CLASSES (from theme.css) ============================================================ */ .brutalist-shadow { box-shadow: var(--shadow); } .brutalist-shadow-small { box-shadow: var(--shadow-sm); } .slanted-card { transform: rotate(-1.5deg); } .slanted-card-alt { transform: rotate(1.5deg); } .slanted-button { transform: rotate(2deg); } .btn-hover { transition: transform 0.1s, box-shadow 0.1s; } .btn-hover:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-hover); } .btn-hover:active { transform: translate(3px, 3px); box-shadow: none; } .rotate-pos-1 { transform: rotate(1deg); } .rotate-neg-1 { transform: rotate(-1.5deg); } .rotate-pos-2 { transform: rotate(2deg); } .rotate-neg-2 { transform: rotate(-1deg); } /* ============================================================ STICKY HEADER ============================================================ */ .site-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-bottom: 4px solid var(--black); background: var(--off-white); } .header-left { display: flex; align-items: center; gap: 10px; } .header-logo { font-family: var(--font-headline); font-weight: 900; font-size: 20px; text-transform: uppercase; letter-spacing: -0.04em; color: var(--black); text-decoration: none; } .header-logo .underline-accent { text-decoration: underline; text-decoration-color: var(--yellow); text-underline-offset: 3px; } .header-nav { display: flex; align-items: center; gap: 6px; } .header-nav-link { background: var(--off-white); border: 3px solid var(--black); padding: 8px 14px; font-family: var(--font-headline); font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--black); text-decoration: none; transition: all 0.1s; } .header-nav-link:hover { background: var(--yellow); transform: translate(-1px, -1px); box-shadow: var(--shadow-sm); } .header-nav-link:active { transform: translate(2px, 2px); box-shadow: none; } .header-nav-link.active { background: var(--black); color: #fff; } .header-cta { background: var(--yellow); border: 3px solid var(--black); box-shadow: var(--shadow-sm); padding: 10px 18px; font-family: var(--font-headline); font-weight: 900; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--black); text-decoration: none; cursor: pointer; transition: all 0.1s; } .header-cta:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); } .header-cta:active { transform: translate(3px, 3px); box-shadow: none; } /* ============================================================ MAIN CONTENT WRAPPER ============================================================ */ .main-content { position: relative; z-index: 10; width: 90%; max-width: 1400px; margin: 0 auto; padding: 0 clamp(20px, 3vw, 60px) 60px; } /* ============================================================ HERO SECTION ============================================================ */ .hero-section { padding: 80px 0 60px; text-align: left; } .hero-badge { display: inline-block; background: var(--yellow); border: 4px solid var(--black); box-shadow: var(--shadow); padding: 10px 20px; margin-bottom: 32px; transform: rotate(-1.5deg); } .hero-badge-text { font-family: var(--font-headline); font-weight: 900; font-size: clamp(36px, 6vw, 56px); text-transform: uppercase; letter-spacing: -0.04em; line-height: 1; color: var(--black); } .hero-subtitle { font-family: var(--font-headline); font-weight: 800; font-size: clamp(20px, 3.5vw, 32px); text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.15; color: var(--black); margin-bottom: 24px; } .hero-body { font-family: var(--font-body); font-size: 16px; font-weight: 500; line-height: 1.65; color: #444; max-width: 600px; margin-bottom: 32px; background: #fdfae5; border-left: 4px solid var(--yellow); padding: 16px 20px; border: 4px solid var(--black); box-shadow: var(--shadow-sm); transform: rotate(0.5deg); } .hero-cta { display: inline-block; background: var(--black); color: #fff; border: 4px solid var(--black); box-shadow: var(--shadow); padding: 18px 36px; font-family: var(--font-headline); font-weight: 900; font-size: 16px; text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; cursor: pointer; transition: all 0.1s; transform: rotate(1deg); } .hero-cta:hover { background: var(--yellow); color: var(--black); transform: rotate(1deg) translate(-3px, -3px); box-shadow: var(--shadow-hover); } .hero-cta:active { transform: rotate(1deg) translate(3px, 3px); box-shadow: none; } .hero-tagline { font-family: var(--font-headline); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: #888; margin-top: 16px; margin-left: 4px; } /* ============================================================ SECTION HEADERS ============================================================ */ .section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; margin-top: 72px; } .section-number { width: 40px; height: 40px; background: var(--black); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-headline); font-weight: 900; font-size: 16px; flex-shrink: 0; } .section-title { font-family: var(--font-headline); font-weight: 900; font-size: clamp(28px, 4vw, 40px); text-transform: uppercase; letter-spacing: -0.04em; line-height: 1; color: var(--black); } /* ============================================================ CARD — Primary content container ============================================================ */ .card { background: #fff; border: 4px solid var(--black); box-shadow: var(--shadow); padding: 24px; margin-bottom: 24px; position: relative; } .card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 3px solid var(--black); } .card-icon { width: 48px; height: 48px; display: grid; place-items: center; border: 3px solid var(--black); font-size: 22px; flex-shrink: 0; } .card-title { font-family: var(--font-headline); font-weight: 900; font-size: 18px; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.1; color: var(--black); } .card-body p, .card-body { font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1.55; color: #444; } .card-body h3 { font-family: var(--font-headline); font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: -0.01em; color: var(--black); margin-bottom: 4px; margin-top: 12px; } .card-body h3:first-child { margin-top: 0; } .card-divider { border: none; border-top: 3px dashed #ddd; margin: 16px 0; } /* ============================================================ BENEFITS GRID ============================================================ */ .benefits-grid { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 640px) { .benefits-grid { grid-template-columns: repeat(3, 1fr); } } .benefit-card { background: #fff; border: 4px solid var(--black); box-shadow: var(--shadow); padding: 24px; position: relative; } .benefit-card:nth-child(1) { transform: rotate(-1deg); } .benefit-card:nth-child(2) { transform: rotate(0.8deg); } .benefit-card:nth-child(3) { transform: rotate(-0.5deg); } .benefit-icon-box { width: 56px; height: 56px; display: grid; place-items: center; border: 3px solid var(--black); font-size: 28px; margin-bottom: 16px; } .benefit-title { font-family: var(--font-headline); font-weight: 900; font-size: 16px; text-transform: uppercase; letter-spacing: -0.02em; color: var(--black); margin-bottom: 12px; padding-bottom: 10px; border-bottom: 3px solid var(--black); } .benefit-sub { margin-bottom: 12px; } .benefit-sub h3 { font-family: var(--font-headline); font-weight: 800; font-size: 13px; text-transform: uppercase; color: var(--black); margin-bottom: 4px; } .benefit-sub p { font-family: var(--font-body); font-size: 13px; color: #555; line-height: 1.5; } /* ============================================================ HOW IT WORKS — Steps ============================================================ */ .steps-container { display: flex; flex-direction: column; gap: 28px; } .step-card { background: #fff; border: 4px solid var(--black); box-shadow: var(--shadow); padding: 28px; position: relative; } .step-card.highlight { background: var(--yellow); } .step-num-label { display: inline-block; background: var(--black); color: #fff; font-family: var(--font-headline); font-weight: 900; font-size: 12px; padding: 4px 12px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; } .step-title { font-family: var(--font-headline); font-weight: 900; font-size: 22px; text-transform: uppercase; letter-spacing: -0.03em; color: var(--black); margin-bottom: 16px; } .sub-steps-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 600px) { .sub-steps-grid { grid-template-columns: repeat(3, 1fr); } } .sub-step { background: var(--off-white); border: 3px solid var(--black); padding: 16px; } .sub-step-label { display: inline-block; background: var(--black); color: var(--yellow); font-family: var(--font-headline); font-weight: 900; font-size: 10px; padding: 2px 8px; margin-bottom: 8px; letter-spacing: 0.05em; } .sub-step p { font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: #333; } .sub-step strong { font-weight: 700; color: var(--black); } /* Daily Cycle */ .daily-cycle { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; } @media (max-width: 500px) { .daily-cycle { grid-template-columns: 1fr; } } .cycle-box { background: var(--off-white); border: 3px solid var(--black); padding: 18px; position: relative; } .cycle-box.pulse { border-color: var(--red-accent); animation: borderPulse 2s infinite; } @keyframes borderPulse { 0%, 100% { border-color: var(--black); } 50% { border-color: var(--red-accent); } } .time-stamp { position: absolute; top: -10px; right: 12px; background: var(--black); color: var(--yellow); font-family: var(--font-headline); font-weight: 900; font-size: 10px; padding: 3px 10px; letter-spacing: 0.05em; text-transform: uppercase; } .cycle-box h3 { font-family: var(--font-headline); font-weight: 900; font-size: 15px; text-transform: uppercase; color: var(--black); margin-bottom: 6px; } .cycle-box p { font-family: var(--font-body); font-size: 13px; color: #555; line-height: 1.45; } /* Nerd Schematic */ .nerd-schematic-container { background: var(--black); border: 4px solid var(--black); padding: 24px; margin-top: 16px; } .schematic-header { display: flex; align-items: center; gap: 12px; font-family: var(--font-headline); color: var(--yellow); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid #333; padding-bottom: 10px; margin-bottom: 16px; } .nerd-avatar { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--yellow); } .interactive-diagram { width: 100%; } .blueprint-svg { width: 100%; display: block; margin: 0 auto; } .node { fill: none; stroke: var(--yellow); stroke-width: 2; cursor: help; transition: all 0.3s; } .queen-node { fill: rgba(245, 230, 66, 0.1); stroke: var(--yellow); stroke-width: 3; stroke-dasharray: 5; animation: rotateDash 10s linear infinite; cursor: help; } @keyframes rotateDash { to { stroke-dashoffset: 50; } } .flow-line { stroke: #555; stroke-width: 2; stroke-dasharray: 4; animation: flowForward 2s linear infinite; pointer-events: none; } .backward-flow { stroke: #888; animation: flowBackward 2s linear infinite; } @keyframes flowForward { to { stroke-dashoffset: -20; } } @keyframes flowBackward { from { stroke-dashoffset: -20; } to { stroke-dashoffset: 0; } } .svg-text { fill: var(--yellow); font-family: var(--font-headline); font-size: 11px; font-weight: 700; text-transform: uppercase; } .tiny-text { font-size: 9px; } .node:hover, .queen-node:hover { stroke: #fff; filter: drop-shadow(0 0 6px var(--yellow)); } .diagram-tooltip { text-align: center; font-family: var(--font-headline); color: var(--yellow); font-size: 12px; font-weight: 600; margin-top: 14px; min-height: 36px; line-height: 1.4; } /* ============================================================ WALKTHROUGH SECTION ============================================================ */ .walkthrough-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; justify-items: center; } @media (max-width: 900px) { .walkthrough-grid { grid-template-columns: 1fr; } } .walkthrough-item { text-align: center; } .walkthrough-item .step-title { font-size: 18px; margin-bottom: 20px; } /* Brutalist Phone Mockup — Chunky Device Frame */ .phone-mockup { width: 380px; margin: 0 auto; background: var(--black); border: 6px solid var(--black); box-shadow: var(--shadow); position: relative; overflow: hidden; } /* Top bezel with camera + speaker */ .phone-top-bezel { background: var(--black); padding: 14px 0 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; } .phone-camera-bar { display: flex; align-items: center; justify-content: center; gap: 10px; } .phone-camera-dot { width: 10px; height: 10px; background: #333; border-radius: 50%; border: 2px solid #444; } .phone-speaker-slit { width: 60px; height: 4px; background: #333; border-radius: 2px; } .phone-notch { width: 100px; height: 6px; background: #333; border-radius: 3px; } .phone-screen { background: #e5ddd5; padding: 12px; margin: 0 8px; font-family: var(--font-body); color: #333; display: flex; flex-direction: column; gap: 8px; font-size: 13px; text-transform: none; max-height: 600px; overflow-y: auto; scrollbar-width: none; } .phone-screen::-webkit-scrollbar { display: none; } /* Bottom chin with home button */ .phone-bottom { background: var(--black); padding: 12px 0 16px; display: flex; justify-content: center; } .phone-home-btn { width: 36px; height: 36px; border: 3px solid #444; border-radius: 50%; background: #222; } /* WhatsApp-style Chat Bubbles */ .whatsapp-header { background: var(--black); color: var(--yellow); padding: 10px 12px; margin: -8px -8px 6px -8px; font-family: var(--font-headline); font-weight: 900; font-size: 12px; display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: 0.02em; } .header-avatar { width: 22px; height: 22px; background: var(--yellow); border-radius: 50%; border: 2px solid var(--yellow); background-position: center; background-size: cover; background-repeat: no-repeat; } .chat-bubble { max-width: 85%; padding: 8px 10px; border-radius: 0; font-size: 10px; position: relative; line-height: 1.3; border: 2px solid var(--black); } .chat-bubble.queen { align-self: flex-start; background: #fff; } .chat-bubble.me { align-self: flex-end; background: var(--yellow); } .bubble-meta { font-size: 8px; color: #888; margin-top: 4px; text-align: right; display: block; font-family: var(--font-headline); font-weight: 700; } /* Setup Chips */ .setup-selection-box { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .setup-toggle-chip { background: #fff; border: 2px solid var(--black); padding: 3px 7px; font-size: 9px; font-family: var(--font-headline); font-weight: 700; color: var(--black); cursor: pointer; transition: all 0.15s; user-select: none; -webkit-tap-highlight-color: transparent; } .setup-toggle-chip:hover { background: var(--yellow); } .setup-toggle-chip.selected { background: var(--black); color: var(--yellow); } /* Voice Message */ .voice-msg-container { display: flex; align-items: center; gap: 8px; padding: 4px 0; width: 100%; } .play-btn-wrapper { position: relative; width: 28px; height: 28px; cursor: pointer; background: var(--black); display: flex; align-items: center; justify-content: center; border: 2px solid var(--black); } .play-btn-wrapper .play-icon { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid var(--yellow); margin-left: 3px; } .play-btn-wrapper.playing .play-icon { border: none; width: 8px; height: 10px; border-left: 3px solid var(--yellow); border-right: 3px solid var(--yellow); margin-left: 0; } .voice-waveform { flex: 1; height: 10px; background: repeating-linear-gradient(90deg, #ccc 0, #ccc 2px, transparent 2px, transparent 4px); position: relative; } .voice-progress { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: repeating-linear-gradient(90deg, var(--black) 0, var(--black) 2px, transparent 2px, transparent 4px); transition: width 0.1s linear; } .wa-status-mic { font-size: 14px; } /* Queen B Digest */ .chat-summary-block { background: #fff; border: 2px solid var(--black); padding: 8px; font-size: 9px; } .chat-summary-header { color: var(--black); font-family: var(--font-headline); font-weight: 900; text-transform: uppercase; font-size: 10px; margin-bottom: 6px; border-bottom: 2px solid var(--black); padding-bottom: 4px; letter-spacing: 0.03em; } .digest-section { margin-bottom: 8px; } .digest-section-title { font-family: var(--font-headline); font-weight: 800; color: var(--black); font-size: 9px; border-bottom: 2px dashed #ccc; padding-bottom: 3px; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px; } .digest-label { font-size: 8px; color: #888; margin: 4px 0 3px; text-transform: uppercase; letter-spacing: 0.4px; font-family: var(--font-headline); font-weight: 700; } .digest-event-card { background: #fff; border: 2px solid var(--black); padding: 6px 8px; margin-bottom: 4px; border-left: 4px solid var(--yellow); font-size: 8.5px; line-height: 1.5; } .digest-event-card.your-plan { border-left-color: var(--black); background: #fdfae5; } .digest-event-title { font-family: var(--font-headline); font-weight: 800; color: var(--black); margin-bottom: 2px; font-size: 9px; text-transform: uppercase; } .digest-event-meta { color: #555; font-size: 8px; line-height: 1.6; } .digest-badge { background: var(--black); color: var(--yellow); padding: 1px 5px; font-size: 7.5px; font-family: var(--font-headline); font-weight: 800; margin-left: 3px; } .digest-rsvp { display: flex; gap: 4px; margin-top: 4px; } .digest-btn { border: 2px solid var(--black); padding: 2px 8px; font-size: 8px; cursor: pointer; font-family: var(--font-headline); font-weight: 800; transition: all 0.15s; background: #fff; } .digest-btn.yes-btn:hover, .digest-btn.yes-btn.active { background: var(--black); color: var(--yellow); } .digest-btn.no-btn:hover, .digest-btn.no-btn.active { background: var(--red-accent); color: #fff; border-color: var(--red-accent); } .digest-brief-btn { margin-top: 4px; font-size: 8px !important; padding: 2px 7px !important; } .digest-update-card { display: flex; align-items: flex-start; gap: 6px; background: #fff; border: 2px solid var(--black); padding: 5px 7px; margin-bottom: 4px; font-size: 8.5px; line-height: 1.4; } .digest-update-card.sad { background: #fdf4f8; border-left: 4px solid var(--red-accent); } .digest-img { width: 30px; height: 30px; object-fit: cover; flex-shrink: 0; border: 2px solid var(--black); } .digest-update-icon { font-size: 18px; flex-shrink: 0; line-height: 1; } .digest-nudge-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; } .list-item { margin-bottom: 6px; font-size: 9px; } .list-item b { color: var(--black); font-weight: 800; } .line-divider { text-align: center; color: #888; font-size: 8px; margin: 5px 0; font-family: var(--font-headline); font-weight: 700; } /* ============================================================ CTA BUTTON (Bottom of sections) ============================================================ */ .section-cta { text-align: center; margin: 36px 0 20px; } .queen-cta-btn { display: inline-block; background: var(--yellow); color: var(--black); border: 4px solid var(--black); box-shadow: var(--shadow); padding: 16px 36px; font-family: var(--font-headline); font-weight: 900; font-size: 16px; text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; cursor: pointer; transition: all 0.1s; } .queen-cta-btn:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-hover); } .queen-cta-btn:active { transform: translate(3px, 3px); box-shadow: none; } /* ============================================================ FOOTER ============================================================ */ .site-footer { border-top: 4px solid var(--black); background: var(--black); color: #fff; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-headline); font-weight: 900; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; } .footer-brand { opacity: 0.7; } .footer-links a { color: var(--yellow); text-decoration: none; font-weight: 700; transition: opacity 0.2s; } .footer-links a:hover { opacity: 0.7; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 700px) { .site-header { padding: 10px 14px; flex-wrap: wrap; gap: 8px; } .header-nav { display: none; } .header-cta { font-size: 10px; padding: 8px 14px; } .main-content { padding: 0 12px 40px; } .hero-section { padding: 40px 0 30px; } .hero-badge-text { font-size: 32px; } .hero-subtitle { font-size: 18px; } .section-title { font-size: 24px; } .benefits-grid { grid-template-columns: 1fr; } .benefit-card:nth-child(1), .benefit-card:nth-child(2), .benefit-card:nth-child(3) { transform: none; } .walkthrough-grid { grid-template-columns: 1fr; } .phone-mockup { width: 100%; max-width: 380px; } .tg-input-row { flex-direction: column; } .daily-cycle { grid-template-columns: 1fr; } .site-footer { flex-direction: column; gap: 10px; text-align: center; } } /* ============================================================ LARGE SCREENS (1200px+) ============================================================ */ @media (min-width: 1200px) { .hero-section { padding: 100px 0 80px; } .hero-badge-text { font-size: 60px; } .hero-subtitle { font-size: 34px; } .hero-body { font-size: 18px; max-width: 750px; } .section-title { font-size: 48px; } .section-number { width: 52px; height: 52px; font-size: 20px; } .benefits-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } .benefit-card { padding: 32px; } .benefit-title { font-size: 18px; } .step-card { padding: 36px; } .step-title { font-size: 26px; } .sub-steps-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } .sub-step { padding: 20px; } .walkthrough-grid { gap: 40px; } .phone-mockup { width: 420px; } .queen-cta-btn { font-size: 18px; padding: 20px 44px; } .hero-cta { font-size: 18px; padding: 20px 44px; } } /* ============================================================ ULTRAWIDE SCREENS (1800px+) ============================================================ */ @media (min-width: 1800px) { .main-content { max-width: 1600px; } .hero-badge-text { font-size: 72px; } .hero-body { font-size: 20px; max-width: 850px; } .section-title { font-size: 56px; } .benefits-grid { gap: 40px; } .benefit-card { padding: 40px; } .step-card { padding: 44px; } .walkthrough-grid { gap: 56px; } .phone-mockup { width: 460px; } } /* ============================================================ SCRIBE-STYLE LAYOUT — NEW LAYOUT ADDITIONS ============================================================ */ /* ---- Hero Split ---- */ .hero-split { display: grid; grid-template-columns: 55fr 45fr; gap: 60px; align-items: center; min-height: 65vh; } .hero-right { display: flex; justify-content: center; align-items: flex-start; padding-top: 20px; } /* ---- Hero App Preview (digest card mockup) ---- */ .hero-app-preview { background: #fff; border: 4px solid var(--black); box-shadow: var(--shadow); overflow: hidden; transform: rotate(1.5deg); max-width: 440px; width: 100%; } .app-preview-bar { background: var(--black); padding: 8px 14px; display: flex; align-items: center; gap: 6px; } .app-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .app-dot.rd { background: #ff5f57; } .app-dot.yl { background: var(--yellow); } .app-dot.gn { background: #28c840; } .app-preview-label { font-family: var(--font-headline); font-size: 9px; font-weight: 700; color: var(--yellow); text-transform: uppercase; letter-spacing: 0.05em; margin-left: 8px; } .app-preview-body { padding: 14px; display: flex; flex-direction: column; gap: 6px; background: #e5ddd5; font-family: var(--font-body); font-size: 11px; max-height: 520px; overflow: hidden; } .preview-section-label { font-family: var(--font-headline); font-weight: 800; font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px; color: #888; border-bottom: 1px dashed #ccc; padding-bottom: 3px; margin-top: 4px; } .preview-event { background: #fff; border: 2px solid var(--black); border-left: 4px solid var(--yellow); padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; } .preview-event.your-p { border-left-color: var(--black); background: #fdfae5; } .preview-event-title { font-family: var(--font-headline); font-weight: 800; font-size: 10px; text-transform: uppercase; } .preview-event-meta { font-size: 9px; color: #666; line-height: 1.4; } .preview-rsvp { display: flex; gap: 4px; margin-top: 4px; } .preview-rsvp-btn { background: #fff; border: 1.5px solid var(--black); padding: 1px 6px; font-size: 8px; font-family: var(--font-headline); font-weight: 700; cursor: pointer; transition: all 0.1s; } .preview-rsvp-btn:hover { background: var(--yellow); } .preview-update { background: #fff; border: 2px solid var(--black); padding: 5px 8px; font-size: 10px; line-height: 1.4; } .preview-update.sad-u { background: #fdf4f8; border-left: 4px solid var(--red-accent); } .preview-nudge { background: #fffde8; border: 2px solid var(--black); border-left: 4px solid var(--yellow); padding: 6px 8px; font-size: 10px; line-height: 1.4; } .preview-nudge-actions { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; } .nudge-chip { background: #fff; border: 1.5px solid var(--black); padding: 2px 6px; font-size: 8px; font-family: var(--font-headline); font-weight: 700; } /* ---- How It Works — Two Column ---- */ .hiw-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } .hiw-visual { position: sticky; top: 90px; } /* ---- Benefits — reduce card rotation on larger layout ---- */ @media (min-width: 900px) { .benefit-card:nth-child(1) { transform: rotate(-0.5deg); } .benefit-card:nth-child(2) { transform: rotate(0.4deg); } .benefit-card:nth-child(3) { transform: rotate(-0.2deg); } } /* ---- Walkthrough — Full-Width Dark Section ---- */ #walkthrough { background: var(--black); position: relative; z-index: 10; } .walkthrough-container { width: 90%; max-width: 1400px; margin: 0 auto; padding: 0 clamp(20px, 3vw, 60px) 80px; } .walkthrough-container .section-header { padding-top: 60px; } .walkthrough-container .section-number { background: var(--yellow); color: var(--black); } .walkthrough-container .section-title { color: var(--yellow); } .walkthrough-phones { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; justify-items: center; margin-top: 32px; } .walkthrough-phone-col { display: flex; flex-direction: column; align-items: center; width: 100%; } .walkthrough-phone-label { font-family: var(--font-headline); font-weight: 900; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--yellow); margin-bottom: 20px; text-align: center; border-bottom: 2px solid #2a2a2a; padding-bottom: 12px; width: 100%; } /* Yellow shadow on phones against dark bg */ #walkthrough .phone-mockup { box-shadow: 8px 8px 0px 0px var(--yellow); } /* ---- Full-Bleed CTA ---- */ .fullbleed-cta { background: var(--yellow); border-top: 4px solid var(--black); text-align: center; padding: 100px 40px; position: relative; z-index: 10; } .fullbleed-cta-eyebrow { display: inline-block; font-family: var(--font-headline); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(0,0,0,0.4); margin-bottom: 24px; background: rgba(0,0,0,0.06); padding: 4px 14px; } .fullbleed-cta h2 { font-family: var(--font-headline); font-weight: 900; font-size: clamp(40px, 7vw, 80px); text-transform: uppercase; letter-spacing: -0.04em; line-height: 1; color: var(--black); margin-bottom: 24px; } .fullbleed-cta-sub { font-family: var(--font-body); font-size: 16px; color: rgba(0,0,0,0.55); margin-bottom: 40px; max-width: 480px; margin-left: auto; margin-right: auto; line-height: 1.6; } .fullbleed-cta-btn { font-size: 20px !important; padding: 20px 52px !important; } /* ---- Footer — 3-col grid override ---- */ .site-footer { display: grid !important; grid-template-columns: 2fr 1fr 1fr; gap: 48px; padding: 56px 60px; align-items: start; background: var(--black); border-top: 4px solid var(--yellow); color: #fff; font-size: 13px; text-transform: none; letter-spacing: 0; } .footer-logo-row { display: flex; align-items: center; gap: 10px; font-family: var(--font-headline); font-weight: 900; font-size: 20px; text-transform: uppercase; letter-spacing: -0.03em; color: var(--yellow); margin-bottom: 14px; } .footer-tagline { font-family: var(--font-body); font-size: 13px; color: rgba(255,255,255,0.4); font-weight: 400; letter-spacing: 0; line-height: 1.6; max-width: 280px; } .footer-col-title { font-family: var(--font-headline); font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.3); margin-bottom: 16px; } .footer-nav-links { display: flex; flex-direction: column; gap: 10px; } .footer-nav-links a { font-family: var(--font-headline); font-size: 14px; font-weight: 700; text-transform: uppercase; color: rgba(255,255,255,0.65); text-decoration: none; letter-spacing: 0.02em; transition: color 0.15s; } .footer-nav-links a:hover { color: var(--yellow); } /* ---- Responsive for new layout ---- */ @media (max-width: 900px) { .hero-split { grid-template-columns: 1fr; } .hero-right { display: none; } .hiw-split { grid-template-columns: 1fr; } .hiw-visual { position: static; } .walkthrough-phones { grid-template-columns: 1fr; } .site-footer { grid-template-columns: 1fr !important; padding: 40px 20px; gap: 32px; } .fullbleed-cta { padding: 60px 24px; } } /* ============================================================ ANALOG ARCHITECT REDESIGN — LAYOUT SYSTEM ============================================================ */ /* Base & Typography Overrides */ html, body { background-color: #f9f6f3; color: #2f2f2d; min-height: max(884px, 100dvh); background-image: none; /* override old honeycomb */ } .blueprint-grid { background-image: radial-gradient(#afadaa 1px, transparent 1px); background-size: 24px 24px; } /* Common Text Adjustments */ .aa-font-headline { font-family: var(--font-headline); } .aa-font-body { font-family: var(--font-body); } .aa-inverse-surface { background-color: #0e0e0d; color: #f9f6f3; } .aa-surface { background-color: #f9f6f3; } .aa-primary-container { background-color: #F5E642; color: #5c5000; } .aa-secondary-fixed { background-color: #94f6c6; color: #004930; } .aa-secondary-container { background-color: #94f6c6; color: #005e3f; } .aa-tertiary-container { background-color: #dcacfb; color: #50286c; } .aa-brutalist-shadow { box-shadow: 8px 8px 0px 0px #0e0e0d; } .aa-brutalist-shadow-sm { box-shadow: 4px 4px 0px 0px #0e0e0d; } .aa-border-thick { border: 4px solid #0e0e0d; } .aa-border-thin { border: 2px solid #0e0e0d; } /* HEADER */ .aa-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background-color: rgba(249, 246, 243, 0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 2px solid #0e0e0d; } .aa-header-inner { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; max-width: 1440px; margin: 0 auto; } .aa-logo { display: flex; align-items: center; gap: 12px; } .aa-logo-text { font-family: var(--font-headline); font-weight: 900; font-size: 24px; text-transform: uppercase; color: #0e0e0d; letter-spacing: -0.05em; } .aa-nav { display: none; gap: 32px; } @media(min-width: 768px) { .aa-nav { display: flex; } } .aa-nav a { border: 2px solid #0e0e0d; padding: 6px 14px; background-color: #f3f0ed; box-shadow: 2px 2px 0 0 #0e0e0d; font-family: var(--font-headline); font-weight: 700; text-transform: uppercase; font-size: 12px; text-decoration: none; color: #5c5b59; transition: all 0.1s; letter-spacing: 0.1em; } .aa-nav a.active { background-color: #F5E642; color: #0e0e0d; text-decoration: none; transform: translate(1px, 1px); box-shadow: 1px 1px 0 0 #0e0e0d;} .aa-nav a:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 0 #0e0e0d; color: #0e0e0d; background-color: #fff; } .aa-header-btn { background-color: #F5E642; color: #5c5000; font-family: var(--font-headline); font-weight: 700; padding: 8px 24px; border: 2px solid #0e0e0d; box-shadow: 4px 4px 0px 0px #0e0e0d; text-transform: uppercase; cursor: pointer; transition: all 0.1s; display: inline-block; text-decoration: none; } .aa-header-btn:hover { transform: translate(2px, 2px); box-shadow: 0px 0px 0px 0px #0e0e0d; } /* MAIN CONTAINER */ .aa-main { margin-top: 80px; } /* header offset */ /* HERO SECTION */ .aa-hero { position: relative; min-height: 795px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; overflow: hidden; } .aa-hero-float-t { display: none; } @media(min-width: 1024px) { .aa-hero-float-t { display: flex; position: absolute; top: 80px; left: 40px; width: 128px; height: 128px; background-color: #94f6c6; border: 2px solid #0e0e0d; transform: rotate(-12deg); box-shadow: 8px 8px 0px 0px #0e0e0d; align-items: center; justify-content: center; padding: 16px; } } .aa-hero-float-text { font-family: var(--font-headline); font-weight: 900; font-size: 12px; text-transform: uppercase; line-height: 1.1; text-align: center; } .aa-hero-content { z-index: 10; text-align: center; max-width: 1024px; } .aa-hero-h1 { font-family: var(--font-headline); font-weight: 900; font-size: 60px; line-height: 0.9; letter-spacing: -0.05em; color: #0e0e0d; margin-bottom: 32px; } @media(min-width: 768px) { .aa-hero-h1 { font-size: 110px; } } .aa-hero-h1-highlight { background-color: #F5E642; color: #695b00; padding: 8px 16px; display: inline-block; transform: rotate(-1deg); } .aa-hero-actions { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; margin-top: 48px; } @media(min-width: 768px) { .aa-hero-actions { flex-direction: row; } } .aa-hero-desc { font-family: var(--font-headline); font-weight: 700; font-size: 24px; text-transform: uppercase; font-style: italic; color: #5c5b59; max-width: 320px; text-align: left; border-left: 4px solid #0e0e0d; padding-left: 16px; } .aa-hero-btn { background-color: #F5E642; color: #5c5000; font-family: var(--font-headline); font-weight: 900; font-size: 24px; padding: 24px 40px; border: 4px solid #0e0e0d; box-shadow: 8px 8px 0px 0px #0e0e0d; text-transform: uppercase; letter-spacing: -0.02em; cursor: pointer; transition: all 0.1s; display: inline-block; text-decoration: none; } @media(min-width: 768px) { .aa-hero-btn { font-size: 36px; } } .aa-hero-btn:hover { transform: translate(4px, 4px); box-shadow: none; } .aa-hero-float-b { margin-top: 40px; max-width: 384px; background-color: #f9f6f3; border: 4px solid #0e0e0d; padding: 24px; box-shadow: 8px 8px 0px 0px #0e0e0d; } @media(min-width: 1024px) { .aa-hero-float-b { position: absolute; bottom: 40px; right: 40px; margin-top: 0; } } .aa-hero-dots { display: flex; gap: 8px; margin-bottom: 16px; } .aa-hero-dot { width: 12px; height: 12px; border-radius: 50%; } .aa-dot-r { background-color: #b02500; } .aa-dot-y { background-color: #695b00; } .aa-dot-g { background-color: #006947; } .aa-hero-float-b p { font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 1.6; } /* BENTO BENEFITS */ .aa-bento-section { padding: 96px 24px; background-color: #f3f0ed; } .aa-bento-container { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 32px; } @media(min-width: 768px) { .aa-bento-container { grid-template-columns: repeat(12, 1fr); } } .aa-bento-box-1 { background-color: #f9f6f3; border: 4px solid #0e0e0d; padding: 48px; box-shadow: 8px 8px 0px 0px #0e0e0d; position: relative; overflow: hidden; } @media(min-width: 768px) { .aa-bento-box-1 { grid-column: span 8; } } .aa-bento-box-1-bgicon { position: absolute; top: 0; right: 0; padding: 32px; opacity: 0.1; font-size: 192px !important; transition: opacity 0.3s; pointer-events: none;} .aa-bento-box-1:hover .aa-bento-box-1-bgicon { opacity: 0.2; } .aa-bento-title { font-family: var(--font-headline); font-weight: 900; font-size: 48px; margin-bottom: 24px; position: relative; z-index: 10; text-transform: uppercase; line-height: 0.95; letter-spacing: -0.04em;} .aa-bento-desc { font-family: var(--font-body); font-size: 20px; max-width: 576px; color: #5c5b59; position: relative; z-index: 10; line-height: 1.5; } .aa-bento-cards { margin-top: 48px; display: flex; gap: 16px; overflow-x: auto; padding-bottom: 16px; position: relative; z-index: 10; } .aa-minio-card { border: 2px solid #0e0e0d; padding: 16px; width: 192px; flex-shrink: 0; box-shadow: 4px 4px 0px 0px #0e0e0d; } .aa-minio-card .material-symbols-outlined { margin-bottom: 8px; font-size: 24px;} .aa-minio-card p { font-size: 12px; font-family: var(--font-headline); font-weight: 700; text-transform: uppercase; } .aa-bento-box-2 { background-color: #94f6c6; border: 4px solid #0e0e0d; padding: 48px; box-shadow: 8px 8px 0px 0px #0e0e0d; } @media(min-width: 768px) { .aa-bento-box-2 { grid-column: span 4; } } .aa-bento-box-2 .material-symbols-outlined { font-size: 60px; margin-bottom: 24px; display: block; } .aa-bento-box-2 p { color: #004930; font-family: var(--font-body); font-size: 18px; line-height: 1.5; } .aa-bento-box-3 { background-color: #0e0e0d; color: #f9f6f3; padding: 48px; box-shadow: 8px 8px 0px 0px #0e0e0d; display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; border: 4px solid transparent; } @media(min-width: 768px) { .aa-bento-box-3 { grid-column: span 12; grid-template-columns: 1fr 1fr; } } .aa-bento-tag { display: inline-block; background-color: #695b00; color: #F5E642; padding: 4px 12px; font-family: var(--font-headline); font-weight: 700; font-size: 14px; text-transform: uppercase; margin-bottom: 24px; } .aa-bento-box-3 .aa-bento-title { color: #f9f6f3; font-size: 60px; margin-bottom: 32px; } .aa-bento-box-3-right { border-left: 4px solid #695b00; padding-left: 48px; } .aa-bento-box-3 p { font-family: var(--font-body); font-size: 20px; color: #d6d4d0; line-height: 1.6; } /* HOW IT WORKS (SPLIT) */ .aa-hiw-section { padding: 96px 24px; border-top: 4px solid #0e0e0d; background-color: #f9f6f3; } .aa-hiw-container { max-width: 1280px; margin: 0 auto; } .aa-hiw-split { display: flex; flex-direction: column; gap: 48px; } @media(min-width: 768px) { .aa-hiw-split { flex-direction: row; } } .aa-hiw-col { flex: 1; display: flex; flex-direction: column; } @media(min-width: 768px) { .aa-hiw-col:nth-child(2) { margin-top: 96px; } } .aa-hiw-num { font-family: var(--font-headline); font-weight: 900; font-size: 96px; color: #afadaa; opacity: 0.3; margin-bottom: 16px; line-height: 1; } .aa-hiw-num.right { text-align: right; } .aa-hiw-card { background-color: #f9f6f3; border: 4px solid #0e0e0d; padding: 40px; box-shadow: 4px 4px 0px 0px #0e0e0d; height: 100%; display: flex; flex-direction: column;} .aa-hiw-card.alt { background-color: #dcacfb; } .aa-hiw-card-title { font-family: var(--font-headline); font-weight: 900; font-size: 36px; text-transform: uppercase; margin-bottom: 24px; color: #0e0e0d; } .aa-hiw-card p { font-family: var(--font-body); font-size: 18px; color: #5c5b59; margin-bottom: 40px; line-height: 1.5; } .aa-hiw-card.alt p { color: #50286c; } .aa-hiw-img { width: 100%; height: 256px; object-fit: cover; border: 4px solid #0e0e0d; } .aa-audio-viz { background-color: #0e0e0d; padding: 16px; border: 2px solid #fceeff; display: flex; align-items: center; gap: 16px; color: #f9f6f3; margin-top: auto; } .aa-audio-bar { height: 4px; flex: 1; background-color: rgba(249, 246, 243, 0.3); position: relative; } .aa-audio-fill { position: absolute; top: 0; left: 0; bottom: 0; background-color: #F5E642; width: 75%; } /* WALKTHROUGH */ .aa-walk-section { padding: 96px 24px; background-color: #e4e2df; overflow: hidden; } .aa-walk-container { max-width: 1440px; margin: 0 auto; } .aa-walk-title { font-family: var(--font-headline); font-weight: 900; font-size: 72px; text-transform: uppercase; letter-spacing: -0.05em; text-align: center; margin-bottom: 64px; } .aa-walk-grid { display: grid; grid-template-columns: 1fr; gap: 64px; align-items: center; justify-items: center; } @media(min-width: 768px) { .aa-walk-grid { grid-template-columns: 1fr 1fr; } } .aa-phone-wrapper { position: relative; display: flex; justify-content: center; } .aa-phone-label { position: absolute; z-index: 10; border: 2px solid #0e0e0d; padding: 16px; box-shadow: 4px 4px 0px 0px #0e0e0d; } .aa-phone-label-1 { top: -40px; left: -40px; background-color: #F5E642; transform: rotate(-15deg); } .aa-phone-label-2 { bottom: -40px; right: -40px; background-color: #94f6c6; transform: rotate(10deg); } .aa-phone-label p { font-family: var(--font-headline); font-weight: 900; font-size: 14px; text-transform: uppercase; } /* The Rounded Phone Mockup */ .aa-rounded-phone { width: 320px; aspect-ratio: 9/19; background-color: #0e0e0d; border: 8px solid #0e0e0d; border-radius: 40px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); overflow: hidden; position: relative; } .aa-phone-screen { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #f9f6f3; display: flex; flex-direction: column; } /* Phone Inner Content (Reusing some old classes or tailored) */ .aa-phone-inner-p8 { padding: 32px; height: 100%; overflow-y: auto; } .aa-phone-square { width: 48px; height: 48px; background-color: #F5E642; border: 2px solid #0e0e0d; margin-bottom: 32px; } .aa-phone-h4 { font-family: var(--font-headline); font-weight: 900; font-size: 30px; line-height: 1; margin-bottom: 16px; } .aa-phone-p { font-size: 14px; font-family: var(--font-body); color: #5c5b59; margin-bottom: 32px; } .aa-phone-item { border: 2px solid #0e0e0d; padding: 12px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; background: #fff;} .aa-phone-item.done { background-color: #eae8e4; } .aa-phone-item span { font-size: 14px; font-weight: 700; } .aa-chat-header { padding: 24px; border-bottom: 2px solid #0e0e0d; background-color: #F5E642; } .aa-chat-h { font-family: var(--font-headline); font-weight: 900; font-size: 20px; text-transform: uppercase; } .aa-chat-body { flex: 1; padding: 24px; display: flex; flex-direction: column; gap: 24px; overflow-y: auto; } .aa-chat-bubble { border: 2px solid #0e0e0d; padding: 16px; box-shadow: 4px 4px 0px 0px #0e0e0d; } .aa-chat-bubble.left { background-color: #e4e2df; } .aa-chat-bubble.right { background-color: #94f6c6; margin-left: 32px; } .aa-chat-meta { font-size: 10px; font-weight: 700; color: #5c5b59; margin-bottom: 8px; text-transform: uppercase; } .aa-chat-text { font-size: 14px; font-weight: 500; } .aa-chat-input-bar { padding: 16px; border-top: 2px solid #0e0e0d; background-color: #f9f6f3; display: flex; gap: 12px; } .aa-chat-input { flex: 1; border: 2px solid #0e0e0d; padding: 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; display: flex; align-items: center; color: #ccc;} .aa-chat-mic { background-color: #F5E642; border: 2px solid #0e0e0d; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; } /* FINAL CTA */ .aa-final-cta { padding: 128px 24px; text-align: center; background-color: #0e0e0d; position: relative; overflow: hidden; } .aa-final-grid-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.1; pointer-events: none; display: flex; } .aa-final-grid-bg .col { flex: 1; border-right: 1px solid #f9f6f3; } .aa-final-content { position: relative; z-index: 10; max-width: 800px; margin: 0 auto; } .aa-final-h2 { font-family: var(--font-headline); font-weight: 900; font-size: 60px; color: #f9f6f3; line-height: 1; margin-bottom: 48px; text-transform: uppercase; letter-spacing: -0.05em; } @media(min-width: 768px) { .aa-final-h2 { font-size: 96px; } } .aa-final-h2 span { color: #F5E642; } .aa-final-btn { background-color: #F5E642; color: #5c5000; font-family: var(--font-headline); font-weight: 900; font-size: 30px; padding: 32px 48px; border: 4px solid #f9f6f3; box-shadow: 8px 8px 0px 0px #0e0e0d; text-transform: uppercase; cursor: pointer; transition: all 0.1s; text-decoration: none; display: inline-block; } .aa-final-btn:hover { transform: translate(8px, 8px); box-shadow: none; } /* FOOTER */ .aa-footer { border-top: 4px solid #0e0e0d; background-color: #f3f0ed; width: 100%; } .aa-footer-inner { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 64px 48px; gap: 32px; max-width: 1440px; margin: 0 auto; } @media(min-width: 768px) { .aa-footer-inner { flex-direction: row; } } .aa-footer-logo { display:flex; flex-direction:column; gap: 24px; } .aa-footer-logo-text { font-family: var(--font-headline); font-weight: 900; font-size: 30px; text-transform: uppercase; letter-spacing: -0.05em; color: #0e0e0d;} .aa-footer-copy { font-family: var(--font-body); font-size: 14px; text-transform: uppercase; font-weight: 600; letter-spacing: 0.1em; color: #5c5b59; max-width: 300px; line-height: 1.5; } .aa-footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; } .aa-footer-col { display: flex; flex-direction: column; gap: 16px; } .aa-footer-title { font-family: var(--font-headline); font-weight: 900; font-size: 12px; color: #5c5b59; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; } .aa-footer-col a { font-family: var(--font-body); font-size: 14px; text-transform: uppercase; font-weight: 600; letter-spacing: 0.1em; color: #5c5b59; text-decoration: none; transition: transform 0.2s, color 0.2s; } .aa-footer-col a:hover { transform: translateX(4px); color: #695b00; } .aa-footer-bottom { background-color: #0e0e0d; height: 8px; width: 100%; } .aa-footer-egg { border-top: 2px solid rgba(14,14,13,0.12); padding: 24px 48px 32px; display: flex; justify-content: center; } .aa-footer-egg-inner { max-width: 640px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; } .aa-footer-egg .aa-footer-title { margin-bottom: 0; } .aa-footer-egg .aa-footer-copy { max-width: 560px; } .aa-footer-egg-toggle { display: flex; align-items: center; gap: 8px; background: none; border: none; padding: 8px 4px; margin: 0; cursor: pointer; color: #5c5b59; } .aa-footer-egg-toggle:hover .aa-footer-title { color: #695b00; } .aa-footer-egg-toggle:hover .aa-footer-egg-chevron { color: #695b00; } .aa-footer-egg-chevron { color: #5c5b59; transition: transform 0.25s ease, color 0.2s ease; flex-shrink: 0; } .aa-footer-egg-toggle[aria-expanded="true"] .aa-footer-egg-chevron { transform: rotate(180deg); } .aa-footer-egg-collapse { display: grid; grid-template-rows: 0fr; width: 100%; transition: grid-template-rows 0.35s ease; } .aa-footer-egg-collapse.open { grid-template-rows: 1fr; } .aa-footer-egg-content { overflow: hidden; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; } .aa-footer-egg-collapse.open .aa-footer-egg-content { padding-top: 14px; } #ant-anatomy-canvas { width: 100%; max-width: 560px; aspect-ratio: 16 / 8; background: var(--off-white); border: 2px solid var(--black); box-shadow: var(--shadow-sm); } @media (prefers-reduced-motion: reduce) { .aa-footer-egg-collapse, .aa-footer-egg-chevron { transition: none; } } /* Responsive Phone Mockups & 3D Touch Fixes */ @media (max-width: 900px) { .db-phone-wrapper, div[style*="width: 340px"] { transform: none !important; width: 100% !important; max-width: 380px !important; margin-left: auto !important; margin-right: auto !important; height: 600px !important; max-height: 80vh !important; box-shadow: 6px 6px 0 0 rgba(0,0,0,0.8) !important; } } /* Ensure touch hits are preserved in 3D layouts */ button, .tg-chip, .db-btn { position: relative; z-index: 100; } div[class*="aa-phone-wrapper"], .db-phone-wrapper { transform-style: preserve-3d; } /* ============================================================ FINAL Z-INDEX & CLICK FIX Make sure all interactive elements are always on top and clickable ============================================================ */ .aa-hero-actions { position: relative; z-index: 10; } .aa-hero-btn, .aa-header-btn, .aa-final-btn { position: relative; z-index: 20; cursor: pointer; } /* Ensure the 3D phone on hero doesn't bleed over the CTA */ .db-phone-wrapper { position: relative; z-index: 1; } /* Phone wrapper in walkthrough */ .aa-walk-grid > div { position: relative; z-index: 1; } /* Chips and buttons inside phones always clickable */ .tg-chip, .db-btn, .db-confirm-btn { position: relative; z-index: 50; cursor: pointer; } /* ============================================================ TELEGRAM POPUP OVERLAY ============================================================ */ .tg-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-color: rgba(14, 14, 13, 0.85); /* Dark brutalist overlay */ z-index: 99999; display: none; overflow-y: auto; /* Removed backdrop-filter to prevent browser compositing ghosting bugs */ } .tg-overlay.open { display: block; } .tg-close-btn { transition: transform 0.1s; } .tg-close-btn:hover { transform: scale(1.1); } /* ============================================================ APP DOWNLOAD POPOVER ============================================================ */ .get-overlay { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(14, 14, 13, 0.55); padding: 24px; overflow-y: auto; } .get-overlay.open { display: flex; align-items: center; justify-content: center; } .get-popup { position: relative; background: #fcf9f8; border: 4px solid #0e0e0d; box-shadow: 8px 8px 0 0 #0e0e0d; padding: 40px 32px 32px; max-width: 400px; width: 100%; text-align: center; animation: getPopIn 0.15s ease-out; } @keyframes getPopIn { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .get-close-btn { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; background: #fff; border: 2px solid #0e0e0d; box-shadow: 2px 2px 0 0 #0e0e0d; font-family: var(--font-headline); font-weight: 900; font-size: 16px; line-height: 1; cursor: pointer; transition: all 0.1s; } .get-close-btn:hover { background: #F5E642; transform: translate(-1px, -1px); box-shadow: 3px 3px 0 0 #0e0e0d; } .get-popup-title { font-family: var(--font-headline); font-weight: 900; font-size: 34px; line-height: 1; text-transform: uppercase; margin-bottom: 8px; } .get-popup-title .get-hl { background: #F5E642; padding: 0 6px; } .get-popup-sub { font-family: var(--font-body); font-size: 14px; color: #555; max-width: 30ch; margin: 0 auto 28px; } .get-store-buttons { display: flex; flex-direction: column; gap: 14px; } .get-store-btn { display: flex; align-items: center; justify-content: center; gap: 12px; border: 3px solid #0e0e0d; background: #fff; box-shadow: 4px 4px 0 0 #0e0e0d; padding: 14px 18px; text-decoration: none; color: #0e0e0d; transition: transform 0.1s, box-shadow 0.1s, background 0.1s; } .get-store-btn:hover { background: #F5E642; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 #0e0e0d; } .get-store-btn:active { transform: translate(2px, 2px); box-shadow: none; } .get-store-btn svg { width: 26px; height: 26px; flex-shrink: 0; } .get-store-label { text-align: left; line-height: 1.15; } .get-store-label small { display: block; font-family: var(--font-headline); font-weight: 700; font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: #666; } .get-store-label strong { font-family: var(--font-headline); font-weight: 900; font-size: 17px; } .get-qr { margin-top: 28px; padding-top: 24px; border-top: 2px solid rgba(14, 14, 13, 0.12); display: flex; flex-direction: column; align-items: center; gap: 8px; } .get-qr img { width: 120px; height: 120px; border: 3px solid #0e0e0d; padding: 6px; background: #fff; } .get-qr span { font-family: var(--font-headline); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: #666; } @media (max-width: 480px) { .get-qr { display: none; } /* the QR is useless on the phone you're holding */ .get-popup-title { font-size: 28px; } } /* Share button under the QR in the download popover */ .get-share-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; background: #F5E642; border: 3px solid #0e0e0d; box-shadow: 3px 3px 0 0 #0e0e0d; padding: 8px 16px; font-family: var(--font-headline); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: #0e0e0d; cursor: pointer; transition: transform 0.1s, box-shadow 0.1s, background 0.1s; } .get-share-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 0 #0e0e0d; } .get-share-btn:active { transform: translate(2px, 2px); box-shadow: none; } .get-share-btn svg { width: 15px; height: 15px; } .get-share-btn.copied { background: #b7f0c0; } /* Phone 2 composer: "Antoinette is thinking" spinner */ .p2-spin { animation: p2spin 0.8s linear infinite; } @keyframes p2spin { to { transform: rotate(360deg); } } /* FAQ accordion */ .aa-faq-item summary { list-style: none; padding-right: 56px; } .aa-faq-item summary::-webkit-details-marker { display: none; } .aa-faq-item summary::after { content: '+'; position: absolute; right: 24px; top: 18px; font-family: var(--font-headline); font-weight: 900; font-size: 22px; } .aa-faq-item[open] summary::after { content: '\2212'; } .aa-faq-item summary { position: relative; } .aa-faq-item summary:hover { background-color: #FDFAE5; }