/* FastXP2P Blog – stylesheet that mirrors the main site's dark-by-default design (HSL variables, glass morphism, Inter/Outfit fonts). Optional light mode kicks in when loses the `dark` class. */ :root, html.dark { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 4.5%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 240 5.9% 10%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 240 4.9% 83.9%; --radius: 0.75rem; --brand-emerald: 152 76% 45%; --brand-indigo: 245 64% 65%; --brand-purple: 270 65% 65%; --brand-pink: 330 80% 65%; --brand-amber: 38 92% 55%; --brand-blue: 215 90% 60%; --brand-orange: 22 95% 60%; --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-heading: 'Outfit', var(--font-sans); --maxw: 1280px; --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.6); } :root { --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-heading: 'Outfit', var(--font-sans); --maxw: 1280px; --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.6); } /* LIGHT theme — when html does NOT have .dark */ html:not(.dark) { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 240 5.9% 10%; --primary-foreground: 0 0% 98%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 240 5.9% 10%; } * { box-sizing: border-box; } html { margin: 0; padding: 0; } body { margin: 0; padding: 0 16px; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: hsl(var(--background)); color: hsl(var(--foreground)); font-family: var(--font-sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } ::selection { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } img { max-width: 100%; height: auto; display: block; } a { color: hsl(var(--foreground)); text-decoration: none; transition: color .18s; } a:hover { color: hsl(var(--muted-foreground)); } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } @media (min-width: 768px) { .container { padding: 0 32px; } } @media (max-width: 640px) { body { padding: 0; } .container { padding-left: 20px; padding-right: 20px; } .article { padding-left: 20px; padding-right: 20px; } } h1, h2, h3, h4, h5 { font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.02em; color: hsl(var(--foreground)); margin: 0 0 12px; } /* --- HEADER --- */ .site-header { position: sticky; top: 0; z-index: 50; width: 100%; border-bottom: 1px solid hsl(var(--border) / 0.4); background: hsl(var(--background) / 0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform .3s, box-shadow .3s; } .site-header.scrolled { box-shadow: 0 4px 14px rgba(0,0,0,.25); } .site-header.hide { transform: translateY(-100%); } .nav-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } @media (min-width: 768px) { .nav-wrap { padding: 0 32px; } } .brand { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; color: hsl(var(--foreground)); } .brand .logo { width: 32px; height: 32px; border-radius: 8px; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); display: grid; place-items: center; font-weight: 700; font-size: 1.05rem; font-family: var(--font-heading); } .brand .tag { font-size: .68rem; padding: 1px 7px; border: 1px solid hsl(var(--border)); border-radius: 99px; font-weight: 400; opacity: .55; margin-left: 4px; } .brand-suffix { color: hsl(var(--muted-foreground)); font-weight: 700; } .nav { display: flex; align-items: center; gap: 4px; } .nav a { color: hsl(var(--muted-foreground)); padding: 8px 12px; font-size: .9rem; font-weight: 500; border-radius: 8px; transition: color .18s; } .nav a:hover { color: hsl(var(--foreground)); } .nav a.active { color: hsl(var(--foreground)); } .nav .sep { margin: 0 4px; opacity: .25; } .nav-cta { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 8px; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)) !important; font-weight: 600; font-size: .88rem; transition: background .18s, transform .18s; } .nav-cta:hover { background: hsl(var(--primary) / 0.9); color: hsl(var(--primary-foreground)) !important; } .nav-login { font-size: .9rem; font-weight: 500; color: hsl(var(--muted-foreground)) !important; } .nav-login:hover { color: hsl(var(--foreground)) !important; } .theme-toggle, .menu-toggle { background: transparent; border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color .18s, background .18s; } .theme-toggle:hover, .menu-toggle:hover { color: hsl(var(--foreground)); background: hsl(var(--accent)); } .theme-toggle .material-icons-round, .menu-toggle .material-icons-round { font-size: 18px; } .menu-toggle { display: none; } @media (max-width: 900px) { .menu-toggle { display: inline-flex; } .nav { position: fixed; left: 0; right: 0; top: 64px; flex-direction: column; align-items: stretch; padding: 14px; background: hsl(var(--background)); border-bottom: 1px solid hsl(var(--border)); max-height: calc(100vh - 64px); overflow: auto; transform: translateY(-130%); transition: transform .3s ease; } .nav.open { transform: translateY(0); } .nav a { padding: 12px 14px; font-size: 1rem; } .nav .sep { display: none; } } /* --- BREADCRUMBS --- */ .breadcrumbs { max-width: var(--maxw); margin: 0 auto; padding: 14px 16px 4px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .85rem; color: hsl(var(--muted-foreground)); } @media (min-width: 768px) { .breadcrumbs { padding: 14px 32px 4px; } } .breadcrumbs a { color: hsl(var(--muted-foreground)); display: inline-flex; align-items: center; gap: 4px; } .breadcrumbs a:hover { color: hsl(var(--foreground)); } .breadcrumbs .sep { opacity: .4; } .breadcrumbs .current { color: hsl(var(--foreground)); font-weight: 500; } /* --- HERO --- */ .hero { position: relative; padding: 60px 0 32px; text-align: center; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: -50% 0 auto 0; height: 380px; pointer-events: none; background: radial-gradient(60% 60% at 50% 0%, hsl(var(--brand-indigo) / 0.18), hsl(var(--brand-purple) / 0.12) 45%, transparent 75%); z-index: -1; } .kicker { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 500; padding: 4px 12px; border-radius: 99px; background: hsl(var(--secondary) / 0.5); border: 1px solid hsl(var(--border)); color: hsl(var(--secondary-foreground)); margin-bottom: 18px; backdrop-filter: blur(4px); } .kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--brand-emerald)); box-shadow: 0 0 8px hsl(var(--brand-emerald) / 0.8); animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } } .hero h1 { font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.1; letter-spacing: -.025em; margin: 0 0 16px; } .hero .lead { font-size: 1.1rem; color: hsl(var(--muted-foreground)); max-width: 720px; margin: 0 auto 28px; } .btn-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* --- BUTTONS --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 24px; border-radius: 10px; font-family: var(--font-sans); font-weight: 600; font-size: .95rem; border: 1px solid transparent; cursor: pointer; transition: all .18s; text-decoration: none; position: relative; overflow: hidden; } .btn:hover { transform: translateY(-1px); text-decoration: none; } .btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)) !important; } .btn-primary:hover { background: hsl(var(--primary) / 0.9); color: hsl(var(--primary-foreground)) !important; } .btn-ghost { background: transparent; color: hsl(var(--foreground)) !important; border-color: hsl(var(--border)); } .btn-ghost:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)) !important; } .btn-gradient { background: linear-gradient(135deg, hsl(var(--brand-indigo)), hsl(var(--brand-purple))); color: #fff !important; border: 0; } .btn-gradient:hover { filter: brightness(1.1); color: #fff !important; } .btn .ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.35); transform: scale(0); animation: rip .55s ease-out; pointer-events: none; } @keyframes rip { to { transform: scale(4); opacity: 0; } } /* --- ARTICLE LAYOUT --- */ .article { max-width: 1200px; margin: 24px auto 0; padding: 0 16px; display: grid; grid-template-columns: 240px 1fr; gap: 36px; } @media (min-width: 768px) { .article { padding: 0 32px; } } @media (max-width: 980px) { .article { grid-template-columns: 1fr; } } .toc { position: sticky; top: 84px; align-self: start; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 18px; font-size: .9rem; max-height: calc(100vh - 100px); overflow: auto; } .toc h4 { margin: 0 0 12px; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: hsl(var(--muted-foreground)); font-weight: 600; } .toc ol { margin: 0; padding-left: 20px; } .toc a { display: block; color: hsl(var(--muted-foreground)); padding: 5px 6px; border-radius: 6px; line-height: 1.4; } .toc a:hover { color: hsl(var(--foreground)); background: hsl(var(--accent) / 0.6); } .toc a.active { color: hsl(var(--foreground)); background: hsl(var(--accent)); font-weight: 600; } .article-body { min-width: 0; } .article-body h1 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); margin: 0 0 14px; letter-spacing: -.02em; line-height: 1.18; } .article-body h2 { font-size: 1.5rem; margin: 36px 0 12px; scroll-margin-top: 90px; } .article-body h3 { font-size: 1.2rem; margin: 28px 0 10px; scroll-margin-top: 90px; } .article-body p { margin: 0 0 14px; color: hsl(var(--foreground) / 0.92); } .article-body ul, .article-body ol { margin: 0 0 16px; padding-left: 22px; color: hsl(var(--foreground) / 0.92); } .article-body li { margin-bottom: 6px; } .article-body strong { color: hsl(var(--foreground)); } .article-body blockquote { border-left: 3px solid hsl(var(--brand-indigo)); background: hsl(var(--card)); padding: 14px 18px; margin: 18px 0; border-radius: 10px; color: hsl(var(--foreground) / 0.92); } .article-body table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 18px 0; font-size: .92rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); overflow: hidden; } .article-body th, .article-body td { padding: 11px 14px; border-bottom: 1px solid hsl(var(--border)); text-align: left; vertical-align: top; } .article-body tr:last-child td { border-bottom: 0; } .article-body th { background: hsl(var(--accent) / 0.4); font-weight: 600; color: hsl(var(--foreground)); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; } .article-body tr:hover td { background: hsl(var(--accent) / 0.3); } .meta { display: flex; gap: 12px; flex-wrap: wrap; color: hsl(var(--muted-foreground)); font-size: .88rem; margin-bottom: 22px; } .meta .tag { background: hsl(var(--secondary)); padding: 2px 10px; border-radius: 99px; color: hsl(var(--secondary-foreground)); font-size: .75rem; } /* --- CARDS --- */ .grid { display: grid; gap: 18px; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 780px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } } @media (min-width: 780px) and (max-width: 1024px) { .grid-3 { grid-template-columns: 1fr 1fr; } } .card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 22px; transition: border-color .22s, transform .22s, box-shadow .22s; position: relative; overflow: hidden; } .card:hover { border-color: hsl(var(--primary) / 0.5); transform: translateY(-3px); } .card h3 { margin: 0 0 8px; font-size: 1.08rem; line-height: 1.35; } .card h3 a { color: hsl(var(--foreground)); } .card h3 a:hover { color: hsl(var(--muted-foreground)); } .card .excerpt { color: hsl(var(--muted-foreground)); font-size: .92rem; margin: 0 0 14px; } .card .tag { display: inline-block; font-size: .68rem; background: hsl(var(--secondary)); border: 1px solid hsl(var(--border)); padding: 2px 9px; border-radius: 99px; color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; font-weight: 500; } .card .icon { width: 40px; height: 40px; border-radius: 10px; background: hsl(var(--accent)); color: hsl(var(--foreground)); display: grid; place-items: center; margin-bottom: 14px; } .card.feature-emerald .icon { background: hsl(var(--brand-emerald) / 0.15); color: hsl(var(--brand-emerald)); } .card.feature-amber .icon { background: hsl(var(--brand-amber) / 0.15); color: hsl(var(--brand-amber)); } .card.feature-blue .icon { background: hsl(var(--brand-blue) / 0.15); color: hsl(var(--brand-blue)); } .card.feature-purple .icon { background: hsl(var(--brand-purple) / 0.15); color: hsl(var(--brand-purple)); } .card.feature-pink .icon { background: hsl(var(--brand-pink) / 0.15); color: hsl(var(--brand-pink)); } .card.feature-orange .icon { background: hsl(var(--brand-orange) / 0.15); color: hsl(var(--brand-orange)); } /* --- CTA BOX --- */ .cta-box { position: relative; overflow: hidden; background: linear-gradient(135deg, hsl(var(--brand-indigo) / 0.15), hsl(var(--brand-purple) / 0.10)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 28px; margin: 30px 0; text-align: center; } .cta-box::before { content: ""; position: absolute; inset: -50% -10% auto auto; width: 70%; height: 200%; background: radial-gradient(circle, hsl(var(--brand-indigo) / 0.2), transparent 65%); pointer-events: none; } .cta-box h3 { margin: 0 0 8px; font-size: 1.35rem; position: relative; } .cta-box p { color: hsl(var(--muted-foreground)); margin: 0 0 18px; position: relative; } .cta-box .btn { position: relative; } /* --- FAQ --- */ .faq { margin-top: 32px; } .faq-item { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 10px; margin-bottom: 10px; overflow: hidden; transition: border-color .2s; } .faq-item:hover { border-color: hsl(var(--primary) / 0.3); } .faq-q { width: 100%; text-align: left; background: transparent; border: 0; padding: 15px 18px; color: hsl(var(--foreground)); font-family: var(--font-sans); font-size: 1rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .faq-q::after { content: "+"; font-size: 1.4rem; color: hsl(var(--muted-foreground)); transition: transform .3s; flex-shrink: 0; } .faq-item.open .faq-q::after { transform: rotate(45deg); color: hsl(var(--foreground)); } .faq-a { padding: 0 18px; max-height: 0; overflow: hidden; color: hsl(var(--muted-foreground)); transition: max-height .3s, padding .25s; } .faq-item.open .faq-a { padding: 0 18px 16px; max-height: 600px; } .faq-a p { margin: 0 0 8px; } /* --- SHARE --- */ .share { display: flex; gap: 8px; flex-wrap: wrap; margin: 24px 0; } .share button { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); border: 1px solid hsl(var(--border)); padding: 7px 14px; border-radius: 99px; font-size: .82rem; font-family: var(--font-sans); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all .2s; } .share button:hover { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); } .share button.copied { background: hsl(var(--brand-emerald)); color: #fff; border-color: hsl(var(--brand-emerald)); } /* --- AUTHOR --- */ .author { display: flex; gap: 14px; align-items: center; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 18px; margin-top: 32px; } .author .avatar { width: 50px; height: 50px; border-radius: 50%; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; display: grid; place-items: center; flex-shrink: 0; } .author .name { font-weight: 700; color: hsl(var(--foreground)); } .author .bio { color: hsl(var(--muted-foreground)); font-size: .88rem; margin-top: 2px; } /* --- FOOTER --- */ .site-footer { border-top: 1px solid hsl(var(--border)); background: hsl(var(--card)); padding: 44px 0 24px; margin-top: 60px; color: hsl(var(--muted-foreground)); font-size: .92rem; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; } .footer-grid h5 { color: hsl(var(--foreground)); font-family: var(--font-heading); font-size: 1rem; font-weight: 700; margin: 0 0 14px; } .footer-grid a { display: block; color: hsl(var(--muted-foreground)); padding: 4px 0; font-size: .9rem; transition: color .18s; } .footer-grid a:hover { color: hsl(var(--foreground)); } .footer-grid p { margin: 0 0 8px; line-height: 1.55; max-width: 320px; } .copyright { text-align: center; margin-top: 30px; padding-top: 22px; border-top: 1px solid hsl(var(--border)); font-size: .85rem; } @media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } } /* --- TOOLS / FORMS --- */ .tool { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 22px; margin: 18px 0; } .tool label { display: block; margin: 10px 0 4px; font-size: .82rem; font-weight: 500; color: hsl(var(--muted-foreground)); } .tool input, .tool select { width: 100%; height: 44px; padding: 0 14px; background: hsl(var(--background)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); border-radius: 8px; font-family: var(--font-sans); font-size: 1rem; transition: border-color .2s, box-shadow .2s; } .tool input:focus, .tool select:focus { outline: 0; border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--primary) / 0.15); } .tool .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 560px) { .tool .row { grid-template-columns: 1fr; } } .tool .result { background: hsl(var(--accent)); border: 1px solid hsl(var(--border)); border-left: 3px solid hsl(var(--brand-emerald)); border-radius: 8px; padding: 16px; margin-top: 18px; font-size: 1rem; color: hsl(var(--foreground)); } .tool .result b { color: hsl(var(--brand-emerald)); font-size: 1.2rem; font-family: var(--font-heading); } /* --- POST NAV / RELATED --- */ .related { margin-top: 42px; } .related h3 { margin: 0 0 14px; font-size: 1.25rem; } .note { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-left: 3px solid hsl(var(--brand-amber)); border-radius: 8px; padding: 12px 16px; margin: 16px 0; color: hsl(var(--foreground) / 0.92); } /* --- POPUP CTA --- */ .fxp-cta-pop { position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 80; pointer-events: none; display: flex; justify-content: center; opacity: 0; transform: translateY(20px); transition: opacity .35s, transform .35s; } .fxp-cta-pop.show { opacity: 1; transform: translateY(0); } .fxp-cta-card { pointer-events: auto; max-width: 360px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-lg); position: relative; } .fxp-cta-card h3 { margin: 0 0 6px; font-size: 1.05rem; } .fxp-cta-card p { margin: 0 0 14px; color: hsl(var(--muted-foreground)); font-size: .9rem; } .fxp-btn { display: inline-flex; align-items: center; height: 38px; padding: 0 18px; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)) !important; border-radius: 8px; font-weight: 600; font-size: .9rem; transition: background .18s; } .fxp-btn:hover { background: hsl(var(--primary) / 0.9); } .fxp-cta-close { position: absolute; top: 8px; right: 10px; background: 0; border: 0; color: hsl(var(--muted-foreground)); font-size: 1.4rem; cursor: pointer; line-height: 1; } /* --- READ PROGRESS / TO TOP --- */ .read-bar { position: fixed; top: 0; left: 0; height: 2px; background: linear-gradient(90deg, hsl(var(--brand-emerald)), hsl(var(--brand-indigo))); width: 0; z-index: 60; transition: width .1s linear; } .to-top { position: fixed; right: 16px; bottom: 16px; width: 42px; height: 42px; border-radius: 50%; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border: 0; display: none; align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer; z-index: 55; box-shadow: 0 8px 20px rgba(0,0,0,.35); transition: transform .25s; } .to-top.show { display: inline-flex; } .to-top:hover { transform: translateY(-3px); } /* --- SCROLL REVEAL --- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s, transform .6s; } .reveal.in { opacity: 1; transform: translateY(0); } /* --- MOBILE HERO TIGHTENING --- */ @media (max-width: 640px) { .hero { padding: 36px 0 16px; } .hero h1 { font-size: 1.85rem; } .hero .lead { font-size: 1rem; } .article { gap: 22px; margin-top: 16px; } .toc { position: static; max-height: none; } .nav-wrap { height: 56px; } .breadcrumbs { padding: 10px 16px 0; } } /* Material icons fallback sizing */ .material-icons-round { font-size: 20px; vertical-align: middle; } /* --- GLOBAL SEARCH MODAL --- */ .search-toggle { background: transparent; border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color .18s, background .18s; margin-right: 8px; } .search-toggle:hover { color: hsl(var(--foreground)); background: hsl(var(--accent)); } .search-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 99999; display: flex; justify-content: center; align-items: flex-start; padding: 80px 16px 16px; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; } .search-overlay.open { opacity: 1; pointer-events: auto; } .search-modal { width: 100%; max-width: 600px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; transform: translateY(-20px); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; max-height: 480px; } .search-overlay.open .search-modal { transform: translateY(0); } .search-input-wrap { display: flex; align-items: center; padding: 16px; border-bottom: 1px solid hsl(var(--border)); gap: 12px; } .search-input-wrap .material-icons-round { color: hsl(var(--muted-foreground)); font-size: 24px; } .search-input { flex-grow: 1; border: 0 !important; background: transparent !important; color: hsl(var(--foreground)) !important; font-size: 1.1rem !important; font-weight: 500 !important; padding: 0 !important; height: auto !important; box-shadow: none !important; } .search-input:focus { outline: none !important; } .search-close-btn { background: hsl(var(--secondary)); border: 0; color: hsl(var(--muted-foreground)); padding: 4px 8px; border-radius: 4px; font-size: 0.72rem; font-weight: 700; cursor: pointer; } .search-results { overflow-y: auto; padding: 12px; flex-grow: 1; } .search-item { display: flex; flex-direction: column; padding: 12px; border-radius: 10px; cursor: pointer; transition: background 0.18s; margin-bottom: 6px; text-decoration: none !important; color: inherit !important; } .search-item:last-child { margin-bottom: 0; } .search-item:hover, .search-item.selected { background: hsl(var(--secondary) / 0.8); } .search-item-title { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; color: hsl(var(--foreground)); margin-bottom: 4px; display: flex; align-items: center; justify-content: center; gap: 8px; } .search-item-tag { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 6px; border-radius: 4px; background: hsl(var(--secondary)); color: hsl(var(--muted-foreground)); display: inline-block; } .search-item-desc { font-size: 0.82rem; color: hsl(var(--muted-foreground)); line-height: 1.4; } .search-empty { padding: 32px 16px; text-align: center; color: hsl(var(--muted-foreground)); font-size: 0.95rem; } .search-shortcut-hint { font-size: 0.75rem; color: hsl(var(--muted-foreground)); padding: 10px 16px; border-top: 1px solid hsl(var(--border)); background: hsl(var(--secondary) / 0.2); display: flex; justify-content: space-between; align-items: center; } .search-kbd { background: hsl(var(--secondary)); border: 1px solid hsl(var(--border)); border-radius: 4px; padding: 2px 6px; font-size: 0.7rem; font-family: monospace; } .hero-search-wrap:hover { border-color: hsl(var(--brand-indigo)) !important; box-shadow: 0 4px 20px hsl(var(--brand-indigo) / 0.15) !important; }