/* TecDocToCat Web Service Documentation - styles. Restyled to match the Figma "Documentation revamp" design: white chrome separated by thin borders, Inter/Barlow type, TecDoc blue (#0A74DA) primary with orange (#FF8700) accent. All theme values are expressed as CSS custom properties on :root. */ /* Google Fonts (Inter + Barlow) loaded via tags in each page's for faster rendering. See index.html and sites/*.html. */ /* --------------------------------------------------------------------------- Design tokens (light theme) --------------------------------------------------------------------------- */ :root { /* Brand */ --color-brand: #0A74DA; --color-brand-hover: #095fb3; --color-accent: #FF8700; /* Surfaces */ --color-surface: #FFFFFF; --color-surface-muted: #F5F5F5; --color-surface-sunken: #FAFAFB; /* Borders / dividers */ --color-border: #E6E6E7; --color-divider: #CED4DA; /* Text */ --color-text: #272838; --color-text-secondary: #4A5568; --color-text-muted: #868E96; --color-text-on-brand: #FFFFFF; /* Semantic (examples / warnings) */ --color-danger: #991b1b; --color-danger-bg: #fef2f2; --color-success: #166534; --color-success-bg: #f0fdf4; --color-warning: #dc2626; /* Code surfaces */ --color-code-bg: #F5F5F5; --color-code-border: #E6E6E7; --color-code-text: #272838; /* Typography */ --font-ui: 'Inter', system-ui, sans-serif; --font-heading: 'Barlow', 'Inter', system-ui, sans-serif; --font-mono: 'Courier New', Courier, monospace; --line-height: 1.5; /* Shape & layout */ --radius: 8px; --radius-lg: 12px; --header-height: 64px; --footer-height: 48px; --sidebar-width: 261px; --space: 16px; /* Computed offset used to keep content panels above the footer: header (64) + footer (48) + layout padding (16*2) + content padding (16*2) */ --chrome-offset: calc(var(--header-height) + var(--footer-height) + 64px); } /* --------------------------------------------------------------------------- Base --------------------------------------------------------------------------- */ html, body { margin: 0; } body { font-family: var(--font-ui); font-size: 16px; line-height: var(--line-height); color: var(--color-text); background-color: var(--color-surface); display: flex; flex-direction: column; min-height: 100vh; } h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--color-text); } a { color: var(--color-brand); text-decoration: none; } a:hover { text-decoration: underline; } /* Skip-to-content link: hidden until focused via keyboard (Tab). */ .skip-link { position: absolute; top: -100%; left: 16px; z-index: 10000; padding: 8px 16px; background-color: var(--color-brand); color: var(--color-text-on-brand); border-radius: var(--radius); font-weight: 600; font-size: 0.875rem; text-decoration: none; transition: top 0.2s ease; } .skip-link:focus { top: 12px; outline: 2px solid var(--color-brand); outline-offset: 2px; } /* --------------------------------------------------------------------------- Header / navbar: white bar, 64px tall, thin bottom border (Figma navbar). --------------------------------------------------------------------------- */ .site-header { display: flex; align-items: center; gap: var(--space); height: var(--header-height); box-sizing: border-box; padding: 0 var(--space); background-color: var(--color-surface); border-bottom: 1px solid var(--color-border); } .site-header .logo { height: 32px; width: auto; } .site-header .site-title { flex: 1; font-family: var(--font-heading); font-weight: 600; font-size: 1.25rem; margin: 0; color: var(--color-text); } /* Language selector dropdown in the header */ .site-header .lang-selector { margin-left: auto; display: flex; align-items: center; } .site-header .lang-selector select { appearance: none; -webkit-appearance: none; background: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 4px 24px 4px 10px; font-family: var(--font-ui); font-size: 0.85rem; font-weight: 500; color: var(--color-text); cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23868E96' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; } .site-header .lang-selector select:hover { border-color: var(--color-brand); } .site-header .lang-selector select:focus { outline: 2px solid var(--color-brand); outline-offset: 1px; } /* --------------------------------------------------------------------------- Layout: fixed-width sidebar + fluid content, grows to fill viewport. --------------------------------------------------------------------------- */ .layout { display: grid; grid-template-columns: var(--sidebar-width) 1fr; flex: 1 0 auto; gap: var(--space); } /* --------------------------------------------------------------------------- Sidebar: white surface with right border (replaces the old blue panel). --------------------------------------------------------------------------- */ .sidebar { background-color: var(--color-surface); border-right: 1px solid var(--color-border); padding: 12px; box-sizing: border-box; position: relative; overflow: visible; transition: width 0.2s ease, padding 0.2s ease; } /* Sidebar toggle button: centered vertically on the sidebar's right border edge */ .sidebar-toggle { position: absolute; top: 50%; right: -14px; transform: translateY(-50%); width: 28px; height: 28px; border: 1px solid var(--color-border); border-radius: 50%; background-color: var(--color-surface); color: var(--color-text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; padding: 0; z-index: 10; } .sidebar-toggle:hover { background-color: var(--color-surface-muted); color: var(--color-brand); } .sidebar-toggle::before { margin: 0; width: auto; line-height: 1; } /* Collapsed sidebar: completely hidden, only the toggle button visible */ .sidebar-collapsed .sidebar { width: 0; padding: 0; border-right: 1px solid var(--color-border); } .sidebar-collapsed .sidebar .menu { display: none; } /* When collapsed, position the button straddling the left border edge */ .sidebar-collapsed .sidebar .sidebar-toggle { right: -17px; } /* When collapsed, make button more prominent on hover */ .sidebar-collapsed .sidebar .sidebar-toggle:hover { background-color: var(--color-brand); color: #fff; border-color: var(--color-brand); transform: translateY(-50%) scale(1.2); right: -21px; } /* Update grid columns when collapsed — just the border line */ .layout.sidebar-collapsed { grid-template-columns: 0 1fr; gap: 0; } .sidebar .menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } /* Each menu row mirrors the Figma sidebar item: 6px/8px padding, 8px radius, muted hover surface, medium-weight Inter text. */ .sidebar .menu li { border-radius: var(--radius); } .sidebar .menu a, .sidebar .menu a:visited { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: var(--radius); font-family: var(--font-ui); font-weight: 500; font-size: 1rem; color: var(--color-text); text-decoration: none; } .sidebar .menu a:hover { background-color: var(--color-surface-muted); text-decoration: none; } /* Leading menu icon: fixed 16px box, muted by default; inherits the link color (brand) on the active row via currentColor. Decorative only. */ .sidebar .menu .menu-item-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 16px; width: 16px; height: 16px; color: var(--color-text-muted); } /* ta-icons glyph: size it to the 16px box and strip the font's default horizontal margins so it aligns flush with the label. */ .sidebar .menu .menu-item-icon::before { margin: 0; width: auto; font-size: 16px; line-height: 1; } .sidebar .menu .menu-item-label { flex: 1 1 auto; } .sidebar .menu-item-active a, .sidebar .menu-item-active a:visited { font-weight: 600; color: var(--color-brand); } /* Active row icon picks up the brand color from the link's currentColor. */ .sidebar .menu-item-active .menu-item-icon { color: var(--color-brand); } /* Expandable parent: chevron sits at the end of the row, the submenu nests beneath with the child links indented to align under the parent label. Collapsed by default; expanded via .menu-item-expanded toggle. */ .sidebar .menu-item-has-children > a .menu-item-chevron { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text-muted); cursor: pointer; font-size: 12px; } /* Strip ta-icons default margins on the chevron glyph */ .sidebar .menu-item-has-children > a .menu-item-chevron::before { margin: 0; width: auto; line-height: 1; } .sidebar .submenu { list-style: none; margin: 2px 0 0 0; /* Indent children to line up roughly under the parent's text label (icon width 16px + 12px gap). */ padding: 0 0 0 28px; display: none; flex-direction: column; gap: 2px; } /* Show submenu when parent is expanded */ .sidebar .menu-item-expanded > .submenu { display: flex; } .sidebar .submenu .menu-subitem a, .sidebar .submenu .menu-subitem a:visited { display: block; padding: 6px 8px; border-radius: var(--radius); font-family: var(--font-ui); font-weight: 500; font-size: 0.9375rem; color: var(--color-text-secondary); text-decoration: none; } .sidebar .submenu .menu-subitem a:hover { background-color: var(--color-surface-muted); text-decoration: none; } .sidebar .submenu .menu-subitem-active a, .sidebar .submenu .menu-subitem-active a:visited { background-color: var(--color-surface-muted); color: var(--color-brand); font-weight: 600; } /* --------------------------------------------------------------------------- Content panels: white cards with a thin border (shared treatment for every page). The max-height keeps the panel above the footer so it scrolls internally instead of pushing the document. Offset is token-driven. --------------------------------------------------------------------------- */ .home-content, .news-content, .api-docs-content, .deprecated-content, .use-cases-content, .auth-content { background-color: var(--color-surface); border-radius: var(--radius-lg); overflow-y: auto; height: calc(105vh - var(--chrome-offset)); padding: var(--space); box-sizing: border-box; } /* Visual separation between adjacent entries on list-style pages. */ .news-content .news-entry + .news-entry, .use-cases-content .use-case-entry + .use-case-entry, .deprecated-content .deprecated-method-entry + .deprecated-method-entry { margin-top: 1rem; } /* Loading placeholder shown inside the Swagger UI container before render. */ .api-docs-content .api-docs-spec-loading { margin: 0; padding: 1rem 0; color: var(--color-text-muted); font-style: italic; } /* --------------------------------------------------------------------------- Use-cases section: same card/accordion pattern as deprecated methods. --------------------------------------------------------------------------- */ .use-cases-entries .use-cases-section-heading { margin-top: 1.5rem; margin-bottom: 0.75rem; font-family: 'Barlow', sans-serif; font-size: 1.25rem; font-weight: 600; color: var(--color-brand); border-bottom: 2px solid var(--color-brand); padding-bottom: 0.25rem; } .use-cases-entries .use-cases-section-heading:first-child { margin-top: 0; } .use-cases-entries .use-case-entry { margin-top: 1rem; border: 1px solid var(--color-border); border-left: 3px solid var(--color-brand); background-color: var(--color-surface); border-radius: 0 var(--radius) var(--radius) 0; } .use-cases-entries .use-case-entry:first-of-type { margin-top: 0; } .use-cases-entries .use-case-entry summary.use-case-name { padding: 0.75rem; font-family: 'Barlow', sans-serif; font-size: 1rem; font-weight: 500; color: var(--color-text); cursor: pointer; } .use-cases-entries .use-case-entry summary.use-case-name:hover { background-color: var(--color-brand); color: var(--color-text-on-brand); } .use-cases-entries .use-case-content { padding: 0 0.75rem 0.75rem 0.75rem; } .use-cases-entries .use-case-description { margin: 0.25rem 0 0.5rem 0; color: var(--color-text-secondary); font-size: 0.9rem; } .use-cases-entries .use-case-step { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); } .use-cases-entries .use-case-step:first-of-type { border-top: none; padding-top: 0; } .use-cases-entries .use-case-step-title { display: block; margin-bottom: 0.25rem; color: var(--color-brand); font-size: 1rem; } .use-cases-entries .use-case-method { font-weight: 400; color: var(--color-text-muted); } .use-cases-entries .use-case-step-description { margin: 0.25rem 0 0.5rem 0; color: var(--color-text-secondary); font-size: 0.9rem; } .use-cases-entries .use-case-request-label { display: block; margin-bottom: 0.25rem; color: var(--color-text); font-size: 0.9rem; } .use-cases-entries .use-case-request { margin: 0.25rem 0 0.5rem 0; padding: 0.5rem; background-color: var(--color-code-bg); border: 1px solid var(--color-code-border); border-radius: var(--radius); font-family: var(--font-mono); font-size: 0.82rem; color: var(--color-code-text); overflow-x: auto; white-space: pre-wrap; } .use-cases-entries .use-case-response-note { margin: 0.5rem 0; color: var(--color-text-secondary); font-size: 0.9rem; } /* Hide swagger infos that are too much */ .swagger-ui .information-container .info__extdocs { display: none; } .swagger-ui .info hgroup.main { margin: 0 0 10px !important; } .swagger-ui .opblock .opblock-section .opblock-section-header h4 + .parameters-container:empty, .swagger-ui .opblock .opblock-section .parameters-container { display: none; } .swagger-ui .scheme-container { margin: 0 0 10px !important; } /* Swagger UI "Try it out" and "Authorize" button color override */ .swagger-ui .btn.authorize, .swagger-ui .try-out__btn { border-color: #ff8700 !important; color: #ff8700 !important; } .swagger-ui .btn.authorize svg { fill: #ff8700 !important; color: #ff8700 !important; } .swagger-ui .try-out__btn:hover { background-color: #ff8700 !important; color: #fff !important; } .swagger-ui .markdown code, .swagger-ui .renderedMarkdown code{ color: #ff8700 !important; } /* Swagger UI POST operation color override (green → #0A74DA) */ .swagger-ui .opblock.opblock-post { border-color: #0A74DA !important; background: rgba(10, 116, 218, 0.1) !important; } .swagger-ui .opblock.opblock-post .opblock-summary-method { background: #0A74DA !important; } .swagger-ui .opblock.opblock-post .opblock-summary { border-color: #0A74DA !important; } .swagger-ui .opblock.opblock-post .tab-header .tab-item.active h4 span::after { background: #0A74DA !important; } /* Swagger UI description font override */ .swagger-ui .information-container .description, .swagger-ui .information-container .description .renderedMarkdown, .swagger-ui .information-container .description .renderedMarkdown p { font-family: 'Inter', sans-serif !important; font-size: 16px !important; } /* PAID badge for paid endpoints and use cases */ .paid-badge, .swagger-ui .opblock-summary-description .paid-badge, .swagger-ui .opblock .opblock-summary .opblock-summary-description .paid-badge { display: inline-block; background-color: #ff8700; color: #fff; font-weight: 700; font-size: 11px; padding: 2px 8px; border-radius: 3px; margin-right: 6px; vertical-align: middle; letter-spacing: 0.5px; text-transform: uppercase; } /* --------------------------------------------------------------------------- Footer: white bar, 48px tall, thin top border. Copyright on the left, legal links + social icons on the right (Figma application footer). --------------------------------------------------------------------------- */ .site-footer { display: flex; align-items: center; height: var(--footer-height); box-sizing: border-box; padding: 0 var(--space); background-color: var(--color-surface); border-top: 1px solid var(--color-border); flex: 0 0 auto; } .site-footer .footer-container { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--space); } .site-footer .copyright { font-size: 13px; color: var(--color-text-muted); margin: 0; } /* Right-hand cluster: legal links, vertical dividers, then social icons. */ .site-footer .footer-links { display: flex; align-items: center; gap: var(--space); } .site-footer .footer-link { font-size: 13px; color: var(--color-text); text-decoration: none; } /* Thin vertical separator between footer items (Figma 1px / #CED4DA). */ .site-footer .footer-sep { width: 1px; height: 24px; background-color: var(--color-divider); } .site-footer .footer-social { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: var(--color-text-muted); } .site-footer .footer-link:hover, .site-footer .footer-social:hover { color: var(--color-brand); text-decoration: none; } .site-footer .footer-social svg { display: block; width: 16px; height: 16px; } /* --------------------------------------------------------------------------- Deprecated method sections / accordions. --------------------------------------------------------------------------- */ .deprecated-method-section { margin-top: 1.5rem; } .deprecated-method-section .deprecated-method-entry { margin-top: 1rem; border: 1px solid var(--color-border); border-left: 3px solid var(--color-brand); background-color: var(--color-surface); border-radius: 0 var(--radius) var(--radius) 0; } .deprecated-method-section .deprecated-method-entry:first-of-type { margin-top: 0; } .deprecated-method-section .deprecated-method-entry summary.deprecated-method-name { padding: 0.75rem; font-family: 'Barlow', sans-serif; font-size: 1rem; font-weight: 500; color: var(--color-text); cursor: pointer; } .deprecated-method-section .deprecated-method-entry summary.deprecated-method-name:hover { background-color: var(--color-brand); color: var(--color-text-on-brand); } .deprecated-method-section .deprecated-method-content { padding: 0 0.75rem 0.75rem 0.75rem; } .deprecated-method-section .deprecated-method-description { margin: 0.25rem 0 0.5rem 0; color: var(--color-text-secondary); font-size: 0.9rem; } .deprecated-method-section .deprecated-method-description > strong, .deprecated-method-section .deprecated-method-migration > strong { display: block; margin-bottom: 0.25rem; color: var(--color-brand); font-size: 1rem; } .deprecated-method-section .method-link { color: var(--color-brand); text-decoration: underline; font-weight: 400; } .deprecated-method-section .deprecated-method-request, .deprecated-method-section .deprecated-method-response { margin: 0.5rem 0; } .deprecated-method-section .deprecated-method-request > strong, .deprecated-method-section .deprecated-method-response > strong { display: block; margin-bottom: 0.25rem; color: var(--color-text); font-size: 0.9rem; } .deprecated-method-section .deprecated-method-request > pre, .deprecated-method-section .deprecated-method-response > pre { margin: 0; padding: 0.5rem 0.75rem; background-color: var(--color-code-bg); border: 1px solid var(--color-code-border); border-radius: 4px; font-size: 0.82rem; font-family: var(--font-mono); white-space: pre-wrap; word-break: break-word; color: var(--color-code-text); } .deprecated-method-section .deprecated-method-replacement, .deprecated-method-section .deprecated-method-migration { margin: 0.5rem 0; color: var(--color-text-secondary); font-size: 0.9rem; } /* Migration mapping tables: structured parameter/response field mapping. */ .deprecated-mapping-section { margin-top: 0.75rem; } .deprecated-mapping-section > strong { display: block; margin-bottom: 0.25rem; color: var(--color-text); font-size: 0.9rem; } .deprecated-mapping-table { width: 100%; border-collapse: collapse; margin-bottom: 0.75rem; font-size: 0.85rem; } .deprecated-mapping-table th { background-color: var(--color-surface-muted); font-weight: 600; text-align: left; padding: 0.4rem 0.6rem; border: 1px solid var(--color-border); } .deprecated-mapping-table td { padding: 0.35rem 0.6rem; border: 1px solid var(--color-border); vertical-align: top; } .deprecated-mapping-table code { font-family: var(--font-mono, 'Courier New', monospace); font-size: 0.82rem; background-color: var(--color-surface-muted); padding: 0.1rem 0.3rem; border-radius: 3px; } .deprecated-mapping-table tbody tr:nth-child(even) { background-color: var(--color-surface-muted); } /* Examples table: Old/New Request/Response side by side. */ .deprecated-method-section .deprecated-method-examples-table { width: 100%; table-layout: fixed; border-collapse: collapse; margin-top: 0.75rem; font-size: 0.82rem; } .deprecated-method-section .deprecated-method-examples-table th { background-color: var(--color-brand); color: var(--color-text-on-brand); padding: 0.5rem; text-align: left; font-size: 0.85rem; width: 50%; } .deprecated-method-section .deprecated-method-examples-table td { padding: 0.5rem; vertical-align: top; border: 1px solid var(--color-border); width: 50%; } .deprecated-method-section .deprecated-method-examples-table pre { margin: 0.25rem 0 0 0; padding: 0.5rem; border-radius: 4px; font-size: 0.8rem; font-family: var(--font-mono); white-space: pre-wrap; word-break: break-word; overflow-x: auto; max-width: 100%; } .deprecated-method-section .deprecated-method-examples-table .example-label { display: inline-block; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; padding: 0.1rem 0.4rem; border-radius: 3px; } .deprecated-method-section .deprecated-examples-old .example-label, .deprecated-method-section .deprecated-examples-old2 .example-label, .deprecated-method-section .deprecated-examples-old3 .example-label, .deprecated-method-section .deprecated-examples-old4 .example-label { background-color: var(--color-danger-bg); color: var(--color-danger); } .deprecated-method-section .deprecated-examples-new .example-label, .deprecated-method-section .deprecated-examples-new2 .example-label, .deprecated-method-section .deprecated-examples-new3 .example-label, .deprecated-method-section .deprecated-examples-new4 .example-label { background-color: var(--color-success-bg); color: var(--color-success); } /* Migration warning: emphasized text for important migration notes. */ .migration-warning { color: var(--color-warning); font-weight: 700; } /* =========================================================================== Responsive Design =========================================================================== */ /* --- Point 3: Fluid typography using clamp() --- */ h1 { font-size: clamp(1.5rem, 2.5vw + 1rem, 2.25rem); } h2 { font-size: clamp(1.25rem, 2vw + 0.75rem, 1.75rem); } h3 { font-size: clamp(1.1rem, 1.5vw + 0.6rem, 1.4rem); } /* --- Point 5: Touch-friendly tap targets (minimum 44px hit area) --- */ @media (pointer: coarse) { .sidebar .menu a { min-height: 44px; padding: 10px 8px; } .sidebar .submenu .menu-subitem a { min-height: 44px; padding: 10px 8px; } .site-footer .footer-link, .site-footer .footer-social { min-width: 22px; min-height: 22px; display: inline-flex; align-items: center; justify-content: center; } } /* --- Point 2: Footer stacks vertically on narrow screens --- */ @media (max-width: 768px) { .site-footer { height: auto; padding: var(--space); } .site-footer .footer-container { flex-direction: column; align-items: flex-start; gap: 8px; } .site-footer .footer-links { flex-wrap: wrap; gap: 8px; } .site-footer .footer-sep { display: none; } } /* --- Points 4: Adjust content height on tablet/mobile --- */ @media (max-width: 768px) { /* Point 4: Content panel fills available height without fixed chrome offset */ .home-content, .news-content, .api-docs-content, .deprecated-content, .use-cases-content { height: calc(100vh - var(--header-height) - var(--footer-height) - 32px); } } /* Small phones: further reduce padding and font sizes */ @media (max-width: 480px) { :root { --space: 12px; --sidebar-width: 220px; } .site-header { height: 52px; --header-height: 52px; } .site-header .site-title { font-size: 1rem; } .home-content, .news-content, .api-docs-content, .deprecated-content, .use-cases-content { height: calc(100vh - 52px - var(--footer-height) - 24px); padding: 12px; } } /* --------------------------------------------------------------------------- Print: hide all content to prevent printing. --------------------------------------------------------------------------- */ @media print { body { display: none !important; } }