/* ============================================================ OAKOrc · Services B-route · 服務內頁 mono spec sheet 風格 Preview only — sync to production after approval ============================================================ */ /* Fonts loaded via in HTML for parallel fetch (LCP opt 2026-05-01) */ :root { --oak-black: #0A0A0A; --oak-tungsten: #3A3A3C; --oak-fire: #E85D2F; --oak-fire-hover: #D14D20; --oak-fog: #F2F2F0; --oak-neutral: #8E8E93; --rail: #1F1F21; --rail-strong: #2E2E30; --container: 1280px; --gutter-page: clamp(24px, 4vw, 64px); --ease-out: cubic-bezier(.2, .7, .2, 1); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--oak-black); color: var(--oak-fog); -webkit-font-smoothing: antialiased; } body { font-family: "Inter", "Noto Sans TC", system-ui, sans-serif; line-height: 1.6; } .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter-page); } a { color: inherit; text-decoration: none; } .skip-link { position: absolute; top: -48px; left: 16px; z-index: 200; padding: 10px 18px; border-radius: 4px; background: var(--oak-fire); color: #fff; font-family: "Space Grotesk", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .04em; transition: top .2s var(--ease-out); } .skip-link:focus { top: 12px; outline: 2px solid var(--oak-fog); outline-offset: 2px; } /* ───── TOPBAR ───── */ .topbar { position: sticky; top: 0; z-index: 40; background: rgba(10,10,10,0.86); backdrop-filter: blur(16px) saturate(1.1); border-bottom: 1px solid var(--rail); } .topbar-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; padding: 16px 0; } .topbar-brand { display: inline-flex; align-items: baseline; gap: 10px; font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.08em; color: var(--oak-fog); } .topbar-brand .fire { color: var(--oak-fire); } .topbar-brand .zh { color: var(--oak-neutral); font-weight: 500; font-size: 12px; letter-spacing: 0.05em; font-family: "Noto Sans TC", sans-serif; } .topbar nav { display: flex; justify-content: center; gap: 28px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--oak-neutral); } .topbar nav a { padding: 4px 0; border-bottom: 1px solid transparent; transition: color .22s var(--ease-out), border-color .22s var(--ease-out); } .topbar nav a:hover { color: var(--oak-fog); border-bottom-color: var(--oak-fire); } .topbar nav a.active { color: var(--oak-fire); border-bottom-color: var(--oak-fire); } .topbar-meta { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.14em; color: var(--oak-neutral); display: flex; gap: 14px; align-items: center; } .topbar-meta .pulse { width: 7px; height: 7px; background: var(--oak-fire); border-radius: 50%; animation: pulse 1.6s ease-in-out infinite; } .topbar-meta .lang b { color: var(--oak-fog); font-weight: 500; } .topbar-meta .lang a { color: var(--oak-neutral); transition: color .22s var(--ease-out); } .topbar-meta .lang a:hover { color: var(--oak-fire); } .topbar-meta .start { color: var(--oak-fog); border-bottom: 1px solid var(--oak-fog); padding-bottom: 2px; transition: color .22s var(--ease-out), border-color .22s var(--ease-out); } .topbar-meta .start:hover { color: var(--oak-fire); border-bottom-color: var(--oak-fire); } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } } /* ───── BREADCRUMB ───── */ .breadcrumb { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--oak-neutral); padding: 32px 0 24px; border-bottom: 1px solid var(--rail); } .breadcrumb a { color: var(--oak-neutral); transition: color .22s var(--ease-out); } .breadcrumb a:hover { color: var(--oak-fire); } .breadcrumb .sep { margin: 0 12px; color: var(--oak-tungsten); } .breadcrumb span:last-child { color: var(--oak-fog); font-weight: 500; } /* ───── SERVICE HERO ───── */ .svc-page-hero { padding: 56px 0 64px; border-bottom: 1px solid var(--rail); } .svc-hero-meta { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; padding-bottom: 24px; margin-bottom: 48px; border-bottom: 1px solid var(--rail); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.14em; color: var(--oak-neutral); text-transform: uppercase; } .svc-hero-meta .center { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; } .svc-hero-meta .center .item b { color: var(--oak-fog); font-weight: 500; } .svc-hero-meta .right { display: flex; gap: 10px; align-items: center; } .svc-hero-meta .right .pulse { width: 8px; height: 8px; background: var(--oak-fire); border-radius: 50%; animation: pulse 1.6s ease-in-out infinite; } .svc-hero-stage { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: end; } .svc-hero-l { border-left: 1.5px solid var(--oak-fire); padding-left: clamp(20px, 2.4vw, 32px); } .svc-hero-num { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--oak-fire); margin-bottom: 16px; display: block; } .svc-hero-h1 { font-family: "Noto Sans TC", sans-serif; font-weight: 700; font-size: clamp(40px, 5.4vw, 64px); line-height: 1.1; letter-spacing: -0.005em; color: var(--oak-fog); margin: 0 0 12px; } .svc-hero-h1 .en { display: block; font-family: "Space Grotesk", sans-serif; font-weight: 500; font-size: clamp(16px, 1.6vw, 22px); letter-spacing: 0.02em; color: var(--oak-neutral); margin-top: 8px; } .svc-hero-lede { font-family: "Noto Sans TC", sans-serif; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.65; color: #C7C7CB; max-width: 580px; margin: 24px 0; } .svc-hero-lede em { color: var(--oak-fire); font-style: normal; } .svc-hero-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 24px; } .svc-hero-actions .meta { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; color: var(--oak-neutral); letter-spacing: 0.08em; margin-left: 4px; } .svc-hero-spec { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0.08em; color: var(--oak-neutral); line-height: 1.9; } .svc-hero-spec .row { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--rail); } .svc-hero-spec .row:last-child { border-bottom: none; } .svc-hero-spec .row .k { color: var(--oak-tungsten); text-transform: uppercase; letter-spacing: 0.16em; font-size: 10.5px; } .svc-hero-spec .row .v { color: var(--oak-fog); font-weight: 500; } .svc-hero-spec .row .v.accent { color: var(--oak-fire); } /* ───── BUTTONS ───── */ .btn { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; padding: 13px 22px; border-radius: 0; border: 1px solid transparent; cursor: pointer; transition: background .22s var(--ease-out), color .22s var(--ease-out), border-color .22s var(--ease-out); display: inline-flex; align-items: center; gap: 12px; text-decoration: none; white-space: nowrap; } .btn .arr { transition: transform .22s var(--ease-out); } .btn:hover .arr { transform: translateX(4px); } .btn-primary { background: var(--oak-fire); color: #fff; border-color: var(--oak-fire); } .btn-primary:hover { background: var(--oak-fire-hover); border-color: var(--oak-fire-hover); } .btn-ghost-light { background: transparent; color: var(--oak-fog); border-color: var(--oak-fog); } .btn-ghost-light:hover { background: var(--oak-fog); color: var(--oak-black); } /* ───── SECTION ───── */ .svc-section { border-bottom: 1px solid var(--rail); } .svc-section[open] > summary { border-bottom: 1px solid var(--rail-strong); } .svc-section > summary { list-style: none; padding: 32px 0; cursor: pointer; user-select: none; position: relative; transition: background .22s var(--ease-out); } .svc-section > summary::-webkit-details-marker { display: none; } .svc-section > summary:hover { background: rgba(232, 93, 47, 0.03); } .svc-section > summary::after { content: "+"; position: absolute; right: var(--gutter-page); top: 32px; font-family: "JetBrains Mono", monospace; font-size: 24px; color: var(--oak-fire); transition: transform .22s var(--ease-out); } .svc-section[open] > summary::after { content: "−"; } .svc-section > summary .label { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--oak-fire); margin-bottom: 12px; display: block; } .svc-section > summary h1, .svc-section > summary h2 { font-family: "Noto Sans TC", sans-serif; font-weight: 700; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.2; color: var(--oak-fog); letter-spacing: -0.005em; margin: 0; max-width: 800px; } .svc-section > summary h1 .fire, .svc-section > summary h2 .fire { color: var(--oak-fire); } .svc-body { padding: 8px 0 56px; } .svc-body p { font-family: "Noto Sans TC", sans-serif; font-size: 15px; line-height: 1.85; color: #C7C7CB; max-width: 760px; margin: 0 0 18px; } .svc-body p strong { color: var(--oak-fog); font-weight: 500; } .svc-body p em { color: var(--oak-fire); font-style: normal; } /* ───── LISTS ───── */ .svc-list { list-style: none; padding: 0; margin: 24px 0; border-top: 1px solid var(--rail); } .svc-list li { padding: 16px 0 16px 28px; position: relative; border-bottom: 1px solid var(--rail); font-family: "Noto Sans TC", sans-serif; font-size: 14.5px; line-height: 1.7; color: #C7C7CB; } .svc-list li::before { content: ""; position: absolute; left: 0; top: 26px; width: 8px; height: 1.5px; background: var(--oak-fire); } .svc-list li strong { color: var(--oak-fog); font-weight: 500; font-family: "Noto Sans TC", sans-serif; } .svc-list li a { color: var(--oak-fire); border-bottom: 1px solid var(--oak-fire); } .svc-list li a:hover { color: var(--oak-fog); border-bottom-color: var(--oak-fog); } .svc-list.exclude li::before { background: var(--oak-tungsten); } .svc-list.exclude li { color: var(--oak-neutral); } /* ───── COMPARE ───── */ .svc-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 36px 0; } .svc-compare > div { padding: 24px; border: 1px solid var(--rail); background: rgba(255,255,255,0.015); } .svc-compare .now { border-color: var(--oak-fire); background: rgba(232, 93, 47, 0.04); } .svc-compare .tag { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--oak-tungsten); margin-bottom: 12px; } .svc-compare .now .tag { color: var(--oak-fire); } .svc-compare p { font-family: "Noto Sans TC", sans-serif; font-size: 14px; line-height: 1.7; color: #C7C7CB; margin: 0; } .svc-compare p strong { color: var(--oak-fog); font-weight: 500; } /* ───── FAQ ───── */ .svc-faq { border-top: 1px solid var(--rail); } .svc-faq details { border-bottom: 1px solid var(--rail); padding: 18px 32px 18px 0; position: relative; } .svc-faq details > summary { list-style: none; cursor: pointer; font-family: "Noto Sans TC", sans-serif; font-weight: 500; font-size: 16px; line-height: 1.5; color: var(--oak-fog); } .svc-faq details > summary::-webkit-details-marker { display: none; } .svc-faq details > summary::after { content: "+"; position: absolute; right: 0; top: 18px; font-family: "JetBrains Mono", monospace; font-size: 16px; color: var(--oak-fire); transition: transform .22s var(--ease-out); } .svc-faq details[open] > summary::after { content: "−"; } .svc-faq details p { font-family: "Noto Sans TC", sans-serif; font-size: 14px; line-height: 1.75; color: #C7C7CB; margin: 12px 0 0; max-width: 760px; } .svc-faq details p strong { color: var(--oak-fog); font-weight: 500; } .svc-faq details p em { color: var(--oak-fire); font-style: normal; } /* ───── PRICING TIERS ───── */ .svc-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rail-strong); border-bottom: 1px solid var(--rail-strong); margin: 24px 0; } .svc-tier { padding: 32px 28px; border-right: 1px solid var(--rail); display: flex; flex-direction: column; } .svc-tier:last-child { border-right: none; } .svc-tier.featured { background: rgba(232, 93, 47, 0.04); } .svc-tier .tier-tag { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--oak-neutral); margin-bottom: 16px; } .svc-tier.featured .tier-tag { color: var(--oak-fire); } .svc-tier .tier-name { font-family: "Noto Sans TC", sans-serif; font-weight: 700; font-size: 18px; color: var(--oak-fog); margin-bottom: 8px; letter-spacing: 0.005em; } .svc-tier .tier-price { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 22px; font-weight: 500; color: var(--oak-fog); margin-bottom: 24px; letter-spacing: -0.01em; } .svc-tier .tier-price .unit { font-size: 12px; color: var(--oak-neutral); margin-left: 4px; letter-spacing: 0.08em; } .svc-tier ul { list-style: none; padding: 0; margin: 0 0 20px; flex: 1; } .svc-tier ul li { font-family: "Noto Sans TC", sans-serif; font-size: 13.5px; line-height: 1.65; color: #C7C7CB; padding: 6px 0 6px 16px; position: relative; } .svc-tier ul li::before { content: "·"; position: absolute; left: 0; top: 6px; color: var(--oak-fire); font-weight: 700; } .svc-tier .tier-fit { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.08em; color: var(--oak-neutral); padding-top: 16px; border-top: 1px solid var(--rail); } /* ───── BOTTOM CTA ───── */ .svc-bottom-cta { padding: 96px 0; background: #050505; border-top: 1px solid var(--rail-strong); } .svc-bottom-cta h2 { font-family: "Noto Sans TC", sans-serif; font-weight: 700; font-size: clamp(32px, 4vw, 56px); line-height: 1.15; color: var(--oak-fog); letter-spacing: -0.005em; margin: 0 0 20px; } .svc-bottom-cta h2 .fire { color: var(--oak-fire); } .svc-bottom-cta .sub { font-family: "Noto Sans TC", sans-serif; font-size: 16px; line-height: 1.7; color: #C7C7CB; max-width: 720px; margin: 0 0 36px; } .svc-bottom-cta .actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 32px; } .svc-bottom-cta .actions .email { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; color: var(--oak-neutral); letter-spacing: 0.08em; margin-left: 8px; } .svc-bottom-cta .actions .email a { color: var(--oak-fog); border-bottom: 1px solid var(--oak-fire); padding-bottom: 1px; } .svc-bottom-cta .actions .email a:hover { color: var(--oak-fire); } .svc-bottom-cta .back-link { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--oak-neutral); transition: color .22s var(--ease-out); } .svc-bottom-cta .back-link:hover { color: var(--oak-fire); } /* ───── AUDIT FORM (web-redesign only) ───── */ .audit-form { display: grid; gap: 14px; margin: 32px 0 0; max-width: 540px; } .audit-form .field { display: flex; flex-direction: column; gap: 6px; } .audit-form label { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--oak-neutral); } .audit-form input, .audit-form select { background: rgba(255,255,255,0.03); border: 1px solid var(--rail-strong); color: var(--oak-fog); padding: 12px 14px; border-radius: 0; font-family: inherit; font-size: 15px; width: 100%; transition: border-color .2s ease; } .audit-form input:focus, .audit-form select:focus { outline: none; border-color: var(--oak-fire); } .audit-form input::placeholder { color: var(--oak-tungsten); } .audit-form .submit-row { display: flex; align-items: center; gap: 16px; margin-top: 8px; flex-wrap: wrap; } .audit-form .price-note { font-family: "Noto Sans TC", sans-serif; font-size: 13px; color: var(--oak-neutral); } .audit-form .price-note strong { color: var(--oak-fire); } .audit-form button.btn-primary { border-radius: 0; } /* ───── FUNNEL DIAGRAM (web-redesign only) ───── */ .funnel-flow { margin: 32px 0; } .funnel-flow .lane-grid { display: grid; grid-template-columns: 100px 1fr; gap: 16px; margin-bottom: 24px; } .funnel-flow .lane-label { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--oak-neutral); padding-top: 36px; } .funnel-flow .lane-label.client { color: var(--oak-fire); } .funnel-flow .bracket-row, .funnel-flow .lane-track { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .funnel-flow .bracket { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--oak-tungsten); text-align: center; padding: 4px 0; } .funnel-flow .bracket.fire { color: var(--oak-fire); } .funnel-flow .bracket.empty { color: transparent; } .funnel-flow .step { padding: 12px 10px; border: 1px solid var(--rail); background: rgba(255,255,255,0.02); min-height: 86px; font-family: "Noto Sans TC", sans-serif; font-size: 11.5px; color: #C7C7CB; line-height: 1.4; } .funnel-flow .step.empty { border: none; background: transparent; } .funnel-flow .step.client-active { border-color: var(--oak-fire); background: rgba(232, 93, 47, 0.06); } .funnel-flow .step.us-active { border-color: var(--oak-neutral); } .funnel-flow .step .ttl { font-weight: 500; color: var(--oak-fog); margin-bottom: 4px; } .funnel-flow .step .ttl strong { color: var(--oak-fog); font-weight: 500; } .funnel-flow .step .price-chip { display: inline-block; margin-top: 6px; font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 2px 8px; border: 1px solid var(--oak-fire); color: var(--oak-fire); } .funnel-flow .legend { display: flex; gap: 24px; margin-top: 16px; font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.14em; color: var(--oak-neutral); text-transform: uppercase; } .funnel-flow .legend-dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: middle; } .funnel-flow .legend-dot.client { background: var(--oak-fire); } .funnel-flow .legend-dot.us { background: var(--oak-neutral); } /* ───── PLACEHOLDER ───── */ .svc-cases-placeholder { padding: 36px; border: 1.5px dashed var(--rail-strong); text-align: center; margin: 24px 0; } .svc-cases-placeholder .pre { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--oak-fire); margin-bottom: 12px; } .svc-cases-placeholder h3 { font-family: "Noto Sans TC", sans-serif; font-weight: 700; font-size: 22px; color: var(--oak-fog); margin: 0 0 12px; } .svc-cases-placeholder p { font-family: "Noto Sans TC", sans-serif; font-size: 14px; line-height: 1.7; color: #C7C7CB; max-width: 560px; margin: 0 auto 24px; } .svc-cases-placeholder .actions { justify-content: center; } /* ───── FOOTER ───── */ footer { padding: 56px 0 32px; background: var(--oak-black); border-top: 1px solid var(--rail); } .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid var(--rail); } .foot-brand .mark { display: block; height: 58px; width: auto; margin-bottom: 18px; } .foot-brand .lede { font-family: "Noto Sans TC", sans-serif; font-size: 13px; line-height: 1.7; color: #C7C7CB; margin: 0 0 18px; max-width: 380px; } .foot-brand .est { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--oak-neutral); } .foot-col h4 { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--oak-tungsten); margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--rail); } .foot-col ul { list-style: none; padding: 0; margin: 0; } .foot-col li { font-family: "Noto Sans TC", sans-serif; font-size: 13px; color: #C7C7CB; padding: 6px 0; } .foot-col li a { transition: color .22s var(--ease-out); } .foot-col li a:hover { color: var(--oak-fire); } .foot-bottom { padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--oak-neutral); } .foot-bottom .tag { color: var(--oak-fog); letter-spacing: 0.18em; } /* ───── SCROLL TOP ───── */ .scroll-top { position: fixed; right: 24px; bottom: 40px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: transparent; color: var(--oak-fire); border: none; outline: 1.5px solid var(--oak-fire); outline-offset: -1px; border-radius: 999px; cursor: pointer; padding: 0; z-index: 100; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .28s var(--ease-out), transform .28s var(--ease-out), background .22s var(--ease-out), color .22s var(--ease-out); } .scroll-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .scroll-top:hover { background: var(--oak-fire); color: var(--oak-fog); } /* ───── RESPONSIVE ───── */ @media (max-width: 1024px) { .topbar-brand .zh { display: none; } .topbar-meta .start { display: none; } .svc-hero-stage { grid-template-columns: 1fr; gap: 48px; } .svc-hero-meta { grid-template-columns: 1fr; gap: 12px; } .svc-hero-meta .center { justify-content: flex-start; } .svc-tiers { grid-template-columns: 1fr; } .svc-tier { border-right: none; border-bottom: 1px solid var(--rail); } .svc-tier:last-child { border-bottom: none; } .foot-grid { grid-template-columns: 1fr 1fr; } .funnel-flow .lane-grid { grid-template-columns: 1fr; } .funnel-flow .lane-label { padding-top: 0; } .funnel-flow .bracket-row, .funnel-flow .lane-track { grid-template-columns: repeat(3, 1fr); } .funnel-flow .bracket.empty, .funnel-flow .step.empty { display: none; } } @media (max-width: 720px) { .topbar-row { grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 10px 16px; padding: 12px 0; } .topbar nav { grid-column: 1 / -1; gap: 18px; font-size: 10.5px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; } .topbar nav a { white-space: nowrap; flex: 0 0 auto; } .topbar-meta { justify-self: end; gap: 10px; } .svc-compare { grid-template-columns: 1fr; } .foot-grid { grid-template-columns: 1fr; gap: 28px; } .svc-section > summary { padding-right: 32px; } .svc-section > summary::after { right: 12px; top: 32px; } }