jarvis-at-skic
1a2d16bc91
Build and publish Eldorado documentation / build (pull_request) Successful in 1m30s
172 lines
13 KiB
CSS
172 lines
13 KiB
CSS
@import '@fontsource/lato/400.css';
|
|
@import '@fontsource/lato/700.css';
|
|
@import '@fontsource/lato/900.css';
|
|
|
|
:root {
|
|
--ifm-font-family-base: 'Lato', sans-serif;
|
|
--ifm-heading-font-weight: 900;
|
|
--ifm-color-primary: #805b00;
|
|
--ifm-color-primary-dark: #735200;
|
|
--ifm-color-primary-darker: #6d4d00;
|
|
--ifm-color-primary-darkest: #594000;
|
|
--ifm-color-primary-light: #8d6400;
|
|
--ifm-color-primary-lighter: #936900;
|
|
--ifm-color-primary-lightest: #a67600;
|
|
--ifm-background-color: #f6f6f6;
|
|
--ifm-background-surface-color: #fff;
|
|
--ifm-color-content: #14131a;
|
|
--ifm-global-radius: 0;
|
|
--ifm-code-border-radius: 0;
|
|
--ifm-button-border-radius: 0;
|
|
--ifm-navbar-height: 76px;
|
|
--ifm-line-height-base: 1.7;
|
|
--gold: #ffc950;
|
|
--surface: #fff;
|
|
--muted: #62616b;
|
|
--line: #dedee3;
|
|
}
|
|
[data-theme='dark'] {
|
|
--ifm-color-primary: #ffc950;
|
|
--ifm-color-primary-dark: #ffc035;
|
|
--ifm-color-primary-darker: #ffb91e;
|
|
--ifm-color-primary-darkest: #efaa00;
|
|
--ifm-color-primary-light: #ffd46d;
|
|
--ifm-color-primary-lighter: #ffdc86;
|
|
--ifm-color-primary-lightest: #ffe6a6;
|
|
--ifm-background-color: #14131a;
|
|
--ifm-background-surface-color: #222127;
|
|
--ifm-color-content: #f6f6f6;
|
|
--surface: #222127;
|
|
--muted: #b8b7c0;
|
|
--line: #37363f;
|
|
}
|
|
.navbar {background: #101014; border-bottom: 1px solid #35343d; box-shadow: none; padding: 0 2rem;}
|
|
.navbar__title {font-size: 1.7rem; color: #fff; letter-spacing: -.6px;}
|
|
.navbar__logo {height: 38px; margin-right: .75rem;}
|
|
.navbar__link {color: #d5d4dc; font-weight: 700; font-size: .95rem;}
|
|
.navbar__link:hover, .navbar__link--active {color: var(--gold);}
|
|
.navbar__toggle, .navbar button {color: #fff;}
|
|
.navbar-sidebar {background: #1f1f29; --ifm-menu-color: #eee; --ifm-menu-color-active: #ffc950; --ifm-menu-color-background-active: #303039;}
|
|
.navbar-sidebar__back {color: #fff;}
|
|
.navbar input {background-color: #28272e; color: #fff; border: 1px solid #41404c; border-radius: 0;}
|
|
.navbar input::placeholder {color: #cccbd1;}
|
|
.docs-hero {overflow: hidden; color: #fff; background: #1f1f29; border-bottom: 4px solid var(--gold);}
|
|
.hero-inner {max-width: 1240px; margin: auto; padding: 76px 40px 82px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 50px; align-items: center;}
|
|
.eyebrow {font-size: .75rem; font-weight: 900; letter-spacing: .16em; margin-bottom: 18px;}
|
|
.hero-copy .eyebrow {color: var(--gold);}
|
|
.hero-copy h1 {font-size: clamp(2.8rem, 4.7vw, 4.2rem); letter-spacing: -.045em; line-height: 1.08; margin-bottom: 24px;}
|
|
.hero-copy h1 span {color: var(--gold);}
|
|
.hero-description {font-size: 1.17rem; color: #d1d0d8; max-width: 410px; margin-bottom: 28px;}
|
|
.button--primary {background: var(--gold); border-color: var(--gold); color: #14131a; font-weight: 900;}
|
|
.button--primary:hover {background: #ffd778; border-color: #ffd778; color: #14131a;}
|
|
.button--primary span {padding-left: 24px;}
|
|
.hero-note {font-size: .8rem; margin: 14px 0 0; color: #b1b0bc;}
|
|
.hero-art {position: relative; height: 340px;}
|
|
.art-grid {position: absolute; inset: -25px; background-image: linear-gradient(#ffffff09 1px,transparent 1px),linear-gradient(90deg,#ffffff09 1px,transparent 1px); background-size: 36px 36px; transform: rotate(-8deg);}
|
|
.document-sheet {position: absolute; width: 245px; height: 292px; left: 50%; top: 8px;}
|
|
.sheet-back {background: #87682e; transform: translateX(-36%) rotate(10deg); border: 1px solid #c39335;}
|
|
.sheet-front {background: var(--gold); color: #14131a; transform: translateX(-60%) rotate(-7deg); padding: 25px; box-shadow: 14px 20px 0 #0002;}
|
|
.sheet-tag {font-size: .65rem; font-weight: 900; letter-spacing: .14em;}
|
|
.sheet-title {display: block; font-weight: 900; font-size: 2.5rem; letter-spacing: -.055em; line-height: 1.1; margin: 30px 0 23px;}
|
|
.sheet-line {display: block; height: 3px; background: #14131a5c; margin: 10px 0; width: 85%;}
|
|
.sheet-line.short {width: 58%;}
|
|
.sheet-number {display: block; font-size: .6rem; font-weight: 900; margin-top: 25px; letter-spacing: .08em;}
|
|
.art-label {position: absolute; bottom: -1px; left: 8%; right: 3%; background: #101014; border: 1px solid #4b4850; padding: 14px 18px; font-size: .62rem; letter-spacing: .12em; font-weight: 700;}
|
|
.art-label span {float: right; color: var(--gold); font-size: 1rem;}
|
|
.start-section {max-width: 1240px; padding: 48px 40px 64px;}
|
|
.section-heading {display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 25px;}
|
|
.section-heading .eyebrow {color: var(--muted); margin-bottom: 8px;}
|
|
.section-heading h2 {font-size: 1.8rem; letter-spacing: -.03em; margin: 0;}
|
|
.foundation-badge {font-size: .75rem; border: 1px solid var(--line); padding: 5px 12px; color: var(--muted); white-space: nowrap;}
|
|
.start-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
|
|
.start-card {display: flex; flex-direction: column; padding: 27px; background: var(--surface); border: 1px solid var(--line); color: var(--ifm-color-content); transition: border-color .15s, transform .15s;}
|
|
.start-card:hover {color: var(--ifm-color-content); text-decoration: none; border-color: #b88719; transform: translateY(-3px);}
|
|
.card-number {font-size: .65rem; font-weight: 900; letter-spacing: .11em; color: var(--muted); margin-bottom: 23px;}
|
|
.start-card h3 {font-size: 1.4rem; margin-bottom: 10px;}
|
|
.start-card p {color: var(--muted); font-size: .95rem; flex: 1;}
|
|
.card-action {font-weight: 700; font-size: .85rem; border-top: 1px solid var(--line); padding-top: 17px; margin-top: 10px;}
|
|
.card-action span {float: right;}
|
|
.scope-note {margin-top: 28px; padding: 22px 25px; display: flex; gap: 18px; border-left: 3px solid var(--gold); background: var(--surface);}
|
|
.scope-symbol {font-size: 1.65rem; color: var(--ifm-color-primary);}
|
|
.scope-note p {color: var(--muted); font-size: .9rem; margin: 3px 0 0;}
|
|
.footer {background: #101014; color: #afadb9; font-size: .8rem; padding: 27px;}
|
|
.theme-doc-markdown {max-width: 850px;}
|
|
.theme-doc-markdown h1 {letter-spacing: -.035em;}
|
|
.strategy-content table {display: table; width: 100%; table-layout: fixed;}
|
|
.strategy-content th, .strategy-content td {overflow-wrap: anywhere; vertical-align: top;}
|
|
.strategy-content th:first-child, .strategy-content td:first-child {width: 25%;}
|
|
@media (max-width: 700px) {
|
|
.strategy-content th:first-child, .strategy-content td:first-child {width: 32%;}
|
|
.strategy-content th, .strategy-content td {padding: .65rem;}
|
|
}
|
|
.pagination-nav__link, .menu__link, .theme-admonition, pre {border-radius: 0;}
|
|
a:focus-visible, button:focus-visible {outline: 3px solid #b88719; outline-offset: 4px;}
|
|
@media (max-width: 996px) {.navbar {padding: 0 1rem;} .hero-inner {gap: 15px; padding: 55px 25px;} .hero-art {transform: scale(.85);} .start-section {padding: 35px 25px;} .start-card {padding: 20px;}}
|
|
@media (max-width: 700px) {.hero-inner {grid-template-columns: 1fr; padding: 45px 24px;} .hero-art {display: none;} .hero-copy h1 {font-size: 3rem;} .start-grid {grid-template-columns: 1fr;} .section-heading {align-items: flex-start;} .foundation-badge {display: none;} .start-section {padding: 32px 20px;} .navbar__title {font-size: 1.45rem;} .navbar__logo {height: 31px;} .navbar input {max-width: 145px;} .button--lg {font-size: .95rem;} .button--primary span {padding-left: 10px;}}
|
|
.archify-panel {border: 1px solid var(--line); margin: 1.5rem 0;}
|
|
.archify-toolbar {display: flex; justify-content: flex-end; padding: 4px; background: var(--surface);}
|
|
.archify-panel iframe {width: 100%; height: 720px; border: 0; display: block; background: #f6f6f6;}
|
|
.archify-panel--compact > iframe {height: 500px;}
|
|
.archify-panel--story {max-width: 740px;}
|
|
.archify-panel--story > iframe {height: auto; aspect-ratio: 480 / 408;}
|
|
.archify-panel--story > .story-mobile {display: none;}
|
|
.theme-doc-markdown:has([data-diagram="strategy-roadmap"]) {max-width: none;}
|
|
.archify-panel--story[data-diagram^="strategy-roadmap"] {max-width: none; --roadmap-height: 640px;}
|
|
.archify-panel--story[data-diagram^="strategy-roadmap"] > .story-desktop {aspect-ratio: auto; height: 300px;}
|
|
.archify-panel--story[data-diagram="strategy-roadmap-loop"] {--roadmap-height: 1840px;}
|
|
.archify-panel--story[data-diagram="strategy-roadmap-loop"] > .story-desktop {height: 460px;}
|
|
.archify-panel--story[data-diagram="strategy-target"] > iframe {aspect-ratio: 1225 / 1151;}
|
|
.strategy-content > details:has([data-diagram="strategy-target"]) {padding-inline: 0;}
|
|
|
|
.strategy-content > details {margin: .65rem 0; border: 1px solid var(--line); padding: .8rem 1rem; background: var(--surface);}
|
|
.strategy-content summary {cursor: pointer; font-weight: 700;}
|
|
.strategy-content summary:focus-visible {outline: 3px solid #b88719; outline-offset: 4px;}
|
|
.strategy-content > details[open] > summary {margin-bottom: 1rem;}
|
|
@media (max-width: 700px) {.archify-panel iframe {height: 650px;}}
|
|
@media (max-width: 700px) {
|
|
.archify-panel--story > .story-desktop {display: none;}
|
|
.archify-panel--story > .story-mobile {display: block; height: auto; aspect-ratio: 240 / 748;}
|
|
|
|
|
|
.archify-panel--story[data-diagram="strategy-target"] > .story-mobile {aspect-ratio: 680 / 2340;}
|
|
}
|
|
/* Keep the three-card loop readable beside the documentation sidebar. */
|
|
@media (width < 1100px) {
|
|
.archify-panel--story[data-diagram^="strategy-roadmap"] > .story-desktop {display: none;}
|
|
.archify-panel--story[data-diagram^="strategy-roadmap"] > .story-mobile {display: block; height: var(--roadmap-height); width: 100%; max-width: 432px; margin-inline: auto; aspect-ratio: auto;}
|
|
}
|
|
.archify-expand {display: grid; place-items: center; width: 44px; height: 44px; border: 0; padding: 0; background: transparent; color: var(--ifm-link-color); cursor: pointer;}
|
|
.archify-expand:hover {background: var(--ifm-hover-overlay);}
|
|
.archify-modal {position: fixed; inset: 0; margin: 0; padding: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; border: 0; background: var(--surface); color: var(--ifm-color-content);}
|
|
.archify-modal[open] {display: flex; flex-direction: column;}
|
|
.archify-modal::backdrop {background: #000b;}
|
|
.archify-modal-toolbar {display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--line);}
|
|
.archify-modal-toolbar button {display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; background: var(--gold); color: #14131a; font: inherit; font-size: 24px; font-weight: 700; border: 0; cursor: pointer;}
|
|
.archify-panel .archify-modal iframe {flex: 1; min-height: 0; height: 100%; width: 100%;}
|
|
/* Read narrow Roadmap views by scrolling, never by fitting their
|
|
entire height into a short phone screen. Other diagram viewers are unchanged. */
|
|
@media (max-width: 999px) {
|
|
[data-diagram^="strategy-roadmap"] .archify-modal {overflow-y: auto; overscroll-behavior: contain;}
|
|
[data-diagram^="strategy-roadmap"] .archify-modal-toolbar {position: sticky; top: 0; z-index: 1; flex-shrink: 0; background: var(--surface);}
|
|
[data-diagram^="strategy-roadmap"] .archify-modal iframe {flex: none; height: var(--roadmap-height); min-height: var(--roadmap-height);}
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {.start-card {transition: none;} .start-card:hover {transform: none;}}
|
|
|
|
/* Skills Adoption alone uses the full reading column, not a narrow preview. */
|
|
.theme-doc-markdown:has(.archify-panel--skills) {max-width: none;}
|
|
.archify-panel--story.archify-panel--skills {max-width: none;}
|
|
.archify-panel--skills {--skills-wide: 2000 / 1200; --skills-narrow: 880 / 2900;}
|
|
.archify-panel--skills[data-diagram="strategy-governance"] {--skills-wide: 1760 / 1550;}
|
|
.archify-panel--skills[data-diagram="strategy-adoption"] {--skills-wide: 2040 / 1300; --skills-narrow: 880 / 2200;}
|
|
.archify-panel--skills[data-diagram="strategy-measurement"] {--skills-wide: 2400 / 1280; --skills-narrow: 880 / 2600;}
|
|
.archify-panel--skills[data-diagram="strategy-baseline"] {--skills-wide: 2400 / 1280; --skills-narrow: 880 / 2200;}
|
|
.archify-panel--skills[data-diagram="strategy-maintenance"] {--skills-wide: 2630 / 1480; --skills-narrow: 880 / 3250;}
|
|
.archify-panel--story.archify-panel--skills > .story-desktop {aspect-ratio: var(--skills-wide); height: auto;}
|
|
@media (max-width: 1100px) {
|
|
.archify-panel--story.archify-panel--skills > .story-desktop {display: none;}
|
|
.archify-panel--story.archify-panel--skills > .story-mobile {display: block; aspect-ratio: var(--skills-narrow); height: auto; max-width: 440px; margin-inline: auto;}
|
|
.archify-panel--skills .archify-modal {overflow-y: auto; overscroll-behavior: contain;}
|
|
.archify-panel--skills .archify-modal-toolbar {position: sticky; top: 0; z-index: 1; flex-shrink: 0; background: var(--surface);}
|
|
.archify-panel--skills .archify-modal iframe {flex: none; height: auto; min-height: 0; aspect-ratio: var(--skills-narrow); max-width: 600px; margin-inline: auto;}
|
|
}
|