/* File: assets/css/theme.css Purpose: Theme layer over Bootstrap 5 for the "Canvas" (cyan) template — slim fixed header with an always off-canvas nav panel (no inline navbar links, at any width), full-viewport photo banner with load-in reveal, alternating image/text spotlight rows, two-tone feature grid, a solid-accent CTA band, forms/tables/buttons for the elements showcase page, dark (navy) menu + footer skin, and the in-page seven-color theme switcher (data-theme accent overrides + swatch styles, in both the off-canvas panel and a compact spot on the header bar) that makes this a self-describing tour of the whole template. Loads after bootstrap.min.css. Used by: index.html, generic.html, elements.html */ /* Palette + metrics */ :root { --accent: #72c9d4; --accent-rgb: 114, 201, 212; --accent-hover: #86d0da; --accent-active: #5ec2ce; --accent-fg-light: #eaf7f9; --ink: #444444; --body-color: #555555; --body-fg-light: #bbbbbb; --paper: #ffffff; --border: rgba(144, 144, 144, 0.3); --border-bg: rgba(144, 144, 144, 0.1); --border2: rgba(144, 144, 144, 0.6); --border2-bg: rgba(144, 144, 144, 0.2); --navy: #545669; --navy-fg: #ffffff; --navy-fg-muted: #bbbbc3; --navy-border: rgba(0, 0, 0, 0.3); --navy-border-bg: rgba(0, 0, 0, 0.1); --overlay-ink: #444444; --border-radius: 4px; --border-width: 1px; --element-height: 2.75em; --element-margin: 2em; --container-max: 75em; --container-narrow: 32em; --header-height: 3.25em; --header-height-mobile: 44px; } /* In-page theme preview: the swatches below (off-canvas panel + compact header spot) set data-theme on so all seven palettes can be compared without opening another build. Cyan is the shipped default (:root above, no override block needed); green and orange mirror the two real sibling variant folders (bs5/canvas/green, bs5/canvas/orange). Violet, rose, amber, and azure are four invented palettes in the same pastel-accent family, added so the switcher offers seven choices like the orbit/blue and apex/blue references. Each block overrides every accent custom property the theme reads. */ :root[data-theme="green"] { --accent: #76c8b7; --accent-rgb: 118, 200, 183; --accent-hover: #88cfc1; --accent-active: #64c1ad; --accent-fg-light: #eaf7f4; } :root[data-theme="orange"] { --accent: #ef7f5b; --accent-rgb: 239, 127, 91; --accent-hover: #f19172; --accent-active: #ed6d44; --accent-fg-light: #fdece6; } :root[data-theme="violet"] { --accent: #9f80d0; --accent-rgb: 159, 128, 208; --accent-hover: #ad93d7; --accent-active: #916ec9; --accent-fg-light: #efeaf8; } :root[data-theme="rose"] { --accent: #e2839e; --accent-rgb: 226, 131, 158; --accent-hover: #e798ae; --accent-active: #dd6e8e; --accent-fg-light: #fae8ed; } :root[data-theme="amber"] { --accent: #e9a949; --accent-rgb: 233, 169, 73; --accent-hover: #ebb460; --accent-active: #e69e33; --accent-fg-light: #fcf3e6; } :root[data-theme="azure"] { --accent: #5ea7d4; --accent-rgb: 94, 167, 212; --accent-hover: #72b2da; --accent-active: #4a9ccf; --accent-fg-light: #e8f3fa; } /* Base typography */ html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); } body { padding-top: var(--header-height); background: var(--paper); color: var(--body-color); font-family: 'Raleway', Helvetica, Arial, sans-serif; font-weight: 300; font-size: 1.0825rem; letter-spacing: 0.02em; line-height: 2; } @media (max-width: 1680px) { body { font-size: 1.0417rem; } } @media (max-width: 1280px) { body { font-size: 0.9583rem; } } @media (max-width: 979.98px) { body { font-size: 1rem; padding-top: var(--header-height-mobile); } } @media (max-width: 480px) { body { font-size: 0.9583rem; } } a { color: var(--accent); text-decoration: underline; } a:hover { text-decoration: none; } /* Anchors that are UI controls, not inline text links — never underlined. */ .site-header-link, .nav-panel-link, .btn, .icon-link { text-decoration: none; } strong, b { font-weight: 700; color: var(--ink); } em, i { font-style: italic; } p { margin: 0 0 var(--element-margin) 0; } h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: 0.07em; line-height: 1.6; margin: 0 0 1em 0; text-transform: uppercase; color: var(--ink); } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; text-decoration: none; } h2 { font-size: 1.75em; line-height: 1.5em; } h3 { font-size: 1.35em; line-height: 1.5em; } h4 { font-size: 1.1em; line-height: 1.5em; } h5 { font-size: 0.9em; line-height: 1.5em; } h6 { font-size: 0.7em; line-height: 1.5em; } @media (max-width: 735.98px) { h2 { font-size: 1.3em; } h3 { font-size: 1.2em; } } /* Underline rule beneath section headings — mirrors the original's ".major" heading treatment via a ::after pseudo-element instead of an extra markup node. */ .heading-major::after { content: ""; display: block; height: 1px; margin-top: 1em; width: 3em; background-color: var(--ink); } .heading-major-center::after { margin-left: auto; margin-right: auto; } blockquote { border-left: solid 4px var(--border); font-style: italic; margin: 0 0 var(--element-margin) 0; padding: 0.5em 0 0.5em 2em; } code { border-radius: var(--border-radius); border: solid 1px var(--border); background: var(--border-bg); font-family: 'Courier New', monospace; font-size: 0.9em; margin: 0 0.25em; padding: 0.25em 0.65em; } pre { font-family: 'Courier New', monospace; font-size: 0.9em; margin: 0 0 var(--element-margin) 0; } pre code { display: block; line-height: 1.75em; padding: 1em 1.5em; overflow-x: auto; margin: 0; } hr { border: 0; border-bottom: solid 1px var(--border); margin: 2.5em 0; } hr.rule-major { margin: 3.5em 0; } /* Header (slim fixed bar — brand + theme picker + Menu trigger; all real nav lives in the off-canvas panel, at every viewport width) */ .site-header { background: var(--paper); border-bottom: solid 1px var(--border); height: var(--header-height); z-index: 1030; } .site-header-inner { display: flex; align-items: center; justify-content: flex-end; height: 100%; padding: 0 1.25em; } .site-title { margin: 0; margin-right: auto; font-size: 1em; text-transform: uppercase; letter-spacing: 0.02em; } .site-title a { color: var(--ink); font-weight: 700; text-decoration: none; } .site-header-link { display: inline-flex; align-items: center; gap: 0.5em; padding: 0 0.75em; color: var(--body-color); font-weight: 700; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.07em; transition: color 0.2s ease-in-out; } .site-header-link:hover { color: var(--ink); } /* Separator between the compact theme picker and the Menu trigger, mirroring the border the same selector draws between two .site-header-link items when there is more than one. */ .theme-picker-group-compact + .site-header-link, .site-header-link + .site-header-link { border-left: solid 1px var(--border); margin-left: 0.5em; padding-left: 1.25em; } @media (max-width: 979.98px) { .site-header { height: var(--header-height-mobile); } .site-title a { font-size: 1em; } } /* Compact theme picker — lives between the brand and the Menu trigger on the slim bar itself, a quick-swap shortcut to the same seven swatches the off-canvas panel holds in full size. Hidden below 420px: at that width the brand, seven swatches, and Menu trigger no longer all fit without crowding or wrapping (verified in puppeteer at 390px) — the off-canvas panel's picker is reachable at every width regardless, so nothing is lost, only the bar shortcut. */ .theme-picker-group-compact { display: none; } @media (min-width: 420px) { .theme-picker-group-compact { display: block; } } .theme-picker-group-compact .theme-picker { margin: 0; padding: 0; gap: 0.35em; } .theme-picker-group-compact .theme-swatch { width: 0.85em; height: 0.85em; padding: 0.3em; background-clip: content-box; border: solid 2px var(--border); } .theme-picker-group-compact .theme-swatch:hover, .theme-picker-group-compact .theme-swatch:focus { border-color: var(--border2); } .theme-picker-group-compact .theme-swatch.is-active { border-color: var(--ink); transform: scale(1.15); } /* Off-canvas nav panel (Bootstrap Offcanvas — dark/navy skin) */ .nav-panel { width: 20em; max-width: 80%; background: var(--navy); color: var(--navy-fg-muted); padding: 1em 0.5em; } .nav-panel .btn-close { filter: invert(1) grayscale(100%) brightness(200%); opacity: 0.7; } .nav-panel .btn-close:hover { opacity: 1; } .nav-panel-list { list-style: none; margin: 0 0 1.5em 0; padding: 0; text-transform: uppercase; letter-spacing: 0.02em; } .nav-panel-link { display: block; border-top: solid 1px var(--navy-border); color: inherit; line-height: 3.5em; text-decoration: none; } .nav-panel-list li:first-child .nav-panel-link { border-top: 0; } .nav-panel-link:hover { color: var(--navy-fg); } .nav-panel-actions { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5em; } /* Theme picker (shared base) — the swatch list itself, reused inside the off-canvas panel below at full size and in the compact header spot above at a smaller size. Static per-swatch hex fills (not var(--accent)) so all seven stay visible regardless of which theme is currently applied. */ .theme-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em; margin: 0.75em 0 0; padding: 0; list-style: none; } .theme-swatch { width: 1.4em; height: 1.4em; padding: 0; border-radius: 50%; cursor: pointer; transition: border-color 0.25s ease-in-out, transform 0.25s ease-in-out; } .theme-swatch[data-theme-choice="cyan"] { background-color: #72c9d4; } .theme-swatch[data-theme-choice="green"] { background-color: #76c8b7; } .theme-swatch[data-theme-choice="orange"] { background-color: #ef7f5b; } .theme-swatch[data-theme-choice="violet"] { background-color: #9f80d0; } .theme-swatch[data-theme-choice="rose"] { background-color: #e2839e; } .theme-swatch[data-theme-choice="amber"] { background-color: #e9a949; } .theme-swatch[data-theme-choice="azure"] { background-color: #5ea7d4; } /* Off-canvas panel context: dark navy background, light ring on the active/hovered swatch. */ .nav-panel-group-label { display: block; color: var(--navy-fg-muted); font-weight: 700; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.05em; } .theme-picker-group { margin-top: 1.5em; padding-top: 1.5em; border-top: solid 1px var(--navy-border); } .nav-panel .theme-swatch { border: solid 2px rgba(255, 255, 255, 0.25); } .nav-panel .theme-swatch:hover, .nav-panel .theme-swatch:focus { border-color: rgba(255, 255, 255, 0.7); } .nav-panel .theme-swatch.is-active { border-color: #fff; transform: scale(1.15); } /* Banner (full-viewport hero photo, index.html only) */ .hero-banner { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 4em 0; background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url('../../images/meeting-table-collaboration.jpg'); background-position: center; background-size: cover; background-attachment: fixed; height: calc(100vh - var(--header-height)); min-height: 30em; text-align: center; color: var(--overlay-ink); overflow: hidden; } .hero-banner-inner { max-width: 100%; padding: 0 2em; } .hero-banner h2 { font-size: 2em; color: var(--navy-fg); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .hero-banner p { font-size: 1.25em; margin-bottom: 1.75em; color: var(--navy-fg); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .hero-banner .btn { min-width: 15em; } .hero-banner .heading-major::after { background-color: var(--navy-fg); } @media (hover: none), (max-width: 1279.98px) { .hero-banner { background-attachment: scroll; } } @media (max-width: 979.98px) { .hero-banner { height: calc(100vh - var(--header-height-mobile)); } } @media (max-width: 735.98px) { .hero-banner h2 { font-size: 1.5em; } .hero-banner p { font-size: 1.1em; } } /* Load-in reveal: banner content fades/slides up once on page load (the original's only reveal effect — this template has no scroll-triggered reveals at all, so no IntersectionObserver is used anywhere in main.js). Content is fully visible with no animation for reduced-motion users and for browsers/tools that never fire load. */ @media (prefers-reduced-motion: no-preference) { .hero-banner-inner > * { animation: banner-reveal 0.75s ease backwards; } .hero-banner-inner > *:nth-child(1) { animation-delay: 0s; } .hero-banner-inner > *:nth-child(2) { animation-delay: 0.2s; } .hero-banner-inner > *:nth-child(3) { animation-delay: 0.4s; } @keyframes banner-reveal { from { opacity: 0; transform: translateY(0.35em); filter: blur(1px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } } /* Inner-page header (generic.html, elements.html — same photo treatment, static text, no load reveal) */ .page-header { padding: 10em 0; background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url('../../images/meeting-table-collaboration.jpg'); background-position: center; background-size: cover; background-attachment: fixed; text-align: center; color: var(--navy-fg); } .page-header h2 { font-size: 2em; color: var(--navy-fg); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .page-header p { color: inherit; letter-spacing: 0.07em; margin-top: 0; margin-bottom: 0; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .page-header .heading-major::after { background-color: var(--navy-fg); } @media (hover: none), (max-width: 1279.98px) { .page-header { background-attachment: scroll; } } @media (max-width: 979.98px) { .page-header { padding: 10em 3em; } } @media (max-width: 735.98px) { .page-header { padding: 4.5em 3em; } .page-header h2 { font-size: 1.5em; margin-bottom: 1em; } } /* Content wrapper (generic sections) */ .content-section { padding: 5em 0; position: relative; } .content-section-inner { margin: 0 auto; max-width: var(--container-max); width: 100%; padding: 0 2em; } .content-section-narrow { max-width: var(--container-narrow); } .content-section-flush { padding: 0; } @media (max-width: 979.98px) { .content-section { padding: 4em 0; } } @media (max-width: 735.98px) { .content-section { padding: 3.5em 0; } } /* Feature grid ("One" section — two-tone icon cards on navy) */ .feature-grid { background: var(--navy); color: var(--navy-fg-muted); } .feature-grid-list { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .feature-item { width: 50%; padding: 4em; } .feature-item:nth-child(odd) { background-color: rgba(0, 0, 0, 0.035); } .feature-item:nth-child(even) { background-color: rgba(0, 0, 0, 0.07); } .feature-item-icon { display: block; margin-bottom: var(--element-margin); font-size: 3.25em; line-height: 1; color: var(--accent); } .feature-item h3, .feature-item p { color: inherit; } .feature-item h3 { color: var(--navy-fg); } .feature-item .heading-major::after { background-color: var(--navy-border); } @media (max-width: 979.98px) { .feature-item { padding: 3em 2em; text-align: center; } .feature-item .heading-major::after { margin-left: auto; margin-right: auto; } } @media (max-width: 735.98px) { .feature-item { width: 100%; padding: 3em; background-color: transparent !important; border-top: solid 2px var(--navy-border-bg); } .feature-item:first-child { border-top: 0; } } @media (max-width: 480px) { .feature-item { padding: 3em 2em; } } /* Spotlight rows ("Two" section — alternating image/text bands) */ .spotlight-row { display: flex; align-items: center; border-bottom: solid 1px var(--border); } .spotlight-row:last-child { border-bottom: 0; } .spotlight-row:nth-child(2n) { flex-direction: row-reverse; } .spotlight-image { width: 40%; } .spotlight-image img { width: 100%; display: block; } .spotlight-content { width: 60%; max-width: 48em; padding: 2em 4em; } @media (max-width: 1279.98px) { .spotlight-image { width: 45%; } .spotlight-content { width: 55%; } } @media (max-width: 979.98px) { .spotlight-row { display: block; border-bottom: 0; } .spotlight-image { width: 100%; } .spotlight-content { width: 100%; max-width: none; padding: 3em; text-align: center; } .spotlight-content .heading-major::after { margin-left: auto; margin-right: auto; } } @media (max-width: 735.98px) { .spotlight-content { padding: 3em 2em; } } @media (max-width: 480px) { .spotlight-content { padding: 2.5em 2em; } } /* CTA band ("Three" section — solid accent band) */ .cta-band { background: var(--accent); color: var(--accent-fg-light); text-align: center; } .cta-band h3 { color: var(--navy-fg); } .cta-band .heading-major::after { background-color: var(--navy-fg); } /* Footer (navy, two-column about + contact-info) */ .site-footer { background: var(--navy); color: var(--navy-fg-muted); padding: 5em 0; } .site-footer a { color: inherit; } .site-footer a:hover { color: var(--navy-fg); } .site-footer-inner { display: flex; flex-wrap: wrap; margin: 0 auto; max-width: var(--container-max); width: 100%; padding: 0 2em; } .site-footer h4 { color: var(--navy-fg); } .site-footer .heading-major::after { background-color: var(--navy-border); } .footer-about { width: 50%; margin-bottom: var(--element-margin); } .footer-contact { display: flex; flex-wrap: wrap; width: 50%; margin-bottom: var(--element-margin); padding-left: 4em; } .footer-contact h4 { width: 100%; } .footer-contact-list { width: 50%; } .footer-copyright { color: var(--navy-fg-muted); font-size: 0.9em; margin: 0; padding: 0 2em; text-align: center; } @media (max-width: 1279.98px) { .site-footer { padding: 4em 0; } .footer-contact { padding-left: 2em; } } @media (max-width: 979.98px) { .site-footer { padding: 4em 0; } .footer-about, .footer-contact { width: 100%; padding-left: 0; } } @media (max-width: 735.98px) { .site-footer { padding: 3.5em 0; } .footer-about, .footer-contact { margin-bottom: 1em; } } /* Contact list (footer's icon-prefixed reach items) */ .contact-list { list-style: none; margin: 0; padding: 0; } .contact-item { display: flex; align-items: flex-start; gap: 0.75em; padding: 0.65em 0 0 0; } .contact-item:first-child { padding-top: 0; } .contact-item .icon-inline { flex: 0 0 auto; margin-top: 0.3em; width: 1em; text-align: center; color: var(--navy-fg-muted); } /* Icon list (elements page social icons) */ .icon-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.75em; } .icon-link { display: inline-flex; align-items: center; justify-content: center; width: 2em; height: 2em; font-size: 1.5em; color: var(--body-fg-light); transition: color 0.2s ease-in-out; } .icon-link:hover { color: var(--accent); } /* Buttons */ .btn-accent, .btn-accent-inverse, .btn-outline, .btn-outline-light { border-radius: var(--border-radius); border-style: solid; border-width: 1px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.85em 1.75em; } .btn-accent { background: var(--accent); border-color: var(--accent); color: #ffffff; } .btn-accent:hover, .btn-accent:focus { background: var(--accent-hover); border-color: var(--accent-hover); color: #ffffff; } .btn-accent:active { background: var(--accent-active); border-color: var(--accent-active); } .btn-accent-inverse { background: #ffffff; border-color: #ffffff; color: var(--accent); } .btn-accent-inverse:hover, .btn-accent-inverse:focus { background: var(--accent-fg-light); border-color: var(--accent-fg-light); color: var(--accent); } .btn-outline { background: transparent; border-color: var(--border); color: var(--ink); } .btn-outline:hover, .btn-outline:focus { background: var(--border-bg); color: var(--ink); } .btn-outline-light { background: transparent; border-color: rgba(255, 255, 255, 0.3); color: #ffffff; } .btn-outline-light:hover, .btn-outline-light:focus { background: rgba(255, 255, 255, 0.1); color: #ffffff; } .btn-accent.disabled, .btn-outline.disabled, .btn-accent[aria-disabled="true"], .btn-outline[aria-disabled="true"] { opacity: 0.25; pointer-events: none; } .btn-accent.btn-sm, .btn-accent-inverse.btn-sm, .btn-outline.btn-sm, .btn-outline-light.btn-sm { font-size: 0.8em; padding: 0.6em 1.25em; } .btn-accent.btn-lg, .btn-accent-inverse.btn-lg, .btn-outline.btn-lg, .btn-outline-light.btn-lg { font-size: 1.15em; padding: 0.9em 3.5em; } .btn .icon-inline { margin-right: 0.5em; } .button-row { display: flex; flex-wrap: wrap; gap: 0.75em; list-style: none; margin: 0 0 var(--element-margin) 0; padding: 0; } .button-row-sm { gap: 0.5em; } .button-row-vertical { flex-direction: column; align-items: stretch; } .button-row-fit > li { flex: 1 1 0; } .button-row-fit .btn-accent, .button-row-fit .btn-outline, .button-row-fit .btn-accent-inverse, .button-row-fit .btn-outline-light { display: block; width: 100%; text-align: center; } @media (max-width: 480px) { .button-row { flex-direction: column; align-items: stretch; } .button-row .btn-accent, .button-row .btn-outline, .button-row .btn-accent-inverse, .button-row .btn-outline-light { text-align: center; } } /* Content box */ .content-box { border-radius: var(--border-radius); border: solid 1px var(--border); margin-bottom: var(--element-margin); padding: 1.5em; } .content-box > :last-child { margin-bottom: 0; } .content-box-flush { border: 0; border-radius: 0; padding: 0; } /* Images (elements page) */ .figure-inline-left, .figure-inline-right { max-width: 40%; border-radius: var(--border-radius); overflow: hidden; } .figure-inline-left img, .figure-inline-right img { width: 100%; display: block; border-radius: var(--border-radius); } .figure-inline-left { float: left; margin: 0.25em 2.5em 2em 0; } .figure-inline-right { float: right; margin: 0.25em 0 2em 2.5em; } .figure-fit { display: block; width: 100%; margin: 0 0 var(--element-margin) 0; border-radius: var(--border-radius); overflow: hidden; } .figure-fit img { width: 100%; display: block; } @media (max-width: 735.98px) { .figure-inline-left { margin: 0 1.5em 1em 0; } .figure-inline-right { margin: 0 0 1em 1.5em; } } /* Lists (elements page) */ .list-plain { list-style: none; margin: 0 0 var(--element-margin) 0; padding: 0; } .list-plain li { border-top: solid 1px var(--border); padding: 0.5em 0; } .list-plain li:first-child { border-top: 0; padding-top: 0; } /* Tables (elements page) */ .table-wrapper { overflow-x: auto; } .table-canvas { width: 100%; margin: 0 0 var(--element-margin) 0; border-collapse: collapse; } .table-canvas th { font-size: 0.9em; font-weight: 700; color: var(--ink); padding: 0 0.75em 0.75em 0.75em; text-align: left; border-bottom: solid 2px var(--border); } .table-canvas td { padding: 0.75em; border-top: solid 1px var(--border); border-bottom: solid 1px var(--border); } .table-canvas tbody tr:nth-child(2n+1) { background-color: var(--border-bg); } .table-canvas tfoot td { border-top: solid 2px var(--border); border-bottom: 0; } .table-canvas-alt { border-collapse: separate; border-spacing: 0; } .table-canvas-alt th { border-bottom: 0; } .table-canvas-alt td { border: solid 1px var(--border); border-top-width: 0; border-left-width: 0; } .table-canvas-alt td:first-child { border-left-width: 1px; } .table-canvas-alt tbody tr:first-child td { border-top-width: 1px; } .table-canvas-alt tbody tr:nth-child(2n+1) { background-color: transparent; } .table-canvas-alt tfoot td { border-top: 0; } /* Forms */ label { font-size: 0.9em; font-weight: 700; color: var(--ink); } .form-control, .form-select { border-radius: var(--border-radius); border: solid 1px var(--border); background: var(--border-bg); color: var(--ink); } .form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); } .form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }