/* Inter (UI) + JetBrains Mono (code) are loaded as web fonts in the page ; system fonts remain as fallbacks. */ /* ============================== THEME TOKENS ============================== */ :root { --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --primary: #3a3871; --primary-rgb: 58,56,113; --accent: #5a42d4; --accent-hover: #7c5cff; --link: #5a42d4; --link-deco: #d6cffb; --page-bg: #F5F7FB; --bg: #ffffff; --bg-soft: #e7ebf3; --bg-sidebar: #F5F7FB; --text: #3a3871; --text-body: #27272a; --text-muted: #6b6b8e; --heading: #1f1d3d; --border: #e5e7eb; --border-strong: #d6cffb; --navbar-h: 64px; --sidebar-w: 20rem; --toc-w: 18rem; --code-bg: #f6f8fa; --kbd-bg: #f1f0fb; --card-bg: #ffffff; --tag-bg: #eceafd; /* unified radius scale */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; /* layered, soft shadows */ --shadow-sm: 0 1px 2px rgba(15,15,40,.05); --shadow-md: 0 4px 14px rgba(15,15,40,.07); --shadow-lg: 0 14px 38px rgba(var(--primary-rgb),.13); --on-accent: #ffffff; --on-primary: #ffffff; --secondary: #00ace6; --secondary-hover: #4cc5f5; --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; /* shared card surface — same numbers for every card class below */ --card-radius: var(--r-lg); --card-shadow-rest: var(--shadow-sm); --card-shadow-hover: var(--shadow-lg); --card-lift: -3px; --shadow-overlay: 0 20px 60px rgba(0,0,0,.3); --shadow-drawer: 0 10px 40px rgba(0,0,0,.2); } html.dark { --primary: #c9c7ff; --secondary: #00ace6; --secondary-hover: #4cc5f5; --accent: var(--secondary); --accent-hover: var(--secondary-hover); --link: #00ace6; --link-deco: #3a3871; --page-bg: #0d0d10; --bg: #111114; --bg-soft: #18181b; --bg-sidebar: #0d0d10; --text: #ececfe; --text-body: #d4d4d8; --text-muted: #a1a1aa; --heading: #ffffff; --border: #26262b; --border-strong: #2f2f3a; --code-bg: #18181b; --kbd-bg: #1f1f25; --card-bg: #18181b; --tag-bg: #23232b; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 14px rgba(0,0,0,.45); --shadow-lg: 0 16px 40px rgba(0,0,0,.6); --on-accent: #0A1B3D; --on-primary: #0A1B3D; --shadow-overlay: 0 20px 60px rgba(0,0,0,.5); --shadow-drawer: 0 10px 40px rgba(0,0,0,.4); } /* ============================== SEMANTIC TOKENS ============================== */ :root { --info-bg: #eff6ff; --info-border: #60a5fa; --info-fg: #1e3a8a; --tip-bg: #ecfdf5; --tip-border: #34d399; --tip-fg: #065f46; --note-bg: #f5f3ff; --note-border: #a78bfa; --note-fg: #4c1d95; --warn-bg: #fffbeb; --warn-border: #fbbf24; --warn-fg: #78350f; --error-bg: #fef2f2; --error-border: #f87171; --error-fg: #7f1d1d; --badge-info-bg: #dbeafe; --badge-info-fg: #1e40af; --badge-warn-bg: #fef3c7; --badge-warn-fg: #92400e; --badge-tip-bg: #d1fae5; --badge-tip-fg: #065f46; --table-head-bg: #eef2fb; --table-head-fg: #0A1B3D; } html.dark { --info-bg: rgba(96,165,250,.12); --info-border: #60a5fa; --info-fg: #bfdbfe; --tip-bg: rgba(52,211,153,.12); --tip-border: #34d399; --tip-fg: #a7f3d0; --note-bg: rgba(167,139,250,.14); --note-border: #a78bfa; --note-fg: #ddd6fe; --warn-bg: rgba(251,191,36,.12); --warn-border: #fbbf24; --warn-fg: #fde68a; --error-bg: rgba(248,113,113,.12); --error-border: #f87171; --error-fg: #fecaca; --badge-info-bg: rgba(96,165,250,.18); --badge-info-fg: #bfdbfe; --badge-warn-bg: rgba(251,191,36,.18); --badge-warn-fg: #fde68a; --badge-tip-bg: rgba(52,211,153,.18); --badge-tip-fg: #a7f3d0; /* previously had no dark override at all — badges and table header used to stay light-only */ --table-head-bg: #1f2937; --table-head-fg: #ececfe; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--navbar-h) + 16px); } body { margin: 0; font-family: var(--font-sans); color: var(--text-body); background: var(--page-bg); font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; } h1,h2,h3,h4,h5,h6 { font-family: var(--font-sans); font-weight: 700; color: var(--heading); line-height: 1.2; letter-spacing: -0.015em; } a { color: var(--link); text-decoration: none; } /* ============================== NAVBAR ============================== */ .navbar { position: sticky; top: 0; z-index: 50; height: var(--navbar-h); background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--border); } .navbar-inner { display: flex; align-items: center; gap: var(--sp-4); height: 100%; padding: 0 var(--sp-5); max-width: 100%; } .navbar-left { display: flex; align-items: center; gap: var(--sp-3); } .navbar-logo img { height: 22px; width: auto; } .navbar-logo .logo-light, .card-logo .logo-light { display: block; } .navbar-logo .logo-dark, .card-logo .logo-dark { display: none; } html.dark .navbar-logo .logo-light, html.dark .card-logo .logo-light { display: none; } html.dark .navbar-logo .logo-dark, html.dark .card-logo .logo-dark { display: block; } .navbar-links { display: flex; align-items: center; gap: 1.25rem; margin-left: var(--sp-4); flex: 1; } .nav-link { color: var(--text); font-weight: 500; font-size: .95rem; } .nav-link:hover { color: var(--accent-hover); } .navbar-right { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; } .search-btn { display: flex; align-items: center; gap: var(--sp-2); background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-muted); padding: .4rem .6rem; border-radius: .4rem; cursor: pointer; font-size: .85rem; font-family: inherit; } .search-btn:hover { border-color: var(--border-strong); } .search-btn .drm-icon { width: 16px; height: 16px; } .search-btn kbd, .search-input-row kbd { font-family: inherit; font-size: .7rem; background: var(--kbd-bg); border: 1px solid var(--border); border-radius: .25rem; padding: .05rem .35rem; color: var(--text-muted); } .nav-icon, .theme-toggle, .sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: none; background: transparent; color: var(--text); cursor: pointer; border-radius: .4rem; } .nav-icon:hover, .theme-toggle:hover, .sidebar-toggle:hover { background: var(--bg-soft); } .drm-icon { width: 20px; height: 20px; } .sidebar-toggle { display: none; } .theme-toggle .ti-dark { display: none; } html.dark .theme-toggle .ti-light { display: none; } html.dark .theme-toggle .ti-dark { display: inline-flex; } /* ============================== LAYOUT ============================== */ .layout { display: grid; grid-template-columns: var(--sidebar-w) minmax(0,1fr) var(--toc-w); max-width: 100%; } .sidebar { border-right: 1.5px solid var(--border); height: calc(100vh - var(--navbar-h)); position: sticky; top: var(--navbar-h); overflow-y: auto; padding: 1.25rem var(--sp-3) var(--sp-7); background: var(--bg-sidebar); scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } .sidebar::-webkit-scrollbar { width: 8px; } .sidebar::-webkit-scrollbar-track { background: transparent; } .sidebar::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-sm); } .sidebar::-webkit-scrollbar-thumb:hover { background: var(--accent); } .content-wrap { min-width: 0; display: flex; flex-direction: column; min-height: calc(100vh - var(--navbar-h)); } .content { padding: var(--sp-5) var(--sp-7) var(--sp-6); max-width: 60rem; width: 100%; } .toc-col { padding: var(--sp-5) var(--sp-4); } .toc { position: sticky; top: calc(var(--navbar-h) + 1.5rem); } /* ============================== SIDEBAR NAV ============================== */ .sidebar-nav { font-size: .9rem; } .sb-list, .sb-sublist { list-style: none; margin: 0; padding: 0; } .sb-sublist { margin-left: var(--sp-3); padding-left: var(--sp-2); border-left: 1px solid var(--border); } .sb-root > .sb-top > details > summary { font-weight: 700; } .sb-item { margin: 1px 0; } .sb-link { display: block; padding: .32rem var(--sp-2); border-radius: .375rem; color: var(--text-body); text-decoration: none; font-weight: 500; } .sb-link:hover { background: var(--bg-soft); color: var(--accent); } .sb-link.current { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); font-weight: 600; } details > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-1); cursor: pointer; list-style: none; } details > summary::-webkit-details-marker { display: none; } details > summary > .sb-link { flex: 1; } .sb-caret { display: inline-flex; padding: var(--sp-1); color: var(--text-muted); transition: transform .15s; } .caret-svg { width: 14px; height: 14px; } details[open] > summary > .sb-caret { transform: rotate(90deg); } .sb-separator { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 1.25rem var(--sp-2) .4rem; } .sb-separator-new { color: var(--accent); margin-top: 1.75rem; padding: var(--sp-2) .6rem; border-radius: .4rem; background: color-mix(in srgb, var(--accent) 9%, transparent); border: 1px dashed color-mix(in srgb, var(--accent) 35%, transparent); } /* ============================== BREADCRUMB / TITLE ============================== */ .breadcrumb { font-size: .82rem; color: var(--text-muted); margin-bottom: var(--sp-4); display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; } .breadcrumb a { color: var(--text-muted); } .breadcrumb a:hover { color: var(--accent); } .breadcrumb .current { color: var(--text-body); } .bc-sep { opacity: .5; } .page-title { font-size: 34px; margin: .2rem 0 var(--sp-5); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; } /* ============================== CONTENT TYPOGRAPHY ============================== */ .content h2 { font-size: 22px; margin: 2.2rem 0 var(--sp-4); padding-bottom: .3rem; font-weight: 700; letter-spacing: -0.015em; } .content h3 { font-size: 17.5px; margin: 1.8rem 0 .8rem; font-weight: 700; } .content h4 { font-size: 15px; margin: 1.4rem 0 .6rem; font-weight: 700; } .content p { margin: .3rem 0 1.4rem; line-height: 1.7; } .content p.lead, .content .lead { font-size: 17px; line-height: 1.6; color: var(--text-muted); } .content strong { font-weight: 700; } .content a { color: var(--link); text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--link-deco); text-underline-offset: 3px; } .content a:hover { color: var(--accent-hover); } .content ul, .content ol { margin: var(--sp-2) 0 1.4rem; padding-left: 1.4rem; } .content li { margin: .35rem 0; } .content img { max-width: 100%; height: auto; border-radius: var(--r-sm); border: 1px solid var(--border); } .content hr { border: none; border-top: 1px solid var(--border); margin: var(--sp-6) 0; } .content blockquote { border-left: 3px solid var(--border-strong); margin: var(--sp-4) 0; padding: .3rem var(--sp-4); color: var(--text-muted); } .hanchor { color: var(--text-muted); text-decoration: none; margin-left: .4rem; opacity: 0; font-weight: 400; } .content h2:hover .hanchor, .content h3:hover .hanchor { opacity: .6; } /* ============================== TOC ============================== */ .toc-title { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 700; margin: 0 0 .6rem; font-family: var(--font-sans); } .toc ul { list-style: none; margin: 0; padding: 0; border-left: 1.5px solid var(--border); } .toc li { margin: 0 0 .55rem; } .toc a { display: block; padding-left: var(--sp-4); color: var(--text-muted); font-size: .85rem; border-left: 2px solid transparent; margin-left: -1.5px; } .toc a:hover { color: var(--accent); } .toc a.active { color: var(--accent); border-left-color: var(--accent); font-weight: 600; } /* ============================== TABLES ============================== */ .table-wrap { display: block; width: fit-content; max-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: .5rem; margin: var(--sp-4) 0 1.6rem; } h4 + .table-wrap { width: 100%; } h4 + .table-wrap table { width: 100%; } .content table { width: auto; border-collapse: collapse; margin: 0; font-size: .85rem; } .content table th { background: var(--table-head-bg); color: var(--table-head-fg); text-transform: uppercase; text-align: left; font-weight: 700; font-size: .72rem; letter-spacing: .03em; padding: .6rem .8rem; border: none; } .content table td { background: var(--card-bg); padding: .55rem .8rem; color: var(--text); border-top: 1px solid var(--border); vertical-align: top; } html.dark .content table td { color: var(--text-body); } .content table tr:hover td { background: var(--bg-soft); } .compare-table { table-layout: fixed; width: 100%; } .compare-table th:first-child, .compare-table td:first-child { width: 42%; } .compare-table th:not(:first-child), .compare-table td:not(:first-child) { text-align: center; width: 29%; } .content .compare-table td { vertical-align: middle; } .td-icon { display: flex; flex-direction: column; align-items: center; gap: .3rem; } .td-icon .icon-note { font-size: .8rem; font-style: italic; color: var(--text-muted); line-height: 1.45; } /* Partial support icon — amber, used when a feature is supported but with limitations */ .content a.cta-btn { display: inline-block; background: var(--accent); color: var(--on-accent) !important; padding: .6rem 1.15rem; border-radius: .5rem; font-weight: 600; font-size: .9rem; text-decoration: none !important; transition: background .15s ease; } .content a.cta-btn:hover { background: var(--primary); color: var(--on-primary) !important; text-decoration: none !important; } .method-cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-4); margin: 1.2rem 0 1.6rem; } .method-cards .card { display: flex; flex-direction: column; gap: var(--sp-3); padding: 1.25rem var(--sp-5); } .method-cards .card h3 { margin: 0; font-size: 1rem; color: var(--heading); } .method-cards .card p { margin: 0; font-size: .85rem; color: var(--text-muted); line-height: 1.5; } .method-cards .card .cta-btn { align-self: flex-start; margin-top: auto; } /* ============================== CODE ============================== */ .content pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4) 1.1rem; overflow-x: auto; font-family: var(--font-mono); font-size: .85rem; line-height: 1.55; margin: var(--sp-4) 0 var(--sp-5); } .content code { font-family: var(--font-mono); font-size: .87em; } .content :not(pre) > code { background: var(--bg-soft); border: 1px solid var(--border); padding: .1rem .35rem; border-radius: .25rem; color: var(--accent-hover); } .codehilite { background: var(--code-bg) !important; position: relative; } .codehilite pre { margin: 0; border: none; } .copy-btn { position: absolute; top: .5rem; right: .5rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-sm); padding: .2rem var(--sp-2); font-size: .72rem; font-family: var(--font-sans); color: var(--text-muted); cursor: pointer; opacity: 0; transition: opacity .15s, color .15s, border-color .15s; } .codehilite:hover .copy-btn, .content pre:hover .copy-btn, .copy-btn:focus-visible { opacity: 1; } /* touch devices have no :hover — keep it visible (if dimmer) so it stays discoverable */ @media (hover: none) { .copy-btn { opacity: .85; } } .copy-btn:hover { color: var(--accent); border-color: var(--accent); } .copy-btn.copied { color: var(--accent); opacity: 1; } .content pre { position: relative; } /* ============================== CALLOUTS ============================== */ .callout { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem .9rem; margin: 1.1rem 0; border-radius: .4rem; border-left: 4px solid; font-size: 14px; } .callout-icon { flex-shrink: 0; margin-top: .1rem; } .callout-icon .drm-icon { width: 18px; height: 18px; } .callout-icon .callout-emoji { font-size: 1.25rem; line-height: 1; } .callout-body { flex: 1; min-width: 0; } .callout-body > :first-child { margin-top: 0; } .callout-body > :last-child { margin-bottom: 0; } .callout-body p { margin: .2rem 0 var(--sp-2); } .callout-title { font-weight: 700; margin-bottom: var(--sp-1) !important; } .callout-info { background: var(--info-bg); border-color: var(--info-border); color: var(--info-fg); } .callout-tip { background: var(--tip-bg); border-color: var(--tip-border); color: var(--tip-fg); } .callout-note { background: var(--note-bg); border-color: var(--note-border); color: var(--note-fg); } .callout-warning { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-fg); } .callout-error { background: var(--error-bg); border-color: var(--error-border); color: var(--error-fg); } .callout a { color: inherit; text-decoration: underline; } /* ============================== CARD SYSTEM ============================== */ /* Shared card surface — apply .card to every card element */ .card { border: 1px solid var(--border); border-radius: var(--card-radius); background: var(--card-bg); box-shadow: var(--card-shadow-rest); } /* Interactive (link) cards — hover lifts card and brightens border */ .card--interactive { text-decoration: none !important; color: inherit; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .card--interactive:hover { border-color: var(--border-strong); box-shadow: var(--card-shadow-hover); transform: translateY(var(--card-lift)); } /* Two-zone split card: white header over tinted body */ .card--split { overflow: hidden; display: flex; flex-direction: column; } /* Accent-tinted static info panel — no link affordance */ .card--accent { background: color-mix(in srgb, var(--accent) 9%, var(--card-bg)); border-color: transparent; box-shadow: none; cursor: default; } .card--accent:hover { border-color: transparent; box-shadow: none; transform: none; } .card--accent .card-icon { background: color-mix(in srgb, var(--accent) 20%, var(--card-bg)); border-color: transparent; } /* ============================== CARDS ============================== */ .drm-cards { display: grid; grid-template-columns: repeat(var(--cols,2), minmax(0,1fr)); gap: var(--sp-4); margin: 1.2rem 0 1.6rem; } .drm-cards .card { position: relative; display: block; padding: 16px 18px; color: var(--text); } .card-head { display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; } /* Link cards: arrow affordance + accent-colored title on hover */ .drm-cards a.card:not(.has-tag) { padding-right: 2.4rem; } .card-arrow { position: absolute; top: .85rem; right: .85rem; width: 16px; height: 16px; color: var(--text-muted); opacity: .55; transition: transform .18s ease, color .18s ease, opacity .18s ease; } .card--interactive:hover .card-arrow { color: var(--accent); opacity: 1; transform: translateX(3px); } .drm-cards .card--interactive:hover .card-title { color: var(--accent); } .quickstart-cards { margin: 1.2rem 0 1.6rem; } /* Tagged "picker" cards: tag is a top badge in normal flow, card centred with icon stacked above title */ .card.has-tag { text-align: center; padding-top: var(--sp-5); } .card.has-tag .card-tag { position: static; display: inline-block; margin: 0 0 var(--sp-4); } .card.has-tag .card-head { flex-direction: column; align-items: center; gap: .7rem; } .card.has-tag .card-subtitle { text-align: center; } .card-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 12%, var(--card-bg)); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); } .card-icon .drm-icon { width: 18px; height: 18px; color: var(--accent); } .card-title { font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--heading); } .card-subtitle { margin: .35rem 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.5; } .card-image img { width: 100%; border-radius: .25rem; margin-bottom: .6rem; } .card-tag { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; background: var(--tag-bg); color: var(--accent); padding: .12rem .45rem; border-radius: .25rem; } .up-right { position: absolute; top: .6rem; right: .6rem; } /* ============================== STEPS ============================== */ .steps { counter-reset: step; } .step { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--card-radius); box-shadow: var(--card-shadow-rest); padding: 1.3rem 1.6rem 1.45rem; margin: 1.1rem 0; } .step > :first-child { margin-top: 0; } .step > :last-child { margin-bottom: 0; } .steps h3, .steps h4 { display: flex; align-items: center; font-family: var(--font-sans); } .steps .tab-panel h3, .steps .tab-panel h4 { display: block; counter-increment: none; } .steps .tab-panel h3:before, .steps .tab-panel h4:before { display: none; } .steps h3:before, .steps h4:before { counter-increment: step; content: counter(step); flex: 0 0 32px; height: 32px; box-sizing: border-box; margin-left: 0; margin-right: .8rem; border: none; border-radius: .45rem; background: var(--accent); color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; font-weight: 700; line-height: 1; } /* ============================== TABS ============================== */ .drm-tabs { margin: 1.2rem 0 1.6rem; } /* Folder-style tabs: rounded top corners only, tabs sit on a bottom border line */ .tab-nav { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-end; background: transparent; border: none; border-bottom: 2px solid var(--border); padding: 0; max-width: 100%; } .tab-btn { background: var(--card-bg); border: 2px solid var(--border); border-bottom: 2px solid var(--card-bg); border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding: .42rem .85rem; margin-bottom: -2px; cursor: pointer; font-family: inherit; font-size: .875rem; color: var(--text-muted); font-weight: 400; white-space: nowrap; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .tab-btn:not(.active):hover { background: color-mix(in srgb, var(--accent) 10%, var(--card-bg)); color: var(--accent); border-color: var(--accent); border-bottom-color: var(--card-bg); } .tab-btn.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; } .tab-panel { display: none; padding: 1.1rem .1rem; } .tab-panel.active { display: block; } /* Card-style tab nav — used for org-type selector on license request page */ .tab-nav.card-nav { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-4); background: none; border: none; border-radius: 0; padding: 0; max-width: 100%; margin-bottom: var(--sp-1); } .tab-nav.card-nav .tab-btn { position: relative; display: flex; flex-direction: column; gap: .65rem; padding: 16px 36px 16px 18px; border: 1px solid var(--border); border-radius: var(--card-radius); background: var(--card-bg); color: var(--text); text-align: left; font-size: inherit; font-weight: inherit; cursor: pointer; white-space: normal; transition: border-color .15s, box-shadow .15s, transform .15s; align-self: stretch; } .tab-nav.card-nav .tab-btn:hover { border-color: var(--border-strong); box-shadow: var(--card-shadow-hover); transform: translateY(var(--card-lift)); color: var(--text); } .tab-nav.card-nav .tab-btn.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--card-bg)); font-weight: inherit; color: var(--text); } .tab-nav.card-nav .tab-btn .card-title { color: var(--heading); font-weight: 600; font-size: .95rem; } .tab-nav.card-nav .tab-btn.active .card-title { color: var(--accent); } .tab-nav.card-nav .tab-btn .card-subtitle { font-size: .8rem; color: var(--text-muted); line-height: 1.5; } .tab-nav.card-nav .tab-btn .card-arrow { position: absolute; top: .85rem; right: .85rem; width: 16px; height: 16px; color: var(--text-muted); opacity: .55; transition: transform .18s, color .18s, opacity .18s; } .tab-nav.card-nav .tab-btn:hover .card-arrow { color: var(--accent); opacity: 1; transform: translateX(3px); } .tab-nav.card-nav .tab-btn.active .card-arrow { color: var(--accent); opacity: 1; } .tab-panel > :first-child { margin-top: 0; } /* ============================== DETAILS ============================== */ .hx-details { border: 1px solid var(--border); border-radius: .4rem; padding: var(--sp-1) var(--sp-4); margin: 1.1rem 0; background: var(--card-bg); } .hx-details > summary { cursor: pointer; font-weight: 600; padding: .6rem 0; color: var(--heading); font-family: var(--font-sans); } .details-body { padding: 0 0 .6rem; } /* ============================== BADGES / INLINE ICON / FIGURE / VIDEO ============================== */ .hx-badge { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; padding: .1rem .45rem; border-radius: .25rem; vertical-align: middle; margin-right: .3rem; } .badge-info { background: var(--badge-info-bg); color: var(--badge-info-fg); } .badge-warning { background: var(--badge-warn-bg); color: var(--badge-warn-fg); } .badge-tip, .badge-success { background: var(--badge-tip-bg); color: var(--badge-tip-fg); } .inline-icon { display: inline-flex; vertical-align: middle; } .inline-icon .drm-icon { width: 18px; height: 18px; } .table-icon { display: inline-flex; vertical-align: middle; } .table-icon .drm-icon { width: 18px; height: 18px; } .table-icon--yes { color: var(--accent); } .table-icon--no { color: var(--error-fg); } /* Screenshot placeholders */ .screenshot-ph { margin: 1.4rem 0; } .screenshot-ph .ss-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; text-align: center; padding: 2.2rem var(--sp-5); border: 2px dashed var(--border-strong); border-radius: .6rem; background: color-mix(in srgb, var(--accent) 5%, var(--card-bg)); color: var(--text-muted); } .screenshot-ph .ss-icon { width: 34px; height: 34px; color: var(--accent); opacity: .8; } .screenshot-ph .ss-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); } .screenshot-ph .ss-desc { font-size: .92rem; color: var(--text-body); max-width: 46rem; } .screenshot-ph .ss-file { font-family: var(--font-mono); font-size: .78rem; color: var(--text-muted); background: var(--bg-soft); padding: .1rem .45rem; border-radius: .25rem; } .drm-figure { margin: 1.2rem 0; text-align: center; } .drm-figure figcaption { font-size: .82rem; color: var(--text-muted); margin-top: var(--sp-2); } .hx-video { position: relative; margin: 1.2rem 0; } .hx-video video, .hx-video iframe { width: 100%; aspect-ratio: 16/9; border: 1px solid var(--border); border-radius: var(--r-md); } /* ============================== IMAGE LIGHTBOX ============================== */ /* Figure/screenshot images are clickable — magnifying-glass cursor signals it. */ .content .drm-figure img { cursor: zoom-in; } .lightbox-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; padding: 2.5rem; background: rgba(15,15,40,.85); cursor: zoom-out; opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s ease; } .lightbox-overlay.open { opacity: 1; visibility: visible; } .lightbox-overlay img { max-width: 95vw; max-height: 86vh; border-radius: var(--r-md); box-shadow: var(--shadow-lg); background: var(--card-bg); cursor: default; } .lightbox-cap { color: #fff; opacity: .9; font-size: .9rem; text-align: center; max-width: 60rem; } .lightbox-close { position: absolute; top: 1rem; right: 1.2rem; width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .lightbox-close:hover { background: rgba(255,255,255,.26); } /* ============================== COMPARISON ============================== */ .comparison-container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin: 1.2rem 0; } .comparison-container .table-container { border: 1px solid var(--border); border-collapse: collapse; width: 100%; } .comparison-container th, .comparison-container td { padding: .6rem .8rem; border: 1px solid var(--border); font-size: .85rem; text-align: left; vertical-align: top; } .comparison-container .header { background: var(--primary); color: var(--on-primary); font-size: 1rem; } .comparison-container .header-express { background: var(--accent-hover); color: var(--on-accent); } .comparison-container .sub-header, .comparison-container .sub-header-express { background: var(--bg-soft); font-style: italic; } .comparison-container .highlight, .comparison-container .highlight-express { font-weight: 700; background: var(--bg-soft); white-space: nowrap; } @media (max-width: 900px) { .comparison-container { grid-template-columns: 1fr; } } /* ============================== FOOTER ============================== */ .page-footer { margin-top: auto; padding: var(--sp-6) var(--sp-7); color: var(--text-muted); font-size: .8rem; border-top: 1px solid var(--border); } /* ============================== HOME ============================== */ body.home .home-main { min-height: calc(100vh - var(--navbar-h)); display: flex; flex-direction: column; background: radial-gradient(60rem 26rem at 50% -6rem, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), var(--page-bg); } .home-inner { max-width: 1280px; margin: 0 auto; padding: 3.5rem var(--sp-5) var(--sp-6); width: 100%; flex: 1; } .hero-headline { font-size: 2.8rem; text-align: center; margin: var(--sp-4) 0 .3rem; letter-spacing: -.02em; } .hero-subtitle { text-align: center; color: var(--text-muted); font-size: 1.15rem; margin: 0 0 var(--sp-4); } .learning-centre-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-5); margin-top: var(--sp-7); align-items: stretch; } /* two hero products side by side */ .product-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-5); margin-top: var(--sp-7); align-items: stretch; max-width: 880px; margin-left: auto; margin-right: auto; } /* training/resource row below the products */ .resource-section { max-width: 880px; margin: 2.25rem auto 0; } .resource-label { display: flex; align-items: center; gap: .9rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); margin-bottom: var(--sp-4); } .resource-label::after { content: ''; flex: 1; height: 1px; background: var(--border); } .resource-card .card-logo { width: 56px; height: 56px; } @media (max-width: 620px) { .product-grid { grid-template-columns: 1fr; } } /* Two-zone card: white header (logo + title) over a purple-tinted body (subtitle + text). */ .lc-head { background: var(--card-bg); padding: 1.6rem 1.6rem 1.2rem; display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; } .lc-body { background: color-mix(in srgb, var(--accent) 7%, var(--card-bg)); border-top: 1px solid var(--border); padding: 1.15rem 1.6rem var(--sp-5); flex: 1; } .card-logo { flex-shrink: 0; height: 60px; display: flex; align-items: center; justify-content: center; } .card-logo img { height: 60px; width: auto; max-width: 200px; object-fit: contain; } .card-logo--dmc { width: 120px; background-image: url('/images/logos/landing/dmc-pos.svg'); background-repeat: no-repeat; background-size: contain; background-position: left center; } html.dark .card-logo--dmc { background-image: url('/images/logos/landing/dmc-neg.svg'); } .card--split .card-title { font-size: 1.3rem; margin: 0; } .card--split .card-subtitle { color: var(--accent); font-weight: 600; margin: 0 0 var(--sp-2); } .card--split .card-description { color: var(--text-muted); font-size: .9rem; margin: 0; } @media (max-width: 900px) { .learning-centre-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 620px) { .learning-centre-grid { grid-template-columns: 1fr; } } /* ============================== OVERVIEW PAGE ============================== */ .overview-page .ov-hero { position: relative; margin: var(--sp-1) 0 var(--sp-6); padding: 2.5rem 2.25rem 2.75rem; border-radius: var(--r-lg); border: 1px solid var(--border); overflow: hidden; background: radial-gradient(42rem 20rem at 16% -25%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%), linear-gradient(135deg, color-mix(in srgb, var(--accent) 11%, var(--card-bg)), var(--card-bg) 62%); } .ov-hero-eyebrow { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--accent); margin-bottom: .65rem; } .ov-hero-title { font-size: 2.15rem; line-height: 1.18; letter-spacing: -.02em; margin: 0 0 .85rem; max-width: 40ch; } .ov-hero-lead { font-size: 1.12rem; line-height: 1.6; color: var(--text-body); margin: 0; max-width: 62ch; } @media (max-width: 720px){ .ov-hero-title { font-size: 1.75rem; } } /* paired product videos */ .video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin: var(--sp-4) 0 var(--sp-5); } .video-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin-bottom: var(--sp-2); } @media (max-width: 720px){ .video-grid { grid-template-columns: 1fr; } } /* migration lifecycle strip */ .lifecycle { display: grid; grid-template-columns: repeat(5,1fr); gap: var(--sp-3); margin: 1.25rem 0 1.75rem; } .lc-step { position: relative; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4) .9rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .35rem; } .lc-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9999px; background: color-mix(in srgb, var(--accent) 14%, var(--card-bg)); color: var(--accent); font-weight: 700; font-size: .9rem; border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); } .lc-label { font-weight: 700; color: var(--heading); } .lc-desc { font-size: .82rem; color: var(--text-muted); line-height: 1.45; } .lc-step:not(:last-child)::after { content: ''; position: absolute; top: 1.7rem; right: -.5rem; width: .55rem; height: .55rem; border-top: 2px solid var(--border-strong); border-right: 2px solid var(--border-strong); transform: rotate(45deg); z-index: 1; } @media (max-width: 860px){ .lifecycle { grid-template-columns: 1fr; } .lc-step:not(:last-child)::after { display: none; } } /* ============================== SEARCH ============================== */ .search-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 100; padding-top: 12vh; } .search-overlay.open { display: block; } .search-box { max-width: 600px; margin: 0 auto; background: var(--bg); border: 1px solid var(--border); border-radius: .6rem; box-shadow: var(--shadow-overlay); overflow: hidden; } .search-input-row { display: flex; align-items: center; gap: .6rem; padding: .9rem var(--sp-4); border-bottom: 1px solid var(--border); } .search-input-row .drm-icon { color: var(--text-muted); } #search-input { flex: 1; border: none; outline: none; background: transparent; font-size: 1.05rem; font-family: inherit; color: var(--text-body); } .search-results { min-height: 10rem; max-height: 60vh; overflow-y: auto; } .search-result { display: block; padding: .85rem 1.25rem; border-bottom: 1px solid var(--border); text-decoration: none; } .search-result:hover, .search-result.sel { background: var(--bg-soft); } .search-result .sr-title { font-weight: 600; color: var(--heading); font-family: var(--font-sans); } .search-result .sr-section { font-size: .75rem; color: var(--accent); margin-bottom: .2rem; font-weight: 500; } .search-result .sr-snippet { font-size: .82rem; color: var(--text-muted); margin-top: var(--sp-1); line-height: 1.5; } .search-result mark { background: rgba(var(--primary-rgb),.18); color: inherit; border-radius: 2px; } .search-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 10rem; padding: var(--sp-6) var(--sp-5); color: var(--text-muted); font-size: .9rem; } /* ============================== RESPONSIVE ============================== */ @media (max-width: 1280px) { .toc-col { display: none; } .layout { grid-template-columns: var(--sidebar-w) minmax(0,1fr); } } @media (max-width: 900px) { .layout { grid-template-columns: 1fr; } .navbar-links { display: none; } .sidebar-toggle { display: inline-flex; } .sidebar { position: fixed; left: 0; top: var(--navbar-h); width: 80%; max-width: 340px; z-index: 40; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow-drawer); } .sidebar.open { transform: translateX(0); } .content { padding: 1.25rem 1.25rem var(--sp-6); } .search-btn span { display: none; } } /* ============================== SCAN-AWS GUIDE PAGES ============================== */ /* Steps rendered as standalone white boxes (no timeline) */ /* Code blocks with a filename header + download button — site-wide component (was page-scoped to .aws-guide with a private dark palette; now themed like every other code block) */ .code-block { margin: var(--sp-4) 0 var(--sp-5); border-radius: .5rem; overflow: hidden; border: 1px solid var(--border); } .code-header { display: flex; align-items: center; justify-content: space-between; background: var(--bg-soft); color: var(--text-body); padding: var(--sp-2) .9rem; font-family: var(--font-mono); font-size: .8rem; } .code-header .fname { opacity: .9; } .dl-btn { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; background: transparent; border: none; color: var(--accent); font: inherit; font-weight: 600; } .dl-btn:hover { color: var(--accent-hover); } .dl-btn svg { width: 15px; height: 15px; } /* nested codehilite already themed by the global .codehilite rule above — just trims its border/radius inside the header/body chrome */ .code-block .codehilite { border: none; border-radius: 0; } /* Choose-your-scan cards */ .scan-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); margin: var(--sp-5) 0 var(--sp-6); } .scan-cards .card { display: flex; flex-direction: column; padding: 1.6rem 1.7rem; } .scan-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--accent); color: var(--on-accent); border-radius: .6rem; margin-bottom: var(--sp-4); } .scan-card-icon .drm-icon, .scan-card-icon svg { width: 26px; height: 26px; } .scan-card-title { font-family: var(--font-sans); font-weight: 600; font-size: 1.35rem; margin: .1rem 0 var(--sp-2); color: var(--heading); } .scan-cards .card p { color: var(--text-muted); margin: .2rem 0 .9rem; } .scan-cards .card ul { margin: .2rem 0 1.4rem; padding-left: 1.2rem; } .scan-cards .card li { margin: .35rem 0; color: var(--text-body); font-size: .92rem; } .scan-cta { margin-top: auto; align-self: flex-start; background: var(--accent); color: var(--on-accent); padding: .6rem 1.15rem; border-radius: .5rem; font-weight: 600; font-size: .9rem; } .scan-cards .card--interactive:hover .scan-cta { background: var(--primary); } @media (max-width: 800px) { .scan-cards { grid-template-columns: 1fr; } } /* Hosting-method comparison cards (side-by-side) */ .hosting-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); margin: var(--sp-5) 0 var(--sp-6); } .hosting-cards .card { display: flex; flex-direction: column; padding: 1.6rem 1.7rem; } .hosting-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--accent); color: var(--on-accent); border-radius: .6rem; margin-bottom: var(--sp-4); } .hosting-card-icon .drm-icon, .hosting-card-icon svg { width: 26px; height: 26px; } .hosting-card-title { display: block; font-weight: 600; font-size: 1.35rem; color: var(--heading); margin: .1rem 0 var(--sp-2); } .hosting-cards .card > p { color: var(--text-muted); margin: .2rem 0 var(--sp-4); } .hosting-cards .card h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: var(--sp-4) 0 var(--sp-2); } .hosting-cards .card ul, .hosting-cards .card ol { margin: .2rem 0 .6rem; padding-left: 1.25rem; } .hosting-cards .card li { margin: .3rem 0; font-size: .92rem; } .content a.hosting-cta { margin-top: auto; align-self: flex-start; background: linear-gradient(135deg, var(--accent), var(--primary)); color: var(--on-accent) !important; padding: .6rem 1.15rem; border-radius: .5rem; font-weight: 600; font-size: .9rem; text-decoration: none !important; transition: opacity .15s ease, transform .15s ease; } .content a.hosting-cta:hover { opacity: .88; transform: translateY(-1px); color: var(--on-accent) !important; text-decoration: none !important; } @media (max-width: 800px) { .hosting-cards { grid-template-columns: 1fr; } }