/* ============================================================ brand.css — Single source of truth for Memory Booked brand tokens, shared button styles, and the brand logo. Loaded LAST in on every public page so it overrides any page-level :root or .btn-* declarations and keeps colors and buttons consistent across the site. To change a brand color, edit it here once. Note: legacy class names (.collabooks-brand, .brand-collab, .brand-ooks, .cb-empty, etc.) reflect the previous "CollaBooks" product name and are intentionally left as internal identifiers so existing rules don't break. User-facing copy and assets all use "Memory Booked" — the new brand mark lives at /img/logo-memorybooked.png, with a square 'MB' variant at /img/logo-mb.png and a horizontal lockup at /img/logo-horizontal.png. ============================================================ ── BREAKPOINT SYSTEM ───────────────────────────────────── Use ONLY these breakpoints when adding new media queries. CSS doesn't allow CSS variables inside @media() — these are documentation, not values. Keep the literal numbers in sync with this list when you write @media rules. 600px "sm" Phone ↔ tablet boundary. ≤600 → single-column layouts, tightened padding, hidden side panels, etc. >600 → tablet+ layouts kick in. 900px "md" Tablet ↔ desktop boundary. ≤900 → stack columns, hide preview rails, reduce hero card sizes, etc. >900 → full multi-column desktop layout. 768px "nav" Hamburger threshold ONLY. Used by shared-nav.js to switch between centered desktop nav links and the mobile drawer. Don't reuse this number for layout density — pick 600 or 900 for that. Everything else (520, 640, 700, 760, 800, 880…) is legacy and should be migrated to one of the four numbers above. The 480px tier is reserved for genuine "ultra-narrow phone" tweaks; reach for it only when the 600px tier doesn't fit small phones. ────────────────────────────────────────────────────────── */ /* ── Lovelo brand font ──────────────────────────────────── Originally used by the legacy "COLLABOOKS" wordmark. Kept loaded so any pages still rendering that wordmark inline don't fall back to a serif. The current brand uses the SVG logo at /img/logo-memorybooked.png instead. */ @font-face { font-family: 'Lovelo LineBold'; src: url('fonts/Lovelo-LineBold.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Lovelo Black'; src: url('fonts/Lovelo-Black.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Lovelo LineLight'; src: url('fonts/Lovelo-LineLight.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } :root { /* ── Surfaces & text ─────────────────────────────────────── */ --white: #FFFFFF; --cream: #F4F7FB; /* page background */ --charcoal: #2C3E50; /* primary text + dark CTAs */ --charcoal-deep: #1E2D3D; /* CTA hover, deepest ink */ --mid: #4F6877; /* secondary text — passes WCAG AA on cream (5.46:1) */ --light: #6B8DA4; /* tertiary text — passes AA for large text on cream (3.27:1) */ --border: #D6E4EE; /* dividers, hairlines */ /* ── Brand accent (periwinkle blue) ─────────────────────── */ --accent: #B0C5E8; --accent-light: #D0E6F9; --accent-deep: #1E5BAD; /* ── Brand accent (warm terracotta — used for Gift CTAs) ── */ --accent-warm: #F5945C; --accent-warm-light: #F5E6D8; --accent-warm-deep: #D27645; /* ── Status colors ─────────────────────────────────────── */ --success: #4A7C59; --success-light: #EAF3EE; --danger: #B03A2E; --danger-light: #FDEDEB; --warn: #854F0B; --warn-light: #FEF3CD; --info: #185FA5; --info-light: #E6F1FB; /* ── Memory Booked brand-mark colors ────────────────────── The logo PNGs in /img/ have been recolored to match these tokens exactly. Aliased to the same hex values as --accent / --accent-warm / --charcoal so anywhere on the site that needs to match the logo (e.g. an accent border that should pick up the periwinkle of the book outline) can use either name interchangeably. */ --logo-blue: #B0C5E8; /* book outline — same as --accent */ --logo-orange: #BE6D34; /* bookmark — same as --accent-warm */ --logo-charcoal: #2C3E50; /* letters — same as --charcoal */ /* ── Legacy wordmark colors (retained for any pages still rendering the inline COLLABOOKS span; new code should use the SVG logo instead) ────────────────────────────────────── */ --logo-collab: #6A798E; --logo-ooks: #AEC6E9; /* ── Layout ────────────────────────────────────────────── */ --nav-w: 260px; } /* ============================================================ Brand mark (logo image) ───────────────────────────────────────────────────────────── .brand-mark renders the Memory Booked logo at a sensible default size and lets parent contexts override how it scales. The legacy wordmark was replaced site-wide by an tag, so any container that previously sized the wordmark via font-size now sizes the image via height (or width) instead. The canonical nav and hero treatment uses the wide one-line lockup at /img/logo-horizontal.png. Because that lockup is ~5:1, sizing by HEIGHT alone on a small viewport overflows horizontally, so the hero rule sizes by WIDTH and lets height go auto. Nav and footer use height-based sizing because their bar heights are fixed and the wide aspect just produces a sensible nav-logo width. /img/logo-memorybooked.png (stacked) is still used in og:image and a few footer/copyright spots; /img/logo-mb.png is the square icon used for favicons. ============================================================ */ .brand-mark { display: inline-block; height: 32px; width: auto; vertical-align: middle; } /* Navbar lockup is doubled (64px) so the inline Memory Booked mark reads cleanly in the sticky header. The mark contains built-in whitespace around the book frame, so even at 64px it fits inside the 64px nav without feeling crammed. */ .nav-logo .brand-mark, .tb-logo .brand-mark { height: 54px; width: auto; } .footer-brand .logo .brand-mark { height: 36px; width: auto; } /* Hero: uses the stacked /img/logo-memorybooked.png at all viewport sizes above the smallest tier, so we size by HEIGHT throughout and let width go auto. The in index.html swaps to the tiny MB icon at ≤480px; the matching media query keeps that variant at a sensible compact size. */ .hero-brand-mark .brand-mark { height: clamp(160px, 22vw, 240px); width: auto; max-width: 80vw; } @media (max-width: 600px) { /* Same stacked image, but trimmed for phone-tier hero blocks. */ .hero-brand-mark .brand-mark { height: clamp(120px, 22vw, 180px); max-width: 70vw; } } @media (max-width: 480px) { /* Tiny MB icon /img/logo-mb.png — aspect ~5:4, more compact still */ .hero-brand-mark .brand-mark { height: clamp(88px, 22vw, 120px); max-width: 60vw; } } /* wraps an — make sure the wrapper doesn't introduce its own block-level layout that breaks centering / inline alignment in nav and hero. */ picture.brand-mark { display: inline-block; line-height: 0; } picture.brand-mark .brand-mark { display: inline-block; } /* ============================================================ Buttons — unified system. Site-wide consistency lives here. ============================================================ */ /* Primary CTA: charcoal fill, white text. Highest emphasis. */ .btn-primary { display: inline-block; background: var(--charcoal); color: #fff; padding: 12px 26px; border-radius: 7px; font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; border: none; cursor: pointer; transition: background 0.15s; } .btn-primary:hover { background: var(--charcoal-deep); color: #fff; } .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; } /* Secondary CTA: outlined charcoal. Lower emphasis next to primary. */ .btn-secondary { display: inline-block; background: #fff; color: var(--charcoal); padding: 11px 24px; border-radius: 7px; font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; border: 1.5px solid var(--charcoal); cursor: pointer; transition: background 0.15s, color 0.15s; } .btn-secondary:hover { background: var(--charcoal); color: #fff; } /* Ghost: nearly invisible. Tertiary actions. */ .btn-ghost { display: inline-block; background: transparent; color: var(--mid); padding: 11px 24px; border-radius: 7px; font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; border: 1.5px solid var(--border); cursor: pointer; transition: border-color 0.15s, color 0.15s; } .btn-ghost:hover { border-color: var(--charcoal); color: var(--charcoal); } /* Accent: periwinkle fill. Used for select feature highlights. */ .btn-accent { display: inline-block; background: var(--accent); color: var(--charcoal); padding: 12px 26px; border-radius: 7px; font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.01em; text-decoration: none; border: none; cursor: pointer; transition: background 0.15s, color 0.15s; } .btn-accent:hover { background: var(--accent-deep); color: #fff; } /* Gift / donate CTA: warm terracotta fill. Reserved for the "Gift Your Page" / page-sponsorship action. */ .gift-btn, .donate-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--accent-warm); color: #fff; padding: 12px 26px; border-radius: 7px; font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; text-decoration: none; border: none; cursor: pointer; transition: background 0.15s; } .gift-btn:hover, .donate-btn:hover { background: var(--accent-warm-deep); color: #fff; } /* Nav pill: small charcoal CTA used in the sticky header. */ .nav-btn { display: inline-block; background: var(--charcoal); color: #fff; padding: 9px 20px; border-radius: 6px; font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif; font-size: 13px; font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: background 0.15s; } .nav-btn:hover { background: var(--charcoal-deep); color: #fff; } .nav-btn.outline { background: transparent; color: var(--charcoal); border: 1.5px solid var(--charcoal); } .nav-btn.outline:hover { background: var(--charcoal); color: #fff; } /* ============================================================ Loading state — pair with .is-loading on a button or input, or use inline next to text. ============================================================ */ .btn-spinner { display: inline-block; width: 14px; height: 14px; margin-right: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -2px; animation: cb-btn-spin 0.7s linear infinite; } @keyframes cb-btn-spin { to { transform: rotate(360deg); } } .is-loading { cursor: progress; opacity: 0.85; } .is-loading:disabled { opacity: 0.85; } /* keep it readable while disabled */ /* ============================================================ Empty states — friendly placeholder block for "no items yet" panes. Use .cb-empty as a wrapper around an icon, title, body, and an optional CTA. ============================================================ */ .cb-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 24px; border: 1px dashed var(--border); border-radius: 12px; background: var(--cream); color: var(--mid); } .cb-empty .cb-empty-icon { width: 56px; height: 56px; margin-bottom: 14px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--white); border: 1px solid var(--border); color: var(--accent-deep); } .cb-empty .cb-empty-icon svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .cb-empty .cb-empty-title { font-family: 'Playfair Display', Georgia, serif; font-size: 20px; color: var(--charcoal); margin: 0 0 6px; font-weight: 600; } .cb-empty .cb-empty-body { font-size: 14px; line-height: 1.55; color: var(--mid); margin: 0 0 18px; max-width: 380px; } .cb-empty .cb-empty-cta { margin-top: 6px; } /* ============================================================ Status pills — small inline label that signals state. Pair the base .status-pill with a state modifier (.is-approved, .is-pending, .is-denied, .is-neutral, .is-info). ============================================================ */ .status-pill { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.01em; padding: 2px 8px; border-radius: 10px; border: 1px solid transparent; white-space: nowrap; } .status-pill.is-approved { color: var(--success); background: var(--success-light); border-color: rgba(74,124,89,0.25); } .status-pill.is-pending { color: var(--warn); background: var(--warn-light); border-color: rgba(133,79,11,0.18); } .status-pill.is-denied { color: var(--danger); background: var(--danger-light); border-color: rgba(176,58,46,0.20); } .status-pill.is-info { color: var(--info); background: var(--info-light); border-color: rgba(24,95,165,0.18); } .status-pill.is-neutral { color: var(--mid); background: transparent; border-color: transparent; font-weight: 600; } /* Visually-hidden but readable by screen readers. Use this on headings or labels that we want present in the accessibility tree but not on screen. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Compact "View" link used next to status pills in card lists. */ .gp-card-view-link { font-size: 11px; color: var(--accent-deep); text-decoration: none; font-weight: 600; } .gp-card-view-link:hover { text-decoration: underline; } /* ============================================================ Focus visibility — applies a clear ring to anything keyboard- focusable WITHOUT polluting mouse-click states. :focus-visible only fires for keyboard/programmatic focus, so click users never see the ring on a button they just pressed. Ring uses --accent-deep (high-contrast brand blue) on a 2px outline with 3px of breathing room. Designed to be visible on both light (cream/white) and dark (charcoal) surfaces. ============================================================ */ :where(a, button, input, select, textarea, summary, [role="button"], [role="link"], [tabindex]):focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; border-radius: 4px; } /* On dark surfaces (e.g. nav buttons over the charcoal hero), use a lighter, brighter ring so it stands out against the dark backdrop. */ .hero-banner :focus-visible, .invite-left :focus-visible, [data-surface="dark"] :focus-visible { outline-color: var(--accent); } /* Form fields already get a brand-blue border on :focus from the page styles — pair it with a soft outer ring for keyboard users. */ input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 1px; border-radius: 6px; } /* ── Footer social links ────────────────────────────────── Canonical style for the Instagram / Facebook links in the footer-brand block. brand.css loads last, so this rule wins over the older per-page .footer-social declarations and keeps every page identical. Icons are inline SVG (same 1.5-stroke line style as icons.svg) so they render on pages that don't load the sprite. */ .footer-social { display: flex; gap: 10px; margin-top: 18px; } .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--white); color: var(--mid); text-decoration: none; transition: color .18s ease, border-color .18s ease, background-color .18s ease, transform .18s ease; } .footer-social a:hover, .footer-social a:focus-visible { color: var(--accent-deep); border-color: var(--accent); background: var(--accent-light); transform: translateY(-1px); } .footer-social svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } @media (prefers-reduced-motion: reduce) { .footer-social a { transition: none; } .footer-social a:hover { transform: none; } } /* Pinterest uses the official badge asset (converted from Pinterest's brand-kit EPS), so it's an rather than an inline line icon — the mark must not be redrawn or recolored. Sized to sit optically even with the 17px stroke icons beside it. */ .footer-social img { width: 18px; height: 18px; display: block; }