/* ============================================================ COILHOOD — Brand Stylesheet v1.0 Palette, type, layout, components, pages ============================================================ */ /* ---- Google Fonts loaded via in each HTML ---- */ /* ---- Brand Tokens ---- */ :root { /* Backgrounds */ --bg-deep: #2A1320; --bg-mid: #3D1F2D; --bg-dark: #1A0B14; /* Accents */ --gold: #C9A35A; --gold-warm: #E0B86E; --terra: #CC6940; --copper: #A8553A; --rose: #8B5A4A; --mauve: #7A5560; --forest: #13261F; /* Text */ --ivory: #F4ECDC; --ivory-dim: #C8B99A; --ivory-muted: #907A62; /* UI */ --border: rgba(201, 163, 90, 0.20); --border-hover: rgba(201, 163, 90, 0.50); --overlay: rgba(42, 19, 32, 0.85); /* Type */ --font-display: 'Fraunces', Georgia, serif; --font-body: 'Inter', Helvetica, sans-serif; /* Spacing */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 7rem; /* Radius */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 24px; --radius-pill: 999px; } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { background-color: var(--bg-deep); color: var(--ivory); font-family: var(--font-body); font-weight: 400; line-height: 1.65; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { cursor: pointer; font-family: var(--font-body); border: none; background: none; } /* ---- Typography ---- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; color: var(--ivory); } h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); } h2 { font-size: clamp(1.9rem, 3.5vw, 3rem); } h3 { font-size: clamp(1.3rem, 2.5vw, 1.9rem); } h4 { font-size: 1.1rem; font-weight: 600; } .display-italic { font-style: italic; color: var(--gold-warm); } p { color: var(--ivory-dim); line-height: 1.75; } p + p { margin-top: 1rem; } .eyebrow { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-sm); } /* ---- Layout ---- */ .container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; } .section { padding: var(--space-xl) 0; } .section--tight { padding: var(--space-lg) 0; } .section--dark { background-color: var(--bg-dark); } .section--mid { background-color: var(--bg-mid); } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); align-items: center; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } @media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .grid-4 { grid-template-columns: 1fr; } } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 2rem; border-radius: var(--radius-pill); font-size: 0.95rem; font-weight: 600; font-family: var(--font-body); transition: all 0.2s ease; white-space: nowrap; } .btn-primary { background: var(--gold); color: var(--bg-deep); } .btn-primary:hover { background: var(--gold-warm); transform: translateY(-1px); } .btn-outline { border: 1.5px solid var(--gold); color: var(--gold); background: transparent; } .btn-outline:hover { background: rgba(201,163,90,0.1); } .btn-ghost { color: var(--ivory-dim); padding: 0.85rem 1.2rem; } .btn-ghost:hover { color: var(--ivory); } .btn-terra { background: var(--terra); color: var(--ivory); } .btn-terra:hover { background: var(--copper); transform: translateY(-1px); } .btn-lg { padding: 1.05rem 2.5rem; font-size: 1.05rem; } /* ---- Navigation ---- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(42, 19, 32, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .nav__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; padding: 0 1.5rem; max-width: 1180px; margin: 0 auto; } .nav__logo { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--ivory); letter-spacing: -0.02em; } .nav__logo span { color: var(--gold); } .nav__links { display: flex; align-items: center; gap: 0.25rem; } .nav__links a { font-size: 0.9rem; font-weight: 500; color: var(--ivory-dim); padding: 0.5rem 0.9rem; border-radius: var(--radius-sm); transition: color 0.15s; } .nav__links a:hover { color: var(--ivory); } .nav__links a.active { color: var(--gold); } .nav__cta { margin-left: 0.5rem; } .nav__mobile-toggle { display: none; flex-direction: column; gap: 5px; padding: 6px; cursor: pointer; } .nav__mobile-toggle span { display: block; width: 24px; height: 2px; background: var(--ivory); border-radius: 2px; transition: all 0.2s; } @media (max-width: 768px) { .nav__links, .nav__cta { display: none; } .nav__mobile-toggle { display: flex; } /* When open: let the nav expand in natural flow — no absolute children */ .nav.open .nav__inner { flex-wrap: wrap; height: auto; align-items: flex-start; padding-top: 0; padding-bottom: 1.25rem; } /* Logo and toggle stay on the first row at 68px tall */ .nav.open .nav__logo, .nav.open .nav__mobile-toggle { height: 68px; display: flex; align-items: center; } /* Links drop to a new row, full width, in normal flow */ .nav.open .nav__links { display: flex; flex-direction: column; width: 100%; padding-top: 0.25rem; border-top: 1px solid var(--border); gap: 0; align-items: stretch; } .nav.open .nav__links a { padding: 0.8rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 0.95rem; } .nav.open .nav__links a:last-child { border-bottom: none; } /* CTA appears after the links, full width, no floating */ .nav.open .nav__cta { display: block; width: 100%; margin-top: 1rem; text-align: center; } } /* ---- Hero ---- */ .hero { min-height: 100vh; display: flex; align-items: center; padding-top: 68px; background: var(--bg-deep); position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: -20%; right: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(201,163,90,0.08) 0%, transparent 70%); pointer-events: none; } .hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; padding: var(--space-xl) 1.5rem; max-width: 1180px; margin: 0 auto; width: 100%; } .hero__text { max-width: 560px; } .hero__text h1 { margin-bottom: 1.5rem; } .hero__text p { font-size: 1.15rem; margin-bottom: 2.5rem; max-width: 480px; } .hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; } .hero__coco { position: relative; display: flex; justify-content: flex-end; } .hero__coco img { width: 100%; max-width: 460px; height: auto; border-radius: var(--radius-lg); filter: drop-shadow(0 30px 60px rgba(0,0,0,0.5)); } .hero__badge { position: absolute; bottom: 2rem; left: 0; background: var(--bg-mid); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1rem 1.25rem; display: flex; align-items: center; gap: 0.75rem; backdrop-filter: blur(8px); } .hero__badge-icon { font-size: 1.5rem; } .hero__badge-text { font-size: 0.8rem; color: var(--ivory-dim); } .hero__badge-text strong { display: block; color: var(--gold); font-size: 0.95rem; } @media (max-width: 900px) { .hero__inner { grid-template-columns: 1fr; text-align: center; } .hero__text { max-width: 100%; } .hero__text p { max-width: 100%; } .hero__actions { justify-content: center; } .hero__coco { justify-content: center; } .hero__coco img { max-width: 320px; } .hero__badge { left: 50%; transform: translateX(-50%); white-space: nowrap; } } /* ---- Stats strip ---- */ .stats { background: var(--bg-mid); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 2.5rem 0; } .stats__inner { display: flex; justify-content: space-around; align-items: center; gap: 2rem; flex-wrap: wrap; } .stat { text-align: center; } .stat__number { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; color: var(--gold); line-height: 1; } .stat__label { font-size: 0.82rem; color: var(--ivory-muted); margin-top: 0.4rem; max-width: 160px; } /* ---- Section headers ---- */ .section-header { margin-bottom: var(--space-lg); } .section-header--center { text-align: center; } .section-header p { font-size: 1.1rem; margin-top: 1rem; max-width: 580px; } .section-header--center p { margin-left: auto; margin-right: auto; } /* ---- Coco meet section ---- */ .coco-variants { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: var(--space-md); } .coco-card { background: var(--bg-mid); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; text-align: center; padding: 2rem 1.5rem 1.75rem; transition: border-color 0.2s, transform 0.2s; } .coco-card:hover { border-color: var(--border-hover); transform: translateY(-4px); } .coco-card img { width: 180px; height: 220px; object-fit: cover; object-position: top; border-radius: var(--radius-md); margin: 0 auto 1.25rem; } .coco-card h4 { color: var(--gold); margin-bottom: 0.5rem; } .coco-card p { font-size: 0.9rem; } @media (max-width: 768px) { .coco-variants { grid-template-columns: 1fr; max-width: 340px; margin-left: auto; margin-right: auto; } } /* ---- Feature cards ---- */ .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .feature-card { background: var(--bg-mid); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 2rem 1.75rem; transition: border-color 0.2s; } .feature-card:hover { border-color: var(--border-hover); } .feature-icon { width: 48px; height: 48px; border-radius: var(--radius-sm); background: rgba(201,163,90,0.12); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1.25rem; } .feature-card h4 { color: var(--ivory); margin-bottom: 0.5rem; } .feature-card p { font-size: 0.9rem; } @media (max-width: 900px) { .features-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .features-grid { grid-template-columns: 1fr; } } /* ---- Audience cards ---- */ .audience-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .audience-card { border-radius: var(--radius-lg); padding: 2.5rem 2rem; border: 1px solid var(--border); transition: transform 0.2s; } .audience-card:hover { transform: translateY(-4px); } .audience-card--primary { background: linear-gradient(145deg, #3D1F2D 0%, #2A1320 100%); } .audience-card--parents { background: linear-gradient(145deg, #1C2A1A 0%, #13261F 100%); } .audience-card--dads { background: linear-gradient(145deg, #2D1A0F 0%, #1F1008 100%); } .audience-card__tag { display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.3rem 0.8rem; border-radius: var(--radius-pill); margin-bottom: 1.25rem; } .audience-card--primary .audience-card__tag { background: rgba(201,163,90,0.15); color: var(--gold); } .audience-card--parents .audience-card__tag { background: rgba(19,38,31,0.8); color: #6DB87A; border: 1px solid rgba(109,184,122,0.3); } .audience-card--dads .audience-card__tag { background: rgba(204,105,64,0.15); color: var(--terra); } .audience-card h3 { font-size: 1.4rem; margin-bottom: 0.75rem; } .audience-card p { font-size: 0.9rem; margin-bottom: 1.75rem; } .audience-card .btn { font-size: 0.85rem; padding: 0.7rem 1.5rem; } @media (max-width: 900px) { .audience-cards { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } } /* ---- Pricing ---- */ .pricing-grid { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 1.5rem; align-items: start; } .pricing-card { border-radius: var(--radius-lg); padding: 2.5rem 2rem; border: 1px solid var(--border); background: var(--bg-mid); position: relative; } .pricing-card--featured { background: linear-gradient(160deg, #3D2232 0%, #2A1320 100%); border-color: var(--gold); transform: scale(1.03); } .pricing-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--gold); color: var(--bg-deep); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 1rem; border-radius: var(--radius-pill); white-space: nowrap; } .pricing-card__tier { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; } .pricing-card__price { font-family: var(--font-display); font-size: 3rem; font-weight: 700; color: var(--ivory); line-height: 1; margin-bottom: 0.25rem; } .pricing-card__price span { font-size: 1.1rem; font-weight: 400; color: var(--ivory-muted); } .pricing-card__annual { font-size: 0.82rem; color: var(--ivory-muted); margin-bottom: 2rem; } .pricing-card__annual strong { color: var(--gold); } .pricing-divider { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; } .pricing-features { list-style: none; display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 2rem; } .pricing-features li { font-size: 0.9rem; color: var(--ivory-dim); display: flex; align-items: flex-start; gap: 0.6rem; } .pricing-features li::before { content: '✓'; color: var(--gold); font-weight: 700; flex-shrink: 0; margin-top: 0.05rem; } .pricing-card .btn { width: 100%; justify-content: center; } @media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } .pricing-card--featured { transform: none; } } /* ---- Email capture / CTA strip ---- */ .capture { background: linear-gradient(135deg, var(--bg-mid) 0%, var(--bg-dark) 100%); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .capture__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; padding: var(--space-lg) 1.5rem; max-width: 1180px; margin: 0 auto; } .capture__text h2 { margin-bottom: 0.75rem; } .capture__form { display: flex; flex-direction: column; gap: 1rem; } .form-row { display: flex; gap: 0.75rem; } .form-input { flex: 1; background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0.85rem 1.5rem; color: var(--ivory); font-size: 0.95rem; font-family: var(--font-body); transition: border-color 0.2s; outline: none; } .form-input::placeholder { color: var(--ivory-muted); } .form-input:focus { border-color: var(--gold); } .form-note { font-size: 0.78rem; color: var(--ivory-muted); } .success-msg { display: none; background: rgba(109,184,122,0.12); border: 1px solid rgba(109,184,122,0.3); border-radius: var(--radius-md); padding: 1.25rem 1.5rem; color: #6DB87A; font-size: 0.95rem; } @media (max-width: 768px) { .capture__inner { grid-template-columns: 1fr; } .form-row { flex-direction: column; } } /* ---- Quiz page ---- */ .quiz-wrap { min-height: 100vh; padding: 120px 1.5rem 4rem; display: flex; align-items: flex-start; justify-content: center; } .quiz-card { background: var(--bg-mid); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 3rem 2.5rem; max-width: 680px; width: 100%; } .quiz-progress { display: flex; gap: 6px; margin-bottom: 2.5rem; } .quiz-progress__bar { height: 4px; border-radius: 4px; background: var(--border); flex: 1; transition: background 0.3s; } .quiz-progress__bar.active { background: var(--gold); } .quiz-step { display: none; } .quiz-step.active { display: block; } .quiz-step h2 { margin-bottom: 0.5rem; } .quiz-step .sub { font-size: 1rem; color: var(--ivory-dim); margin-bottom: 2rem; } .quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; } .quiz-option { background: rgba(255,255,255,0.04); border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 1.1rem 1.25rem; text-align: left; cursor: pointer; transition: all 0.2s; font-family: var(--font-body); color: var(--ivory-dim); font-size: 0.9rem; } .quiz-option:hover { border-color: var(--gold); color: var(--ivory); } .quiz-option.selected { border-color: var(--gold); background: rgba(201,163,90,0.1); color: var(--ivory); } .quiz-option strong { display: block; color: var(--ivory); font-size: 1rem; margin-bottom: 0.2rem; } .quiz-nav { display: flex; justify-content: space-between; margin-top: 2.5rem; align-items: center; } .quiz-step-count { font-size: 0.82rem; color: var(--ivory-muted); } /* Email capture step */ .quiz-email-step { display: none; } .quiz-email-step.active { display: block; } .quiz-email-step h2 { margin-bottom: 0.5rem; } .quiz-email-step p { color: var(--ivory-dim); margin-bottom: 2rem; font-size: 1rem; } .quiz-email-form { display: flex; flex-direction: column; gap: 1rem; } .quiz-email-form label { font-size: 0.85rem; color: var(--ivory-muted); margin-bottom: 0.25rem; display: block; } .quiz-email-form input { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.9rem 1.25rem; color: var(--ivory); font-size: 1rem; font-family: var(--font-body); outline: none; transition: border-color 0.2s; } .quiz-email-form input:focus { border-color: var(--gold); } .quiz-disclaimer { font-size: 0.78rem; color: var(--ivory-muted); margin-top: 0.5rem; } /* ---- Parents & Dads landing page ---- */ .landing-hero { min-height: 70vh; display: flex; align-items: center; padding: 120px 1.5rem 5rem; background: var(--bg-deep); } .landing-hero--dads { background: linear-gradient(160deg, #1F0E08 0%, #2A1320 100%); } .landing-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; max-width: 1180px; margin: 0 auto; width: 100%; } .landing-hero img { width: 100%; max-width: 420px; height: auto; border-radius: var(--radius-lg); filter: drop-shadow(0 20px 50px rgba(0,0,0,0.5)); justify-self: end; } @media (max-width: 900px) { .landing-hero__inner { grid-template-columns: 1fr; text-align: center; } .landing-hero img { justify-self: center; max-width: 280px; } } /* ---- Glossary / term cards ---- */ .term-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .term-card { background: var(--bg-mid); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.5rem; } .term-card__word { font-family: var(--font-display); font-size: 1.1rem; color: var(--gold); margin-bottom: 0.4rem; } .term-card p { font-size: 0.88rem; } @media (max-width: 600px) { .term-grid { grid-template-columns: 1fr; } } /* ---- Steps ---- */ .steps { display: flex; flex-direction: column; gap: 2rem; } .step { display: grid; grid-template-columns: 48px 1fr; gap: 1.25rem; align-items: flex-start; } .step__num { width: 48px; height: 48px; border-radius: 50%; background: rgba(201,163,90,0.12); border: 1.5px solid var(--gold); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; color: var(--gold); font-size: 1.1rem; flex-shrink: 0; } .step h4 { color: var(--ivory); margin-bottom: 0.4rem; } .step p { font-size: 0.9rem; } /* ---- Testimonial ---- */ .testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .testimonial-card { background: var(--bg-mid); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.75rem; } .testimonial-card__quote { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--ivory); margin-bottom: 1.25rem; line-height: 1.55; } .testimonial-card__author { font-size: 0.82rem; color: var(--ivory-muted); } .testimonial-card__author strong { display: block; color: var(--gold-warm); font-style: normal; font-size: 0.9rem; margin-bottom: 0.2rem; } @media (max-width: 900px) { .testimonial-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } } /* ---- Footer ---- */ .footer { background: var(--bg-dark); border-top: 1px solid var(--border); padding: 4rem 0 2.5rem; } .footer__inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem; max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; } .footer__brand .nav__logo { font-size: 1.3rem; margin-bottom: 0.75rem; display: block; } .footer__brand p { font-size: 0.88rem; max-width: 240px; } .footer__col h5 { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; } .footer__col ul { display: flex; flex-direction: column; gap: 0.6rem; } .footer__col ul a { font-size: 0.88rem; color: var(--ivory-muted); transition: color 0.15s; } .footer__col ul a:hover { color: var(--ivory); } .footer__bottom { max-width: 1180px; margin: 3rem auto 0; padding: 1.5rem 1.5rem 0; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: var(--ivory-muted); flex-wrap: wrap; gap: 0.5rem; } @media (max-width: 768px) { .footer__inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 500px) { .footer__inner { grid-template-columns: 1fr; } } /* ---- Utility ---- */ .text-gold { color: var(--gold); } .text-center { text-align: center; } .text-dim { color: var(--ivory-dim); } .mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mb-sm { margin-bottom: var(--space-sm); } .mb-md { margin-bottom: var(--space-md); } .hidden { display: none !important; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* ---- Loading state ---- */ .btn.loading { opacity: 0.7; pointer-events: none; } .btn.loading::after { content: ''; display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 0.6s linear infinite; margin-left: 0.5rem; } @keyframes spin { to { transform: rotate(360deg); } } /* ---- Accessibility ---- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ---- Scroll animations ---- */ .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.5s ease, transform 0.5s ease; } .fade-up.visible { opacity: 1; transform: none; } /* ---- Capture section: success-msg sits in column 2 (same as form) ---- */ @media (min-width: 900px) { .capture__inner .success-msg { grid-column: 2; grid-row: 1; } } /* ============================================================ FEATURE PAGES — interior tool & hub pages ============================================================ */ /* Page hero (interior pages) */ .page-hero { padding: 120px 1.5rem 4rem; background: var(--bg-deep); text-align: center; position: relative; overflow: hidden; } .page-hero::before { content: ''; position: absolute; top: -20%; left: 50%; transform: translateX(-50%); width: 800px; height: 400px; background: radial-gradient(ellipse, rgba(201,163,90,0.07) 0%, transparent 70%); pointer-events: none; } .page-hero .eyebrow { margin-bottom: 0.75rem; } .page-hero h1 { max-width: 760px; margin: 0 auto 1.25rem; } .page-hero p { font-size: 1.1rem; max-width: 600px; margin: 0 auto 2rem; } /* Breadcrumb */ .breadcrumb { font-size: 0.8rem; color: var(--ivory-muted); margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.4rem; } .breadcrumb a { color: var(--gold); } .breadcrumb a:hover { text-decoration: underline; } /* Feature hub grid */ .feature-hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .feature-hub-card { background: var(--bg-mid); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem 1.75rem; text-decoration: none; display: flex; flex-direction: column; gap: 0.75rem; transition: border-color 0.2s, transform 0.2s; } .feature-hub-card:hover { border-color: var(--border-hover); transform: translateY(-3px); } .feature-hub-card .feature-icon { margin-bottom: 0.25rem; } .feature-hub-card h3 { font-size: 1.1rem; color: var(--ivory); margin: 0; } .feature-hub-card p { font-size: 0.88rem; color: var(--ivory-dim); margin: 0; line-height: 1.6; } .feature-hub-card .tier-tag { display: inline-block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.2rem 0.65rem; border-radius: var(--radius-pill); margin-top: auto; align-self: flex-start; } .tier-tag--free { background: rgba(109,184,122,0.15); color: #6DB87A; } .tier-tag--core { background: rgba(201,163,90,0.15); color: var(--gold); } .tier-tag--premium { background: rgba(204,105,64,0.15); color: var(--terra); } @media (max-width: 900px) { .feature-hub-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 580px) { .feature-hub-grid { grid-template-columns: 1fr; } } /* Tool card wrapper */ .tool-card { background: var(--bg-mid); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2.5rem 2rem; max-width: 780px; margin: 0 auto; } .tool-card__label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem; display: block; } .tool-card h2 { margin-bottom: 0.75rem; font-size: clamp(1.5rem, 3vw, 2.1rem); } .tool-card > p { margin-bottom: 2rem; } /* Input group */ .input-group { display: flex; gap: 0.75rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .input-group .form-input { max-width: 360px; } select.form-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23907A62' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.2rem center; padding-right: 3rem; cursor: pointer; } /* Result box */ .result-box { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.75rem; margin-top: 1.5rem; display: none; } .result-box.visible { display: block; } .result-box__header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; } .result-box__icon { font-size: 1.75rem; } .result-box__title { font-family: var(--font-display); font-size: 1.2rem; color: var(--ivory); } .result-box__body { font-size: 0.9rem; color: var(--ivory-dim); line-height: 1.7; } .result-box__body strong { color: var(--ivory); } .result-box__body ul { list-style: disc; padding-left: 1.25rem; margin-top: 0.5rem; } .result-box__body ul li { margin-bottom: 0.4rem; } /* Data entry list (timelines, shelves, etc.) */ .data-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; } .data-entry { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.25rem 1.5rem; position: relative; } .data-entry__date { font-size: 0.78rem; color: var(--gold); font-weight: 600; letter-spacing: 0.05em; margin-bottom: 0.4rem; } .data-entry__text { font-size: 0.92rem; color: var(--ivory-dim); line-height: 1.65; } .data-entry__delete { position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: var(--ivory-muted); cursor: pointer; font-size: 1rem; padding: 0.2rem; transition: color 0.15s; } .data-entry__delete:hover { color: var(--terra); } .data-milestone { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; background: rgba(201,163,90,0.08); border: 1px solid rgba(201,163,90,0.25); border-radius: var(--radius-pill); font-size: 0.85rem; color: var(--gold); font-weight: 500; } /* Streak calendar */ .streak-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } .streak-count { font-family: var(--font-display); font-size: 3.5rem; font-weight: 700; color: var(--gold); line-height: 1; } .streak-label { font-size: 0.88rem; color: var(--ivory-muted); } .streak-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .streak-day { aspect-ratio: 1; border-radius: var(--radius-sm); background: rgba(255,255,255,0.04); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 0.72rem; color: var(--ivory-muted); transition: all 0.15s; } .streak-day.done { background: rgba(201,163,90,0.2); border-color: var(--gold); color: var(--gold); font-weight: 600; } .streak-day.today { border-color: var(--terra); color: var(--terra); } /* Celebrity hair gallery */ .celeb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .celeb-card { background: var(--bg-mid); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: transform 0.2s, border-color 0.2s; } .celeb-card:hover { transform: translateY(-3px); border-color: var(--border-hover); } .celeb-card__img { width: 100%; aspect-ratio: 3/4; background: linear-gradient(160deg, var(--bg-mid) 0%, var(--bg-dark) 100%); display: flex; align-items: center; justify-content: center; font-size: 3rem; } .celeb-card__body { padding: 1.25rem; } .celeb-card__name { font-family: var(--font-display); font-size: 1.05rem; color: var(--ivory); margin-bottom: 0.3rem; } .celeb-card__type { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.75rem; } .celeb-card__body p { font-size: 0.84rem; margin-bottom: 1rem; } .celeb-card__btn { font-size: 0.82rem; color: var(--gold); font-weight: 600; cursor: pointer; background: none; border: none; padding: 0; transition: color 0.15s; } .celeb-card__btn:hover { color: var(--gold-warm); } .celeb-detail { display: none; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.75rem; margin-top: 1.5rem; } .celeb-detail.visible { display: block; } .celeb-detail h3 { margin-bottom: 1rem; } .celeb-detail p { font-size: 0.9rem; line-height: 1.7; } @media (max-width: 900px) { .celeb-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { .celeb-grid { grid-template-columns: 1fr; } } /* Symptom checker */ .symptom-steps { position: relative; } .symptom-step { display: none; } .symptom-step.active { display: block; } .symptom-step h3 { margin-bottom: 1.25rem; } .symptom-options { display: flex; flex-direction: column; gap: 0.75rem; } .symptom-btn { background: rgba(255,255,255,0.03); border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 1rem 1.25rem; text-align: left; cursor: pointer; color: var(--ivory-dim); font-size: 0.92rem; font-family: var(--font-body); transition: all 0.15s; line-height: 1.5; } .symptom-btn:hover { border-color: var(--gold); color: var(--ivory); background: rgba(201,163,90,0.06); } .diagnosis { background: rgba(109,184,122,0.08); border: 1px solid rgba(109,184,122,0.25); border-radius: var(--radius-md); padding: 2rem; display: none; } .diagnosis.visible { display: block; } .diagnosis h3 { color: #6DB87A; margin-bottom: 0.5rem; } .diagnosis__cause { font-size: 0.88rem; color: var(--ivory-muted); margin-bottom: 1.25rem; } .diagnosis__steps { font-size: 0.92rem; color: var(--ivory-dim); line-height: 1.75; } .diagnosis__steps strong { color: var(--ivory); } .diagnosis__back { margin-top: 1.5rem; font-size: 0.85rem; color: var(--gold); cursor: pointer; background: none; border: none; padding: 0; font-family: var(--font-body); font-weight: 600; transition: color 0.15s; } .diagnosis__back:hover { color: var(--gold-warm); } /* Photo generator canvas */ .canvas-stage { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: #111; display: flex; align-items: center; justify-content: center; min-height: 300px; margin-bottom: 1.5rem; } .canvas-stage canvas { max-width: 100%; display: block; border-radius: var(--radius-md); } .canvas-controls { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .canvas-controls label { font-size: 0.85rem; color: var(--ivory-dim); } .canvas-controls select.form-input { max-width: 220px; } .canvas-placeholder { color: var(--ivory-muted); font-size: 0.95rem; text-align: center; padding: 3rem 1.5rem; } .canvas-placeholder .upload-icon { font-size: 3rem; margin-bottom: 1rem; } /* Dupe finder cards */ .dupe-result { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.5rem; } .dupe-col { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.5rem; } .dupe-col__label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.75rem; } .dupe-col--original .dupe-col__label { color: var(--ivory-muted); } .dupe-col--dupe .dupe-col__label { color: var(--gold); } .dupe-col__product { font-family: var(--font-display); font-size: 1.05rem; color: var(--ivory); margin-bottom: 0.5rem; } .dupe-col__price { font-size: 0.9rem; color: var(--terra); font-weight: 600; margin-bottom: 0.75rem; } .dupe-col__why { font-size: 0.84rem; color: var(--ivory-dim); line-height: 1.65; } .dupe-savings { background: rgba(201,163,90,0.1); border: 1px solid rgba(201,163,90,0.2); border-radius: var(--radius-pill); padding: 0.6rem 1.25rem; font-size: 0.85rem; color: var(--gold); font-weight: 600; text-align: center; margin-top: 1rem; } @media (max-width: 600px) { .dupe-result { grid-template-columns: 1fr; } } /* Protective style calendar */ .style-entries { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; } .style-entry { background: rgba(255,255,255,0.03); border-left: 3px solid var(--gold); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 1rem 1.5rem; display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; align-items: start; } .style-entry__name { font-weight: 600; color: var(--ivory); font-size: 0.95rem; margin-bottom: 0.25rem; } .style-entry__dates { font-size: 0.8rem; color: var(--ivory-muted); } .style-entry__status { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.2rem 0.65rem; border-radius: var(--radius-pill); } .style-entry__status--active { background: rgba(109,184,122,0.15); color: #6DB87A; } .style-entry__status--done { background: rgba(201,163,90,0.12); color: var(--gold); } .style-entry__status--overdue { background: rgba(204,105,64,0.15); color: var(--terra); } /* Curl twin profiles */ .curl-twin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 1.5rem; } .curl-twin-card { background: var(--bg-mid); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.75rem; text-align: center; transition: border-color 0.2s, transform 0.2s; } .curl-twin-card:hover { border-color: var(--border-hover); transform: translateY(-3px); } .curl-twin-card__avatar { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-mid) 100%); border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 1rem; } .curl-twin-card__name { font-family: var(--font-display); font-size: 1rem; color: var(--ivory); margin-bottom: 0.3rem; } .curl-twin-card__type { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); margin-bottom: 0.75rem; } .curl-twin-card p { font-size: 0.84rem; margin-bottom: 1.25rem; } @media (max-width: 700px) { .curl-twin-grid { grid-template-columns: 1fr; } } /* Big chop timer */ .journey-stage { background: linear-gradient(135deg, rgba(201,163,90,0.08) 0%, transparent 100%); border: 1px solid rgba(201,163,90,0.2); border-radius: var(--radius-lg); padding: 2.5rem 2rem; text-align: center; margin: 1.5rem 0; } .journey-stage__number { font-family: var(--font-display); font-size: 4rem; font-weight: 700; color: var(--gold); line-height: 1; margin-bottom: 0.25rem; } .journey-stage__unit { font-size: 0.9rem; color: var(--ivory-muted); margin-bottom: 1.25rem; } .journey-stage__title { font-family: var(--font-display); font-size: 1.3rem; color: var(--ivory); margin-bottom: 0.75rem; } .journey-stage p { font-size: 0.9rem; max-width: 460px; margin: 0 auto; } .journey-milestones { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; margin-top: 1.5rem; } .journey-milestone { padding: 0.5rem 1rem; border-radius: var(--radius-pill); font-size: 0.8rem; font-weight: 600; } .journey-milestone.reached { background: rgba(201,163,90,0.15); color: var(--gold); border: 1px solid rgba(201,163,90,0.3); } .journey-milestone.future { background: rgba(255,255,255,0.04); color: var(--ivory-muted); border: 1px solid var(--border); } /* Routine card / print */ .routine-card { background: var(--bg-mid); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2.5rem 2rem; max-width: 640px; margin: 0 auto; } .routine-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); } .routine-card__logo { font-family: var(--font-display); font-size: 1.2rem; color: var(--ivory); } .routine-card__logo span { color: var(--gold); } .routine-card__profile-tag { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(201,163,90,0.12); color: var(--gold); padding: 0.3rem 0.75rem; border-radius: var(--radius-pill); } .routine-section { margin-bottom: 1.5rem; } .routine-section h4 { color: var(--gold); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.75rem; font-family: var(--font-body); font-weight: 600; } .routine-section ol { padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; } .routine-section li { font-size: 0.9rem; color: var(--ivory-dim); } .routine-section li strong { color: var(--ivory); } @media print { .nav, .footer, .btn, .tool-card, .page-hero, .breadcrumb, .section { display: none !important; } .routine-card { background: white; border: none; color: #1a0b14; border-radius: 0; padding: 0; max-width: 100%; } .routine-card h4 { color: #c1813e; } .routine-card__logo { color: #1a0b14; } .routine-card p, .routine-card li { color: #3d1f2d; } body { background: white; } #routine-print-target { display: block !important; } } /* Product shelf */ .shelf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; } .shelf-item { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.25rem; position: relative; } .shelf-item__cat { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); margin-bottom: 0.4rem; } .shelf-item__name { font-size: 0.92rem; color: var(--ivory); font-weight: 500; margin-bottom: 0.25rem; } .shelf-item__rating { font-size: 0.82rem; color: var(--ivory-muted); } .shelf-item__del { position: absolute; top: 0.75rem; right: 0.75rem; background: none; border: none; color: var(--ivory-muted); cursor: pointer; font-size: 0.9rem; padding: 0.1rem; transition: color 0.15s; } .shelf-item__del:hover { color: var(--terra); } @media (max-width: 600px) { .shelf-grid { grid-template-columns: 1fr 1fr; } } /* Weather feature */ .weather-card { background: linear-gradient(160deg, var(--bg-mid) 0%, var(--bg-dark) 100%); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2.5rem 2rem; text-align: center; max-width: 580px; margin: 0 auto; } .weather-icon { font-size: 4rem; margin-bottom: 0.75rem; } .weather-location { font-size: 0.82rem; color: var(--ivory-muted); margin-bottom: 0.25rem; } .weather-condition { font-family: var(--font-display); font-size: 1.5rem; color: var(--ivory); margin-bottom: 0.5rem; } .weather-humidity { font-size: 1rem; color: var(--gold); font-weight: 600; margin-bottom: 2rem; } .weather-advice { background: rgba(255,255,255,0.04); border-radius: var(--radius-md); padding: 1.5rem; text-align: left; } .weather-advice h4 { font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.75rem; font-family: var(--font-body); font-weight: 600; } .weather-advice p { font-size: 0.9rem; line-height: 1.7; } .weather-tips { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; } .weather-tip { font-size: 0.88rem; color: var(--ivory-dim); display: flex; gap: 0.6rem; align-items: flex-start; line-height: 1.5; } .weather-tip::before { content: '•'; color: var(--gold); flex-shrink: 0; } /* ============================================================ BLOG & ARTICLES ============================================================ */ .blog-header { padding: 120px 1.5rem 3rem; background: var(--bg-deep); position: relative; overflow: hidden; } .blog-header::before { content: ''; position: absolute; top: -10%; right: -5%; width: 500px; height: 400px; background: radial-gradient(circle, rgba(201,163,90,0.06) 0%, transparent 70%); pointer-events: none; } .blog-header h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 0.75rem; } .blog-header p { max-width: 540px; font-size: 1.05rem; } .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .blog-card { background: var(--bg-mid); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: transform 0.2s, border-color 0.2s; } .blog-card:hover { transform: translateY(-4px); border-color: var(--border-hover); } .blog-card__img { width: 100%; aspect-ratio: 16/9; background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-mid) 100%); display: flex; align-items: center; justify-content: center; font-size: 3rem; border-bottom: 1px solid var(--border); } .blog-card__body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; } .blog-card__cat { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.6rem; } .blog-card__title { font-family: var(--font-display); font-size: 1.1rem; color: var(--ivory); margin-bottom: 0.6rem; line-height: 1.3; } .blog-card__excerpt { font-size: 0.86rem; color: var(--ivory-dim); line-height: 1.6; margin-bottom: 1.25rem; flex: 1; } .blog-card__meta { font-size: 0.76rem; color: var(--ivory-muted); margin-top: auto; } @media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .blog-grid { grid-template-columns: 1fr; } } /* Article layout */ .article-wrap { max-width: 720px; margin: 0 auto; padding: 0 1.5rem; } .article-header { padding: 120px 1.5rem 3rem; background: var(--bg-deep); position: relative; overflow: hidden; } .article-header::before { content: ''; position: absolute; top: -20%; left: -5%; width: 600px; height: 400px; background: radial-gradient(circle, rgba(201,163,90,0.05) 0%, transparent 70%); pointer-events: none; } .article-header__inner { max-width: 760px; margin: 0 auto; padding: 0 1.5rem; } .article-meta { font-size: 0.78rem; color: var(--ivory-muted); margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .article-meta .cat-tag { background: rgba(201,163,90,0.12); color: var(--gold); padding: 0.2rem 0.65rem; border-radius: var(--radius-pill); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.68rem; } .article-header h1 { font-size: clamp(1.9rem, 3.5vw, 2.8rem); margin-bottom: 1rem; } .article-header .lead { font-size: 1.12rem; color: var(--ivory-dim); line-height: 1.7; max-width: 680px; } .article-body { padding: var(--space-md) 0 var(--space-xl); } .article-body h2 { font-size: clamp(1.4rem, 2.5vw, 1.8rem); margin: 2.5rem 0 1rem; color: var(--ivory); } .article-body p { font-size: 1rem; line-height: 1.82; color: var(--ivory-dim); margin-bottom: 1.3rem; } .article-body strong { color: var(--ivory); } .article-body ul, .article-body ol { padding-left: 1.5rem; margin-bottom: 1.5rem; } .article-body li { font-size: 1rem; color: var(--ivory-dim); line-height: 1.75; margin-bottom: 0.4rem; } .article-body blockquote { border-left: 3px solid var(--gold); padding: 0.75rem 1.25rem; margin: 1.5rem 0; background: rgba(201,163,90,0.05); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .article-body blockquote p { color: var(--ivory); font-style: italic; margin: 0; } .article-cta { background: linear-gradient(135deg, var(--bg-mid) 0%, var(--bg-dark) 100%); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2.5rem 2rem; text-align: center; margin: 3rem 0 var(--space-xl); } .article-cta p { font-size: 0.95rem; max-width: 480px; margin: 0.5rem auto 1.5rem; } .article-nav { display: flex; justify-content: space-between; gap: 1rem; padding: var(--space-md) 0; border-top: 1px solid var(--border); } .article-nav a { font-size: 0.88rem; color: var(--gold); font-weight: 500; max-width: 220px; line-height: 1.5; } .article-nav a:hover { text-decoration: underline; } .article-nav__prev::before { content: '← '; } .article-nav__next::after { content: ' →'; } /* Brand mark in nav / footer wordmark (added 2026-07-07) */ .nav__logo-mark { display: inline-block; height: 1.5em; width: auto; vertical-align: -0.4em; margin-right: 0.45rem; }