/** * Acois — Policy Pages Stylesheet (Privacy & Terms) * ────────────────────────────────────────────────────────────── * Shared stylesheet for /privacy and /terms pages. * Theme colours (blue for Privacy, coral for Terms) are applied * via CSS custom properties keyed on the data-theme attribute * placed on the element in each blade template. * * Usage in blade: * Privacy : * Terms : * * Table of Contents: * 01. Theme Tokens (CSS custom properties per data-theme) * 02. Base & Typography * 03. Component — Navigation * 04. Component — Hero Section * 05. Component — Table of Contents Sidebar * 06. Component — Policy Card (main content area) * 07. Component — Section Headings & Numbers * 08. Component — Body Copy & Lists * 09. Component — Info & Warning Boxes * 10. Component — Footer * 11. Utility Classes (replaces all repeated inline styles) * ────────────────────────────────────────────────────────────── */ /* ══════════════════════════════════════════════════════════════ 01. Theme Tokens Each data-theme sets a palette of custom properties consumed by every themed component below. ══════════════════════════════════════════════════════════════ */ /* Privacy Policy — blue theme */ [data-theme="blue"] { --pol-accent: #4669FA; --pol-accent-end: #6366F1; --pol-toc-bg: #F0F4FF; --pol-hero-tint: rgba(70, 105, 250, .12); --pol-box-bg: #F0F4FF; --pol-box-border: #4669FA; --pol-sidebar-box-bg: #EFF6FF; /* Tailwind blue-50 */ --pol-sidebar-box-bdr: #BFDBFE; /* Tailwind blue-100 */ } /* Terms & Conditions — coral/orange theme */ [data-theme="coral"] { --pol-accent: #FA916B; --pol-accent-end: #F97316; --pol-toc-bg: #FFF4F0; --pol-hero-tint: rgba(250, 145, 107, .10); --pol-box-bg: #FFF8F5; --pol-box-border: #FA916B; --pol-sidebar-box-bg: #FFF8F5; --pol-sidebar-box-bdr: #FDDDC8; } /* ══════════════════════════════════════════════════════════════ 02. Base & Typography ══════════════════════════════════════════════════════════════ */ * { font-family: 'Poppins', sans-serif; box-sizing: border-box; } html { font-size: 16px; } body { line-height: 1.75; background: #F8FAFF; color: #0D1C2E; } /* ══════════════════════════════════════════════════════════════ 03. Component — Navigation Glassmorphism sticky top bar shared across all policy pages. ══════════════════════════════════════════════════════════════ */ .nav-glass { background: rgba(248, 250, 255, .92); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(70, 105, 250, .1); } /* Fixed-height inner wrapper ensures consistent nav height */ .nav-inner { height: 70px; } /* "Acois" wordmark colour */ .nav-brand { color: #0D1C2E; } /* Primary gradient button (shared with front page) */ .btn-glow { background: linear-gradient(135deg, #4669FA, #6366F1); box-shadow: 0 8px 24px rgba(70, 105, 250, .35); color: #fff; transition: box-shadow .3s, transform .2s; } .btn-glow:hover { box-shadow: 0 12px 32px rgba(70, 105, 250, .52); transform: translateY(-1px); } /* ══════════════════════════════════════════════════════════════ 04. Component — Hero Section Full-width banner above the content area. ══════════════════════════════════════════════════════════════ */ .policy-hero { background: radial-gradient(ellipse 90% 60% at 50% -5%, var(--pol-hero-tint) 0%, transparent 65%), #F8FAFF; } /* Small coloured label — "Legal Document" badge */ .pol-badge-label { color: var(--pol-accent); } /* Main page heading — fluid font size */ .pol-h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: #0D1C2E; } /* Subtitle paragraph under the h1 */ .pol-subtitle { font-size: 1rem; color: #64748B; line-height: 1.75; } /* ══════════════════════════════════════════════════════════════ 05. Component — Table of Contents Sidebar ══════════════════════════════════════════════════════════════ */ /* Sticky offset — clears the 70px nav bar with a little room */ .toc-sticky { top: 90px; } /* Each TOC anchor row */ .toc-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 12px; font-size: 14px; font-weight: 500; color: #64748B; transition: background .2s, color .2s; text-decoration: none; } .toc-item:hover { background: var(--pol-toc-bg); color: var(--pol-accent); } /* Numbered bubble beside each TOC entry */ .toc-num { width: 28px; height: 28px; border-radius: 8px; background: var(--pol-toc-bg); color: var(--pol-accent); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; } /* "Questions?" / "Need Clarification?" sidebar panel heading */ .sidebar-heading { color: #0D1C2E; } /* Themed sidebar help-box (colour differs per theme) */ .sidebar-box { background: var(--pol-sidebar-box-bg); border: 1px solid var(--pol-sidebar-box-bdr); } /* ══════════════════════════════════════════════════════════════ 06. Component — Policy Card (main scrollable content area) ══════════════════════════════════════════════════════════════ */ .policy-card { background: #fff; border-radius: 24px; border: 1px solid #E8EEFF; padding: 56px 64px; box-shadow: 0 8px 32px -8px rgba(70, 105, 250, .1); } @media (max-width: 640px) { .policy-card { padding: 32px 24px; } } /* ══════════════════════════════════════════════════════════════ 07. Component — Section Headings & Numbers ══════════════════════════════════════════════════════════════ */ /* Section heading row (number badge + title text) */ .pol-h2 { font-size: 1.3rem; font-weight: 700; color: #0D1C2E; margin-bottom: 14px; margin-top: 44px; padding-top: 44px; border-top: 1px solid #F1F5F9; display: flex; align-items: center; gap: 12px; } /* First section — no top border or spacing needed */ .pol-h2.first { margin-top: 0; padding-top: 0; border-top: none; } /* Gradient numbered bubble beside each section heading */ .pol-num { background: linear-gradient(135deg, var(--pol-accent), var(--pol-accent-end)); color: #fff; width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; } /* Closing footnote paragraph at the end of the policy */ .pol-footer-note { margin-top: 32px; padding-top: 24px; border-top: 1px solid #F1F5F9; font-size: 13px; color: #94A3B8; } /* ══════════════════════════════════════════════════════════════ 08. Component — Body Copy & Lists ══════════════════════════════════════════════════════════════ */ .pol-p { font-size: 15px; color: #475569; line-height: 1.8; margin-bottom: 14px; } .pol-ul { list-style: none; padding: 0; margin: 0 0 16px; } .pol-ul li { font-size: 15px; color: #475569; line-height: 1.75; padding: 6px 0 6px 26px; position: relative; } /* Arrow bullet coloured with theme accent */ .pol-ul li::before { content: '→'; position: absolute; left: 0; color: var(--pol-accent); font-weight: 600; } /* Inline themed link — email/website links inside pol-box and content */ .pol-link { color: var(--pol-accent); font-weight: 600; } /* ══════════════════════════════════════════════════════════════ 09. Component — Info & Warning Boxes ══════════════════════════════════════════════════════════════ */ /* Themed highlighted info block */ .pol-box { background: var(--pol-box-bg); border-left: 4px solid var(--pol-box-border); border-radius: 0 12px 12px 0; padding: 16px 20px; margin: 20px 0; font-size: 14px; color: #475569; line-height: 1.75; } .pol-box strong { color: #0D1C2E; } /* Yellow warning block — used in Terms for AI disclaimer */ .warn-box { background: #FFF3CD; border-left: 4px solid #F59E0B; border-radius: 0 12px 12px 0; padding: 16px 20px; margin: 20px 0; font-size: 14px; color: #92400E; line-height: 1.75; } /* ══════════════════════════════════════════════════════════════ 10. Component — Footer Dark navy site footer shared by both policy pages. ══════════════════════════════════════════════════════════════ */ .pol-footer { background: #0D1C2E; color: #fff; padding: 36px 32px; } .footer-copy { color: rgba(255,255,255,.35); font-size: 13px; } .footer-links { font-size: 13px; } .footer-link { color: rgba(255,255,255,.60); } .footer-sep { color: rgba(255,255,255,.20); }