/* ============================================================================ site.css — shared chrome + components for the Telbox multi-page site. Loads ON TOP of styles.css (which defines the brand :root tokens + the home-only cinematic acts). Inner pages use a WITHOUT the `home` class, so styles.css's light-theme token override applies; this file styles the shared header/footer and the content components (heroes, cards, grids, pricing, code, CTA bands) those pages assemble from. ============================================================================ */ /* Inner pages: a clean light canvas. */ body.page { background: var(--paper); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; line-height: 1.6; margin: 0; } /* A few pages run a dark hero band; this keeps brand contrast crisp. */ :root { --site-nav-h: 64px; --ink-inverse: #F0EEFA; } .wrap { width: min(100% - 48px, var(--max)); margin-inline: auto; } .wrap-narrow { width: min(100% - 48px, var(--max-narrow)); margin-inline: auto; } /* ---------------------------------------------------------------- header --- */ .site-header { position: sticky; top: 0; z-index: 100; height: var(--site-nav-h); display: flex; align-items: center; gap: 24px; padding-inline: 24px; background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--line); } .site-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; } .site-brand img { height: 26px; width: 26px; display: block; } .site-brand span { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--ink); letter-spacing: -0.02em; } .site-footer .site-brand img { height: 28px; width: 28px; } .site-footer .site-brand span { font-size: 21px; } .site-nav { display: flex; gap: 6px; margin-inline-start: 8px; } .site-nav a { color: var(--ink-mid); text-decoration: none; font-size: 14.5px; font-weight: 500; padding: 7px 12px; border-radius: 9px; transition: color .15s, background .15s; } .site-nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--brand) 8%, transparent); } .site-nav a[aria-current="page"] { color: var(--brand-dark); } .site-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; } .btn-sm { padding: 8px 15px; font-size: 14px; border-radius: 10px; } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); } .btn-ghost:hover { border-color: var(--brand); color: var(--brand-dark); } .menu-toggle { display: none; } @media (max-width: 880px) { .site-nav, .site-actions .btn-ghost { display: none; } .site-actions { margin-inline-start: auto; } } /* ----------------------------------------------------------------- hero --- */ .page-hero { padding: clamp(48px, 9vw, 104px) 0 clamp(36px, 6vw, 64px); } .page-hero .eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-dark); margin-bottom: 18px; } .page-hero h1 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.025em; font-size: clamp(38px, 6.4vw, 68px); line-height: 1.04; margin: 0 0 20px; color: var(--ink); max-width: 18ch; } .page-hero .lede { font-size: clamp(18px, 2.2vw, 22px); color: var(--ink-mid); max-width: 60ch; margin: 0 0 28px; } .grad-text { background: var(--brand-gradient-h); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; } /* dark hero band variant (developers / security splash) */ .band-dark { background: var(--navy); color: var(--ink-inverse); position: relative; overflow: hidden; } .band-dark h1, .band-dark h2 { color: var(--ink-inverse); } .band-dark .lede { color: #B5B3CC; } .band-dark .eyebrow { color: var(--brand-cyan); } .band-aura { position: absolute; inset: -40% -10% auto auto; width: 60%; height: 120%; background: radial-gradient(50% 50% at 70% 30%, rgba(36,215,255,.16), transparent 70%); pointer-events: none; } /* --------------------------------------------------------------- section --- */ .section { padding: clamp(44px, 7vw, 88px) 0; } .section-kicker { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-dark); margin: 0 0 12px; } .section h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(28px, 4vw, 44px); line-height: 1.1; margin: 0 0 16px; color: var(--ink); } .section .sub { font-size: clamp(17px, 1.8vw, 20px); color: var(--ink-mid); max-width: 64ch; margin: 0 0 40px; } .center { text-align: center; margin-inline: auto; } .center .sub { margin-inline: auto; } /* ----------------------------------------------------------------- grid --- */ .grid { display: grid; gap: 20px; } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } .card { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-card); } .card .ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 16px; background: var(--brand-gradient-soft); color: var(--brand-dark); font-size: 20px; } .card h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; margin: 0 0 8px; color: var(--ink); letter-spacing: -0.01em; } .card p { color: var(--ink-mid); font-size: 15.5px; margin: 0; } .band-dark .card { background: var(--surface-2); border-color: var(--line); } .band-dark .card h3 { color: var(--ink-inverse); } .band-dark .card p { color: #B5B3CC; } /* feature with checkmark list */ .checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .checks li { display: flex; gap: 11px; align-items: flex-start; color: var(--ink-mid); font-size: 16px; } .checks li::before { content: "✓"; color: var(--brand-dark); font-weight: 800; flex: none; margin-top: 1px; } /* split: text + visual */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .split.rev > :first-child { order: 2; } @media (max-width: 860px) { .split, .split.rev { grid-template-columns: 1fr; gap: 28px; } .split.rev > :first-child { order: 0; } } /* ----------------------------------------------------------------- code --- */ .code { background: #0B1331; border: 1px solid #20264a; border-radius: var(--radius); padding: 18px 20px; overflow-x: auto; font: 13.5px/1.65 ui-monospace, "SF Mono", Menlo, monospace; color: #C7D2FE; } .code .c { color: #6B7299; } .code .k { color: #7A9CFF; } .code .s { color: #6FE3C4; } .code .f { color: #C792EA; } .code .codetab { color: var(--ink-soft); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px; } /* badge / pill */ .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--brand-gradient-soft); color: var(--brand-dark); } .pill-verified::before { content: "✓"; font-weight: 800; } /* --------------------------------------------------------------- pricing --- */ .tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: start; } @media (max-width: 1000px) { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .tiers { grid-template-columns: 1fr; } } .tier { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 22px; } /* display:block MUST stay scoped to .tiers. styles.css (loaded first, for the home page) defines bare .tier as a 2-column grid for the home page's vertical pricing "ladder" (.tier-ladder > .tier). An unscoped reset here flattens that ladder; scoping to .tiers .tier resets only the new multi-page pricing-card grid, which is the only place .tier lives inside .tiers. */ .tiers .tier { display: block; } .tier.featured { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow-card); position: relative; } .tier.featured::after { content: "Most popular"; position: absolute; top: -11px; left: 22px; background: var(--brand-gradient-h); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; } .tier .name { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); } .tier .price { font-family: var(--font-display); font-weight: 800; font-size: 38px; letter-spacing: -0.02em; color: var(--ink); margin: 8px 0 2px; } .tier .price small { font-size: 15px; font-weight: 500; color: var(--ink-soft); } .tier .price-note { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 18px; } .tier .checks li { font-size: 14.5px; } .tier .btn { width: 100%; justify-content: center; margin-top: 22px; } /* ------------------------------------------------------------- cta band --- */ .cta-band { background: var(--navy); color: var(--ink-inverse); border-radius: 32px; padding: clamp(40px, 6vw, 72px); text-align: center; position: relative; overflow: hidden; } .cta-band h2 { color: var(--ink-inverse); font-size: clamp(28px, 4vw, 44px); margin: 0 0 14px; } .cta-band p { color: #B5B3CC; font-size: 18px; max-width: 56ch; margin: 0 auto 28px; } /* stat row */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; } @media (max-width: 620px) { .stats { grid-template-columns: 1fr; } } .stat .n { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 5vw, 52px); background: var(--brand-gradient-h); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.02em; } .stat .l { color: var(--ink-mid); font-size: 15px; } /* ----------------------------------------------------------------- foot --- */ .site-footer { border-top: 1px solid var(--line); padding: 56px 0 40px; margin-top: 40px; background: var(--paper); } .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; } @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } } .footer-col h4 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 14px; font-weight: 700; } .footer-col a { display: block; color: var(--ink-mid); text-decoration: none; font-size: 14.5px; padding: 5px 0; } .footer-col a:hover { color: var(--brand-dark); } .footer-about p { color: var(--ink-mid); font-size: 14.5px; max-width: 34ch; margin: 12px 0 0; } .footer-bottom { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 13.5px; } .footer-bottom .lang a { color: var(--ink-soft); text-decoration: none; } .footer-bottom .lang a:hover { color: var(--brand-dark); } /* ------------------------------------------------------------------ faq --- */ .faq-group { margin-bottom: 40px; } .faq-group > h2 { font-size: clamp(22px, 2.6vw, 28px); margin: 0 0 8px; } details.faq { border-bottom: 1px solid var(--line); } details.faq summary { cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--ink); padding: 18px 40px 18px 0; position: relative; list-style: none; } details.faq summary::-webkit-details-marker { display: none; } details.faq summary::after { content: "+"; position: absolute; right: 6px; top: 15px; font-size: 24px; line-height: 1; color: var(--brand-dark); font-weight: 300; transition: transform .15s; } details.faq[open] summary::after { content: "\2013"; } details.faq summary:hover { color: var(--brand-dark); } details.faq .faq-a { color: var(--ink-mid); font-size: 16px; line-height: 1.65; padding: 0 40px 20px 0; } details.faq .faq-a a { color: var(--brand-dark); font-weight: 600; text-decoration: none; } details.faq .faq-a a:hover { text-decoration: underline; } /* small helpers */ .muted { color: var(--ink-soft); } .lead-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .tag { font-size: 12px; font-weight: 600; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; } a.textlink { color: var(--brand-dark); font-weight: 600; text-decoration: none; } a.textlink:hover { text-decoration: underline; }