:root { /* Light is the default theme. Gold-tinted neutrals — never pure #000 or #fff */ --bg-color: oklch(96.5% 0.012 85); --card-bg: oklch(99.5% 0.005 85); --text-primary: oklch(26% 0.02 74); --text-secondary: oklch(46% 0.018 74); --accent-gold: oklch(58% 0.142 70); --accent-gold-hover: oklch(52% 0.15 68); --border-color: oklch(86% 0.014 80); --btn-text: oklch(20% 0.02 74); /* dark text on gold buttons — higher contrast than white */ --btn-bg: #ffcf6f; /* button fill (distinct from gold accents) */ --btn-bg-hover: #f2bd52; /* darker on hover */ /* Semantic, theme-aware tokens (overridden under [data-theme="dark"]) */ --title-gradient: linear-gradient(to bottom, oklch(30% 0.02 74) 20%, oklch(52% 0.03 74)); --inverted-bg: oklch(93.5% 0.018 85); --inverted-card: oklch(99.5% 0.005 85); --surface-2: oklch(98% 0.008 85); /* Easing — stronger than CSS defaults */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); } /* Dark theme — set via data-theme="dark" on by the theme toggle. Only the colour tokens change; every component reads these variables. */ [data-theme="dark"] { --bg-color: oklch(3.5% 0.008 74); --card-bg: oklch(5.5% 0.006 74); --text-primary: oklch(96% 0.006 74); --text-secondary: oklch(65% 0.009 74); --accent-gold: oklch(74% 0.156 74); --accent-gold-hover: oklch(82% 0.17 79); --border-color: oklch(14% 0.007 74); --btn-text: oklch(7% 0.018 74); --btn-bg: #ffcf6f; /* button fill (distinct from gold accents) */ --btn-bg-hover: #ffdc92; /* lighter on hover for the dark field */ --title-gradient: linear-gradient(to bottom, oklch(99% 0.004 74) 30%, oklch(55% 0.012 74)); --inverted-bg: oklch(14% 0.03 74); --inverted-card: oklch(5.5% 0.006 74); --surface-2: oklch(7% 0.007 74); /* slightly raised panel (dropdowns, popovers) */ } /* Restore the stronger grain overlay on the dark field */ [data-theme="dark"] body::after { opacity: 0.04; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Barlow', sans-serif; background-color: var(--bg-color); color: var(--text-primary); line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* Grain texture — depth on the dark field */ body::after { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.02; pointer-events: none; z-index: 9998; mix-blend-mode: overlay; } h1, h2, h3, h4 { font-family: 'Bricolage Grotesque', sans-serif; } /* a.card used as navigation — block display belongs in CSS */ a.card { display: block; } a { text-decoration: none; color: inherit; } /* Focus ring — visible for keyboard navigation on both dark and gold backgrounds */ a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 3px; border-radius: 4px; } a.card:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 4px; border-radius: 12px; } /* Logo flex layout */ .logo a { display: flex; align-items: center; gap: 5px; } /* Theme-aware logo: dark mark on light theme, white mark on dark theme */ .logo-mark--light { display: none; } .logo-mark--dark { display: inline-block; } [data-theme="dark"] .logo-mark--light { display: inline-block; } [data-theme="dark"] .logo-mark--dark { display: none; } /* Layout */ .container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; } /* Header */ header { padding: 1.5rem 0; border-bottom: 1px solid var(--border-color); } nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .logo { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.5px; margin-right: auto; /* push nav-links + actions to the right */ } .creator-tag { font-size: 0.9rem; color: var(--text-secondary); } .creator-tag strong { color: var(--text-primary); } /* Hero Section */ .hero { padding: 5.5rem 0 5rem; position: relative; overflow: hidden; } /* Atmospheric gold glow — the lantern behind the headline */ .hero::before { content: ''; position: absolute; width: 900px; height: 900px; background: radial-gradient(circle, oklch(74% 0.156 74 / 0.09) 0%, transparent 62%); top: -280px; left: -260px; pointer-events: none; } /* Orbital ring — celestial decorative element */ .hero::after { content: ''; position: absolute; width: 560px; height: 560px; border-radius: 50%; border: 1px solid oklch(74% 0.156 74 / 0.13); right: -120px; top: 50%; transform: translateY(-50%); pointer-events: none; } .hero .container { display: grid; grid-template-columns: 3fr 2fr; gap: 4rem; align-items: start; position: relative; z-index: 1; } .hero-lead { padding-top: 0.5rem; } .hero-form .birth-form-hook { margin: 0; max-width: none; } .hero h1 { font-size: clamp(3rem, 7.5vw, 7rem); font-weight: 800; line-height: 1; margin-bottom: 1.5rem; letter-spacing: -0.04em; color: var(--text-primary); animation: fadeInUp 0.4s var(--ease-out); overflow-wrap: break-word; } .hero p { font-size: 1.1rem; color: var(--text-secondary); max-width: 42ch; margin: 0 0 2.5rem; animation: fadeInUp 0.4s var(--ease-out) 0.1s backwards; } .cta-button { display: inline-block; background-color: var(--btn-bg); color: var(--btn-text); font-weight: 600; padding: 1rem 2.5rem; border-radius: 50px; font-size: 1.1rem; transition: background-color 200ms ease, transform 160ms var(--ease-out), box-shadow 200ms ease; animation: fadeInUp 0.4s var(--ease-out) 0.2s backwards; box-shadow: 0 0 20px oklch(74% 0.156 74 / 0.2); } @media (hover: hover) and (pointer: fine) { .cta-button:hover { background-color: var(--btn-bg-hover); transform: translateY(-2px); box-shadow: 0 0 30px oklch(74% 0.156 74 / 0.4); } } .cta-button:active { transform: scale(0.97); transition-duration: 100ms; } .usage-note { margin-top: 2rem; color: var(--text-secondary); font-size: 0.875rem; animation: fadeInUp 0.4s var(--ease-out) 0.3s backwards; line-height: 1.6; } .creator-tag { margin-bottom: 1.5rem; } .usage-note p { margin-bottom: 0.5rem; } .usage-note strong { color: var(--accent-gold); } .usage-note .small-note { font-size: 0.875rem; opacity: 0.7; margin-top: 1rem; } /* Capabilities Grid */ .capabilities { padding: 6rem 0; } .section-title { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px; color: var(--accent-gold); margin-bottom: 3rem; text-align: center; opacity: 0.8; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .card { background: var(--card-bg); border: 1px solid var(--border-color); padding: 2.5rem; border-radius: 12px; transition: border-color 250ms var(--ease-out), transform 200ms var(--ease-out), box-shadow 250ms var(--ease-out); position: relative; overflow: hidden; } @media (hover: hover) and (pointer: fine) { .card:hover { border-color: var(--accent-gold); transform: translateY(-3px); box-shadow: 0 12px 32px oklch(4% 0.006 74 / 0.5); } .card:hover::before { opacity: 1; } } .card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at top right, oklch(74% 0.156 74 / 0.05), transparent 40%); opacity: 0; transition: opacity 250ms var(--ease-out); pointer-events: none; } .card h3 { font-size: 1.5rem; margin-bottom: 1rem; font-weight: 600; } .card p { color: var(--text-secondary); font-size: 0.95rem; } /* Footer */ footer { padding: 2.5rem 0; border-top: 1px solid var(--border-color); margin-top: 4rem; text-align: center; } .footer-content { display: flex; flex-direction: column; align-items: center; gap: 1rem; } .creator-highlight { font-size: 0.875rem; font-weight: 400; color: var(--text-secondary); } .contact-link { color: var(--accent-gold); font-size: 1.1rem; transition: opacity 200ms ease; } .contact-link:hover { opacity: 0.8; } /* Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* Reduced motion — keep opacity fades, kill movement */ @media (prefers-reduced-motion: reduce) { .hero h1, .hero p, .cta-button, .usage-note { animation: none; opacity: 1; transform: none; } .card, .btn, .btn-primary, .cta-button { transition: background-color 200ms ease, border-color 200ms ease, opacity 200ms ease; } @media (hover: hover) and (pointer: fine) { .card:hover, .cta-button:hover, .btn-primary:hover { transform: none; } } .card:active, .cta-button:active, .btn-primary:active { transform: none; } } /* ============================================================ Features List — replaces identical card grid for Core Capabilities ============================================================ */ .features-list { border-top: 1px solid var(--border-color); } .feature-row { display: grid; grid-template-columns: 3.5rem 220px 1fr; gap: 2.5rem; padding: 1.75rem 0; border-bottom: 1px solid var(--border-color); align-items: baseline; } .feature-num { font-size: 1.4rem; font-weight: 800; color: var(--accent-gold); opacity: 0.3; line-height: 1; font-family: 'Bricolage Grotesque', sans-serif; letter-spacing: -0.02em; align-self: start; padding-top: 0.1rem; } .feature-row dt { font-weight: 700; font-size: 1rem; color: var(--text-primary); font-family: 'Bricolage Grotesque', sans-serif; line-height: 1.4; } .feature-row dd { margin: 0; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.75; } /* ============================================================ Use-case bento grid — "What Can You Ask?" ============================================================ */ .use-case-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .use-case-grid .card--featured { grid-column: span 2; } .use-case-grid .card--wide { grid-column: 1 / -1; } /* ============================================================ Gold lantern section — warm-dark field, distinct without theme flip ============================================================ */ .capabilities--inverted { background: var(--inverted-bg); padding: 7rem 0; margin-top: 0; } /* section-title inherits gold accent by default — no override needed */ .capabilities--inverted .card { background: var(--inverted-card); border-color: oklch(74% 0.156 74 / 0.18); color: var(--text-primary); } .capabilities--inverted .card h3 { color: var(--text-primary); } .capabilities--inverted .card p { color: var(--text-secondary); } @media (hover: hover) and (pointer: fine) { .capabilities--inverted .card:hover { border-color: oklch(74% 0.156 74 / 0.4); transform: translateY(-3px); box-shadow: 0 16px 40px oklch(12% 0.02 74 / 0.5); } } .capabilities--inverted .card::before { background: radial-gradient(circle at top right, oklch(74% 0.156 74 / 0.08), transparent 40%); } /* Responsive */ @media (max-width: 768px) { .hero { padding: 5rem 0 3.5rem; } .hero .container { grid-template-columns: 1fr; gap: 3rem; } /* Orbital ring hidden on mobile — it's decorative only */ .hero::after { display: none; } .hero h1 { line-height: 1.05; } .hero p { font-size: 1rem; max-width: none; } .grid { grid-template-columns: 1fr; padding: 0 1rem; } .use-case-grid { grid-template-columns: 1fr; } .use-case-grid .card--featured, .use-case-grid .card--wide { grid-column: span 1; } .feature-row { grid-template-columns: 2rem 1fr; gap: 1rem 1.5rem; padding: 1.5rem 0; } /* Number + label in one row, description spans below */ .feature-row dd { grid-column: 2; } .feature-num { font-size: 1rem; } .card { padding: 1.5rem; } nav { flex-direction: row; flex-wrap: wrap; gap: 0.75rem; } /* `header` prefix raises specificity above the base .nav-* rules, which are defined later in the file — without it those would override display here. */ header .nav-toggle { display: flex; } header { padding: 1.25rem 0; position: relative; /* anchor for the floating menu panel */ } /* Floating dropdown panel: drops onto the page as its own card and overlays the content instead of pushing it down. */ header .nav-links { display: flex; flex-direction: column; gap: 0; position: absolute; top: calc(100% + 0.4rem); left: 2rem; right: 2rem; background: var(--surface-2); border: 1px solid var(--border-color); border-radius: 16px; padding: 0.35rem 0.85rem; box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.55); z-index: 100; max-height: calc(100vh - 6rem); overflow-y: auto; transform-origin: top right; opacity: 0; visibility: hidden; transform: translateY(-12px) scale(0.97); transition: opacity 0.2s ease, transform 0.26s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.26s; } header .nav-links.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .nav-links a { padding: 0.85rem 0.25rem; font-size: 1rem; border-bottom: 1px solid var(--border-color); } .nav-links a:last-child { border-bottom: none; } .faq-item summary { padding: 1.2rem 1.5rem; } .faq-answer { padding: 0 1.5rem 1.2rem; } } /* FAQ section heading — plain, no eyebrow treatment */ .faq-section-title { font-size: 1.5rem; font-weight: 700; font-family: 'Bricolage Grotesque', sans-serif; text-align: center; margin-bottom: 3rem; color: var(--text-primary); } /* Compat note below hero form button */ .form-compat-note { font-size: 0.78rem; color: var(--text-secondary); opacity: 0.65; text-align: center; margin-top: 0.75rem; line-height: 1.55; } /* FAQ Accordion */ .faq { padding: 6rem 0; border-top: 1px solid var(--border-color); } .faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; } .faq-item { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; transition: border-color 250ms var(--ease-out); } .faq-item[open] { border-color: var(--accent-gold); } .faq-item summary { list-style: none; padding: 1.5rem 2rem; cursor: pointer; font-weight: 600; font-size: 1rem; display: flex; justify-content: space-between; align-items: center; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; font-size: 1.5rem; color: var(--accent-gold); transition: transform 0.2s var(--ease-out); } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-answer { padding: 0 2rem 1.5rem; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7; } /* Nav Links */ .nav-links { display: flex; gap: 2rem; align-items: center; } .nav-links a { font-size: 0.9rem; color: var(--text-secondary); transition: color 0.2s ease; } .nav-links a:hover { color: var(--text-primary); } .nav-links a.active { color: var(--accent-gold); } /* Theme toggle — always visible (desktop + mobile) */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; background: transparent; border: 1px solid var(--border-color); border-radius: 9px; color: var(--text-secondary); cursor: pointer; flex-shrink: 0; transition: border-color 0.2s ease, color 0.2s ease; } .theme-toggle:hover { border-color: var(--accent-gold); color: var(--accent-gold); } .theme-toggle svg { width: 18px; height: 18px; display: block; } /* Show the moon in light mode (click → dark), sun in dark mode (click → light) */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } /* Hamburger toggle — hidden on desktop, shown under 768px */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 0; background: transparent; border: 1px solid var(--border-color); border-radius: 9px; cursor: pointer; transition: border-color 0.2s ease; } .nav-toggle:hover { border-color: var(--accent-gold); } .nav-toggle-bar { display: block; width: 20px; height: 2px; margin: 0 auto; background: var(--text-primary); border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; } /* Animate bars into an X when open */ .nav-toggle.open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.open .nav-toggle-bar:nth-child(2) { opacity: 0; } .nav-toggle.open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============================================================ Grouped nav dropdowns (Home / Astrology) ============================================================ */ .nav-group { position: relative; display: inline-flex; align-items: center; } .nav-group-trigger { display: inline-flex; align-items: center; gap: 0.35rem; background: none; border: none; padding: 0; margin: 0; font-family: inherit; font-size: 0.9rem; color: var(--text-secondary); cursor: pointer; transition: color 0.2s ease; } .nav-group-trigger:hover { color: var(--text-primary); } .nav-group.open .nav-group-trigger { color: var(--accent-gold); } .nav-caret { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s ease; } .nav-group.open .nav-caret { transform: rotate(180deg); } .nav-direct { font-size: 0.9rem; color: var(--text-secondary); transition: color 0.2s ease; } .nav-direct:hover { color: var(--text-primary); } .nav-direct.active { color: var(--accent-gold); } .nav-dropdown { position: absolute; top: calc(100% + 0.85rem); right: 0; left: auto; min-width: 210px; display: flex; flex-direction: column; gap: 0.1rem; background: var(--surface-2); border: 1px solid var(--border-color); border-radius: 12px; padding: 0.4rem; box-shadow: 0 16px 44px rgba(0, 0, 0, 0.35); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; z-index: 60; } .nav-group.open .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dropdown a { padding: 0.55rem 0.7rem; border-radius: 8px; font-size: 0.88rem; color: var(--text-secondary); white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } .nav-dropdown a:hover { background: rgba(212, 175, 55, 0.12); color: var(--text-primary); } .nav-dropdown a.active { background: rgba(212, 175, 55, 0.10); color: var(--accent-gold); } /* Mobile: dropdowns expand inline inside the collapsed hamburger menu */ @media (max-width: 768px) { header .nav-group { display: block; width: 100%; } header .nav-group-trigger { width: 100%; justify-content: space-between; padding: 0.85rem 0.25rem; font-size: 1rem; border-bottom: 1px solid var(--border-color); } header .nav-dropdown { position: static; transform: none; opacity: 1; visibility: visible; min-width: 0; display: none; gap: 0; background: none; border: none; box-shadow: none; padding: 0; border-radius: 0; } header .nav-group.open .nav-dropdown { display: flex; } header .nav-dropdown a { padding: 0.7rem 0.25rem 0.7rem 1.25rem; font-size: 0.95rem; border-bottom: 1px solid var(--border-color); border-radius: 0; } header .nav-direct { display: block; width: 100%; padding: 0.85rem 0.25rem; font-size: 1rem; border-bottom: 1px solid var(--border-color); } } /* ============================================================ Button Styles (shared across pages) ============================================================ */ .btn { display: inline-block; font-weight: 600; padding: 0.875rem 2rem; border-radius: 50px; font-size: 1rem; transition: background-color 200ms ease, transform 160ms var(--ease-out), box-shadow 200ms ease; cursor: pointer; text-align: center; } .btn-primary { background-color: var(--btn-bg); color: var(--btn-text); box-shadow: 0 0 20px oklch(74% 0.156 74 / 0.2); } @media (hover: hover) and (pointer: fine) { .btn-primary:hover { background-color: var(--btn-bg-hover); transform: translateY(-2px); box-shadow: 0 0 30px oklch(74% 0.156 74 / 0.4); } } .btn-primary:active { transform: scale(0.97); transition-duration: 100ms; } /* ============================================================ Page Content Layout (About + Methodology pages) ============================================================ */ .page-content { padding: 4rem 0 6rem; min-height: 70vh; } .page-header { text-align: center; margin-bottom: 3rem; } .page-header h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; margin-bottom: 0.75rem; } .page-subtitle { color: var(--text-secondary); font-size: 1.1rem; } /* In-page anchor navigation (methodology page) */ .page-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: center; margin-bottom: 3rem; padding: 1.5rem; background: var(--card-bg); border-radius: 12px; border: 1px solid var(--border-color); } .page-nav a { font-size: 0.875rem; color: var(--text-secondary); transition: color 0.2s ease; } .page-nav a:hover { color: var(--accent-gold); } /* Methodology content sections */ .method-section { max-width: 800px; margin: 0 auto 3rem; padding-bottom: 3rem; border-bottom: 1px solid var(--border-color); } .method-section:last-child { border-bottom: none; } .method-section h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.25rem; color: var(--text-primary); } .method-section p { color: var(--text-secondary); line-height: 1.8; margin-bottom: 1rem; } .method-section ul { color: var(--text-secondary); line-height: 1.8; padding-left: 1.5rem; margin-bottom: 1rem; } .method-section li { margin-bottom: 0.5rem; } .method-section a { color: var(--accent-gold); } .method-section a:hover { text-decoration: underline; } .method-section code { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 4px; padding: 0.1rem 0.4rem; font-size: 0.875rem; font-family: monospace; } /* About page layout */ .about-layout { display: grid; grid-template-columns: 240px 1fr; gap: 4rem; align-items: start; max-width: 900px; margin: 0 auto; } .author-photo-wrap { text-align: center; position: sticky; top: 2rem; } .author-photo-placeholder { width: 160px; height: 160px; border-radius: 50%; background: var(--card-bg); border: 2px solid var(--accent-gold); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; font-weight: 800; color: var(--accent-gold); margin: 0 auto 1rem; } .author-photo { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent-gold); display: block; margin: 0 auto 1rem; } .author-name { font-weight: 700; margin-bottom: 0.25rem; } .author-role { color: var(--text-secondary); font-size: 0.875rem; } .about-content h2 { font-size: 1.4rem; font-weight: 700; margin: 2rem 0 1rem; } .about-content p { color: var(--text-secondary); line-height: 1.8; margin-bottom: 1.25rem; } .about-content .lead { font-size: 1.15rem; color: var(--text-primary); font-weight: 400; line-height: 1.7; } .about-cta { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--border-color); } .cta-note { margin-top: 0.75rem; font-size: 0.875rem; color: var(--text-secondary); } @media (max-width: 768px) { .about-layout { grid-template-columns: 1fr; gap: 2rem; } .author-photo-wrap { position: static; } .page-nav { gap: 0.5rem 1rem; } } /* Phase 02.1 — Birth Details Form */ .birth-form-hook { margin: 0 auto 2rem; max-width: 480px; width: 100%; text-align: left; box-sizing: border-box; } .birth-form-hook .hook-label { font-size: 0.95rem; color: var(--text-secondary); margin-bottom: 1.25rem; text-align: left; display: block; line-height: 1.5; } /* Each field stacks full-width on its own line */ .form-field { display: flex; flex-direction: column; margin-bottom: 1rem; width: 100%; } .birth-form-hook label { font-size: 0.75rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.35rem; } .birth-form-hook input[type="date"], .birth-form-hook input[type="time"], .birth-form-hook input[type="text"], .birth-form-hook textarea { background: var(--card-bg); border: 1px solid var(--accent-gold); border-radius: 8px; color: var(--text-primary); font-size: 1rem; /* ≥16px prevents iOS auto-zoom */ padding: 0.65rem 0.85rem; width: 100%; min-height: 44px; /* accessible touch target */ box-sizing: border-box; outline: none; transition: border-color 0.2s ease; font-family: inherit; -webkit-appearance: none; appearance: none; } /* Invert native calendar/clock icons so they're visible on dark bg */ .birth-form-hook input[type="date"]::-webkit-calendar-picker-indicator, .birth-form-hook input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; } .birth-form-hook input:focus, .birth-form-hook textarea:focus { border-color: var(--accent-gold); } /* ============================================================ Golden field border — site-wide, thin (1px), theme-aware. Pages with their own field styling set this explicitly too. ============================================================ */ input[type="date"], input[type="time"], input[type="text"], input[type="number"], input[type="email"], input[type="search"], input[type="tel"], input[type="datetime-local"], select, textarea { border: 1px solid var(--accent-gold); } .birth-form-hook textarea { resize: vertical; min-height: 80px; -webkit-appearance: none; } .form-error { font-size: 0.85rem; color: #e05a5a; margin-bottom: 0.75rem; min-height: 1.2em; text-align: center; } /* Submit button full-width */ .birth-form-hook .cta-button { display: block; width: 100%; border: none; cursor: pointer; text-align: center; margin-top: 0.25rem; min-height: 44px; box-sizing: border-box; } /* Copy confirmation notice */ .copy-notice { display: none; background: oklch(74% 0.156 74 / 0.12); border: 1px solid var(--accent-gold); border-radius: 10px; color: var(--accent-gold); font-size: 1rem; font-weight: 500; padding: 0.85rem 1rem; text-align: center; margin-top: 0.25rem; animation: fadeInUp 0.3s ease-out; } /* ── Place autocomplete dropdown ── */ .place-autocomplete { position: relative; width: 100%; } .suggestions-list { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--card-bg); border: 1px solid var(--accent-gold); border-top: none; border-radius: 0 0 8px 8px; list-style: none; margin: 0; padding: 0; z-index: 200; max-height: 180px; overflow-y: auto; box-shadow: 0 8px 24px oklch(4% 0.006 74 / 0.6); } .suggestions-list li { padding: 0.65rem 0.85rem; color: var(--text-primary); font-size: 0.9rem; cursor: pointer; border-bottom: 1px solid var(--border-color); line-height: 1.35; } .suggestions-list li:last-child { border-bottom: none; } .suggestions-list li:hover, .suggestions-list li:active { background: oklch(74% 0.156 74 / 0.12); color: var(--accent-gold); } @media (max-width: 520px) { .birth-form-hook { max-width: 100%; padding: 0 0.25rem; } .birth-form-hook .hook-label { font-size: 0.9rem; } } /* ============================================================ Phase 3 — Use Case Landing Pages ============================================================ */ /* Breadcrumb navigation */ .breadcrumb { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 2rem; display: flex; align-items: center; gap: 0.5rem; } .breadcrumb a { color: var(--accent-gold); transition: opacity 0.2s ease; } .breadcrumb a:hover { opacity: 0.8; } .breadcrumb-separator { color: var(--text-secondary); } /* Use-case page CTA block */ .use-case-cta { text-align: center; margin: 3rem auto; padding: 2.5rem; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; max-width: 600px; } .use-case-cta .btn-primary { font-size: 1.1rem; padding: 1rem 2.5rem; } /* Related capabilities cross-links */ .related-capabilities { max-width: 800px; margin: 4rem auto 0; padding-top: 3rem; border-top: 1px solid var(--border-color); } .related-capabilities h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 1.25rem; color: var(--text-primary); } .related-links { list-style: none; display: flex; flex-wrap: wrap; gap: 0.75rem; padding: 0; } .related-links li a { display: inline-block; padding: 0.5rem 1rem; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 6px; font-size: 0.9rem; color: var(--text-secondary); transition: border-color 180ms var(--ease-out), color 180ms ease; text-decoration: none; } .related-links li a:hover { border-color: var(--accent-gold); color: var(--text-primary); }