@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap'); @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css'); /* Dark is the default palette (bare :root, no media/data-theme guard needed — this ships as the page's normal look). Light is an explicit opt-in via the toggle, which stamps data-theme="light" on and persists the choice in localStorage. See the inline script in each page's . */ :root { --bg: #030405; --bg-panel: #000f0f; --bg-panel-alt: #104b55; --cyan: #6fe0ed; --ink: #f4f5f5; --muted: #a7b0b0; --border: rgba(244,245,245,0.12); --border-soft: rgba(244,245,245,0.08); --surface: rgba(244,245,245,0.03); --dot-color: rgba(244,245,245,0.11); --header-bg: rgba(3,4,5,0.85); --on-accent: #001417; --success: #4ade80; --danger: #f87171; --radius: 10px; } :root[data-theme="light"] { --bg: #f7f8f9; --bg-panel: #eef1f3; --bg-panel-alt: #dceef0; --cyan: #0891a8; --ink: #12161c; --muted: #5b6672; --border: rgba(18,22,28,0.13); --border-soft: rgba(18,22,28,0.08); --surface: rgba(18,22,28,0.035); --dot-color: rgba(18,22,28,0.09); --header-bg: rgba(247,248,249,0.85); --on-accent: #f7f8f9; --success: #16a34a; --danger: #dc2626; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: 'Poppins', system-ui, sans-serif; color: var(--muted); background: var(--bg); line-height: 1.65; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: 'Poppins', sans-serif; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; } .underline-accent { text-decoration: underline; text-decoration-color: var(--cyan); text-decoration-thickness: 3px; text-underline-offset: 4px; } /* Top strip */ .gov-strip { background: var(--bg-panel); color: var(--ink); font-size: 0.85rem; padding: 0.55rem 2rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-soft); } .gov-strip .strip-right { display: flex; gap: 1.75rem; } .gov-strip .strip-right span, .gov-strip .strip-right a { display: inline-flex; align-items: center; gap: 0.5rem; } .gov-strip i { color: var(--cyan); } .gov-strip a.strip-facebook { color: var(--ink); text-decoration: none; } .gov-strip a.strip-facebook:hover { color: var(--cyan); } /* Header */ .site-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; background: var(--header-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-soft); position: sticky; top: 0; z-index: 20; transition: padding 0.25s ease; } .site-header .brand { display: flex; align-items: center; gap: 0.85rem; font-weight: 700; font-family: 'Poppins', sans-serif; font-size: 1.1rem; color: var(--ink); text-decoration: none; } .site-header .brand img { height: 60px; width: 60px; transition: height 0.25s ease, width 0.25s ease; } .site-header .brand-text { display: block; overflow: hidden; white-space: nowrap; max-width: 320px; opacity: 1; transition: max-width 0.25s ease, opacity 0.2s ease; } .site-header .brand small { display: block; font-weight: 500; font-family: 'Poppins', sans-serif; font-size: 0.75rem; color: var(--muted); letter-spacing: 0.02em; } .header-actions { display: flex; align-items: center; gap: 1.25rem; } .site-header nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem 1.35rem; } .site-header nav a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.92rem; white-space: nowrap; } .site-header nav a:hover { color: var(--cyan); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--ink); cursor: pointer; font-size: 0.95rem; transition: border-color 0.2s ease, transform 0.2s ease; } .theme-toggle:hover { border-color: var(--cyan); transform: rotate(12deg); } .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-sun { display: inline; } :root[data-theme="light"] .theme-toggle .icon-moon { display: none; } /* Hamburger — hidden on desktop/tablet, only shown under the 600px query below */ .nav-toggle { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--ink); cursor: pointer; font-size: 1.05rem; } .nav-toggle .icon-close { display: none; } .nav-toggle[aria-expanded="true"] .icon-bars { display: none; } .nav-toggle[aria-expanded="true"] .icon-close { display: inline; } /* Compact sticky header once scrolled past the threshold — logo shrinks a little, nav stays right-aligned (already is, via space-between). Title/subtitle stay visible here on desktop/tablet — there's enough room. They only collapse away on mobile, see the 600px query below. */ .site-header.is-compact { padding: 0.6rem 2rem; } .site-header.is-compact .brand img { height: 42px; width: 42px; } /* Backdrop region wraps Hero + About — a dot-grid texture with a soft cyan glow at top, extending down through both sections before fading to plain black. */ .wireframe-region { position: relative; background-color: var(--bg); overflow: hidden; } .wireframe-region::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(ellipse 90% 45% at 50% 0%, rgba(111,224,237,0.22), transparent 70%), radial-gradient(var(--dot-color) 1.5px, transparent 1.5px); background-size: auto, 22px 22px; -webkit-mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 92%); mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 92%); pointer-events: none; } /* Every direct section inside the region must be explicitly stacked above the background layer — non-positioned in-flow content paints BELOW a positioned sibling regardless of DOM order, which caused an earlier bug where a background layer rendered in front of content. */ .wireframe-region > section { position: relative; z-index: 1; } /* Hero */ .hero { padding: 5rem 2rem 0; } .hero-badges { position: relative; display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1.5rem; } .hero-badges img { height: 84px; width: auto; filter: drop-shadow(0 0 12px rgba(111,224,237,0.15)); } .hero h1 { font-size: 3rem; line-height: 1.15; margin: 0 0 1rem; color: var(--ink); } .hero .rich-text { color: var(--muted); font-size: 1.05rem; } .hero .rich-text p { margin: 0.5rem 0; text-align: center; } .btn { display: inline-block; padding: 0.85rem 1.7rem; border-radius: 999px; font-weight: 600; text-decoration: none; font-size: 0.95rem; } .btn-primary { background: var(--cyan); color: var(--on-accent); } .btn-primary:hover { background: #8ce8f2; } .btn-ghost { border: 1px solid var(--border); color: var(--ink); } .btn-ghost:hover { background: var(--border-soft); } /* Centered hero + quick-links card row, DigitalOcean-style */ .hero-centered { text-align: center; } .hero-inner { position: relative; max-width: 720px; margin: 0 auto; } .hero-lede { max-width: 560px; margin: 0 auto; } .quick-links-grid { position: relative; max-width: 1200px; margin: 3.5rem auto 0; padding-bottom: 4.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .quick-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 1.75rem; text-align: left; text-decoration: none; transition: border-color 0.2s ease, transform 0.2s ease; } .quick-card:hover { border-color: var(--cyan); transform: translateY(-2px); } .quick-card h3 { font-size: 1.2rem; margin: 0 0 0.6rem; color: var(--ink); } .quick-card p { margin: 0 0 1rem; color: var(--muted); font-size: 0.92rem; } .quick-card .learn-more { color: var(--cyan); font-weight: 600; font-size: 0.9rem; } /* Contact — hours-of-operation banner above the channel cards */ .hours-banner { display: flex; gap: 1rem; align-items: flex-start; margin-top: 1.75rem; border-radius: 16px; border: 1px solid rgba(111,224,237,0.3); padding: 1.4rem 1.6rem; background: linear-gradient(160deg, rgba(111,224,237,0.1), var(--surface)); } .hours-banner-icon { font-size: 1.3rem; color: var(--cyan); margin-top: 0.2rem; flex-shrink: 0; } .hours-banner h3 { font-size: 1.05rem; margin: 0 0 0.4rem; } .hours-banner p { margin: 0; color: var(--muted); font-size: 0.92rem; } /* Your Data, Protected — legal-framework banner + collect/protect/used cards */ .dp-banner { display: flex; gap: 1rem; align-items: flex-start; margin-top: 1.75rem; border-radius: 16px; border: 1px solid rgba(107,217,143,0.3); padding: 1.4rem 1.6rem; background: linear-gradient(160deg, rgba(107,217,143,0.1), var(--surface)); } .dp-banner-icon { font-size: 1.3rem; color: #6bd98f; margin-top: 0.2rem; flex-shrink: 0; } .dp-banner h3 { font-size: 1.05rem; margin: 0 0 0.4rem; } .dp-banner .rich-text p { margin: 0.4rem 0; text-align: left; color: var(--muted); font-size: 0.92rem; } .dp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; } .dp-card { border-radius: 16px; border: 1px solid var(--border); padding: 1.4rem; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface)); transition: border-color 0.2s ease, transform 0.2s ease; } .dp-card:hover { border-color: var(--accent); transform: translateY(-2px); } .dp-card-icon { font-size: 1.3rem; color: var(--accent); margin-bottom: 0.75rem; display: block; } .dp-card h3 { font-size: 1rem; margin: 0 0 0.5rem; } .dp-card .rich-text { font-size: 0.87rem; } .dp-card .rich-text p, .dp-card .rich-text ul { margin: 0.5rem 0; text-align: left; color: var(--muted); } .dp-card .rich-text ul { padding-left: 1.15rem; } .dp-card .rich-text li { margin-bottom: 0.35rem; } /* Services — reflows regardless of how many are added/removed in AdminJS */ /* Services — bento grid, colour-tinted panels, per-service icon */ .services-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(150px, auto); gap: 1rem; margin-top: 1.5rem; } .service-card { border-radius: 18px; border: 1px solid var(--border); padding: 1.6rem; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, var(--surface)), var(--surface)); transition: border-color 0.2s ease, transform 0.2s ease; } .service-card:hover { border-color: var(--accent); transform: translateY(-2px); } .service-icon { font-size: 1.4rem; color: var(--accent); margin-bottom: 0.85rem; } .service-card h3 { font-size: 1.05rem; margin: 0 0 0.5rem; } .service-card p { color: var(--muted); font-size: 0.87rem; margin: 0; } .service-card.big { grid-column: span 2; grid-row: span 2; } .service-card.big h3 { font-size: 1.4rem; } .service-card.big .service-icon { font-size: 1.9rem; } .service-card.wide { grid-column: span 2; } .id-card-wrap { position: relative; display: flex; justify-content: center; } .id-card-wrap img { width: 100%; max-width: 460px; border-radius: 14px; box-shadow: 0 0 60px -10px rgba(111,224,237,0.25), 0 25px 50px -20px rgba(0,0,0,0.6); } /* Sections */ .section { max-width: 1200px; margin: 0 auto; padding: 2.75rem 1.5rem; } .section + .section { border-top: 1px solid var(--border-soft); } .section-label { display: inline-block; color: var(--bg-panel); background: var(--cyan); font-weight: 700; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.04em; padding: 0.35rem 0.85rem; border-radius: 999px; margin-bottom: 1rem; } .section h2 { font-size: 1.85rem; margin: 0 0 0.75rem; } .section-subtitle { color: var(--muted); font-size: 1.15rem; margin: 0 0 1.25rem; max-width: 640px; } .rich-text img { max-width: 100%; height: auto; border-radius: 10px; margin: 1rem 0; } .rich-text p { margin: 0.75rem 0; text-align: justify; } /* Application Process — visual step flow instead of a plain list */ .process-flow { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.25rem; padding-top: 1rem; margin-top: 1.5rem; } .process-flow.cols-4 { grid-template-columns: repeat(4, 1fr); } .process-flow::before { content: ''; position: absolute; top: 38px; left: 8%; right: 8%; height: 2px; background: var(--border); z-index: 0; } .process-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; } .process-step .step-number { width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; color: #051019; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.15rem; font-family: 'Poppins', sans-serif; margin-bottom: 1rem; box-shadow: 0 0 0 6px var(--bg); } .process-step:nth-child(1) .step-number { background: #6fe0ed; } /* cyan */ .process-step:nth-child(2) .step-number { background: #9c8cf6; } /* violet */ .process-step:nth-child(3) .step-number { background: #f6a15c; } /* orange */ .process-step:nth-child(4) .step-number { background: #6bd98f; } /* green */ .process-step:nth-child(5) .step-number { background: #f27fa8; } /* pink */ .process-step:nth-child(6) .step-number { background: #f4d35e; } /* amber */ .process-step h3 { font-size: 0.98rem; margin: 0 0 0.4rem; } .process-step .step-desc, .process-step .step-desc p { font-size: 0.85rem; color: var(--muted); margin: 0; text-align: center; } /* Two-column content + illustration rows (About, Features) */ .split-row { display: grid; grid-template-columns: 1fr 0.85fr; gap: 3rem; align-items: center; } .split-row img { width: 100%; max-width: 480px; margin: 0 auto; display: block; border-radius: var(--radius); } .split-row.reverse { grid-template-columns: 0.85fr 1fr; } .split-row.reverse .split-media { order: -1; } /* Features: illustrated card grid, 5 cards fit as 3+2 on desktop */ .feature-heading { font-size: 2.1rem; margin-bottom: 2.5rem; } .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .feature-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 1.75rem; animation: feature-fade-up 0.5s ease both; transition: transform 0.2s ease, border-color 0.2s ease; } .feature-card:hover { transform: translateY(-3px); border-color: var(--accent); } .feature-icon-wrap { width: 68px; height: 68px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; border-radius: 14px; color: var(--accent); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 20%, transparent), transparent); } .feature-icon-wrap svg { width: 40px; height: 40px; } .feature-card h3 { font-size: 1.05rem; margin: 0 0 0.5rem; } .feature-card .rich-text p { text-align: left; color: var(--muted); font-size: 0.9rem; margin: 0; } @keyframes feature-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .feature-card { animation: none; } } /* icon micro-interactions on card hover */ .feature-card:hover .icon-layers rect:nth-child(1) { transform: translate(-2px, -2px); } .feature-card:hover .icon-layers rect:nth-child(3) { transform: translate(2px, 2px); } .icon-layers rect { transition: transform 0.3s ease; } @keyframes sweep { 0%, 100% { stroke-dashoffset: 0; } 50% { stroke-dashoffset: 40; } } .icon-security .sweep-line { stroke-dasharray: 6 4; } .feature-card:hover .icon-security .sweep-line { animation: sweep 2.4s linear infinite; } @keyframes chip-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } .icon-chip .trace { stroke-dasharray: 4 4; } .feature-card:hover .icon-chip .pulse-dot { animation: chip-pulse 1.1s ease-in-out infinite; } .feature-card:hover .icon-biometric .pulse-dot { animation: chip-pulse 1.4s ease-in-out infinite; } .icon-everyday .tap-wave { transition: opacity 0.3s ease; } .feature-card:hover .icon-everyday .tap-wave { animation: chip-pulse 1.6s ease-in-out infinite; } /* Service centers / FAQs */ .centers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } .center-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: 16px; padding: 1.5rem; transition: border-color 0.2s ease, transform 0.2s ease; } .center-card:hover { border-color: var(--accent); border-top-color: var(--accent); transform: translateY(-2px); } .center-icon { color: var(--accent); font-size: 1.15rem; margin-bottom: 0.75rem; } .center-card h3 { font-size: 1.05rem; margin: 0 0 auto; } .center-card .center-address { color: var(--muted); font-size: 0.88rem; margin: 1rem 0 0.35rem; } .center-card .center-phone { color: var(--accent); font-size: 0.88rem; font-weight: 600; margin: 0; } .faq-list details { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem 1.2rem; margin-bottom: 0.6rem; background: var(--surface); } .faq-list summary { cursor: pointer; font-weight: 700; color: var(--ink); } .doc-accordion { margin-top: 1.5rem; } .doc-category { border: 1px solid var(--border); border-radius: 16px; margin-bottom: 1rem; background: var(--surface); overflow: hidden; } .doc-category summary { cursor: pointer; list-style: none; padding: 1.2rem 1.5rem; font-weight: 700; font-family: 'Poppins', sans-serif; font-size: 1.1rem; color: var(--ink); display: flex; justify-content: space-between; align-items: center; } .doc-category summary::-webkit-details-marker { display: none; } .doc-category summary::after { content: '+'; font-size: 1.4rem; color: var(--cyan); font-weight: 400; } .doc-category[open] summary::after { content: '\2212'; } .doc-category-body { padding: 0 1.5rem 1.5rem; } .news-date { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 0.2rem; } article .news-date { margin: 0.25rem 0 1.5rem; font-size: 0.9rem; } /* Contact */ /* Contact — colourful channel cards instead of a form */ .contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 2rem; } .contact-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; padding: 2.25rem 1.5rem; border-radius: 20px; text-decoration: none; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 22%, var(--surface)), var(--surface)); border: 1px solid var(--border); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .contact-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--accent) 60%, transparent); } .contact-icon { font-size: 2.1rem; color: var(--accent); margin-bottom: 0.35rem; } .contact-card h3 { font-size: 1.1rem; margin: 0; color: var(--ink); } .contact-card p { color: var(--muted); font-size: 0.88rem; margin: 0; } .contact-form label { display: block; margin-bottom: 1rem; font-weight: 600; color: var(--ink); font-size: 0.92rem; } .contact-form input, .contact-form textarea { width: 100%; padding: 0.7rem 0.85rem; margin-top: 0.35rem; border: 1px solid var(--border); border-radius: var(--radius); font-family: inherit; font-size: 0.95rem; background: var(--surface); color: var(--ink); } .contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--muted); } .contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--cyan); outline-offset: 1px; } .contact-form button { background: var(--cyan); color: var(--on-accent); border: none; padding: 0.85rem 1.9rem; border-radius: 999px; font-weight: 600; cursor: pointer; } .contact-form button:hover { background: #8ce8f2; } .flash.success { color: var(--success); font-weight: 600; } .flash.error { color: var(--danger); font-weight: 600; } .site-footer { background: var(--bg-panel); color: var(--muted); padding: 3rem 2rem 2rem; text-align: center; border-top: 1px solid var(--border-soft); } .site-footer img { height: 40px; margin-bottom: 1rem; } .site-footer p { margin: 0.25rem 0; font-size: 0.9rem; } @media (max-width: 1080px) { .centers-grid { grid-template-columns: repeat(2, 1fr); } .services-bento { grid-template-columns: repeat(2, 1fr); } .service-card.big { grid-column: span 2; } .service-card.wide { grid-column: span 2; } .contact-grid { grid-template-columns: repeat(2, 1fr); } .feature-grid { grid-template-columns: repeat(2, 1fr); } .dp-grid { grid-template-columns: 1fr; } } @media (max-width: 860px) { .split-row { grid-template-columns: 1fr; } .feature-grid { grid-template-columns: 1fr; } .split-row.reverse .split-media { order: 0; } .quick-links-grid { grid-template-columns: 1fr; } .centers-grid { grid-template-columns: 1fr; } .contact-grid { grid-template-columns: 1fr; } .hero h1 { font-size: 2.1rem; } .id-card-wrap img { max-width: 340px; } .dp-banner { flex-direction: column; } .hours-banner { flex-direction: column; } /* Services bento collapses to a single column, no forced spans */ .services-bento { grid-template-columns: 1fr; grid-auto-rows: auto; } .service-card.big, .service-card.wide { grid-column: span 1; grid-row: span 1; } /* Process flow: vertical timeline instead of cramped columns. .cols-4 has higher specificity than the base .process-flow rule above, so it needs its own override here too or it'd win over this collapse. */ .process-flow, .process-flow.cols-4 { grid-template-columns: 1fr; gap: 2rem; padding-left: 28px; } .process-flow::before { top: 0; bottom: 0; left: 28px; right: auto; width: 2px; height: auto; } .process-step { flex-direction: row; align-items: flex-start; text-align: left; gap: 1rem; } .process-step .step-number { margin-bottom: 0; margin-left: -28px; } } @media (max-width: 600px) { /* Top strip: drop the notice text and address, keep just WhatsApp + Facebook, centered */ .gov-strip { justify-content: center; gap: 1.5rem 2rem; flex-wrap: wrap; padding: 0.6rem 1rem; } .gov-strip-notice, .gov-strip .strip-right .strip-address { display: none; } .gov-strip .strip-right { gap: 1.5rem; } /* Header: logo centered, title below, subtitle below that, controls last. Nav itself is a hamburger-triggered dropdown, not shown inline — see .nav-toggle / #main-nav below. */ .site-header { position: relative; flex-direction: column; gap: 1rem; padding: 1.25rem 1rem; text-align: center; } .site-header .brand { flex-direction: column; gap: 0.5rem; } .header-actions { width: 100%; justify-content: center; gap: 0.75rem; } .nav-toggle { display: inline-flex; } #main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 30; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg-panel); border-top: 1px solid var(--border); padding: 0.5rem 1.25rem 1rem; box-shadow: 0 16px 28px -14px rgba(0,0,0,0.45); } #main-nav.nav-open { display: flex; } #main-nav a { padding: 0.85rem 0.25rem; border-bottom: 1px solid var(--border-soft); } #main-nav a:last-child { border-bottom: none; } /* Once scrolled/compact, collapse to a single row: logo left, controls right */ .site-header.is-compact { flex-direction: row; justify-content: space-between; align-items: center; text-align: left; gap: 0.75rem; padding: 0.5rem 1rem; } .site-header.is-compact .brand-text { max-width: 0; opacity: 0; margin: 0; } .site-header.is-compact .brand { flex-direction: row; } .site-header.is-compact .header-actions { width: auto; } .news-widget { right: 1rem; bottom: 1rem; } .news-widget-toggle-label { display: none; } .news-widget-toggle { padding: 0.65rem; } .news-widget-panel { width: calc(100vw - 2rem); right: 0; } } /* Floating news widget — collapsed pill in the bottom-right corner, expands into a compact panel of the latest headlines. Lives outside the normal .section flow so it never competes with the hero for space. */ .news-widget { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 40; } .news-widget-toggle { display: flex; align-items: center; gap: 0.55rem; border-radius: 999px; border: 1px solid var(--border); background: var(--header-bg); backdrop-filter: blur(10px); color: var(--ink); cursor: pointer; padding: 0.65rem 1.1rem; font-family: inherit; font-size: 0.85rem; font-weight: 600; box-shadow: 0 10px 24px -12px rgba(0,0,0,0.35); transition: border-color 0.2s ease; } .news-widget-toggle:hover { border-color: var(--cyan); } .news-widget-toggle i.fa-newspaper { color: var(--cyan); font-size: 0.95rem; } .news-widget-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); flex-shrink: 0; } .news-widget.is-open .news-widget-toggle { display: none; } .news-widget-panel { display: none; position: absolute; bottom: 0; right: 0; width: 300px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 16px; padding: 1rem 1.1rem; box-shadow: 0 20px 40px -16px rgba(0,0,0,0.5); } .news-widget.is-open .news-widget-panel { display: block; } .news-widget-header { display: flex; align-items: center; justify-content: space-between; font-weight: 700; color: var(--ink); font-size: 0.9rem; margin-bottom: 0.75rem; } .news-widget-close { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.9rem; padding: 0.2rem; } .news-widget-close:hover { color: var(--ink); } .news-widget-list { list-style: none; margin: 0; padding: 0; } .news-widget-list li { padding: 0.6rem 0; border-top: 1px solid var(--border-soft); } .news-widget-list li:first-child { border-top: none; padding-top: 0; } .news-widget-list a { display: block; color: var(--ink); font-size: 0.85rem; font-weight: 600; text-decoration: none; line-height: 1.4; margin-bottom: 0.25rem; } .news-widget-list a:hover { color: var(--cyan); } .news-widget-list time { color: var(--muted); font-size: 0.75rem; }