/* ====================================================================== Cordibly — USB-C Basics child pages Depends on global styles.css tokens/components. Scope: pages that set ====================================================================== */ /* ====================================================================== Page foundation ====================================================================== */ .usbcb-page { background: var(--color-bg); } /* ====================================================================== Inline editorial links Keep in-body links distinguishable by more than color alone. ====================================================================== */ .usbcb-page p a:not(.btn-main):not(.btn-outline) { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; } .usbcb-page p a:not(.btn-main):not(.btn-outline):hover, .usbcb-page p a:not(.btn-main):not(.btn-outline):focus-visible { text-decoration-thickness: 0.12em; } /* ---------------------------- HERO ----------------------------- */ .usbcb-page .basics-hero { position: relative; background: linear-gradient(180deg, var(--color-white) 0%, var(--color-bg) 100%); border-bottom: 1px solid var(--color-border); } .usbcb-page .basics-hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--color-gold); } .usbcb-page .basics-hero-grid { display: grid; gap: var(--space-8); align-items: center; } @media (min-width: 960px) { .usbcb-page .basics-hero-grid { grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.85fr); } } .usbcb-page .basics-hero-copy { max-width: 760px; } .usbcb-page .basics-hero-copy h1 { margin-bottom: var(--space-5); font-size: clamp(2.25rem, 5vw, 4rem); line-height: var(--line-height-tight); } .usbcb-page .basics-lead { max-width: 68ch; margin-bottom: var(--space-6); color: var(--color-text-muted); font-size: clamp(1.0625rem, 1.8vw, 1.1875rem); line-height: 1.7; } .usbcb-page .basics-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; } @media (max-width: 560px) { .usbcb-page .basics-hero-actions { flex-direction: column; align-items: stretch; } .usbcb-page .basics-hero-actions .btn-main, .usbcb-page .basics-hero-actions .btn-outline { width: 100%; } } /* Hero quick gate */ .usbcb-page .basics-hero-gate { position: relative; overflow: hidden; border-top: 4px solid var(--color-gold); } .usbcb-page .basics-hero-gate::after { content: ""; position: absolute; right: -48px; bottom: -48px; width: 160px; height: 160px; border-radius: 50%; background: var(--color-royal-light); opacity: 0.7; pointer-events: none; } .usbcb-page .basics-hero-gate > * { position: relative; z-index: 1; } .usbcb-page .basics-gate-title { margin-bottom: var(--space-3); font-size: clamp(1.35rem, 2vw, 1.75rem); } .usbcb-page .basics-gate-text { margin-bottom: var(--space-5); color: var(--color-text-muted); line-height: 1.65; } .usbcb-page .basics-gate-list { display: flex; flex-wrap: wrap; gap: var(--space-2); } /* ====================================================================== Start here / quick sorter Replaces the old Quick Verdict + Mental Model split sections. ====================================================================== */ .usbcb-page .usbcb-verdict { background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-white) 100%); border-bottom: 1px solid var(--color-border); } .usbcb-page .usbcb-verdict-frame { position: relative; display: grid; gap: var(--space-6); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-card); box-shadow: var(--shadow); padding: var(--space-6); } .usbcb-page .usbcb-verdict-frame > * { position: relative; z-index: 1; } .usbcb-page .usbcb-verdict-header { display: grid; gap: var(--space-3); } .usbcb-page .usbcb-verdict-header .eyebrow { margin-bottom: 0; } .usbcb-page .usbcb-verdict-header h2 { margin-bottom: 0; } .usbcb-page .usbcb-verdict-intro { margin-bottom: 0; color: var(--color-text-muted); } /* Route cards */ .usbcb-page .usbcb-card-grid { counter-reset: usbcb-route; display: grid; gap: var(--space-4); align-items: stretch; } @media (min-width: 860px) { .usbcb-page .usbcb-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .usbcb-page .usbcb-mini-card { counter-increment: usbcb-route; position: relative; display: flex; flex-direction: column; min-height: 100%; padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius); background: linear-gradient(180deg, var(--color-white) 0%, var(--color-bg) 100%); box-shadow: var(--shadow-sm); } .usbcb-page .usbcb-mini-card::before { content: "Route " counter(usbcb-route); display: inline-flex; align-items: center; width: fit-content; margin-bottom: var(--space-4); padding: 0.25rem 0.65rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-card); color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.08em; line-height: 1.35; text-transform: uppercase; } .usbcb-page .usbcb-mini-card--primary { border-color: var(--color-gold-border); background: var(--color-gold-tint); } .usbcb-page .usbcb-mini-card--primary::before { border-color: var(--color-gold-border); background: var(--color-gold); color: var(--color-obsidian); } .usbcb-page .usbcb-mini-card .pill { align-self: flex-start; margin-bottom: var(--space-4); } .usbcb-page .usbcb-mini-card h3 { margin-bottom: var(--space-3); font-size: clamp(1.2rem, 2vw, 1.45rem); } .usbcb-page .usbcb-mini-card p { color: var(--color-text-muted); } .usbcb-page .usbcb-mini-card p:last-child { margin-top: auto; margin-bottom: 0; padding-top: var(--space-4); border-top: 1px solid var(--color-border); font-size: var(--font-size-small); } /* Bottom rule */ .usbcb-page .usbcb-verdict-rule { display: grid; gap: var(--space-5); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg); } .usbcb-page .usbcb-verdict-rule .small-heading { margin-bottom: var(--space-2); } .usbcb-page .usbcb-verdict-rule-text { margin-bottom: 0; color: var(--color-text-muted); } .usbcb-page .usbcb-verdict-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: stretch; padding-top: var(--space-4); border-top: 1px solid var(--color-border); } .usbcb-page .usbcb-verdict-actions .btn-main, .usbcb-page .usbcb-verdict-actions .btn-outline { flex: 1 1 220px; text-align: center; } @media (max-width: 560px) { .usbcb-page .usbcb-verdict-actions { flex-direction: column; } .usbcb-page .usbcb-verdict-actions .btn-main, .usbcb-page .usbcb-verdict-actions .btn-outline { flex: 0 1 auto; width: 100%; } } /* ====================================================================== Flagship comparison section ====================================================================== */ .usbcb-page .usbcb-comparison { background: var(--color-dark); border-top: 1px solid var(--color-border-dark); border-bottom: 1px solid var(--color-border-dark); } .usbcb-page .usbcb-comparison-frame { position: relative; display: grid; gap: var(--space-6); overflow: hidden; padding: var(--space-6); border: 1px solid var(--color-border-dark-strong); border-radius: var(--radius-lg); background: var(--color-panel-dark-muted); box-shadow: var(--shadow); } .usbcb-page .usbcb-comparison-frame > * { position: relative; z-index: 1; } .usbcb-page .usbcb-comparison-header { display: grid; gap: var(--space-3); } .usbcb-page .usbcb-comparison-header .eyebrow { margin-bottom: 0; color: var(--color-gold); } .usbcb-page .usbcb-comparison-header h2 { margin-bottom: 0; color: var(--color-text-on-dark); } .usbcb-page .usbcb-comparison-intro { margin-bottom: 0; color: var(--color-text-muted-on-dark); } /* Spec baseline */ .usbcb-page .usbcb-spec-baseline { display: grid; gap: var(--space-5); padding: var(--space-5); border: 1px solid var(--color-border-dark-strong); border-radius: var(--radius-lg); background: var(--color-card-dark); } .usbcb-page .usbcb-spec-baseline-head { display: grid; gap: var(--space-3); padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border-dark); } .usbcb-page .usbcb-spec-baseline-head .small-heading { margin-bottom: 0; color: var(--color-gold); } .usbcb-page .usbcb-spec-baseline-head h3 { margin-bottom: 0; color: var(--color-text-on-dark); font-size: clamp(1.25rem, 2.3vw, 1.75rem); } .usbcb-page .usbcb-spec-baseline-head p { margin-bottom: 0; color: var(--color-text-muted-on-dark); line-height: 1.7; } .usbcb-page .usbcb-spec-grid { display: grid; gap: var(--space-4); } @media (min-width: 720px) { .usbcb-page .usbcb-spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1040px) { .usbcb-page .usbcb-spec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .usbcb-page .usbcb-spec-card { display: grid; gap: var(--space-3); align-content: start; min-height: 100%; padding: var(--space-5); border: 1px solid var(--color-border-dark); border-radius: var(--radius); background: var(--color-card-dark-hover); } .usbcb-page .usbcb-spec-label { display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-height: 1.75rem; padding: 0.35rem 0.7rem; border: 1px solid var(--color-border-dark-strong); border-radius: var(--radius-pill); background: var(--color-panel-dark-muted); color: var(--color-text-muted-on-dark); font-family: var(--font-body); font-size: var(--font-size-xs); font-weight: 800; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; } .usbcb-page .usbcb-spec-card h4 { margin-bottom: 0; color: var(--color-text-on-dark); font-family: var(--font-body); font-size: clamp(1rem, 1.5vw, 1.15rem); font-weight: 800; line-height: 1.35; letter-spacing: 0; } .usbcb-page .usbcb-spec-card p { margin-bottom: 0; color: var(--color-text-muted-on-dark); font-size: var(--font-size-small); line-height: 1.65; } @media (max-width: 560px) { .usbcb-page .usbcb-spec-baseline, .usbcb-page .usbcb-spec-card { padding: var(--space-5); } } /* Matrix */ .usbcb-page .usbcb-matrix-card { overflow: hidden; border: 1px solid var(--color-border-dark-strong); border-radius: var(--radius-lg); background: var(--color-panel-dark-muted); } .usbcb-page .usbcb-matrix-heading { display: grid; gap: var(--space-2); padding: var(--space-5); background: var(--color-dark); border-bottom: 1px solid var(--color-border-dark-strong); } .usbcb-page .usbcb-matrix-heading h3 { margin-bottom: 0; color: var(--color-text-on-dark); } .usbcb-page .usbcb-matrix-note { margin-bottom: 0; color: var(--color-text-muted-on-dark); } .usbcb-page .usbcb-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .usbcb-page .usbcb-compare-table { width: 100%; min-width: 780px; border-collapse: collapse; } .usbcb-page .usbcb-compare-table th, .usbcb-page .usbcb-compare-table td { padding: var(--space-4); border-bottom: 1px solid var(--color-border-dark); vertical-align: top; text-align: left; } .usbcb-page .usbcb-compare-table thead th { background: var(--color-card-dark-hover); color: var(--color-text-on-dark); font-family: var(--font-body); font-size: var(--font-size-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .usbcb-page .usbcb-compare-table tbody th { width: 18%; color: var(--color-text-on-dark); } .usbcb-page .usbcb-compare-table tbody td { color: var(--color-text-muted-on-dark); } .usbcb-page .usbcb-compare-table tbody tr:last-child th, .usbcb-page .usbcb-compare-table tbody tr:last-child td { border-bottom: 0; } .usbcb-page .usbcb-comparison-takeaway { padding: var(--space-5); border-top: 1px solid var(--color-border-dark-strong); background: var(--color-gold-tint-dark); } .usbcb-page .usbcb-comparison-takeaway .small-heading { margin-bottom: var(--space-2); color: var(--color-gold); } .usbcb-page .usbcb-comparison-takeaway p:last-child { margin-bottom: 0; color: var(--color-text-muted-on-dark); } /* mst-displayLink decision table */ .usbcb-decision-table--mst-displaylink col.usbcb-col-situation { width: 25%; } .usbcb-decision-table--mst-displaylink col.usbcb-col-route { width: 25%; } .usbcb-decision-table--mst-displaylink col.usbcb-col-verify { width: 50%; } /* Compact proof note */ .usbcb-page .usbcb-proof-note { padding: var(--space-5); border: 1px solid var(--color-border-dark-strong); border-radius: var(--radius); background: var(--color-card-dark-hover); } .usbcb-page .usbcb-proof-note .small-heading { margin-bottom: var(--space-2); color: var(--color-gold); } .usbcb-page .usbcb-proof-note-text { margin-bottom: 0; color: var(--color-text-muted-on-dark); font-size: var(--font-size-small); line-height: 1.65; } .usbcb-page .usbcb-proof-note-link { color: var(--color-gold); font-weight: 700; text-underline-offset: 0.22em; } .usbcb-page .usbcb-proof-note-link:hover { color: var(--color-gold); } /* Mobile table cards */ @media (max-width: 720px) { .usbcb-page .usbcb-table-scroll { overflow: visible; } .usbcb-page .usbcb-compare-table { display: block; min-width: 0; border-collapse: separate; border-spacing: 0; } .usbcb-page .usbcb-compare-table thead { display: none; } .usbcb-page .usbcb-compare-table tbody, .usbcb-page .usbcb-compare-table tr, .usbcb-page .usbcb-compare-table th, .usbcb-page .usbcb-compare-table td { display: block; } .usbcb-page .usbcb-compare-table tr { padding: var(--space-4); border-bottom: 1px solid var(--color-border-dark); } .usbcb-page .usbcb-compare-table tbody th { width: auto; padding: 0 0 var(--space-3); border-bottom: 0; font-size: 1.05rem; } .usbcb-page .usbcb-compare-table td { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 0; } .usbcb-page .usbcb-compare-table td::before { content: attr(data-label); color: var(--color-text-muted-on-dark); font-family: var(--font-body); font-size: var(--font-size-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } } @media (max-width: 520px) { .usbcb-page .usbcb-comparison-frame { padding: var(--space-5); } .usbcb-page .usbcb-compare-table td { grid-template-columns: 1fr; gap: var(--space-1); } } /* ====================================================================== Check your port ====================================================================== */ .usbcb-page .usbcb-check { background: var(--color-white); border-bottom: 1px solid var(--color-border); } .usbcb-page .usbcb-check-frame { display: grid; gap: var(--space-6); padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--color-white) 0%, var(--color-bg) 100%); box-shadow: var(--shadow-sm); } .usbcb-page .usbcb-check-header { display: grid; gap: var(--space-3); } .usbcb-page .usbcb-check-header .eyebrow { margin-bottom: 0; } .usbcb-page .usbcb-check-header h2 { margin-bottom: 0; } .usbcb-page .usbcb-check-intro { margin-bottom: 0; color: var(--color-text-muted); } /* Step cards */ .usbcb-page .usbcb-check-steps { display: grid; gap: var(--space-4); } .usbcb-page .usbcb-check-step { display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-4); min-height: 100%; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-card); box-shadow: var(--shadow-sm); } .usbcb-page .usbcb-step-number { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--color-gold-border); border-radius: var(--radius-pill); background: var(--color-gold-tint); color: #6B4E00; font-family: var(--font-body); font-size: var(--font-size-xs); font-weight: 800; line-height: 1; } .usbcb-page .usbcb-check-step-body h3 { margin-bottom: var(--space-2); font-size: clamp(1.15rem, 2vw, 1.4rem); } .usbcb-page .usbcb-check-step-body p { margin-bottom: 0; color: var(--color-text-muted); } .usbcb-page .usbcb-check-step-footer { padding-top: var(--space-4); border-top: 1px solid var(--color-border); } .usbcb-page .usbcb-check-footer-label { margin-bottom: var(--space-3); color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.08em; line-height: 1.35; text-transform: uppercase; } .usbcb-page .usbcb-check-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); } /* Compact OS note */ .usbcb-page .usbcb-check-note { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-card); } .usbcb-page .usbcb-check-note .small-heading { margin-bottom: var(--space-2); } .usbcb-page .usbcb-check-note-text { margin-bottom: 0; color: var(--color-text-muted); } .usbcb-page .usbcb-os-label { text-transform: none; letter-spacing: normal; } @media (min-width: 860px) { .usbcb-page .usbcb-check-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 560px) { .usbcb-page .usbcb-check-frame, .usbcb-page .usbcb-check-step, .usbcb-page .usbcb-check-note { padding: var(--space-5); } } /* ====================================================================== Dock buying impact Replaces the old Docks & Displays + Buying Rules sections. ====================================================================== */ .usbcb-page .usbcb-dock-buying { background: var(--color-bg); border-bottom: 1px solid var(--color-border); } .usbcb-page .usbcb-dock-buying-layout { display: grid; gap: var(--space-5); align-items: stretch; } @media (min-width: 940px) { .usbcb-page .usbcb-dock-buying-layout { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr); } } /* Left rule panel */ .usbcb-page .usbcb-dock-buying-panel { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-card); box-shadow: var(--shadow-sm); } .usbcb-page .usbcb-dock-buying-panel .eyebrow { margin-bottom: 0; } .usbcb-page .usbcb-dock-buying-panel h2 { margin-bottom: 0; } .usbcb-page .usbcb-dock-buying-intro { margin-bottom: 0; color: var(--color-text-muted); } .usbcb-page .usbcb-dock-rule { margin-top: var(--space-2); padding: var(--space-5); border: 1px solid var(--color-gold-border); border-radius: var(--radius); background: linear-gradient(180deg, var(--color-gold-tint) 0%, var(--color-card) 72%); } .usbcb-page .usbcb-dock-rule .small-heading { margin-bottom: var(--space-2); color: #6B4E00; } .usbcb-page .usbcb-dock-rule-text { margin-bottom: 0; color: var(--color-text); font-weight: 700; } /* Impact grid */ .usbcb-page .usbcb-dock-impact-grid { display: grid; gap: var(--space-4); } @media (min-width: 720px) { .usbcb-page .usbcb-dock-impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .usbcb-page .usbcb-dock-impact-card { position: relative; display: grid; gap: var(--space-3); align-content: start; min-height: 100%; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-card); box-shadow: var(--shadow-sm); } .usbcb-page .usbcb-dock-impact-card--warning { border-color: var(--color-gold-border); background: linear-gradient(180deg, var(--color-gold-tint) 0%, var(--color-card) 58%); } .usbcb-page .usbcb-impact-label { display: inline-flex; width: fit-content; padding: 0.25rem 0.65rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill); color: var(--color-text-muted); background: var(--color-bg); font-family: var(--font-body); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.08em; line-height: 1.35; text-transform: uppercase; } .usbcb-page .usbcb-dock-impact-card--warning .usbcb-impact-label { border-color: var(--color-gold-border); background: var(--color-gold); color: var(--color-obsidian); } .usbcb-page .usbcb-dock-impact-card h3 { margin-bottom: 0; font-size: clamp(1.15rem, 1.8vw, 1.4rem); } .usbcb-page .usbcb-dock-impact-card p { margin-bottom: 0; color: var(--color-text-muted); } /* Bottom buying filter strip */ .usbcb-page .usbcb-buying-filter-strip { grid-column: 1 / -1; padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-card); box-shadow: var(--shadow-sm); } .usbcb-page .usbcb-buying-filter-strip .small-heading { margin-bottom: var(--space-2); } .usbcb-page .usbcb-buying-filter-strip p:last-child { margin-bottom: 0; color: var(--color-text-muted); font-size: var(--font-size-small); line-height: 1.65; } .usbcb-page .usbcb-buying-filter-strip strong { color: var(--color-text); } @media (max-width: 560px) { .usbcb-page .usbcb-dock-buying-panel, .usbcb-page .usbcb-dock-rule, .usbcb-page .usbcb-dock-impact-card { padding: var(--space-5); } } @media (max-width: 640px) { .usbcb-page .usbcb-mini-card { padding: var(--space-5); } }