/* ============================================================ AnovaCloud — Design System (Builder A) "Engineering blueprint x Metrics-first minimal" Mobile-first. Tokens per design-system.md spec. ============================================================ */ /* ---------- 1. Tokens ---------- */ :root { --paper: #F7F6F3; --paper-2: #FFFFFF; --ink: #101828; --ink-2: #1D2939; --ink-soft: #475467; --line: #E5E2D9; --line-dark: rgba(255, 255, 255, 0.12); --accent: #F04E0C; --accent-deep: #B93A08; --accent-soft: #FFF0E8; --teal: #0E7C6B; --teal-soft: #E6F4F1; --dark: #0B1120; --dark-2: #111A2E; --radius: 14px; --maxw: 1180px; --font-display: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 16px rgba(16, 24, 40, 0.06); --shadow-2: 0 2px 6px rgba(16, 24, 40, 0.08), 0 12px 32px rgba(16, 24, 40, 0.12); --header-h: 72px; } /* ---------- 2. Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; display: block; } a { color: var(--accent-deep); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; color: var(--ink); margin: 0 0 0.6em; } p { margin: 0 0 1em; } ul, ol { margin: 0 0 1.25em; padding-left: 1.4em; } li { margin-bottom: 0.5em; } ::selection { background: var(--accent); color: #fff; } /* Focus states (accessibility) */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* Skip link */ .skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 200; background: var(--ink); color: #fff; font-family: var(--font-mono); font-size: 0.85rem; padding: 0.6rem 1rem; border-radius: 6px; transition: top 0.2s ease; } .skip-link:focus { top: 0.75rem; text-decoration: none; color: #fff; } /* ---------- 3. Layout primitives ---------- */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; } section { padding: 4rem 0; } .section-light { background: var(--paper); } .section-white { background: var(--paper-2); } .section-dark { background: var(--dark); color: #E8EBF2; } .section-dark h1, .section-dark h2, .section-dark h3 { color: #fff; } .section-dark a { color: #FFB48A; } /* Blueprint dot-grid backgrounds */ .dots { background-image: radial-gradient(circle, #D8D4C8 1px, transparent 1.5px); background-size: 24px 24px; } .dots-dark { background-image: radial-gradient(circle, rgba(255,255,255,0.10) 1px, transparent 1.5px); background-size: 24px 24px; } /* ---------- 4. Eyebrows, headings, ledes ---------- */ .eyebrow { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent-deep); margin: 0 0 1rem; display: flex; align-items: center; gap: 0.75rem; } .eyebrow::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--accent); flex: 0 0 auto; } .section-dark .eyebrow { color: #FF8A4C; } .eyebrow-num { color: var(--ink-soft); } .section-dark .eyebrow-num { color: rgba(255,255,255,0.55); } .h-xl { font-size: clamp(2.4rem, 5.4vw, 4.1rem); letter-spacing: -0.03em; } .h-lg { font-size: clamp(1.9rem, 3.6vw, 2.7rem); } .h-md { font-size: clamp(1.35rem, 2.4vw, 1.7rem); } .lede { font-size: clamp(1.1rem, 1.8vw, 1.3rem); line-height: 1.6; color: var(--ink-soft); max-width: 46rem; } .section-dark .lede { color: rgba(232,235,242,0.82); } .mono { font-family: var(--font-mono); } /* ---------- 5. Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-body); font-weight: 600; font-size: 1rem; padding: 0.9rem 1.6rem; border-radius: 10px; border: 1px solid transparent; cursor: pointer; transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease; text-decoration: none; line-height: 1.2; white-space: nowrap; } .btn:hover { text-decoration: none; transform: translateY(-2px); } .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 6px 18px rgba(240, 78, 12, 0.28); } .btn-primary:hover { background: var(--accent-deep); color: #fff; box-shadow: 0 10px 24px rgba(240, 78, 12, 0.34); } .btn-secondary { background: transparent; color: inherit; border-color: currentColor; } .btn-ghost { background: transparent; color: inherit; padding: 0.9rem 1rem; } .btn-sm { padding: 0.6rem 1.1rem; font-size: 0.9rem; } .btn-lg { padding: 1.05rem 2rem; font-size: 1.08rem; } .btn .arrow { font-family: var(--font-mono); } .cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.8rem; } /* ---------- 6. Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(11, 17, 32, 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-dark); transition: box-shadow 0.25s ease, background 0.25s ease; } .site-header.scrolled { box-shadow: 0 8px 28px rgba(0,0,0,0.32); background: rgba(11,17,32,0.94); } .header-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; height: var(--header-h); display: flex; align-items: center; gap: 1.5rem; } .logo { display: inline-flex; align-items: center; gap: 0.55rem; color: #fff; text-decoration: none; } .logo:hover { text-decoration: none; } .logo-glyph { width: 14px; height: 14px; background: var(--accent); flex: 0 0 auto; } .logo-word { font-family: var(--font-display); font-size: 1.22rem; letter-spacing: 0.02em; color: #fff; } .logo-word strong { font-weight: 700; } .logo-word span { font-weight: 400; opacity: 0.85; } .main-nav { display: none; } .main-nav ul { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; } .main-nav a, .main-nav .nav-parent-btn { display: inline-block; padding: 0.6rem 0.75rem; color: rgba(255,255,255,0.86); font-size: 0.95rem; font-weight: 500; text-decoration: none; border-radius: 8px; background: none; border: 0; cursor: pointer; font-family: var(--font-body); } .main-nav a:hover, .main-nav .nav-parent-btn:hover { color: #fff; background: rgba(255,255,255,0.08); text-decoration: none; } .nav-item { position: relative; } .nav-dropdown { position: absolute; top: calc(100% + 6px); left: 0; min-width: 250px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: 0.5rem; list-style: none; margin: 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; } .nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dropdown a { display: block; color: var(--ink); padding: 0.65rem 0.85rem; font-size: 0.94rem; } .nav-dropdown a:hover { background: var(--paper); color: var(--accent-deep); } .nav-dropdown .drop-desc { display: block; font-size: 0.8rem; color: var(--ink-soft); font-weight: 400; } .nav-caret { font-size: 0.7em; margin-left: 0.25rem; font-family: var(--font-mono); } .header-actions { margin-left: auto; display: none; align-items: center; gap: 1rem; } .ask-ai-link { color: rgba(255,255,255,0.8); font-size: 0.95rem; font-weight: 500; } .ask-ai-link:hover { color: #fff; } .nav-toggle { margin-left: auto; background: none; border: 1px solid var(--line-dark); border-radius: 8px; width: 44px; height: 44px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .nav-toggle .bars { position: relative; width: 20px; height: 2px; background: #fff; transition: background 0.2s; } .nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: #fff; transition: transform 0.2s; } .nav-toggle .bars::before { top: -6px; } .nav-toggle .bars::after { top: 6px; } .nav-toggle[aria-expanded="true"] .bars { background: transparent; } .nav-toggle[aria-expanded="true"] .bars::before { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .bars::after { transform: translateY(-6px) rotate(-45deg); } /* Mobile slide-in panel */ .mobile-nav { position: fixed; top: 0; right: 0; bottom: 0; width: min(86vw, 360px); background: var(--dark); color: #fff; z-index: 150; transform: translateX(100%); transition: transform 0.28s ease; padding: 1.25rem; overflow-y: auto; border-left: 1px solid var(--line-dark); } .mobile-nav.open { transform: translateX(0); } .mobile-nav-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .mobile-nav-close { background: none; border: 1px solid var(--line-dark); color: #fff; border-radius: 8px; width: 40px; height: 40px; font-size: 1.2rem; cursor: pointer; } .mobile-nav ul { list-style: none; margin: 0; padding: 0; } .mobile-nav > ul > li { border-bottom: 1px solid var(--line-dark); } .mobile-nav a, .mobile-nav .mnav-btn { display: block; padding: 0.85rem 0.4rem; color: #fff; font-weight: 500; text-decoration: none; background: none; border: 0; width: 100%; text-align: left; font-size: 1.02rem; cursor: pointer; font-family: var(--font-body); } .mobile-nav .mnav-sub { list-style: none; margin: 0; padding: 0 0 0.6rem 1rem; display: none; } .mobile-nav .mnav-sub.open { display: block; } .mobile-nav .mnav-sub a { font-size: 0.95rem; color: rgba(255,255,255,0.78); padding: 0.5rem 0.4rem; } .nav-scrim { position: fixed; inset: 0; background: rgba(4,8,16,0.55); z-index: 140; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s; } .nav-scrim.open { opacity: 1; visibility: visible; } /* ---------- 7. Hero ---------- */ .hero { position: relative; overflow: hidden; background: var(--dark); color: #fff; padding: 5rem 0 4.5rem; } .hero-grid { display: grid; gap: 3rem; align-items: center; } .hero .eyebrow { color: #FF8A4C; } .hero h1 { color: #fff; } .hero .lede { color: rgba(232,235,242,0.82); } .hero .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.35); } .hero .btn-secondary:hover { border-color: #fff; } .hero-meta { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2.2rem; } .hero-meta .hm { font-family: var(--font-mono); font-size: 0.82rem; color: rgba(255,255,255,0.62); text-transform: uppercase; letter-spacing: 0.12em; } .hero-meta .hm strong { display: block; color: #fff; font-size: 1.15rem; margin-top: 0.25rem; letter-spacing: 0; } .hero-diagram { position: relative; } /* ---------- 8. Diagrams (blueprint style) ---------- */ .diagram { width: 100%; height: auto; font-family: var(--font-mono); } .diagram .node { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; } .diagram .node-dark { fill: var(--dark-2); stroke: rgba(255,255,255,0.4); } .diagram .node-accent { fill: #FFF3EA; stroke: var(--accent); stroke-width: 2; } .diagram .lbl { fill: var(--ink); font-size: 13px; font-weight: 500; } .diagram .lbl-dark { fill: #E8EBF2; } .diagram .sub { font-size: 10.5px; fill: var(--ink-soft); } .diagram .sub-dark { fill: rgba(232,235,242,0.6); } .diagram .flow { fill: none; stroke: var(--ink-soft); stroke-width: 1.75; stroke-dasharray: 8 6; animation: dashflow 1.6s linear infinite; } .diagram .flow-accent { stroke: var(--accent); stroke-width: 2.5; } .diagram .flow-teal { stroke: var(--teal); } .diagram .flow-dark { stroke: rgba(255,255,255,0.45); } .diagram .flow-label { font-size: 10px; fill: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.08em; } @keyframes dashflow { to { stroke-dashoffset: -28; } } .diagram-caption { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.75rem; text-align: center; } .section-dark .diagram-caption { color: rgba(255,255,255,0.55); } .diagram-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.5rem; } .diagram-scroll .diagram { min-width: 640px; } /* ---------- 9. Metric strip ---------- */ .metric-strip { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 2.5rem 0; } .metric { background: var(--paper-2); padding: 1.6rem 1.4rem; } .metric .num { font-family: var(--font-mono); font-weight: 500; font-size: clamp(1.9rem, 3vw, 2.5rem); color: var(--accent-deep); letter-spacing: -0.02em; line-height: 1.1; display: block; } .metric .lab { font-size: 0.94rem; color: var(--ink-soft); margin-top: 0.45rem; display: block; } .section-dark .metric-strip { background: var(--line-dark); border-color: var(--line-dark); } .section-dark .metric { background: var(--dark-2); } .section-dark .metric .num { color: #FF8A4C; } .section-dark .metric .lab { color: rgba(232,235,242,0.7); } /* ---------- 10. Numbered editorial sections ---------- */ .chapter { padding: 2.2rem 0; border-top: 1px solid var(--line); display: grid; gap: 1rem; } .chapter:first-of-type { border-top: 0; } .chapter-num { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 500; color: var(--accent-deep); letter-spacing: 0.16em; text-transform: uppercase; } .chapter h2, .chapter h3 { margin: 0 0 0.5rem; } .chapter-thesis { font-size: 1.15rem; font-weight: 500; color: var(--ink-2); max-width: 52rem; } .chapter ul.proof { list-style: none; padding: 0; margin: 1rem 0; max-width: 52rem; } .chapter ul.proof li { position: relative; padding-left: 1.6rem; color: var(--ink-soft); } .chapter ul.proof li::before { content: "▸"; position: absolute; left: 0; color: var(--teal); font-weight: 700; } .chapter-link { font-weight: 600; font-size: 0.98rem; } /* ---------- 11. Cards (used sparingly) ---------- */ .card-grid { display: grid; gap: 1.25rem; } .card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; transition: transform 0.18s ease, box-shadow 0.18s ease; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-1); } .card .card-eyebrow { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--teal); margin-bottom: 0.7rem; } .card h3 { font-size: 1.25rem; margin-bottom: 0.5rem; } .card p { color: var(--ink-soft); font-size: 0.99rem; margin-bottom: 1rem; } .card .card-meta { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink-soft); } .section-dark .card { background: var(--dark-2); border-color: var(--line-dark); } .section-dark .card p { color: rgba(232,235,242,0.72); } /* ---------- 12. Journey strip ---------- */ .journey { display: grid; gap: 0; margin-top: 2.5rem; counter-reset: step; } .journey-step { position: relative; padding: 1.5rem 0 1.5rem 3.2rem; border-left: 2px solid var(--line); } .journey-step::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; left: -1.05rem; top: 1.4rem; font-family: var(--font-mono); font-weight: 500; font-size: 0.85rem; background: var(--paper); border: 2px solid var(--accent); color: var(--accent-deep); width: 2.1rem; height: 2.1rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .journey-step h3 { font-size: 1.2rem; margin-bottom: 0.35rem; } .journey-step p { color: var(--ink-soft); font-size: 0.98rem; margin-bottom: 0.4rem; } .journey-step .entry-offers { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink-soft); } .journey-step .entry-offers a { color: var(--accent-deep); font-weight: 500; } /* ---------- 13. Engagement models / offerings ---------- */ .offer { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); padding: 1.8rem; margin-bottom: 1.25rem; } .offer-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.6rem; } .offer h3 { margin: 0; font-size: 1.3rem; } .offer .scope { font-family: var(--font-mono); font-size: 0.8rem; color: var(--teal); border: 1px solid currentColor; border-radius: 999px; padding: 0.3rem 0.85rem; white-space: nowrap; } .offer p { color: var(--ink-soft); margin-bottom: 0.75rem; } .offer ul { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.4rem; } .offer ul li { position: relative; padding-left: 1.5rem; font-size: 0.98rem; color: var(--ink-2); } .offer ul li::before { content: "✓"; position: absolute; left: 0; color: var(--teal); font-weight: 700; } .model-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.98rem; } .model-table th, .model-table td { text-align: left; padding: 0.9rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; } .model-table th { font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); } .model-table tr:last-child td { border-bottom: 0; } /* ---------- 14. FAQ accordion ---------- */ .faq { margin-top: 2rem; border-top: 1px solid var(--line); } .faq-item { border-bottom: 1px solid var(--line); } .faq-q { width: 100%; background: none; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0.25rem; text-align: left; font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; color: var(--ink); } .faq-q .faq-icon { font-family: var(--font-mono); color: var(--accent); font-size: 1.2rem; flex: 0 0 auto; transition: transform 0.2s ease; } .faq-item.open .faq-q .faq-icon { transform: rotate(45deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.28s ease; } .faq-a > div { padding: 0 0.25rem 1.5rem; color: var(--ink-soft); max-width: 56rem; } .section-dark .faq { border-top-color: var(--line-dark); } .section-dark .faq-item { border-bottom-color: var(--line-dark); } .section-dark .faq-q { color: #fff; } .section-dark .faq-a > div { color: rgba(232,235,242,0.78); } /* ---------- 15. Forms ---------- */ .form { max-width: 42rem; } .field { margin-bottom: 1.25rem; } .field label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.4rem; } .field label .req { color: var(--accent-deep); } .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="url"], .field select, .field textarea { width: 100%; padding: 0.8rem 1rem; font-size: 1rem; font-family: var(--font-body); border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2); color: var(--ink); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .field textarea { min-height: 140px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(240, 78, 12, 0.15); } .field .hint { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.35rem; } .field .error-msg { display: none; font-size: 0.87rem; color: var(--accent-deep); margin-top: 0.35rem; font-weight: 500; } .field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--accent-deep); } .field.invalid .error-msg { display: block; } .field .hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* honeypot */ .field-row { display: grid; gap: 1.25rem; } .form-note { font-size: 0.9rem; color: var(--ink-soft); margin-top: 1rem; } .form-success { display: none; border: 1px solid var(--teal); background: var(--teal-soft); border-radius: var(--radius); padding: 1.5rem; margin-top: 1.5rem; color: var(--ink-2); } .form-success.show { display: block; } /* Newsletter mini-form (footer) */ .newsletter-form { display: flex; gap: 0.5rem; margin-top: 0.75rem; } .newsletter-form input[type="email"] { flex: 1; min-width: 0; padding: 0.65rem 0.9rem; border-radius: 8px; border: 1px solid var(--line-dark); background: rgba(255,255,255,0.06); color: #fff; font-size: 0.92rem; font-family: var(--font-body); } .newsletter-form input::placeholder { color: rgba(255,255,255,0.45); } .newsletter-form button { background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: 0.65rem 1.1rem; font-weight: 600; font-size: 0.92rem; cursor: pointer; white-space: nowrap; } .newsletter-form button:hover { background: var(--accent-deep); } /* ---------- 16. CTA band ---------- */ .cta-band { background: var(--dark); color: #fff; border-radius: var(--radius); padding: 3rem 2rem; position: relative; overflow: hidden; } .cta-band .eyebrow { color: #FF8A4C; } .cta-band h2 { color: #fff; } .cta-band p { color: rgba(232,235,242,0.78); max-width: 44rem; } .cta-band .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.35); } /* ---------- 17. Footer ---------- */ .site-footer { background: var(--dark); color: rgba(232,235,242,0.78); padding: 4rem 0 0; font-size: 0.95rem; } .footer-grid { display: grid; gap: 2.5rem; } .footer-brand p { font-size: 0.92rem; max-width: 22rem; color: rgba(232,235,242,0.62); } .footer-col h4 { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(255,255,255,0.55); margin: 0 0 1rem; } .footer-col ul { list-style: none; margin: 0; padding: 0; } .footer-col li { margin-bottom: 0.55rem; } .footer-col a { color: rgba(232,235,242,0.82); text-decoration: none; } .footer-col a:hover { color: #fff; text-decoration: underline; } .footer-bottom { margin-top: 3rem; padding: 1.5rem 0; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 0.82rem; color: rgba(255,255,255,0.5); } /* ---------- 18. Enterprise experience band ---------- */ .founder-facts { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; gap: 0.6rem; } .founder-facts li { display: flex; gap: 0.75rem; align-items: baseline; font-size: 1rem; } .founder-facts li::before { content: "▸"; color: var(--accent); font-weight: 700; } /* ---------- 19. Breadcrumb ---------- */ .breadcrumb { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 1.25rem; } .breadcrumb a { color: var(--accent-deep); } .section-dark .breadcrumb { color: rgba(255,255,255,0.55); } .section-dark .breadcrumb a { color: #FF8A4C; } /* ---------- 20. Misc components ---------- */ .tag { display: inline-block; font-family: var(--font-mono); font-size: 0.78rem; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 0.25rem 0.8rem; color: var(--ink-soft); margin: 0 0.4rem 0.4rem 0; } .kv { display: grid; gap: 1rem; margin: 1.5rem 0; } .kv-item { border-left: 3px solid var(--accent); padding-left: 1rem; } .kv-item h4 { margin: 0 0 0.25rem; font-size: 1.05rem; } .kv-item p { margin: 0; color: var(--ink-soft); font-size: 0.97rem; } .checklist { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 0.55rem; } .checklist li { position: relative; padding-left: 1.7rem; } .checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--teal); font-weight: 700; } .xlist { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 0.55rem; } .xlist li { position: relative; padding-left: 1.7rem; } .xlist li::before { content: "→"; position: absolute; left: 0; color: var(--accent); font-weight: 700; } .callout { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; background: var(--paper-2); padding: 1.4rem 1.6rem; margin: 1.75rem 0; } .callout p { margin: 0; color: var(--ink-2); } .callout strong { color: var(--ink); } .two-col { display: grid; gap: 2.5rem; } .back-link { display: inline-block; font-family: var(--font-mono); font-size: 0.88rem; margin-bottom: 1.25rem; } /* TOC for long pages */ .toc { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.75rem; margin: 2rem 0; } .toc h2, .toc h3 { font-size: 1rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft); margin-bottom: 0.75rem; } .toc ol { margin: 0; padding-left: 1.4rem; } .toc li { margin-bottom: 0.35rem; font-size: 0.96rem; } /* 404 */ .error-page { text-align: center; padding: 5rem 0; } .error-code { font-family: var(--font-mono); font-size: clamp(4rem, 14vw, 8rem); color: var(--accent); font-weight: 500; line-height: 1; } /* ---------- 21. Reveal-on-scroll ---------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.in { opacity: 1; transform: translateY(0); } .reveal-d1 { transition-delay: 0.08s; } .reveal-d2 { transition-delay: 0.16s; } .reveal-d3 { transition-delay: 0.24s; } /* ---------- 22. Breakpoints ---------- */ /* ≥768px: tablet */ @media (min-width: 768px) { .wrap { padding: 0 2rem; } section { padding: 5.5rem 0; } .hero { padding: 6.5rem 0 5.5rem; } .hero-grid { grid-template-columns: 1fr 1fr; gap: 3.5rem; } .main-nav { display: block; } .nav-toggle { display: none; } .header-actions { display: inline-flex; } .metric-strip { grid-template-columns: repeat(3, 1fr); } .metric-strip.cols-4 { grid-template-columns: repeat(4, 1fr); } .card-grid { grid-template-columns: repeat(2, 1fr); } .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .two-col { grid-template-columns: 1fr 1fr; } .chapter { grid-template-columns: 200px 1fr; gap: 2.5rem; } .chapter-num { padding-top: 0.35rem; } .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; } .field-row { grid-template-columns: 1fr 1fr; } .journey { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .journey-step { border-left: 0; border-top: 2px solid var(--line); padding: 2.2rem 0 0; } .journey-step::before { left: 0; top: -1.05rem; } } /* ≥1280px: desktop */ @media (min-width: 1280px) { section { padding: 6.5rem 0; } .hero { padding: 7.5rem 0 6.5rem; } .hero-grid { gap: 5rem; } .card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } } /* ---------- 23. Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1; transform: none; } .diagram .flow { animation: none; } } /* ---------- 24. Print ---------- */ @media print { .site-header, .mobile-nav, .nav-scrim, .nav-toggle, .cta-band, .site-footer, .reveal { display: none; } .reveal { opacity: 1; transform: none; } } /* ============================================================ Builder B flagship depth pages (merged from assets/css/b-shared.css, 2026-09-26) Selectors that collided with Builder A selectors above were renamed with a "-b" suffix (e.g. .hero -> .hero-b); the 7 depth pages' markup was renamed to match. b-shared.css has been deleted. ============================================================ */ /* ========================================================================== AnovaCloud — Builder B shared stylesheet (flagship depth pages), merged into main.css on 2026-09-26 (b-shared.css deleted). Uses the spec's design tokens exactly; no new colors/fonts. Colliding selectors carry a "-b" suffix. ========================================================================== */ :root{ --paper:#F7F6F3; --paper-2:#FFFFFF; --ink:#101828; --ink-2:#1D2939; --ink-soft:#475467; --line:#E5E2D9; --accent:#F04E0C; --accent-deep:#B93A08; --teal:#0E7C6B; --dark:#0B1120; --dark-2:#111A2E; --radius:14px; --maxw:1180px; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:var(--paper); color:var(--ink); line-height:1.65; } img,svg{max-width:100%} a{color:var(--accent-deep);text-decoration:none} a:hover{text-decoration:underline} :focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px} /* Skip link */ .skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.7rem 1.1rem;z-index:200;border-radius:0 0 8px 0;font-weight:600} .skip:focus{left:0} .wrap-b{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.1rem,4vw,2rem)} .mono{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace} /* Eyebrow: mono, uppercase, letter-spaced */ .eyebrow-b{ font-family:'IBM Plex Mono',ui-monospace,monospace; text-transform:uppercase;letter-spacing:.22em;font-size:.75rem;font-weight:500; color:var(--accent-deep);margin-bottom:1.1rem;display:block; } .on-dark .eyebrow-b{color:var(--accent)} /* ---------- Hero (dark) ---------- */ .hero-b{ background:var(--dark); color:#fff; padding:clamp(3.5rem,8vw,6.5rem) 0 clamp(3rem,6vw,5rem); background-image:radial-gradient(circle,rgba(255,255,255,.07) 1px,transparent 1px); background-size:24px 24px; position:relative;overflow:hidden; } .hero-b::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,17,32,.25),rgba(11,17,32,0));pointer-events:none} .hero-b .wrap-b{position:relative;z-index:1} .hero-b h1{ font-family:'Space Grotesk',Inter,sans-serif;font-weight:700; font-size:clamp(2rem,5.4vw,3.6rem);line-height:1.08;letter-spacing:-.02em; max-width:20ch;margin-bottom:1.2rem; } .hero-b .lede{font-size:clamp(1.02rem,2vw,1.25rem);color:#CBD5E1;max-width:62ch;margin-bottom:2rem} .hero-ctas{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:2.8rem} .btn-b{ display:inline-flex;align-items:center;gap:.5rem; font-weight:600;font-size:.98rem;padding:.85rem 1.5rem;border-radius:10px; border:1px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease; text-decoration:none!important; } .btn-b-primary{background:var(--accent);color:#fff} .btn-b-primary:hover{background:var(--accent-deep);transform:translateY(-1px)} .btn-b-ghost{border-color:rgba(255,255,255,.35);color:#fff} .btn-b-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)} .btn-dark{background:var(--ink);color:#fff} .btn-dark:hover{background:var(--ink-2)} .btn-outline{border-color:var(--line);color:var(--ink);background:var(--paper-2)} .btn-outline:hover{border-color:var(--ink)} /* Metric strip */ .metric-strip-b{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);overflow:hidden;margin-top:.5rem} .metric-b{background:rgba(17,26,46,.72);padding:1.3rem 1.4rem} .metric-b .num{font-family:'IBM Plex Mono',monospace;font-size:clamp(1.7rem,3vw,2.3rem);font-weight:600;color:var(--accent);line-height:1;display:block;margin-bottom:.45rem} .metric-b .lbl{font-size:.86rem;color:#CBD5E1;line-height:1.45} /* ---------- Sections ---------- */ .section{padding:clamp(3.5rem,7vw,5.5rem) 0} .section-light-b{ background:var(--paper); background-image:radial-gradient(circle,#d8d4c8 1px,transparent 1px); background-size:24px 24px; } .section-plain{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .section-dark-b{background:var(--dark);color:#fff;background-image:radial-gradient(circle,rgba(255,255,255,.06) 1px,transparent 1px);background-size:24px 24px} .on-dark{color:#fff} .section-dark-b .lede{color:#CBD5E1} .section-dark-b h2,.section-dark-b h3{color:#fff} .sec-head{margin-bottom:2.6rem;max-width:70ch} .sec-num{font-family:'IBM Plex Mono',monospace;font-size:.8rem;letter-spacing:.22em;color:var(--accent-deep);text-transform:uppercase;display:block;margin-bottom:.7rem} .section-dark-b .sec-num{color:var(--accent)} h2.sec-title{font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;font-size:clamp(1.5rem,3.4vw,2.25rem);line-height:1.15;letter-spacing:-.015em;margin-bottom:.9rem} .sec-lede{color:var(--ink-soft);font-size:1.06rem;max-width:64ch} .section-dark-b .sec-lede{color:#CBD5E1} /* Content typography */ .prose h3{font-family:'Space Grotesk',Inter,sans-serif;font-size:1.2rem;font-weight:700;margin:1.8rem 0 .6rem;letter-spacing:-.01em} .prose p{margin-bottom:1rem;color:var(--ink-soft);max-width:70ch} .prose ul,.prose ol{margin:0 0 1.2rem 1.25rem;color:var(--ink-soft)} .prose li{margin-bottom:.45rem} .prose strong{color:var(--ink)} .section-dark-b .prose p,.section-dark-b .prose li{color:#CBD5E1} .section-dark-b .prose strong{color:#fff} /* Grids & cards */ .grid-2{display:grid;gap:1.4rem;grid-template-columns:1fr} .grid-3{display:grid;gap:1.4rem;grid-template-columns:1fr} @media(min-width:760px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:1fr 1fr}} @media(min-width:1080px){.grid-3{grid-template-columns:1fr 1fr 1fr}} .card-b{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem 1.6rem;transition:transform .16s ease,box-shadow .16s ease} .card-b:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(16,24,40,.08)} .card-b h3{font-family:'Space Grotesk',Inter,sans-serif;font-size:1.06rem;font-weight:700;margin-bottom:.55rem;letter-spacing:-.01em} .card-b p,.card-b li{font-size:.94rem;color:var(--ink-soft)} .card-b ul{margin-left:1.15rem;margin-top:.5rem} .card-b .tag{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);display:block;margin-bottom:.6rem} .card-b .num-badge{font-family:'IBM Plex Mono',monospace;font-weight:600;color:var(--accent);font-size:1.3rem;display:block;margin-bottom:.5rem} .section-dark-b .card-b{background:var(--dark-2);border-color:rgba(255,255,255,.12)} .section-dark-b .card-b p,.section-dark-b .card-b li{color:#CBD5E1} /* Numbered role/worker rows */ .roles{counter-reset:role;display:grid;gap:1rem;margin-top:1.6rem} .role{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.5rem 1.4rem 4.6rem;position:relative} .role::before{counter-increment:role;content:counter(role,decimal-leading-zero);position:absolute;left:1.4rem;top:1.3rem;font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:1.25rem;color:var(--accent)} .role h3{font-family:'Space Grotesk',Inter,sans-serif;font-size:1.08rem;font-weight:700;margin-bottom:.4rem;letter-spacing:-.01em} .role p{font-size:.94rem;color:var(--ink-soft)} .role .io{font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:var(--ink-soft);margin-top:.55rem;display:block} .role .io b{color:var(--teal);font-weight:500} /* Tables */ .tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-2);margin:1.6rem 0} table.tbl{width:100%;border-collapse:collapse;font-size:.93rem;min-width:560px} .tbl th{font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;text-align:left;padding:.85rem 1.1rem;background:var(--ink);color:#fff} .tbl td{padding:.8rem 1.1rem;border-top:1px solid var(--line);color:var(--ink-soft);vertical-align:top} .tbl td:first-child{font-weight:600;color:var(--ink)} /* Checklist */ .checklist-b{list-style:none;margin:1.4rem 0;padding:0;display:grid;gap:.7rem} .checklist-b li{background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:.85rem 1.1rem .85rem 2.8rem;position:relative;font-size:.95rem;color:var(--ink-soft)} .checklist-b li::before{content:"";position:absolute;left:1.1rem;top:.95rem;width:1.05rem;height:.6rem;border-left:3px solid var(--teal);border-bottom:3px solid var(--teal);transform:rotate(-45deg)} /* FAQ */ .faq-b details{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:.8rem;overflow:hidden} .faq-b summary{cursor:pointer;list-style:none;padding:1.15rem 1.4rem;font-weight:600;font-size:1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem} .faq-b summary::-webkit-details-marker{display:none} .faq-b summary::after{content:"+";font-family:'IBM Plex Mono',monospace;font-size:1.4rem;color:var(--accent);flex-shrink:0;transition:transform .15s ease} .faq-b details[open] summary::after{transform:rotate(45deg)} .faq-b .answer{padding:0 1.4rem 1.3rem;color:var(--ink-soft);font-size:.96rem} .faq-b .answer p{margin-bottom:.7rem} .section-dark-b .faq-b details{background:var(--dark-2);border-color:rgba(255,255,255,.12)} .section-dark-b .faq-b summary{color:#fff} .section-dark-b .faq-b .answer{color:#CBD5E1} /* Diagrams */ .diagram-scroll-b{overflow-x:auto;margin:2rem 0;padding:1rem .5rem} svg.blueprint{min-width:760px;width:100%;height:auto;display:block} .blueprint .node{fill:var(--paper-2);stroke:var(--ink);stroke-width:1.6} .blueprint .node-accent{fill:#FFF4ED;stroke:var(--accent-deep)} .blueprint .node-dark{fill:var(--dark-2);stroke:rgba(255,255,255,.4)} .blueprint .nlabel{font-family:'IBM Plex Mono',monospace;font-size:12px;fill:var(--ink);font-weight:500} .blueprint .nsub{font-family:'IBM Plex Mono',monospace;font-size:10px;fill:var(--ink-soft)} .blueprint .on-dark-label{fill:#fff} .blueprint .on-dark-sub{fill:#CBD5E1} .blueprint .flow{stroke:var(--ink-soft);stroke-width:1.8;fill:none;stroke-dasharray:7 6;animation:dashmove 1.1s linear infinite} .blueprint .flow-active{stroke:var(--accent);stroke-width:2.4;fill:none;stroke-dasharray:7 6;animation:dashmove 1.1s linear infinite} .blueprint .flow-teal{stroke:var(--teal);stroke-width:1.8;fill:none;stroke-dasharray:7 6;animation:dashmove 1.1s linear infinite} .blueprint .arrow{fill:var(--ink-soft)} .blueprint .arrow-active{fill:var(--accent)} .blueprint .zone{fill:none;stroke:var(--line);stroke-width:1.2;stroke-dasharray:4 4} .blueprint .zone-label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.18em;fill:var(--ink-soft);text-transform:uppercase} @keyframes dashmove{to{stroke-dashoffset:-26}} @media(prefers-reduced-motion:reduce){ .blueprint .flow,.blueprint .flow-active,.blueprint .flow-teal{animation:none} .rv{opacity:1!important;transform:none!important} } /* Breadcrumb */ .crumbs{font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:#CBD5E1;margin-bottom:1.4rem;letter-spacing:.04em} .crumbs a{color:#fff} .crumbs span.sep{margin:0 .5rem;color:rgba(255,255,255,.4)} /* CTA band */ .cta-band-b{background:var(--dark);color:#fff;text-align:center;padding:clamp(3.5rem,7vw,5.5rem) 0;background-image:radial-gradient(circle,rgba(255,255,255,.06) 1px,transparent 1px);background-size:24px 24px} .cta-band-b h2{font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;font-size:clamp(1.6rem,3.6vw,2.5rem);letter-spacing:-.02em;margin-bottom:1rem} .cta-band-b p{color:#CBD5E1;max-width:56ch;margin:0 auto 2rem} .cta-band-b .btn-row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap} /* Reveal on scroll */ .rv{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease} .rv.in{opacity:1;transform:none} /* ---------- Wizard (Build My Team) ---------- */ .wizard{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.4rem,4vw,2.6rem);max-width:860px;margin:2rem auto 0;box-shadow:0 14px 40px rgba(16,24,40,.06)} .stepper{display:flex;gap:.45rem;margin-bottom:2rem;flex-wrap:wrap} .stepper .dot{flex:1;min-width:52px;height:6px;border-radius:3px;background:var(--line)} .stepper .dot.done{background:var(--teal)} .stepper .dot.now{background:var(--accent)} .wstep{display:none} .wstep.active{display:block;animation:fadein .3s ease} @keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .wstep h3{font-family:'Space Grotesk',Inter,sans-serif;font-size:1.35rem;font-weight:700;margin-bottom:.4rem;letter-spacing:-.01em} .wstep .step-sub{color:var(--ink-soft);font-size:.95rem;margin-bottom:1.5rem} .wstep .step-count{font-family:'IBM Plex Mono',monospace;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep);display:block;margin-bottom:.7rem} .chips{display:flex;flex-wrap:wrap;gap:.65rem} .chip{border:1.5px solid var(--line);background:var(--paper);border-radius:999px;padding:.6rem 1.15rem;font-size:.92rem;font-weight:500;cursor:pointer;transition:all .14s ease;color:var(--ink)} .chip:hover{border-color:var(--ink)} .chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)} .chip:focus-visible{outline:3px solid var(--accent);outline-offset:2px} .wnav{display:flex;justify-content:space-between;align-items:center;margin-top:2.2rem;gap:1rem} .werr{color:var(--accent-deep);font-size:.9rem;font-weight:600;margin-top:1rem;min-height:1.4em} .field-b{margin-bottom:1.2rem} .field-b label{display:block;font-weight:600;font-size:.94rem;margin-bottom:.45rem} .field-b input[type="text"],.field-b input[type="email"],.field-b input[type="date"],.field-b textarea,.field-b select{ width:100%;border:1.5px solid var(--line);border-radius:10px;padding:.8rem 1rem;font-size:.96rem;font-family:inherit;background:var(--paper); } .field-b input:focus,.field-b textarea:focus,.field-b select:focus{border-color:var(--accent);outline:none} .field-b .hint{font-size:.84rem;color:var(--ink-soft);margin-top:.35rem} .field-b textarea{min-height:130px;resize:vertical} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .review-dl{display:grid;grid-template-columns:minmax(140px,200px) 1fr;gap:.6rem 1.2rem;font-size:.94rem;margin:1.4rem 0} .review-dl dt{font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);padding-top:.15rem} .review-dl dd{color:var(--ink)} .success-panel{text-align:center;padding:2.5rem 1rem} .success-panel .tick{width:74px;height:74px;border-radius:50%;background:var(--teal);color:#fff;font-size:2rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1.4rem} /* Utility */ .two-col-b{display:grid;gap:2rem;grid-template-columns:1fr} @media(min-width:900px){.two-col-b{grid-template-columns:1fr 1fr}} .mt{margin-top:2rem} .kbd-note{font-family:'IBM Plex Mono',monospace;font-size:.8rem;color:var(--ink-soft);background:var(--paper-2);border:1px solid var(--line);border-radius:8px;padding:.7rem 1rem;display:inline-block} /* Print: keep diagrams readable */ @media print{.rv{opacity:1;transform:none}.hero-b{background:#fff;color:#000}} /* ---------- Phase 3 Wave 2 (Worker B): nav responsive fix ---------- The simplified desktop header (6 dropdowns + Solution Navigator link + CTA) needs ~1100px of horizontal room. Below that, fall back to the hamburger drawer (which carries the identical nav groups plus the CTA), so the header never overflows and nothing is clipped. No visual-system changes: existing classes, colors, and typography are reused as-is. */ @media (max-width: 1099px) { .main-nav { display: none; } .nav-toggle { display: inline-flex; } .header-actions { display: none; } } /* Guard: keep the last dropdown inside the viewport at mid widths. */ @media (min-width: 1100px) { .nav-item:last-child .nav-dropdown { left: auto; right: 0; } } /* The top-level `.main-nav ul` flex-row rule leaks into `.nav-dropdown` (also a