Manuel Cillero
1bd97d5705
Integra AdminLTE 4.0.0 (SCSS y JS), Bootstrap Icons 1.13.1 y las fuentes Source Sans 3 VF; reorganiza los SCSS del tema con la nueva estructura de *pagetop-build*.
820 lines
19 KiB
SCSS
820 lines
19 KiB
SCSS
//
|
|
// Component: Docs
|
|
//
|
|
// Visual treatment for documentation pages. Body class `.docs-page` opts in.
|
|
// Demo pages are not affected.
|
|
//
|
|
|
|
// Inline code blocks rendered by MDX (Astro highlight default class)
|
|
.astro-code {
|
|
padding: .75rem;
|
|
@include border-radius($border-radius);
|
|
}
|
|
|
|
.docs-page {
|
|
// Constrain the docs card to a comfortable reading width.
|
|
// Tables and code blocks inside can still scroll horizontally if needed.
|
|
.app-content > .container-fluid {
|
|
max-width: 60rem; // ~960px
|
|
|
|
@include media-breakpoint-up(xxl) {
|
|
max-width: 64rem;
|
|
}
|
|
}
|
|
|
|
//
|
|
// Card body — breathing room + prose typography.
|
|
// Only applied inside docs content cards so demo-page card content
|
|
// stays unchanged.
|
|
//
|
|
.card > .card-body {
|
|
padding: 1.5rem;
|
|
font-size: 1rem;
|
|
line-height: 1.7;
|
|
color: var(--#{$prefix}body-color);
|
|
|
|
@include media-breakpoint-up(md) {
|
|
padding: 2.5rem;
|
|
}
|
|
|
|
//
|
|
// Heading hierarchy. The MDX content in src/html/components/docs/ uses
|
|
// ##### (h5) as the dominant section heading and ###### (h6) as a
|
|
// sub-heading (most visible in FAQ.mdx, where h5 is a topic and h6 is
|
|
// a question). Style h5 as a major section and h6 as a sub-section so
|
|
// the visual hierarchy matches the semantic one.
|
|
//
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
.h1,
|
|
.h2,
|
|
.h3,
|
|
.h4,
|
|
.h5,
|
|
.h6 {
|
|
margin-top: 2em;
|
|
margin-bottom: .5em;
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
color: var(--#{$prefix}emphasis-color);
|
|
scroll-margin-top: 4rem; // anchor-link friendly
|
|
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
h2,
|
|
.h2 {
|
|
padding-bottom: .35em;
|
|
font-size: 1.75rem;
|
|
border-bottom: 1px solid var(--#{$prefix}border-color);
|
|
}
|
|
|
|
h3,
|
|
.h3 {
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
h4,
|
|
.h4 {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
// h5 is the dominant section heading across docs MDX files. Give it
|
|
// a visible separator above so sections are easy to scan.
|
|
h5,
|
|
.h5 {
|
|
padding-top: 1.5em;
|
|
margin-top: 2.5em;
|
|
font-size: 1.3rem;
|
|
border-top: 1px solid var(--#{$prefix}border-color);
|
|
|
|
&:first-child {
|
|
padding-top: 0;
|
|
border-top: 0;
|
|
}
|
|
}
|
|
|
|
// h6 is the sub-section / FAQ question style. Smaller than h5 but
|
|
// still distinctly heading-like, with a touch of accent colour to
|
|
// separate from body text.
|
|
h6,
|
|
.h6 {
|
|
margin-top: 1.75em;
|
|
font-size: 1.08rem;
|
|
color: var(--#{$prefix}emphasis-color);
|
|
}
|
|
|
|
//
|
|
// Paragraphs and lists.
|
|
//
|
|
p,
|
|
ul,
|
|
ol,
|
|
dl,
|
|
blockquote,
|
|
table {
|
|
margin-bottom: 1.1rem;
|
|
}
|
|
|
|
ul,
|
|
ol {
|
|
padding-left: 1.5rem;
|
|
|
|
li {
|
|
margin-bottom: .35rem;
|
|
}
|
|
|
|
// Tighter nested lists
|
|
ul,
|
|
ol {
|
|
margin-top: .35rem;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
// Lead-style first paragraph (just after a heading)
|
|
h2 + p,
|
|
h3 + p,
|
|
h5 + p {
|
|
margin-top: 0;
|
|
}
|
|
|
|
//
|
|
// Inline code — pill style that complements MDX's syntax-highlighted blocks.
|
|
//
|
|
p code,
|
|
li code,
|
|
td code,
|
|
th code,
|
|
h2 code,
|
|
h3 code,
|
|
h4 code,
|
|
h5 code,
|
|
h6 code {
|
|
padding: .15em .4em;
|
|
font-size: .875em;
|
|
color: var(--#{$prefix}emphasis-color);
|
|
background: var(--#{$prefix}tertiary-bg);
|
|
border: 1px solid var(--#{$prefix}border-color);
|
|
@include border-radius($border-radius-sm);
|
|
}
|
|
|
|
//
|
|
// Code blocks.
|
|
//
|
|
pre.astro-code,
|
|
pre {
|
|
padding: 1rem 1.25rem;
|
|
margin-top: 1.25rem;
|
|
margin-bottom: 1.5rem;
|
|
overflow-x: auto;
|
|
font-size: .875rem;
|
|
line-height: 1.6;
|
|
@include border-radius($border-radius);
|
|
|
|
code {
|
|
padding: 0;
|
|
background: transparent;
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
//
|
|
// Tables — reference-doc styling with hairline borders.
|
|
//
|
|
table {
|
|
width: 100%;
|
|
margin-top: 1.25rem;
|
|
margin-bottom: 1.5rem;
|
|
overflow: hidden;
|
|
font-size: .95rem;
|
|
border-collapse: collapse;
|
|
border: 1px solid var(--#{$prefix}border-color);
|
|
@include border-radius($border-radius-sm);
|
|
|
|
th,
|
|
td {
|
|
padding: .65rem .9rem;
|
|
text-align: left;
|
|
vertical-align: top;
|
|
border-bottom: 1px solid var(--#{$prefix}border-color);
|
|
}
|
|
|
|
th {
|
|
font-weight: 600;
|
|
color: var(--#{$prefix}emphasis-color);
|
|
background: var(--#{$prefix}tertiary-bg);
|
|
}
|
|
|
|
tr:last-child td {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
code {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
//
|
|
// Blockquotes used as info callouts.
|
|
//
|
|
blockquote {
|
|
padding: .85rem 1.1rem;
|
|
margin-top: 1.25rem;
|
|
color: var(--#{$prefix}emphasis-color);
|
|
background: var(--#{$prefix}info-bg-subtle);
|
|
border-left: 4px solid var(--#{$prefix}info-border-subtle);
|
|
@include border-radius($border-radius-sm);
|
|
|
|
p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
code {
|
|
background: rgba(0, 0, 0, .05);
|
|
}
|
|
}
|
|
|
|
//
|
|
// Prose links — stand out more than Bootstrap defaults.
|
|
//
|
|
a:not(.btn):not(.nav-link) {
|
|
color: var(--#{$prefix}primary);
|
|
text-decoration: underline;
|
|
text-decoration-thickness: 1px;
|
|
text-underline-offset: 3px;
|
|
|
|
&:hover {
|
|
text-decoration-thickness: 2px;
|
|
}
|
|
}
|
|
|
|
//
|
|
// Horizontal rule — used as additional section separator.
|
|
//
|
|
hr {
|
|
margin: 2.5rem 0;
|
|
border: 0;
|
|
border-top: 1px solid var(--#{$prefix}border-color);
|
|
opacity: 1;
|
|
}
|
|
|
|
//
|
|
// Lead paragraph — the first paragraph in any doc is a summary.
|
|
// Visually heavier so it functions as a deck.
|
|
//
|
|
> p:first-child,
|
|
> p:first-of-type {
|
|
margin-bottom: 2rem;
|
|
font-size: 1.125rem;
|
|
line-height: 1.6;
|
|
color: var(--#{$prefix}body-color);
|
|
}
|
|
|
|
//
|
|
// FAQ / disclosure accordion — uses native <details>/<summary>.
|
|
// Add `.faq-item` to <details> to opt in.
|
|
//
|
|
details.faq-item {
|
|
margin-bottom: .5rem;
|
|
overflow: hidden;
|
|
background: var(--#{$prefix}body-bg);
|
|
border: 1px solid var(--#{$prefix}border-color);
|
|
@include border-radius($border-radius);
|
|
@include transition(border-color .15s ease, box-shadow .15s ease);
|
|
|
|
&:hover {
|
|
border-color: var(--#{$prefix}primary-border-subtle);
|
|
}
|
|
|
|
&[open] {
|
|
background: var(--#{$prefix}body-bg);
|
|
border-color: var(--#{$prefix}primary-border-subtle);
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
|
|
}
|
|
|
|
summary {
|
|
position: relative;
|
|
padding: .9rem 3rem .9rem 1.1rem;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--#{$prefix}emphasis-color);
|
|
list-style: none;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
@include transition(color .15s ease);
|
|
|
|
// Hide the default disclosure triangle in Webkit/Blink
|
|
&::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
// Hide the marker in modern Firefox too
|
|
&::marker {
|
|
content: "";
|
|
}
|
|
|
|
&:hover {
|
|
color: var(--#{$prefix}primary);
|
|
}
|
|
|
|
// Right-side chevron, rotates on open
|
|
&::after {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 1.1rem;
|
|
display: inline-block;
|
|
width: .55rem;
|
|
height: .55rem;
|
|
margin-top: -.4rem;
|
|
content: "";
|
|
border-right: 2px solid currentcolor;
|
|
border-bottom: 2px solid currentcolor;
|
|
opacity: .55;
|
|
transform: rotate(45deg);
|
|
@include transition(transform .2s ease);
|
|
}
|
|
}
|
|
|
|
&[open] > summary {
|
|
color: var(--#{$prefix}primary);
|
|
border-bottom: 1px solid var(--#{$prefix}border-color);
|
|
|
|
&::after {
|
|
margin-top: -.15rem;
|
|
opacity: 1;
|
|
transform: rotate(-135deg);
|
|
}
|
|
}
|
|
|
|
// Content (everything after <summary>) gets the inner padding
|
|
> *:not(summary) {
|
|
padding-right: 1.1rem;
|
|
padding-left: 1.1rem;
|
|
}
|
|
|
|
> *:not(summary):first-of-type {
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
> *:not(summary):last-child {
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
// Tighten paragraphs/lists inside an FAQ answer
|
|
p,
|
|
ul,
|
|
ol {
|
|
margin-bottom: .65rem;
|
|
}
|
|
|
|
> *:last-child p:last-child,
|
|
> p:last-child,
|
|
> ul:last-child,
|
|
> ol:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
// Code blocks inside an FAQ answer get a less-distracting bg
|
|
pre.astro-code,
|
|
pre {
|
|
margin-right: 0;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Dark-mode tweak: blockquote info bg needs more contrast on dark
|
|
&[data-bs-theme="dark"],
|
|
[data-bs-theme="dark"] & {
|
|
.card > .card-body blockquote code {
|
|
background: rgba(255, 255, 255, .08);
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// FAQ page — custom layout that breaks out of the standard docs card
|
|
// to give the FAQ a more distinctive visual identity. Opt in via
|
|
// body.faq-page (set in pages/docs/faq.astro).
|
|
//
|
|
|
|
.faq-page {
|
|
// The FAQ doesn't use the standard card wrapper used by other docs,
|
|
// so the container can stretch wider for the chip strip and section
|
|
// grid.
|
|
.app-content > .container-fluid {
|
|
max-width: 64rem;
|
|
|
|
@include media-breakpoint-up(xxl) {
|
|
max-width: 72rem;
|
|
}
|
|
}
|
|
|
|
// --- Hero -------------------------------------------------------------
|
|
.faq-hero {
|
|
position: relative;
|
|
padding: 3rem 1.5rem 2.5rem;
|
|
margin-top: 1rem;
|
|
overflow: hidden;
|
|
background: radial-gradient(ellipse at top left, rgba(var(--#{$prefix}primary-rgb), .12), transparent 60%), radial-gradient(ellipse at bottom right, rgba(var(--#{$prefix}info-rgb), .1), transparent 65%), var(--#{$prefix}body-bg);
|
|
border: 1px solid var(--#{$prefix}border-color);
|
|
@include border-radius($border-radius-xl);
|
|
}
|
|
|
|
.faq-hero-eyebrow {
|
|
display: inline-flex;
|
|
gap: .4rem;
|
|
align-items: center;
|
|
padding: .35rem .85rem;
|
|
margin-bottom: 1rem;
|
|
font-size: .75rem;
|
|
font-weight: 600;
|
|
color: var(--#{$prefix}primary);
|
|
text-transform: uppercase;
|
|
letter-spacing: .08em;
|
|
background: var(--#{$prefix}primary-bg-subtle);
|
|
border: 1px solid var(--#{$prefix}primary-border-subtle);
|
|
@include border-radius(50rem);
|
|
|
|
.bi {
|
|
font-size: .9rem;
|
|
}
|
|
}
|
|
|
|
.faq-hero-title {
|
|
margin: 0 0 .5rem;
|
|
font-size: 2.25rem;
|
|
font-weight: 700;
|
|
line-height: 1.15;
|
|
color: var(--#{$prefix}emphasis-color);
|
|
|
|
@include media-breakpoint-up(md) {
|
|
font-size: 2.75rem;
|
|
}
|
|
}
|
|
|
|
.faq-hero-lead {
|
|
max-width: 36rem;
|
|
margin: 0 auto 1.75rem;
|
|
font-size: 1.05rem;
|
|
line-height: 1.55;
|
|
color: var(--#{$prefix}secondary-color);
|
|
}
|
|
|
|
.faq-search {
|
|
position: relative;
|
|
max-width: 32rem;
|
|
margin: 0 auto;
|
|
|
|
.form-control {
|
|
height: 3rem;
|
|
padding-right: 3rem;
|
|
padding-left: 3rem;
|
|
font-size: 1rem;
|
|
background: var(--#{$prefix}body-bg);
|
|
@include border-radius(50rem);
|
|
@include transition(box-shadow .15s ease, border-color .15s ease);
|
|
|
|
&:focus {
|
|
box-shadow: 0 0 0 .25rem rgba(var(--#{$prefix}primary-rgb), .15);
|
|
}
|
|
}
|
|
}
|
|
|
|
.faq-search-icon {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 1.2rem;
|
|
color: var(--#{$prefix}secondary-color);
|
|
pointer-events: none;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.faq-search-clear {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: .65rem;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
padding: 0;
|
|
color: var(--#{$prefix}secondary-color);
|
|
background: var(--#{$prefix}tertiary-bg);
|
|
border: 0;
|
|
transform: translateY(-50%);
|
|
@include border-radius(50%);
|
|
@include transition(background .15s ease, color .15s ease);
|
|
|
|
&:hover {
|
|
color: var(--#{$prefix}body-color);
|
|
background: var(--#{$prefix}secondary-bg);
|
|
}
|
|
}
|
|
|
|
.faq-empty-state {
|
|
max-width: 32rem;
|
|
padding: 1rem;
|
|
margin: 1.5rem auto 0;
|
|
font-size: .95rem;
|
|
color: var(--#{$prefix}secondary-color);
|
|
background: var(--#{$prefix}tertiary-bg);
|
|
@include border-radius($border-radius);
|
|
|
|
.bi {
|
|
margin-right: .35rem;
|
|
}
|
|
}
|
|
|
|
// --- Section nav chips ------------------------------------------------
|
|
.faq-chips {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: .5rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
.faq-chip {
|
|
display: inline-flex;
|
|
gap: .45rem;
|
|
align-items: center;
|
|
padding: .45rem .85rem;
|
|
font-size: .875rem;
|
|
font-weight: 500;
|
|
color: var(--#{$prefix}body-color);
|
|
text-decoration: none;
|
|
background: var(--#{$prefix}body-bg);
|
|
border: 1px solid var(--#{$prefix}border-color);
|
|
@include border-radius(50rem);
|
|
@include transition(transform .15s ease, border-color .15s ease, background-color .15s ease, color .15s ease);
|
|
|
|
&:hover {
|
|
color: var(--#{$prefix}emphasis-color);
|
|
background: var(--#{$prefix}tertiary-bg);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.bi {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
|
|
.faq-chip-count {
|
|
padding: 0 .45rem;
|
|
font-size: .7rem;
|
|
font-weight: 600;
|
|
color: var(--#{$prefix}secondary-color);
|
|
background: var(--#{$prefix}tertiary-bg);
|
|
@include border-radius(50rem);
|
|
}
|
|
|
|
// Per-section chip accent on hover/active
|
|
@each $tone in (primary, info, warning, success, danger, secondary) {
|
|
.faq-chip-#{$tone}:hover {
|
|
color: var(--#{$prefix}#{$tone}-text-emphasis);
|
|
background: var(--#{$prefix}#{$tone}-bg-subtle);
|
|
border-color: var(--#{$prefix}#{$tone}-border-subtle);
|
|
|
|
.faq-chip-count {
|
|
color: var(--#{$prefix}#{$tone}-text-emphasis);
|
|
background: rgba(0, 0, 0, .06);
|
|
}
|
|
}
|
|
}
|
|
|
|
// --- Sections ---------------------------------------------------------
|
|
.faq-section {
|
|
margin-bottom: 2.5rem;
|
|
scroll-margin-top: 5rem;
|
|
}
|
|
|
|
.faq-section-header {
|
|
display: flex;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
padding: 1rem 1.25rem;
|
|
margin-bottom: 1rem;
|
|
background: var(--#{$prefix}body-bg);
|
|
border: 1px solid var(--#{$prefix}border-color);
|
|
border-left: 4px solid var(--#{$prefix}primary);
|
|
@include border-radius($border-radius);
|
|
}
|
|
|
|
.faq-section-icon {
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2.75rem;
|
|
height: 2.75rem;
|
|
font-size: 1.35rem;
|
|
color: var(--#{$prefix}primary);
|
|
background: var(--#{$prefix}primary-bg-subtle);
|
|
@include border-radius($border-radius);
|
|
}
|
|
|
|
.faq-section-title {
|
|
margin: 0;
|
|
font-size: 1.4rem;
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
color: var(--#{$prefix}emphasis-color);
|
|
}
|
|
|
|
.faq-section-count {
|
|
margin: .1rem 0 0;
|
|
font-size: .8rem;
|
|
color: var(--#{$prefix}secondary-color);
|
|
}
|
|
|
|
// Per-section tone accents
|
|
@each $tone in (primary, info, warning, success, danger, secondary) {
|
|
.faq-section-#{$tone} {
|
|
border-left-color: var(--#{$prefix}#{$tone});
|
|
|
|
.faq-section-icon {
|
|
color: var(--#{$prefix}#{$tone}-text-emphasis);
|
|
background: var(--#{$prefix}#{$tone}-bg-subtle);
|
|
}
|
|
}
|
|
}
|
|
|
|
// --- FAQ items (override the generic .docs-page details styling) ------
|
|
.faq-section-items .faq-item {
|
|
margin-bottom: .5rem;
|
|
overflow: hidden;
|
|
background: var(--#{$prefix}body-bg);
|
|
border: 1px solid var(--#{$prefix}border-color);
|
|
@include border-radius($border-radius);
|
|
@include transition(border-color .15s ease, box-shadow .15s ease, transform .15s ease);
|
|
|
|
&:hover {
|
|
border-color: var(--#{$prefix}primary-border-subtle);
|
|
transform: translateX(2px);
|
|
}
|
|
|
|
&[open] {
|
|
border-color: var(--#{$prefix}primary-border-subtle);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
|
|
transform: none;
|
|
}
|
|
|
|
summary {
|
|
display: flex;
|
|
gap: .85rem;
|
|
align-items: center;
|
|
padding: 1rem 1.25rem;
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
color: var(--#{$prefix}emphasis-color);
|
|
list-style: none;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
|
|
&::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
&::marker {
|
|
content: "";
|
|
}
|
|
|
|
&::after {
|
|
content: none; // disable the generic chevron, we use our own
|
|
}
|
|
}
|
|
|
|
.faq-q-icon {
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
font-size: .85rem;
|
|
color: var(--#{$prefix}primary);
|
|
background: var(--#{$prefix}primary-bg-subtle);
|
|
@include border-radius(50%);
|
|
}
|
|
|
|
.faq-q-text {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.faq-q-chevron {
|
|
flex-shrink: 0;
|
|
color: var(--#{$prefix}secondary-color);
|
|
@include transition(transform .2s ease, color .2s ease);
|
|
}
|
|
|
|
&[open] .faq-q-chevron {
|
|
color: var(--#{$prefix}primary);
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
&[open] summary {
|
|
color: var(--#{$prefix}primary);
|
|
border-bottom: 1px solid var(--#{$prefix}border-color);
|
|
}
|
|
|
|
.faq-answer {
|
|
padding: 1.1rem 1.25rem 1.1rem 3.85rem; // align with the question text (icon + gap)
|
|
font-size: .95rem;
|
|
line-height: 1.65;
|
|
color: var(--#{$prefix}body-color);
|
|
|
|
p:last-child,
|
|
ul:last-child,
|
|
ol:last-child,
|
|
pre:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
a {
|
|
color: var(--#{$prefix}primary);
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
|
|
&:hover {
|
|
text-decoration-thickness: 2px;
|
|
}
|
|
}
|
|
|
|
code {
|
|
padding: .12em .35em;
|
|
font-size: .875em;
|
|
color: var(--#{$prefix}emphasis-color);
|
|
background: var(--#{$prefix}tertiary-bg);
|
|
border: 1px solid var(--#{$prefix}border-color);
|
|
@include border-radius($border-radius-sm);
|
|
}
|
|
|
|
pre.astro-code,
|
|
pre {
|
|
padding: .85rem 1rem;
|
|
margin-top: .75rem;
|
|
margin-bottom: .75rem;
|
|
overflow-x: auto;
|
|
font-size: .85rem;
|
|
line-height: 1.55;
|
|
@include border-radius($border-radius-sm);
|
|
|
|
code {
|
|
padding: 0;
|
|
background: transparent;
|
|
border: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// --- CTA footer -------------------------------------------------------
|
|
.faq-cta {
|
|
padding: 2.5rem 1.5rem;
|
|
text-align: center;
|
|
background: radial-gradient(ellipse at top, rgba(var(--#{$prefix}primary-rgb), .08), transparent 60%), var(--#{$prefix}body-bg);
|
|
border: 1px solid var(--#{$prefix}border-color);
|
|
@include border-radius($border-radius-xl);
|
|
}
|
|
|
|
.faq-cta-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 3.5rem;
|
|
height: 3.5rem;
|
|
margin-bottom: 1rem;
|
|
font-size: 1.6rem;
|
|
color: var(--#{$prefix}primary);
|
|
background: var(--#{$prefix}primary-bg-subtle);
|
|
@include border-radius(50%);
|
|
}
|
|
|
|
.faq-cta h2 {
|
|
margin: 0 0 .5rem;
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
color: var(--#{$prefix}emphasis-color);
|
|
}
|
|
|
|
.faq-cta p {
|
|
max-width: 32rem;
|
|
margin: 0 auto 1.5rem;
|
|
color: var(--#{$prefix}secondary-color);
|
|
}
|
|
|
|
.faq-cta-actions {
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
gap: .5rem;
|
|
justify-content: center;
|
|
}
|
|
}
|