/* ========================================================================== Birthday Hub premium section - design tokens + global styles + component styles, ported from the Astro build (deleted) into one plain stylesheet. Loaded only on Birthday Hub pages via ~/bundles/premium-css - the live site's own css/style.css is untouched. ========================================================================== */ :root { --color-primary: #ef5f7a; --color-primary-dark: #d7405d; --color-primary-light: #ffe3e8; --color-secondary: #7c5cd6; --color-secondary-dark: #5f3fb8; --color-secondary-light: #ede6fb; --color-accent: #f5b942; --color-accent-dark: #d99a1f; --color-accent-light: #fef3da; --color-bg: #ffffff; --color-bg-pastel: #fff9f5; --color-bg-pastel-alt: #f8f5ff; --color-surface: #ffffff; --color-border: #f0e6e6; --color-text: #2b2530; --color-text-muted: #6b6270; --color-text-inverse: #ffffff; --gradient-hero: linear-gradient(135deg, #fff1f3 0%, #fdf3ff 45%, #fff8e8 100%); --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); --shadow-sm: 0 2px 8px rgba(120, 60, 90, 0.08); --shadow-md: 0 8px 24px rgba(120, 60, 90, 0.12); --shadow-lg: 0 16px 40px rgba(120, 60, 90, 0.16); --shadow-focus: 0 0 0 3px rgba(124, 92, 214, 0.35); --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --font-display: 'Fraunces', Georgia, serif; --font-body: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --container-width: 1200px; --header-height: 72px; --transition-fast: 150ms ease; --transition-base: 220ms ease; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --color-bg: #1c1720; --color-bg-pastel: #221a26; --color-bg-pastel-alt: #1f1a2b; --color-surface: #271f2c; --color-border: #3a2f3e; --color-text: #f5f0f2; --color-text-muted: #b9aeb8; --color-primary-light: #3c2530; --color-secondary-light: #2b2440; --color-accent-light: #3a3320; --gradient-hero: linear-gradient(135deg, #241a24 0%, #241d2e 45%, #26221a 100%); } } :root[data-theme='dark'] { --color-bg: #1c1720; --color-bg-pastel: #221a26; --color-bg-pastel-alt: #1f1a2b; --color-surface: #271f2c; --color-border: #3a2f3e; --color-text: #f5f0f2; --color-text-muted: #b9aeb8; --color-primary-light: #3c2530; --color-secondary-light: #2b2440; --color-accent-light: #3a3320; --gradient-hero: linear-gradient(135deg, #241a24 0%, #241d2e 45%, #26221a 100%); } /* ---- reset / base ------------------------------------------------------ */ /* This stylesheet is only ever loaded by _premiumLayout.cshtml, which is a fully separate / document from the live site's _quoteshappy.cshtml layout - the two are never rendered on the same page, so no scoping prefix is needed here (and one would only add a way to silently break styling if a wrapper element were ever forgotten). */ *, *::before, *::after { box-sizing: border-box; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; } img, picture, svg, canvas, video { display: block; max-width: 100%; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.2; margin: 0 0 var(--space-3); font-weight: 600; color: var(--color-text); } h1 { font-size: clamp(2rem, 4vw, 3rem); } h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); } h3 { font-size: 1.3rem; } p { margin: 0 0 var(--space-4); color: var(--color-text); } a { color: var(--color-primary-dark); text-decoration-thickness: 1.5px; text-underline-offset: 2px; } button { font-family: inherit; } ul, ol { padding-left: 1.2em; } :focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); } .hub-container { width: 100%; max-width: var(--container-width); margin-inline: auto; padding-inline: var(--space-4); } @media (min-width: 768px) { .hub-container { padding-inline: var(--space-6); } } .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; } .hub-skip-link { position: absolute; top: -48px; left: var(--space-4); background: var(--color-primary); color: var(--color-text-inverse); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); z-index: 1000; transition: top var(--transition-fast); font-weight: 600; } .hub-skip-link:focus { top: var(--space-2); } .hub-section { padding-block: var(--space-8); } .hub-section--tight { padding-block: var(--space-6); } .section-heading { text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: var(--space-6); } .section-heading p { color: var(--color-text-muted); } .eyebrow { display: inline-block; font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-secondary-dark); margin-bottom: var(--space-2); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.85em 1.6em; border-radius: var(--radius-pill); font-weight: 600; font-size: 0.98rem; border: 2px solid transparent; cursor: pointer; text-decoration: none; min-height: 44px; transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); } .btn:hover { transform: translateY(-2px); } .btn-primary { background: var(--gradient-primary); color: var(--color-text-inverse); box-shadow: var(--shadow-sm); } .btn-primary:hover { box-shadow: var(--shadow-md); } .btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); } .btn-secondary:hover { border-color: var(--color-primary); } .btn-ghost { background: transparent; color: var(--color-primary-dark); padding-inline: 0.5em; } .chip { display: inline-flex; align-items: center; padding: 0.5em 1.1em; border-radius: var(--radius-pill); background: var(--color-surface); border: 1.5px solid var(--color-border); color: var(--color-text); font-size: 0.9rem; font-weight: 600; text-decoration: none; white-space: nowrap; min-height: 40px; transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast); } .chip:hover { border-color: var(--color-primary); background: var(--color-primary-light); transform: translateY(-1px); } .chip[aria-pressed='true'], .chip.is-active { background: var(--gradient-primary); border-color: transparent; color: var(--color-text-inverse); } .hub-card { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); } .hub-grid { display: grid; gap: var(--space-5); } .hub-grid--cards { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); } .breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--space-1); font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: var(--space-5); list-style: none; padding: 0; } .breadcrumbs li { display: flex; align-items: center; gap: var(--space-1); } .breadcrumbs a { color: var(--color-text-muted); text-decoration: none; } .breadcrumbs a:hover { color: var(--color-primary-dark); } .breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: var(--space-1); color: var(--color-border); } /* ---- tool-builder shared UI (Image Generator, Card Builder) ------------ */ .tool-builder { display: grid; gap: var(--space-6); } @media (min-width: 900px) { .tool-builder { grid-template-columns: 1fr 1fr; align-items: start; } } .field { margin-bottom: var(--space-4); } .field label, .field__label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: var(--space-2); color: var(--color-text-muted); } .field textarea, .field input[type='text'] { width: 100%; padding: 0.7em 1em; border-radius: var(--radius-sm); border: 1.5px solid var(--color-border); font-family: inherit; font-size: 0.95rem; background: var(--color-surface); color: var(--color-text); } .field input[type='range'] { width: 100%; } .field input[type='color'] { width: 100%; height: 44px; border-radius: var(--radius-sm); border: 1.5px solid var(--color-border); padding: 2px; background: var(--color-surface); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .swatch-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); } .swatch-btn { padding: 0.5em 0.9em; border-radius: var(--radius-pill); border: 1.5px solid var(--color-border); background: var(--color-surface); font-size: 0.85rem; font-weight: 600; cursor: pointer; min-height: 40px; } .swatch-btn[aria-pressed='true'] { background: var(--gradient-primary); color: #fff; border-color: transparent; } .segmented { display: flex; border: 1.5px solid var(--color-border); border-radius: var(--radius-pill); overflow: hidden; } .segmented button { flex: 1; padding: 0.6em 0.4em; border: none; background: var(--color-surface); font-size: 0.82rem; font-weight: 600; cursor: pointer; min-height: 40px; } .segmented button[aria-pressed='true'] { background: var(--color-primary); color: #fff; } .tool-builder__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); } .tool-builder__preview { position: sticky; top: calc(var(--header-height) + var(--space-4)); } .tool-canvas { width: 100%; max-width: 420px; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); margin-inline: auto; display: block; } .tool-canvas--square { aspect-ratio: 1 / 1; } .tool-canvas--portrait { aspect-ratio: 4 / 5; } /* ---- header ------------------------------------------------------------ */ .hub-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--color-bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border); } .hub-header__inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-height); gap: var(--space-4); } .hub-logo { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--color-text); text-decoration: none; white-space: nowrap; } .hub-logo svg { color: var(--color-primary); } .hub-nav { display: none; } .hub-nav ul { display: flex; list-style: none; margin: 0; padding: 0; gap: var(--space-5); } .hub-nav a { text-decoration: none; color: var(--color-text-muted); font-weight: 600; font-size: 0.92rem; padding: var(--space-2) 0; border-bottom: 2px solid transparent; } .hub-nav a:hover, .hub-nav a[aria-current='page'] { color: var(--color-primary-dark); border-color: var(--color-primary); } @media (min-width: 900px) { .hub-nav { display: block; } .hub-menu-btn { display: none; } } .hub-header__actions { display: flex; align-items: center; gap: var(--space-2); } .hub-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-pill); border: none; background: transparent; color: var(--color-text); cursor: pointer; text-decoration: none; } .hub-icon-btn:hover { background: var(--color-primary-light); color: var(--color-primary-dark); } .hub-badge { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: var(--radius-pill); background: var(--color-primary); color: #fff; font-size: 0.65rem; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; } .hub-mobile-nav { border: none; padding: 0; margin: 0; inset: 0; width: min(340px, 85vw); height: 100vh; max-height: 100vh; margin-left: auto; background: var(--color-bg); box-shadow: var(--shadow-lg); } .hub-mobile-nav::backdrop { background: rgba(20, 10, 20, 0.4); } .hub-mobile-nav__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4); border-bottom: 1px solid var(--color-border); } .hub-mobile-nav nav ul { list-style: none; margin: 0; padding: var(--space-2); } .hub-mobile-nav nav a { display: block; padding: var(--space-3); border-radius: var(--radius-sm); text-decoration: none; color: var(--color-text); font-weight: 600; min-height: 44px; } .hub-mobile-nav nav a:hover { background: var(--color-primary-light); } /* ---- search overlay ------------------------------------------------------ */ .search-overlay { border: none; padding: 0; margin: 0 auto; top: 0; width: min(720px, 100vw); max-width: 100vw; height: 100vh; max-height: 100vh; background: var(--color-bg); } .search-overlay::backdrop { background: rgba(20, 10, 20, 0.5); } .search-overlay__header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--color-border); } .search-overlay__form { flex: 1; display: flex; align-items: center; gap: var(--space-2); background: var(--color-bg-pastel); border-radius: var(--radius-pill); padding: 0.6em 1.1em; } .search-overlay__icon { color: var(--color-text-muted); display: flex; } .search-overlay__form input { flex: 1; border: none; background: transparent; font-size: 1rem; outline: none; color: var(--color-text); min-height: 32px; } .search-overlay__close { border: none; background: transparent; color: var(--color-text); width: 44px; height: 44px; border-radius: var(--radius-pill); cursor: pointer; } .search-overlay__close:hover { background: var(--color-primary-light); } .search-overlay__body { padding: var(--space-5); overflow-y: auto; max-height: calc(100vh - 80px); } .search-overlay__hint, .search-overlay__empty { color: var(--color-text-muted); text-align: center; padding: var(--space-6) 0; } .search-overlay__results { display: grid; gap: var(--space-4); } .hero__search { display: flex; align-items: center; gap: var(--space-2); background: var(--color-surface); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5); box-shadow: var(--shadow-md); max-width: 640px; margin: 0 auto var(--space-5); } .hero__search input { flex: 1; border: none; outline: none; background: transparent; font-size: 1rem; min-height: 44px; color: var(--color-text); } /* ---- footer -------------------------------------------------------------- */ .hub-footer { background: var(--color-bg-pastel-alt); border-top: 1px solid var(--color-border); padding-top: var(--space-8); } .hub-footer__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } @media (min-width: 768px) { .hub-footer__grid { grid-template-columns: repeat(4, 1fr); } } .hub-footer__col h3 { font-family: var(--font-body); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-secondary-dark); margin-bottom: var(--space-3); } .hub-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .hub-footer__col a { color: var(--color-text-muted); text-decoration: none; font-size: 0.92rem; } .hub-footer__col a:hover { color: var(--color-primary-dark); } .hub-footer__bottom { margin-top: var(--space-7); padding-block: var(--space-5); border-top: 1px solid var(--color-border); text-align: center; color: var(--color-text-muted); font-size: 0.85rem; } .hub-footer__bottom p { margin: 0; } /* ---- quote card ----------------------------------------------------------- */ .quote-card { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); transition: transform var(--transition-base), box-shadow var(--transition-base); position: relative; } .quote-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .quote-card__link { text-decoration: none; color: inherit; } .quote-card__text { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.5; color: var(--color-text); margin: 0; } .quote-card__text::before { content: '\201C'; } .quote-card__text::after { content: '\201D'; } .quote-card__author { margin: 0; font-size: 0.85rem; color: var(--color-text-muted); font-weight: 600; } .quote-card__actions { display: flex; align-items: center; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); border-top: 1px solid var(--color-border); } .quote-card__btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-pill); border: none; background: transparent; color: var(--color-text-muted); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } .quote-card__btn:hover { background: var(--color-primary-light); color: var(--color-primary-dark); } .quote-card__btn[aria-pressed='true'] { color: var(--color-primary); } .quote-card__btn .icon-filled { display: none; } .quote-card__btn[aria-pressed='true'] .icon-outline { display: none; } .quote-card__btn[aria-pressed='true'] .icon-filled { display: block; } .quote-card__share-wrap { position: relative; } /* ---- share menu ------------------------------------------------------------ */ .share-menu { position: absolute; right: 0; bottom: calc(100% + 8px); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--space-2); display: flex; flex-direction: column; gap: 2px; min-width: 180px; z-index: 20; } .share-menu__item { display: flex; align-items: center; gap: var(--space-2); padding: 0.6em 0.8em; border-radius: var(--radius-sm); color: var(--color-text); text-decoration: none; font-size: 0.9rem; font-weight: 600; min-height: 40px; } .share-menu__item:hover { background: var(--color-primary-light); } /* ---- toast ------------------------------------------------------------------ */ .hub-toast { position: fixed; left: 50%; bottom: var(--space-6); transform: translate(-50%, 20px); background: var(--color-text); color: var(--color-text-inverse); padding: 0.85em 1.4em; border-radius: var(--radius-pill); font-weight: 600; font-size: 0.95rem; box-shadow: var(--shadow-lg); z-index: 2000; opacity: 0; pointer-events: none; transition: opacity var(--transition-base), transform var(--transition-base); max-width: calc(100vw - var(--space-6)); text-align: center; } .hub-toast.is-visible { opacity: 1; transform: translate(-50%, 0); } /* ---- category hero / faq --------------------------------------------------- */ .category-hero { max-width: 720px; margin: 0 auto var(--space-6); text-align: center; } .category-hero p { color: var(--color-text-muted); font-size: 1.05rem; } .faq__list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-3); } .faq__item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); } .faq__item summary { cursor: pointer; font-weight: 700; font-family: var(--font-display); font-size: 1.05rem; list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 44px; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: '+'; font-size: 1.4rem; color: var(--color-primary); margin-left: var(--space-3); transition: transform var(--transition-fast); } .faq__item[open] summary::after { transform: rotate(45deg); } .faq__item p { margin: var(--space-3) 0 0; color: var(--color-text-muted); } /* ---- homepage (Index) ------------------------------------------------------- */ .hero { background: var(--gradient-hero); padding-block: var(--space-9) var(--space-8); } .hero__inner { max-width: 760px; text-align: center; margin-inline: auto; } .hero__subhead { font-size: 1.15rem; color: var(--color-text-muted); margin-bottom: var(--space-6); } .hero__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-6); } .hero__cta { margin-top: var(--space-2); } .popular-grid, .facet-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .popular-card, .facet-chip { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-decoration: none; color: var(--color-text); font-weight: 600; transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); } .facet-chip { justify-content: center; padding: var(--space-3); border-radius: var(--radius-pill); background: var(--color-bg-pastel); } .popular-card:hover, .facet-chip:hover { transform: translateY(-3px); border-color: var(--color-primary); box-shadow: var(--shadow-sm); } .popular-card__icon, .category-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--color-primary-light); color: var(--color-primary-dark); flex-shrink: 0; } .qod-wrap { max-width: 560px; margin: 0 auto; } .tool-ctas { background: var(--color-bg-pastel-alt); } .tool-ctas__grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .tool-cta { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-6); text-align: center; text-decoration: none; color: var(--color-text); box-shadow: var(--shadow-sm); transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .tool-cta:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .tool-cta svg { color: var(--color-primary); margin-bottom: var(--space-3); } .tool-cta p { color: var(--color-text-muted); margin: 0; } /* ---- category directory (QuotesHub) ---------------------------------------- */ .category-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .category-card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-decoration: none; color: var(--color-text); font-weight: 600; transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); } .category-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--color-primary); } /* ---- filter bar ------------------------------------------------------------- */ .filter-bar { margin-bottom: var(--space-6); padding: var(--space-4); background: var(--color-bg-pastel); border-radius: var(--radius-lg); } .filter-bar__group + .filter-bar__group { margin-top: var(--space-4); } .filter-bar__label { display: block; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: var(--space-2); } .filter-bar__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-1); } .filter-bar__count { margin: var(--space-3) 0 0; font-size: 0.85rem; color: var(--color-text-muted); } .quote-grid__empty { text-align: center; color: var(--color-text-muted); padding: var(--space-7) var(--space-4); background: var(--color-bg-pastel); border-radius: var(--radius-lg); } /* ---- personalizer ------------------------------------------------------------ */ .personalizer__input-row { max-width: 360px; margin: 0 auto var(--space-6); } .personalizer__input-row input { width: 100%; padding: 0.8em 1.1em; border-radius: var(--radius-pill); border: 1.5px solid var(--color-border); font-size: 1rem; text-align: center; } /* ---- favorites ---------------------------------------------------------------- */ .favorites-empty { text-align: center; padding: var(--space-8) var(--space-4); background: var(--color-bg-pastel); border-radius: var(--radius-lg); } .favorites-empty p { color: var(--color-text-muted); margin-bottom: var(--space-4); } /* ---- reminders ------------------------------------------------------------------ */ .reminder-form { padding: var(--space-5); margin-bottom: var(--space-6); } .reminder-form select { width: 100%; padding: 0.7em 1em; border-radius: var(--radius-sm); border: 1.5px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-size: 0.95rem; } .reminder-form input[type='date'] { width: 100%; padding: 0.65em 1em; border-radius: var(--radius-sm); border: 1.5px solid var(--color-border); font-size: 0.95rem; } .reminders-empty { text-align: center; padding: var(--space-6); color: var(--color-text-muted); background: var(--color-bg-pastel); border-radius: var(--radius-lg); } .reminder-list { display: flex; flex-direction: column; gap: var(--space-4); } .reminder-item { padding: var(--space-5); } .reminder-item__banner { display: inline-block; background: var(--color-accent-light); color: var(--color-accent-dark); font-weight: 700; font-size: 0.82rem; padding: 0.3em 0.8em; border-radius: var(--radius-pill); margin-bottom: var(--space-2); } .reminder-item h3 { margin: 0 0 var(--space-1); } .reminder-item__meta { color: var(--color-text-muted); font-size: 0.9rem; margin: 0; } .reminder-item__countdown { font-weight: 600; color: var(--color-primary-dark); margin: var(--space-2) 0 0; } .reminder-item__suggestions { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2); } .reminder-item__suggestions a { font-size: 0.85rem; padding: 0.4em 0.9em; border-radius: var(--radius-pill); background: var(--color-bg-pastel); text-decoration: none; color: var(--color-text); } .reminder-item__actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); } .reminders-page { max-width: 760px; } .notice-banner { background: var(--color-accent-light); color: var(--color-text); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-6); font-size: 0.92rem; line-height: 1.6; } /* ---- search page / legal pages --------------------------------------------------- */ .search-page { max-width: 900px; } .search-page__results { margin-top: var(--space-6); } /* ---- services dashboard --------------------------------------------------------- */ .service-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .service-card { padding: var(--space-6); display: flex; flex-direction: column; align-items: flex-start; text-align: left; transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .service-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--radius-pill); background: var(--color-primary-light); color: var(--color-primary-dark); margin-bottom: var(--space-4); flex-shrink: 0; } .service-card h3 { margin-bottom: var(--space-2); } .service-card p { color: var(--color-text-muted); font-size: 0.92rem; } .service-card__stat { font-weight: 700; font-size: 0.85rem; color: var(--color-primary-dark); background: var(--color-primary-light); padding: 0.3em 0.8em; border-radius: var(--radius-pill); margin-bottom: var(--space-4) !important; } .service-card__link { margin-top: auto; align-self: stretch; text-align: center; } .hub-legal-page { max-width: 720px; } .hub-legal-page h2 { margin-top: var(--space-6); }