/* ===================================================================== Gladiolus dark theme — main marketing site only. Opt in per page via . App subsites (LeanBowl, MotoAngel) do NOT use this class and are unaffected: every override below is scoped to body.theme-dark. ===================================================================== */ :root { --rd-bg: #0a0a0c; --rd-bg-2: #121215; --rd-card: #161519; --rd-line: rgba(255, 255, 255, 0.09); --rd-ink: #f4f4f6; --rd-muted: #9b9ba6; --rd-burgundy: #7d1c24; --rd-burgundy-deep: #480f14; --rd-burgundy-bright: #b32d33; --rd-tint: rgba(125, 28, 36, 0.16); --rd-space: clamp(64px, 8vw, 120px); } /* Logo mark in the shared navbar. Black by default (works on the light app-subsite navbars); inverted to white only on dark theme pages. */ .logo a { display: inline-flex; align-items: center; gap: 10px; } .rd-nav-mark { height: 26px; width: auto; display: block; } /* ---------- shared chrome on dark ---------- */ body.theme-dark { background: var(--rd-bg); color: var(--rd-ink); } body.theme-dark .navbar { background: rgba(10, 10, 12, 0.82); backdrop-filter: saturate(140%) blur(10px); box-shadow: 0 1px 0 var(--rd-line); } body.theme-dark .logo a { color: var(--rd-ink); } body.theme-dark .rd-nav-mark { filter: invert(1) brightness(1.6); } body.theme-dark .nav-link { color: var(--rd-ink); } body.theme-dark .nav-link:hover, body.theme-dark .nav-link.active { color: var(--rd-burgundy-bright); border-bottom-color: var(--rd-burgundy-bright); } body.theme-dark .hamburger .bar { background: var(--rd-ink); } body.theme-dark .footer { background: #060607; border-top: 1px solid var(--rd-line); } body.theme-dark .eyebrow { color: var(--rd-burgundy-bright); background: var(--rd-tint); border: 1px solid rgba(179, 45, 51, 0.3); border-radius: 999px; padding: 0.35rem 0.8rem; } /* page header (apps / about / legal) -> dark with burgundy glow */ body.theme-dark .page-header { background: radial-gradient(900px 500px at 80% -40%, rgba(125, 28, 36, 0.45), transparent 60%), var(--rd-bg); border-bottom: 1px solid var(--rd-line); } body.theme-dark .section-alt { background-color: var(--rd-bg-2); } /* headings + text on shared components */ body.theme-dark .section-title, body.theme-dark .legal-section h2, body.theme-dark .legal-content h2, body.theme-dark .app-card h3, body.theme-dark .coming-soon-card h3, body.theme-dark .highlight-card h2, body.theme-dark .about-intro h2, body.theme-dark .timeline-content h3 { color: var(--rd-ink); } body.theme-dark .apps-operator-note, body.theme-dark .legal-updated { color: var(--rd-muted); } body.theme-dark .timeline-year { color: var(--rd-burgundy-bright); } /* buttons on dark */ body.theme-dark .btn-primary, body.theme-dark .cta-button { background: linear-gradient(120deg, var(--rd-burgundy), var(--rd-burgundy-bright)); color: #fff; box-shadow: 0 10px 24px rgba(125, 28, 36, 0.4); } body.theme-dark .btn-primary:hover, body.theme-dark .cta-button:hover { background: linear-gradient(120deg, var(--rd-burgundy-bright), var(--rd-burgundy)); } body.theme-dark .btn-secondary { background: rgba(255, 255, 255, 0.05); color: var(--rd-ink); border: 1px solid var(--rd-line); } body.theme-dark .btn-secondary:hover { border-color: var(--rd-burgundy-bright); color: var(--rd-burgundy-bright); } /* cards / surfaces on dark */ body.theme-dark .app-card, body.theme-dark .coming-soon-card, body.theme-dark .highlight-card, body.theme-dark .legal-callout { background: var(--rd-card); border: 1px solid var(--rd-line); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); } body.theme-dark .app-card-featured { border-color: rgba(179, 45, 51, 0.35); background: radial-gradient(circle at top left, var(--rd-tint), transparent 42%), var(--rd-card); } body.theme-dark .app-icon-tile { background: rgba(255, 255, 255, 0.05); } body.theme-dark .app-utility-links a { color: var(--rd-muted); } body.theme-dark .app-utility-links a:hover { color: var(--rd-burgundy-bright); } /* timeline + legal text on dark */ body.theme-dark .timeline-item { border-color: var(--rd-line); } body.theme-dark .legal-updated { border-bottom-color: var(--rd-line); } body.theme-dark .legal-section a { color: var(--rd-burgundy-bright); } body.theme-dark .legal-section a:hover { color: #cf4a47; } /* ===================================================================== rd-* home-page layout components (only present on the home page). ===================================================================== */ .rd-hero { position: relative; overflow: hidden; background: radial-gradient(1100px 600px at 88% -10%, rgba(125, 28, 36, 0.4), transparent 60%), radial-gradient(800px 500px at -5% 110%, rgba(72, 15, 20, 0.45), transparent 55%), var(--rd-bg); border-bottom: 1px solid var(--rd-line); } .rd-hero::after { content: ""; position: absolute; right: -40px; top: 50%; transform: translateY(-50%); width: 520px; height: 620px; background: url('/assets/gladiolus-logo.png') no-repeat center / contain; filter: invert(1) brightness(1.4); opacity: 0.05; pointer-events: none; } .rd-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: center; padding-top: clamp(64px, 8vw, 110px); padding-bottom: clamp(56px, 7vw, 96px); } .rd-hero-copy { max-width: 560px; } .rd-lockup { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; } .rd-lockup img { height: 56px; width: auto; filter: invert(1) brightness(1.6); } .rd-lockup span { font-size: 1.1rem; font-weight: 700; letter-spacing: 0.02em; color: var(--rd-ink); } .rd-hero h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.05; letter-spacing: -0.02em; font-weight: 800; margin: 0 0 1rem; color: var(--rd-ink); } .rd-hero h1 .rd-grad { background: linear-gradient(120deg, var(--rd-burgundy-bright), #cf4a47); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .rd-hero-sub { font-size: 1.2rem; color: var(--rd-muted); margin: 0 0 2rem; line-height: 1.6; } .rd-cta-row { display: flex; gap: 14px; flex-wrap: wrap; } .rd-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 12px; font-weight: 600; font-size: 1.02rem; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease; } .rd-btn-primary { background: linear-gradient(120deg, var(--rd-burgundy), var(--rd-burgundy-bright)); color: #fff; box-shadow: 0 12px 28px rgba(125, 28, 36, 0.45); } .rd-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(125, 28, 36, 0.55); } .rd-btn-ghost { background: rgba(255, 255, 255, 0.04); color: var(--rd-ink); border: 1px solid var(--rd-line); } .rd-btn-ghost:hover { transform: translateY(-2px); border-color: var(--rd-burgundy-bright); color: var(--rd-burgundy-bright); } .rd-hero-art { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 460px; } .rd-phone { width: clamp(180px, 22vw, 250px); border-radius: 34px; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.08); background: #000; display: block; } .rd-phone-back { position: absolute; left: 8%; bottom: 36px; transform: rotate(-7deg); width: clamp(160px, 19vw, 215px); opacity: 0.96; z-index: 1; } .rd-phone-front { position: relative; transform: rotate(4deg) translateX(18%); z-index: 2; } .rd-section { padding: var(--rd-space) 0; position: relative; } .rd-section-head { text-align: center; max-width: 640px; margin: 0 auto clamp(36px, 5vw, 56px); } .rd-section-head h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); letter-spacing: -0.02em; margin: 0 0 0.75rem; color: var(--rd-ink); } .rd-section-head p { color: var(--rd-muted); font-size: 1.1rem; margin: 0; } .rd-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .rd-pillar { padding: 28px 24px; border: 1px solid var(--rd-line); border-radius: 16px; background: var(--rd-card); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .rd-pillar:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,0.5); border-color: rgba(179, 45, 51, 0.4); } .rd-pillar-ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: var(--rd-tint); color: var(--rd-burgundy-bright); margin-bottom: 16px; font-size: 1.4rem; } .rd-pillar h3 { margin: 0 0 6px; font-size: 1.15rem; color: var(--rd-ink); } .rd-pillar p { margin: 0; color: var(--rd-muted); font-size: 0.96rem; line-height: 1.55; } .rd-feature { background: var(--rd-bg-2); border-top: 1px solid var(--rd-line); border-bottom: 1px solid var(--rd-line); } .rd-feature-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .rd-feature-art { display: flex; justify-content: center; } .rd-feature-art img { width: clamp(200px, 24vw, 270px); border-radius: 36px; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6); } .rd-feature-copy { max-width: 520px; } .rd-feature-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .rd-feature-brand img { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 6px 16px rgba(0,0,0,0.5); } .rd-feature-brand h3 { margin: 0; font-size: 1.6rem; color: var(--rd-ink); } .rd-feature-copy > p { color: var(--rd-muted); font-size: 1.1rem; line-height: 1.65; margin: 0 0 1.5rem; } .rd-feature-links { margin-top: 18px; display: flex; gap: 18px; flex-wrap: wrap; } .rd-feature-links a { color: var(--rd-muted); font-size: 0.92rem; font-weight: 600; } .rd-feature-links a:hover { color: var(--rd-burgundy-bright); } .rd-cta-band { position: relative; overflow: hidden; text-align: center; background: linear-gradient(135deg, var(--rd-burgundy-deep), var(--rd-burgundy)); color: #fff; } .rd-cta-band::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 380px; height: 460px; background: url('/assets/gladiolus-logo.png') no-repeat center / contain; filter: invert(1); opacity: 0.07; pointer-events: none; } .rd-cta-band .container { position: relative; z-index: 1; } .rd-cta-band h2 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); margin: 0 0 0.75rem; letter-spacing: -0.02em; color: #fff; } .rd-cta-band p { opacity: 0.92; font-size: 1.1rem; margin: 0 0 1.8rem; } .rd-cta-band .rd-btn-light { background: #fff; color: var(--rd-burgundy); display: inline-flex; padding: 14px 32px; border-radius: 12px; font-weight: 700; transition: transform 0.2s ease, box-shadow 0.2s ease; } .rd-cta-band .rd-btn-light:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.35); } @media (max-width: 880px) { .rd-hero-grid, .rd-feature-grid { grid-template-columns: 1fr; } .rd-hero-copy { max-width: none; } .rd-hero-art { order: -1; min-height: 380px; margin-bottom: 12px; } .rd-hero::after { opacity: 0.04; } .rd-pillars { grid-template-columns: repeat(2, 1fr); } .rd-feature-art { order: -1; } .rd-feature-copy { max-width: none; text-align: center; } .rd-feature-brand { justify-content: center; } .store-badges, .rd-feature-links { justify-content: center; } } @media (max-width: 480px) { .rd-pillars { grid-template-columns: 1fr; } .rd-phone-front { transform: rotate(3deg) translateX(8%); } } /* ---------- interior page hero (apps / about) ---------- */ .rd-page-hero { position: relative; overflow: hidden; text-align: center; background: radial-gradient(900px 460px at 78% -40%, rgba(125, 28, 36, 0.4), transparent 60%), var(--rd-bg); border-bottom: 1px solid var(--rd-line); padding: clamp(64px, 9vw, 120px) 20px clamp(48px, 6vw, 80px); } .rd-page-hero::after { content: ""; position: absolute; right: -60px; top: 50%; transform: translateY(-50%); width: 420px; height: 500px; background: url('/assets/gladiolus-logo.png') no-repeat center / contain; filter: invert(1) brightness(1.4); opacity: 0.045; pointer-events: none; } .rd-page-hero .container { position: relative; z-index: 1; } .rd-page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: -0.02em; font-weight: 800; color: var(--rd-ink); margin: 0.6rem 0 1rem; } .rd-page-hero-sub { max-width: 620px; margin: 0 auto; color: var(--rd-muted); font-size: 1.15rem; line-height: 1.6; } /* ---------- featured product card (apps) ---------- */ .rd-product { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 64px); align-items: center; background: var(--rd-card); border: 1px solid rgba(179, 45, 51, 0.28); border-radius: 24px; padding: clamp(28px, 4vw, 56px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); } .rd-product-art { display: flex; justify-content: center; } .rd-product-art img { width: clamp(190px, 22vw, 250px); border-radius: 34px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6); } /* ---------- secondary apps grid ---------- */ .rd-app-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 28px; } .rd-app-card { background: var(--rd-card); border: 1px solid var(--rd-line); border-radius: 18px; padding: 30px 28px; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .rd-app-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,0.5); border-color: rgba(179, 45, 51, 0.4); } .rd-app-card h3 { margin: 0.5rem 0 0.5rem; color: var(--rd-ink); font-size: 1.25rem; } .rd-app-card p { margin: 0 0 1rem; color: var(--rd-muted); line-height: 1.55; } .rd-tag { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; background: var(--rd-tint); color: var(--rd-burgundy-bright); border: 1px solid rgba(179, 45, 51, 0.3); } .rd-operator-note { text-align: center; color: var(--rd-muted); font-size: 0.98rem; max-width: 760px; margin: 0 auto clamp(32px, 4vw, 48px); } /* ---------- about: journey timeline ---------- */ .rd-journey { max-width: 760px; margin: 0 auto; display: grid; gap: 18px; } .rd-journey-item { display: grid; grid-template-columns: 96px 1fr; gap: 24px; align-items: start; background: var(--rd-card); border: 1px solid var(--rd-line); border-radius: 18px; padding: 24px 28px; } .rd-journey-year { color: var(--rd-burgundy-bright); font-weight: 800; font-size: 1.3rem; } .rd-journey-item h3 { margin: 0 0 0.4rem; color: var(--rd-ink); font-size: 1.2rem; } .rd-journey-item p { margin: 0; color: var(--rd-muted); line-height: 1.6; } @media (max-width: 880px) { .rd-product { grid-template-columns: 1fr; text-align: center; } .rd-product-art { order: -1; } .rd-product .rd-feature-brand, .rd-product .store-badges, .rd-product .rd-feature-links { justify-content: center; } } @media (max-width: 560px) { .rd-journey-item { grid-template-columns: 1fr; gap: 6px; } } /* ========================================================================== Minimalist single-page home (Studio-Noo-inspired). Scoped to theme-dark; uses the --rd-* tokens defined above. Generous whitespace, no eyebrow pills. ========================================================================== */ body.theme-dark .mn-hero { padding: calc(var(--rd-space) + 40px) 0 var(--rd-space); } body.theme-dark .mn-title { margin: 26px 0 0; font-size: clamp(2.6rem, 7vw, 5rem); font-weight: 700; line-height: 1.04; letter-spacing: -0.025em; color: var(--rd-ink); } body.theme-dark .mn-lede { margin: 24px 0 0; max-width: 48ch; font-size: clamp(1.05rem, 2.1vw, 1.3rem); line-height: 1.55; color: var(--rd-muted); } body.theme-dark .mn-scroll { display: inline-block; margin-top: 34px; color: var(--rd-ink); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--rd-line); padding-bottom: 3px; transition: color 0.2s, border-color 0.2s; } body.theme-dark .mn-scroll:hover { color: var(--rd-burgundy-bright); border-color: var(--rd-burgundy-bright); } body.theme-dark .mn-apps { padding: var(--rd-space) 0; border-top: 1px solid var(--rd-line); } body.theme-dark .mn-h2 { margin: 0 0 40px; font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 600; letter-spacing: -0.01em; color: var(--rd-ink); } body.theme-dark .mn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } body.theme-dark .mn-app { padding: 28px; border: 1px solid var(--rd-line); border-radius: 18px; background: var(--rd-card); transition: border-color 0.2s, transform 0.2s; } body.theme-dark .mn-app:hover { border-color: rgba(179, 45, 51, 0.5); transform: translateY(-2px); } body.theme-dark .mn-app-head { display: flex; align-items: center; gap: 14px; } body.theme-dark .mn-app-icon { width: 52px; height: 52px; border-radius: 13px; object-fit: cover; border: 1px solid var(--rd-line); } body.theme-dark .mn-app-mono { width: 52px; height: 52px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: var(--rd-tint); color: var(--rd-burgundy-bright); font-size: 1.4rem; font-weight: 700; } body.theme-dark .mn-app h3 { margin: 0; font-size: 1.15rem; font-weight: 600; color: var(--rd-ink); } body.theme-dark .mn-status { font-size: 0.78rem; color: var(--rd-muted); letter-spacing: 0.02em; } body.theme-dark .mn-app > p { margin: 16px 0 0; color: var(--rd-muted); line-height: 1.55; } body.theme-dark .mn-links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; } body.theme-dark .mn-links a { color: var(--rd-ink); text-decoration: none; font-size: 0.92rem; font-weight: 600; border-bottom: 1px solid var(--rd-line); padding-bottom: 2px; transition: color 0.2s, border-color 0.2s; } body.theme-dark .mn-links a:hover { color: var(--rd-burgundy-bright); border-color: var(--rd-burgundy-bright); } body.theme-dark .mn-footer { padding: 48px 0; border-top: 1px solid var(--rd-line); background: #060607; } body.theme-dark .mn-footer-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; } body.theme-dark .mn-footer-row > a { color: var(--rd-ink); text-decoration: none; font-weight: 600; } body.theme-dark .mn-footer-row > a:hover { color: var(--rd-burgundy-bright); } body.theme-dark .mn-footer-legal { display: flex; gap: 22px; } body.theme-dark .mn-footer-legal a { color: var(--rd-muted); text-decoration: none; font-size: 0.9rem; } body.theme-dark .mn-footer-legal a:hover { color: var(--rd-ink); } body.theme-dark .mn-footer-copy { margin: 24px 0 0; color: var(--rd-muted); font-size: 0.85rem; } @media (max-width: 640px) { body.theme-dark .mn-footer-row { flex-direction: column; align-items: flex-start; } } /* One-word brand accent on the hero headline (keeps the minimalist monochrome look but reasserts the Gladiolus crimson). */ body.theme-dark .mn-title .rd-grad { color: var(--rd-burgundy-bright); }