/* ============================================ Team2meet stylesheet Vanilla CSS, no build step required. Theme tokens preserved from the original React project so the look matches Figma. Theming model ------------- The site supports two orthogonal user preferences: 1. Light or dark mode, set via [data-theme="light"|"dark"] on . The "system" choice is implemented in JS by reading prefers-color-scheme and writing the resolved value. 2. An accent colour (the teal by default), set via [data-accent="..."] on . Each accent only changes the primary hue; surface neutrals stay the same so contrast remains correct. Both attributes are persisted to localStorage but only after the user has accepted the consent banner. A no-flash inline script in applies the saved values before the page paints. ============================================ */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap'); /* ---------- Default light theme ---------- */ :root, :root[data-theme="light"] { --bg-h: 0; --bg-s: 0%; --bg-l: 98%; --fg-h: 240; --fg-s: 10%; --fg-l: 3.9%; --card-l: 100%; --border-l: 90%; --muted-l: 95.9%; --background: hsl(var(--bg-h) var(--bg-s) var(--bg-l)); --foreground: hsl(var(--fg-h) var(--fg-s) var(--fg-l)); --card: hsl(var(--bg-h) var(--bg-s) var(--card-l)); --card-foreground: hsl(var(--fg-h) var(--fg-s) var(--fg-l)); --secondary: hsl(240 4.8% var(--muted-l)); --secondary-foreground: hsl(240 5.9% 10%); --muted: hsl(240 4.8% var(--muted-l)); --muted-foreground: hsl(240 3.8% 46.1%); --destructive: hsl(0 84.2% 60.2%); --destructive-foreground: hsl(0 0% 98%); --border: hsl(240 5.9% var(--border-l)); --input: hsl(240 5.9% var(--border-l)); --radius: 12px; /* Default accent: teal (overridable via [data-accent]) */ --primary-h: 173; --primary-s: 80%; --primary-l: 36%; --primary-soft-l: 95%; --primary: hsl(var(--primary-h) var(--primary-s) var(--primary-l)); --primary-foreground: hsl(0 0% 100%); --primary-soft: hsl(var(--primary-h) var(--primary-s) var(--primary-soft-l)); --accent: hsl(var(--primary-h) var(--primary-s) var(--primary-soft-l)); --accent-foreground: hsl(var(--primary-h) var(--primary-s) 30%); --ring: hsl(var(--primary-h) var(--primary-s) var(--primary-l)); --avail-none: hsl(240 4.8% var(--muted-l)); --avail-low: hsl(var(--primary-h) 40% 90%); --avail-med: hsl(var(--primary-h) 60% 70%); --avail-high: hsl(var(--primary-h) 80% 50%); --avail-full: hsl(var(--primary-h) var(--primary-s) var(--primary-l)); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06); --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.08); } /* ---------- Dark theme ---------- */ :root[data-theme="dark"] { --bg-l: 6%; --fg-l: 98%; --card-l: 8%; --border-l: 15.9%; --muted-l: 15.9%; --background: hsl(240 10% var(--bg-l)); --foreground: hsl(0 0% var(--fg-l)); --card: hsl(240 10% var(--card-l)); --secondary: hsl(240 3.7% var(--muted-l)); --muted: hsl(240 3.7% var(--muted-l)); --muted-foreground: hsl(240 5% 64.9%); --border: hsl(240 3.7% var(--border-l)); --input: hsl(240 3.7% var(--border-l)); --primary-l: 45%; --primary-s: 70%; --primary-soft-l: 15%; --primary: hsl(var(--primary-h) var(--primary-s) var(--primary-l)); --primary-soft: hsl(var(--primary-h) var(--primary-s) var(--primary-soft-l)); --accent: hsl(var(--primary-h) var(--primary-s) var(--primary-soft-l)); --accent-foreground: hsl(var(--primary-h) var(--primary-s) 80%); --ring: hsl(var(--primary-h) var(--primary-s) var(--primary-l)); --avail-none: hsl(240 3.7% var(--muted-l)); --avail-low: hsl(var(--primary-h) 40% 22%); --avail-med: hsl(var(--primary-h) 50% 38%); --avail-high: hsl(var(--primary-h) 60% 50%); --avail-full: hsl(var(--primary-h) 70% 60%); } /* ---------- Accent colour palette ---------- Each accent overrides only the primary hue/saturation. The accent names are the user-facing labels; the HSL values are picked to give roughly equivalent perceived saturation across hues so the "feel" of the site does not change between accents. ---------------------------------------- */ :root[data-accent="teal"] { --primary-h: 173; --primary-s: 80%; } :root[data-accent="indigo"] { --primary-h: 240; --primary-s: 60%; } :root[data-accent="emerald"] { --primary-h: 152; --primary-s: 60%; } :root[data-accent="rose"] { --primary-h: 340; --primary-s: 70%; } :root[data-accent="amber"] { --primary-h: 32; --primary-s: 90%; } :root[data-accent="slate"] { --primary-h: 215; --primary-s: 25%; } :root[data-accent="plum"] { --primary-h: 280; --primary-s: 50%; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--background); color: var(--foreground); font-family: 'DM Sans', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; display: block; } /* ============ Layout ============ */ .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .container-wide { max-width: 1600px; margin: 0 auto; padding: 0 24px; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--primary); color: var(--primary-foreground); padding: 8px 16px; border-radius: 0 0 8px 0; z-index: 999; } .skip-link:focus { left: 0; } /* ============ Header ============ */ .site-header { position: sticky; top: 0; background: var(--card); border-bottom: 1px solid var(--border); z-index: 30; box-shadow: var(--shadow-sm); } .site-header .header-inner { height: 64px; display: flex; align-items: center; justify-content: space-between; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--foreground); text-decoration: none; font-size: 1.125rem; letter-spacing: -0.01em; } .brand:hover { text-decoration: none; } .brand-mark { width: 32px; height: 32px; border-radius: 8px; background: var(--primary); color: var(--primary-foreground); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; } .nav { display: flex; align-items: center; gap: 8px; } .nav a { padding: 8px 14px; border-radius: 8px; color: var(--foreground); font-weight: 500; font-size: 0.95rem; } .nav a:hover { background: var(--muted); text-decoration: none; } .nav a.is-active { background: var(--primary-soft); color: var(--accent-foreground); } /* ============ Buttons ============ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 10px; border: 1px solid transparent; background: var(--primary); color: var(--primary-foreground); font-family: inherit; font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease; text-decoration: none; } .btn:hover { box-shadow: var(--shadow-md); text-decoration: none; } .btn:active { transform: scale(0.98); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-lg { padding: 14px 24px; font-size: 1rem; border-radius: 12px; } .btn-secondary { background: var(--secondary); color: var(--secondary-foreground); } .btn-ghost { background: transparent; color: var(--foreground); border-color: var(--border); } .btn-ghost:hover { background: var(--muted); } .btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); } .btn-outline:hover { background: var(--primary-soft); } .btn-danger { background: var(--destructive); color: var(--destructive-foreground); } .btn-block { width: 100%; } /* ============ Cards ============ */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); } .card-header { margin-bottom: 16px; } .card-title { font-size: 1.125rem; font-weight: 700; margin: 0 0 4px 0; } .card-description { color: var(--muted-foreground); font-size: 0.95rem; margin: 0; } /* ============ Forms ============ */ .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } } label, .label { font-weight: 600; font-size: 0.875rem; color: var(--foreground); } .help-text { font-size: 0.8rem; color: var(--muted-foreground); margin-top: 2px; } input[type="text"], input[type="email"], input[type="time"], input[type="search"], select, textarea { font-family: inherit; font-size: 0.95rem; padding: 10px 14px; border: 1px solid var(--input); border-radius: 10px; background: var(--card); color: var(--foreground); width: 100%; transition: border-color 0.15s ease, box-shadow 0.15s ease; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px hsla(173, 80%, 36%, 0.15); } /* ============ Hero ============ */ .hero { padding: 80px 0 60px 0; text-align: center; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--primary-soft); color: var(--accent-foreground); font-size: 0.85rem; font-weight: 600; margin-bottom: 24px; } .hero h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; margin: 0 0 20px 0; } .hero p { font-size: 1.125rem; color: var(--muted-foreground); max-width: 680px; margin: 0 auto 36px auto; line-height: 1.6; } .hero-form { max-width: 460px; margin: 0 auto; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 24px; box-shadow: var(--shadow-md); text-align: left; } /* ============ Features ============ */ .features { padding: 60px 0 80px 0; } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; max-width: 980px; margin: 0 auto; } .feature { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; transition: box-shadow 0.2s ease, transform 0.2s ease; } .feature:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .feature-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--primary-soft); color: var(--accent-foreground); display: flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 14px; } .feature h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 6px 0; } .feature p { margin: 0; color: var(--muted-foreground); font-size: 0.95rem; } /* ============ Section helper ============ */ .section { padding: 60px 0; } .section-heading { text-align: center; margin-bottom: 40px; } .section-heading h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 12px 0; } .section-heading p { color: var(--muted-foreground); max-width: 640px; margin: 0 auto; font-size: 1.05rem; } /* ============ Footer ============ */ .site-footer { border-top: 1px solid var(--border); background: var(--card); padding: 48px 0 32px 0; margin-top: 80px; color: var(--muted-foreground); font-size: 0.9rem; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 32px; } @media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } } .footer-grid h4 { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--foreground); margin: 0 0 12px 0; } .footer-grid ul { list-style: none; padding: 0; margin: 0; } .footer-grid li { margin-bottom: 8px; } .footer-grid a { color: var(--muted-foreground); } .footer-grid a:hover { color: var(--primary); } .footer-bottom { border-top: 1px solid var(--border); padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; } /* ============ Meeting page layout ============ */ .meeting-layout { display: grid; grid-template-columns: 320px 1fr 320px; gap: 24px; margin-top: 24px; } @media (max-width: 1180px) { .meeting-layout { grid-template-columns: 1fr; } } .meeting-name { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; margin-top: 16px; margin-bottom: 8px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .meeting-name h1 { font-size: 1.5rem; font-weight: 700; margin: 0; flex: 1; min-width: 240px; } .meeting-name input { flex: 1; min-width: 240px; font-size: 1.5rem; font-weight: 700; padding: 6px 10px; border: 1px dashed var(--border); background: transparent; } /* ============ Calendar ============ */ .calendar { user-select: none; } .calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .calendar-header button { background: transparent; border: 1px solid var(--border); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--foreground); } .calendar-header button:hover { background: var(--muted); } .calendar-month { font-weight: 700; font-size: 1rem; } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .calendar-grid .dow { text-align: center; font-size: 0.75rem; color: var(--muted-foreground); font-weight: 600; padding: 6px 0; } .calendar-day { aspect-ratio: 1 / 1; border-radius: 8px; border: 1px solid transparent; background: transparent; font-family: inherit; font-size: 0.9rem; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--foreground); transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease; } .calendar-day:hover { background: var(--muted); } .calendar-day.is-other-month { color: var(--muted-foreground); opacity: 0.4; } .calendar-day.is-today { border-color: var(--primary); } .calendar-day.is-selected { background: var(--primary); color: var(--primary-foreground); font-weight: 700; } .calendar-day.is-past { opacity: 0.3; cursor: not-allowed; } /* ============ Availability grid ============ */ .availability { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; } .availability .empty { text-align: center; padding: 60px 20px; color: var(--muted-foreground); } .availability-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; } .tabs { display: inline-flex; background: var(--muted); border-radius: 10px; padding: 4px; } .tabs button { border: none; background: transparent; padding: 8px 16px; border-radius: 8px; font-family: inherit; font-weight: 600; font-size: 0.9rem; color: var(--muted-foreground); cursor: pointer; } .tabs button.is-active { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-sm); } .grid-table { display: grid; gap: 2px; overflow-x: auto; padding-bottom: 6px; } .grid-table .grid-cell { background: var(--avail-none); border-radius: 4px; height: 28px; cursor: pointer; transition: background 0.1s ease, transform 0.05s ease; position: relative; } .grid-table .grid-cell.is-selected { background: var(--avail-full); } .grid-table .grid-cell.is-hover { outline: 2px solid var(--ring); outline-offset: -2px; } .grid-table .row-label { font-size: 0.75rem; color: var(--muted-foreground); text-align: right; padding-right: 8px; display: flex; align-items: center; justify-content: flex-end; font-variant-numeric: tabular-nums; } .grid-table .col-label { font-size: 0.75rem; color: var(--muted-foreground); text-align: center; font-weight: 600; padding-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Heatmap cells */ .grid-table .grid-cell.heat-0 { background: var(--avail-none); } .grid-table .grid-cell.heat-1 { background: var(--avail-low); } .grid-table .grid-cell.heat-2 { background: var(--avail-med); } .grid-table .grid-cell.heat-3 { background: var(--avail-high); } .grid-table .grid-cell.heat-4 { background: var(--avail-full); } .legend { display: flex; align-items: center; gap: 12px; font-size: 0.8rem; color: var(--muted-foreground); margin-top: 12px; flex-wrap: wrap; } .legend-swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; } /* ============ Participants ============ */ .participant-list { list-style: none; padding: 0; margin: 0; } .participant-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); } .participant-list li:last-child { border-bottom: none; } .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--primary-soft); color: var(--accent-foreground); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; } /* ============ Best times ============ */ .best-times .item { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; } .best-times .item .top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .best-times .item .when { font-weight: 700; font-size: 0.95rem; } .best-times .item .count { font-size: 0.8rem; color: var(--muted-foreground); } .best-times .item .bar { height: 6px; background: var(--muted); border-radius: 999px; margin-top: 8px; overflow: hidden; } .best-times .item .bar > span { display: block; height: 100%; background: var(--primary); border-radius: 999px; } /* ============ Toast / banner ============ */ .toast { position: fixed; bottom: 24px; right: 24px; background: var(--foreground); color: var(--background); padding: 12px 18px; border-radius: 10px; font-size: 0.9rem; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease; z-index: 100; pointer-events: none; max-width: 360px; } .toast.is-shown { opacity: 1; transform: translateY(0); } .banner { background: var(--primary-soft); color: var(--accent-foreground); padding: 12px 16px; border-radius: 10px; font-size: 0.9rem; margin-bottom: 16px; border: 1px solid hsla(173, 80%, 36%, 0.2); } /* ============ Share box ============ */ .share-box { background: var(--muted); border-radius: 10px; padding: 12px; display: flex; gap: 8px; align-items: center; } .share-box input { background: var(--card); font-size: 0.85rem; font-family: ui-monospace, "SF Mono", Menlo, monospace; } /* ============ Share to platforms (Teams, Outlook, Google Calendar) ============ */ .share-platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; } .share-btn { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--foreground); font: inherit; font-size: 0.85rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, transform 0.05s; text-align: left; } .share-btn:hover { background: var(--muted); border-color: var(--primary); } .share-btn:active { transform: translateY(1px); } .share-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .share-logo { width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Brand colours, sourced from each platform's published brand guidance */ .share-logo-teams { background: #6264A7; } /* Microsoft Teams brand purple */ .share-logo-outlook { background: #0078D4; } /* Microsoft Outlook brand blue */ .share-logo-gcal { background: #ffffff; border: 1px solid var(--border); } .share-label { line-height: 1.2; } .share-note { margin: 10px 2px 0; font-size: 0.78rem; color: var(--muted-foreground); line-height: 1.5; } /* ============ Theme picker ============ */ .theme-picker { position: relative; display: inline-block; } .theme-picker-toggle { background: transparent; border: 1px solid var(--border); color: var(--foreground); padding: 6px 12px; border-radius: 8px; font: 500 0.85rem 'DM Sans', system-ui, sans-serif; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background-color 0.15s, border-color 0.15s; } .theme-picker-toggle:hover { background: var(--muted); border-color: var(--primary); } .theme-picker-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .theme-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--primary); border: 1px solid rgba(0,0,0,0.1); flex-shrink: 0; } .theme-picker-panel { position: absolute; right: 0; top: calc(100% + 6px); background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px; min-width: 240px; box-shadow: var(--shadow-lg); z-index: 100; display: none; } .theme-picker-panel[data-open="true"] { display: block; } .theme-picker-section { margin-bottom: 12px; } .theme-picker-section:last-child { margin-bottom: 0; } .theme-picker-section-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-foreground); font-weight: 500; margin-bottom: 8px; } .theme-picker-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .theme-mode-btn { background: transparent; border: 1px solid var(--border); color: var(--foreground); padding: 6px 4px; border-radius: 6px; font: 500 0.75rem 'DM Sans', system-ui, sans-serif; cursor: pointer; } .theme-mode-btn:hover { background: var(--muted); } .theme-mode-btn[aria-pressed="true"] { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); } .theme-picker-accents { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .theme-accent-btn { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; position: relative; } .theme-accent-btn:focus-visible { outline: 2px solid var(--foreground); outline-offset: 2px; } .theme-accent-btn[aria-pressed="true"] { border-color: var(--foreground); } .theme-accent-btn[aria-pressed="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.95); top: 0; left: 0; right: 0; bottom: 0; } .theme-accent-teal { background: hsl(173 80% 36%); } .theme-accent-indigo { background: hsl(240 60% 50%); } .theme-accent-emerald { background: hsl(152 60% 38%); } .theme-accent-rose { background: hsl(340 70% 48%); } .theme-accent-amber { background: hsl(32 90% 50%); } .theme-accent-slate { background: hsl(215 25% 38%); } .theme-accent-plum { background: hsl(280 50% 45%); } .theme-picker-help { font-size: 0.72rem; color: var(--muted-foreground); line-height: 1.4; margin: 8px 0 0; } .theme-picker-help.warn { color: hsl(38 90% 35%); } @media (max-width: 480px) { .theme-picker-panel { right: -8px; } } /* ============ Cookie / storage consent banner ============ */ .consent-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999; background: var(--card); color: var(--foreground); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); padding: 14px 18px; } .consent-inner { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; } .consent-text { flex: 1 1 320px; font-size: 0.875rem; line-height: 1.5; } .consent-text strong { color: var(--primary); display: block; margin-bottom: 2px; } .consent-text a { color: var(--primary); font-weight: 500; } .consent-actions { display: flex; gap: 8px; flex-shrink: 0; } .btn-sm { padding: 6px 14px; font-size: 0.8rem; } @media (max-width: 540px) { .consent-banner { left: 8px; right: 8px; bottom: 8px; padding: 12px 14px; } .consent-actions { width: 100%; justify-content: flex-end; } } /* ============ Misc ============ */ .flex { display: flex; } .flex-between { display: flex; justify-content: space-between; align-items: center; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .text-muted { color: var(--muted-foreground); } .text-sm { font-size: 0.875rem; } .text-xs { font-size: 0.75rem; } .fw-700 { font-weight: 700; } .hidden { display: none !important; } /* ============ 404 page ============ */ .page-404 { min-height: 80vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 40px 20px; } .page-404 h1 { font-size: 6rem; margin: 0 0 8px 0; font-weight: 800; color: var(--primary); } .page-404 p { color: var(--muted-foreground); margin-bottom: 24px; } /* ============ Reduced motion ============ */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }