/*
File: assets/css/theme.css
Purpose: Theme layer over Bootstrap 5 for the "Aurora" (blue) template —
dark one-pager kit: fixed header + off-canvas menu, fullscreen
hero banner with fixed background photo, accent-toned feature
wrappers, alternating spotlight rows, CTA band, light content
panel (elements/generic pages), footer, and the in-page theme
switcher (data-theme accent overrides + swatch styles living in
the off-canvas menu). Loads after bootstrap.min.css. Accent
palette lives in :root so the shipped green variant is a
custom-property swap only.
Used by: index.html, generic.html, elements.html
*/
/* Palette + metrics */
:root {
--ink: #2e3842;
--ink-darker: #232b33;
--fg-bold: #ffffff;
--fg: #ffffff;
--fg-light: rgba(255, 255, 255, 0.5);
--border: #ffffff;
--border-bg: rgba(144, 144, 144, 0.25);
--border2-bg: rgba(144, 144, 144, 0.5);
/* accent-1..6 differ per variant; accent-7 (light content panel) is constant */
--accent-1: #4598c8;
--accent-2: #93d7ff;
--accent-3: #b8d5ff;
--accent-4: #a2f7c2;
--accent-5: #6289c3;
--accent-6: #53b678;
--accent-7-bg: #ffffff;
--accent-7-fg-bold: #2e3842;
--accent-7-fg: #4e4852;
--accent-7-fg-light: #8e8892;
--accent-7-border: #dfdfdf;
--accent-7-border-bg: rgba(0, 0, 0, 0.0375);
--radius: 3px;
--element-height: 2.75em;
--navbar-height: 3em;
/* Several core Bootstrap components (.table, form validation, etc.)
read --bs-body-bg / --bs-border-color directly rather than inheriting
the computed body background — override at the root so they stay
dark by default instead of rendering a white box on this dark page. */
--bs-body-bg: var(--ink);
--bs-body-color: var(--fg);
--bs-border-color: var(--border-bg);
}
/* In-page theme preview: the off-canvas menu's swatches set data-theme on
so all seven palettes can be compared without opening another
build. Blue is the default (:root above); green mirrors the shipped
variant folder (bs5/aurora/green); violet/amber/rose/teal/coral are
five additional palettes in the same family — each a dominant hue for
accent-1..5 plus a contrasting accent-6 button color, matching how
blue (blue family, green button) and green (teal family, red-orange
button) are built. Each block overrides all six numbered accents;
--accent-7-* (the light content panel) is intentionally constant and
never overridden — see generic.html for why. */
:root[data-theme="green"] {
--accent-1: #21b2a6;
--accent-2: #00ffcc;
--accent-3: #00f0ff;
--accent-4: #76ddff;
--accent-5: #505393;
--accent-6: #ed4933;
}
:root[data-theme="violet"] {
--accent-1: #7d5fc4;
--accent-2: #c7b3ff;
--accent-3: #ded0ff;
--accent-4: #ffe3a3;
--accent-5: #5a4494;
--accent-6: #c98920;
}
:root[data-theme="amber"] {
--accent-1: #c8863c;
--accent-2: #ffd699;
--accent-3: #ffe9c7;
--accent-4: #a3f0d9;
--accent-5: #8a5a24;
--accent-6: #2f9e8f;
}
:root[data-theme="rose"] {
--accent-1: #c85a83;
--accent-2: #ffb8d2;
--accent-3: #ffd9e6;
--accent-4: #b8f0d3;
--accent-5: #8a3f61;
--accent-6: #3f9e6e;
}
:root[data-theme="teal"] {
--accent-1: #2f8fa0;
--accent-2: #8fe3f0;
--accent-3: #c2f4fa;
--accent-4: #ffd9a8;
--accent-5: #235c73;
--accent-6: #e0793f;
}
:root[data-theme="coral"] {
--accent-1: #d97456;
--accent-2: #ffc2a8;
--accent-3: #ffe0d1;
--accent-4: #a8e6d9;
--accent-5: #a3462b;
--accent-6: #3f9ea3;
}
/* Base typography */
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--navbar-height) + 0.5rem);
}
body {
padding-top: var(--navbar-height);
background: var(--ink);
color: var(--fg);
font-family: 'Open Sans', Helvetica, sans-serif;
font-weight: 400;
font-size: 1.1rem;
letter-spacing: 0.02em;
line-height: 1.65;
}
a {
color: inherit;
text-decoration: none;
border-bottom: dotted 1px;
transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
a:hover {
border-bottom-color: transparent;
}
strong, b { color: var(--fg-bold); font-weight: 600; }
h1, h2, h3, h4, h5, h6 {
color: var(--fg-bold);
font-weight: 800;
letter-spacing: 0.06em;
line-height: 1.3;
text-transform: uppercase;
margin: 0 0 1em 0;
}
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1rem; }
h5 { font-size: 0.85rem; }
h6 { font-size: 0.75rem; }
.section-heading p,
.page-hero p {
color: var(--fg-light);
}
hr {
border: 0;
border-bottom: solid 2px var(--border-bg);
margin: 2.5em 0;
}
blockquote {
border-left: solid 4px var(--border-bg);
font-style: italic;
padding: 0.5em 0 0.5em 1.5em;
margin: 0 0 1.5em 0;
}
code {
background: var(--border-bg);
border-radius: var(--radius);
font-family: 'Courier New', monospace;
font-size: 0.9em;
padding: 0.2em 0.6em;
}
pre {
margin: 0 0 1.5em 0;
}
pre code {
display: block;
padding: 1em 1.5em;
overflow-x: auto;
line-height: 1.75;
}
@media (max-width: 575.98px) {
body { font-size: 1rem; }
}
/* Site header + off-canvas menu trigger (always-visible, not a breakpoint collapse) */
.site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var(--navbar-height);
background: var(--ink);
z-index: 1030;
transition: background-color 0.2s ease;
}
.site-header-inner {
position: relative;
height: 100%;
}
.site-brand {
position: absolute;
left: 1.25em;
top: 0;
height: 100%;
margin: 0;
display: flex;
align-items: center;
font-size: 0.85rem;
transition: opacity 0.2s ease;
}
.site-brand a {
border: 0;
color: var(--fg-bold);
}
.site-nav {
position: absolute;
right: 0;
top: 0;
height: 100%;
}
.menu-trigger {
background: transparent;
border: 0;
height: 100%;
padding: 0 1.5em;
color: var(--fg-bold);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.menu-trigger .fa-bars {
margin-left: 0.6em;
}
/* Overlay state: transparent header, hidden wordmark — sits over the hero
banner on load (index.html only) until scrolled past it. The menu
trigger itself stays visible in both states, matching the original. */
.site-header.is-overlay {
background: transparent;
}
.site-header.is-overlay .site-brand {
opacity: 0;
pointer-events: none;
}
/* Off-canvas site menu (replaces jQuery panel(), side: right) */
.site-menu {
width: 20em;
max-width: 80%;
background: var(--accent-1);
color: var(--fg-bold);
}
.site-menu .offcanvas-header {
padding: 1.5em 2em 0 2em;
}
.site-menu .offcanvas-body {
padding: 1em 2em 2em 2em;
}
.site-menu-list {
list-style: none;
margin: 0;
padding: 0;
}
/* Direct-child combinator matters here: .site-menu-sublist below nests
its own items inside a top-level , and without the ">" this
selector would also draw a border under every sublist link. */
.site-menu-list > li {
border-top: solid 1px rgba(255, 255, 255, 0.2);
}
.site-menu-list > li:first-child {
border-top: 0;
}
.site-menu-link {
display: block;
border: 0;
color: inherit;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 3em;
}
.site-menu-link:hover {
color: rgba(255, 255, 255, 0.7);
}
/* Grouped sublist (Components) inside the off-canvas menu — a label
followed by its own indented, unbordered list nested in one top-level
of .site-menu-list. */
.site-menu-group-label {
display: block;
color: rgba(255, 255, 255, 0.55);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
padding-top: 1em;
}
.site-menu-sublist {
list-style: none;
margin: 0;
padding: 0;
}
.site-menu-sublist .site-menu-link {
padding-left: 1em;
font-size: 0.75rem;
line-height: 2.4em;
}
/* Theme picker — lives at the foot of the off-canvas menu, the one spot
reachable from every page at every viewport width (the slim header
bar has no room to spare for seven swatches, especially with the
wordmark hidden in the overlay state on index.html). The active
swatch gets a white ring; each swatch's fill is a static hex (not
var(--accent-1)) so all seven stay visible regardless of which theme
is currently applied. */
.theme-picker-group {
margin-top: 1em;
padding-top: 1em;
border-top: solid 1px rgba(255, 255, 255, 0.2);
}
.theme-picker {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6em;
margin: 0.75em 0 0.5em 0;
padding: 0;
list-style: none;
}
.theme-picker .theme-swatch {
width: 1.6em;
height: 1.6em;
padding: 0;
border: solid 2px rgba(255, 255, 255, 0.35);
border-radius: 50%;
cursor: pointer;
transition: border-color 0.25s ease-in-out, transform 0.25s ease-in-out;
}
.theme-picker .theme-swatch:hover,
.theme-picker .theme-swatch:focus {
border-color: rgba(255, 255, 255, 0.75);
}
.theme-picker .theme-swatch.is-active {
border-color: #ffffff;
transform: scale(1.15);
}
.theme-swatch[data-theme-choice="blue"] { background-color: #4598c8; }
.theme-swatch[data-theme-choice="green"] { background-color: #21b2a6; }
.theme-swatch[data-theme-choice="violet"] { background-color: #7d5fc4; }
.theme-swatch[data-theme-choice="amber"] { background-color: #c8863c; }
.theme-swatch[data-theme-choice="rose"] { background-color: #c85a83; }
.theme-swatch[data-theme-choice="teal"] { background-color: #2f8fa0; }
.theme-swatch[data-theme-choice="coral"] { background-color: #d97456; }
/* Hero banner (index.html only) */
/* Wraps every section from the banner down to the footer: carries the
fixed background photo that "peeks through" wherever a section leaves
its own background transparent (banner, CTA) — matches the original's
body.landing #page-wrapper treatment. */
.page-frame-landing {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../../images/landing-backdrop.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
@media (hover: none), (max-width: 767.98px) {
.page-frame-landing {
background-attachment: scroll;
}
}
.hero-banner {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
text-align: center;
position: relative;
padding: 2em;
}
.hero-banner h2 {
font-size: 1.9rem;
display: inline-block;
padding: 0.35em 1em;
border-top: solid 2px var(--fg-bold);
border-bottom: solid 2px var(--fg-bold);
}
.hero-banner p {
letter-spacing: 0.06em;
text-transform: uppercase;
}
.scroll-indicator {
position: absolute;
left: 50%;
bottom: 3em;
transform: translateX(-50%);
width: 1.5em;
height: 1.5em;
border: 0;
background-image: url("images/arrow.svg");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
text-indent: -999em;
overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
.scroll-indicator {
animation: aurora-bounce 1.75s ease-in-out infinite;
}
}
@keyframes aurora-bounce {
0%, 100% { transform: translate(-50%, 0); }
50% { transform: translate(-50%, -0.5em); }
}
@media (max-width: 575.98px) {
.hero-banner { min-height: 0; padding: 5em 1.5em; }
.hero-banner h2 { font-size: 1.35rem; }
.scroll-indicator { display: none; }
}
/* Page hero (generic.html / elements.html — photo header, no off-canvas overlay state) */
.page-hero {
text-align: center;
padding: 8em 2em;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../../images/landing-backdrop.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
@media (hover: none), (max-width: 767.98px) {
.page-hero { background-attachment: scroll; }
}
.page-hero h2 {
font-size: 1.6rem;
}
.page-hero p {
letter-spacing: 0.06em;
text-transform: uppercase;
}
@media (max-width: 575.98px) {
.page-hero { padding: 5em 1.5em; }
}
/* Content wrappers (accent-toned full-width bands) */
.content-wrapper {
padding: 6em 0;
}
.content-wrapper > .inner {
max-width: 60em;
margin: 0 auto;
padding: 0 1.5em;
}
.content-wrapper-tone-1 { background: var(--accent-1); color: var(--fg-bold); text-align: center; }
.content-wrapper-tone-5 { background: var(--accent-5); color: var(--fg-bold); text-align: center; }
.content-wrapper-tone-1 p,
.content-wrapper-tone-5 p {
color: rgba(255, 255, 255, 0.8);
}
@media (max-width: 991.98px) {
.content-wrapper { padding: 4em 0; }
}
@media (max-width: 575.98px) {
.content-wrapper { padding: 3em 0; }
}
/* Rotated-square major icons (section One) */
.icon-badge-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 3.5em;
list-style: none;
margin: 2em 0 0 0;
padding: 0;
}
.icon-badge {
display: inline-block;
width: calc(3em + 4px);
height: calc(3em + 4px);
line-height: 3em;
text-align: center;
border: solid 2px rgba(255, 255, 255, 0.4);
border-radius: var(--radius);
transform: rotate(-45deg);
}
.icon-badge i {
display: inline-block;
font-size: 1.5em;
transform: rotate(45deg);
}
.icon-badge-label {
display: block;
margin-top: 1.25em;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.icon-badge-item { text-align: center; }
.icon-badge-item:nth-child(1) .icon-badge { color: var(--accent-2); }
.icon-badge-item:nth-child(2) .icon-badge { color: var(--accent-3); }
.icon-badge-item:nth-child(3) .icon-badge { color: var(--accent-4); }
/* Spotlight rows (section Two — alternating image/content, full-bleed) */
/* Opaque base so the .spotlight-row darkening tints (and, on index.html,
the page-frame-landing fixed background photo) don't show through. */
.spotlight-section {
background: var(--ink);
}
.spotlight-row {
display: flex;
align-items: center;
}
.spotlight-row:nth-child(2n) {
flex-direction: row-reverse;
}
.spotlight-row:nth-child(1) { background-color: rgba(0, 0, 0, 0.075); }
.spotlight-row:nth-child(2) { background-color: rgba(0, 0, 0, 0.15); }
.spotlight-row:nth-child(3) { background-color: rgba(0, 0, 0, 0.225); }
.spotlight-row-media {
width: 40%;
}
.spotlight-row-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.spotlight-row-content {
width: 60%;
padding: 3em 4em;
}
@media (max-width: 991.98px) {
.spotlight-row,
.spotlight-row:nth-child(2n) {
flex-direction: column;
text-align: center;
}
.spotlight-row-media,
.spotlight-row-content {
width: 100%;
}
.spotlight-row-media { max-height: 18em; overflow: hidden; }
.spotlight-row-content { padding: 3em 2em; }
}
/* Feature grid (section Three) */
.feature-grid {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 2em 0 0 0;
padding: 0;
}
.feature-grid-item {
width: 50%;
padding: 2.5em 2.5em 2.5em 5em;
position: relative;
text-align: left;
}
.feature-grid-item .feature-icon {
position: absolute;
left: 1.75em;
top: 2.75em;
font-size: 1.4em;
color: var(--accent-2);
}
@media (max-width: 767.98px) {
.feature-grid-item {
width: 100%;
text-align: center;
padding: 2em 1.5em;
border-top: solid 1px rgba(255, 255, 255, 0.2);
}
.feature-grid-item:first-child { border-top: 0; }
.feature-grid-item .feature-icon {
position: static;
display: block;
margin: 0 0 0.5em 0;
}
}
/* CTA band (transparent — the hero photo shows through on index.html) */
.cta-band {
padding: 6em 0;
}
.cta-band .inner {
max-width: 45em;
margin: 0 auto;
padding: 0 1.5em;
display: flex;
align-items: center;
gap: 2em;
}
.cta-band-header {
flex: 0 0 70%;
}
.cta-band-actions {
flex: 0 0 30%;
}
@media (max-width: 991.98px) {
.cta-band .inner {
flex-direction: column;
text-align: center;
}
.cta-band-header,
.cta-band-actions {
flex: 1 1 auto;
width: 100%;
max-width: 20em;
}
}
/* Light content panel (elements.html / generic.html body copy) */
.content-panel {
background: var(--accent-7-bg);
color: var(--accent-7-fg);
padding: 6em 0;
}
.content-panel .inner {
max-width: 60em;
margin: 0 auto;
padding: 0 1.5em;
}
.content-panel h1, .content-panel h2, .content-panel h3,
.content-panel h4, .content-panel h5, .content-panel h6,
.content-panel strong, .content-panel b {
color: var(--accent-7-fg-bold);
}
.content-panel a { color: var(--accent-7-fg-bold); }
.content-panel hr { border-color: var(--accent-7-border); }
.content-panel blockquote { border-color: var(--accent-7-border); }
.content-panel code { background: var(--accent-7-border-bg); }
.content-panel .section-heading p { color: var(--accent-7-fg-light); }
@media (max-width: 991.98px) {
.content-panel { padding: 4em 0; }
}
@media (max-width: 575.98px) {
.content-panel { padding: 3em 0; }
}
/* Buttons */
.btn-accent,
.btn-ghost {
border-radius: var(--radius);
height: var(--element-height);
line-height: var(--element-height);
padding: 0 2.5em;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
}
.btn-accent {
background: var(--accent-6);
border: 0;
color: #ffffff;
}
.btn-accent:hover {
background: color-mix(in srgb, var(--accent-6) 92%, white);
color: #ffffff;
}
.btn-accent:active {
background: color-mix(in srgb, var(--accent-6) 92%, black);
color: #ffffff;
}
.btn-ghost {
background: transparent;
box-shadow: inset 0 0 0 2px var(--border);
color: var(--fg-bold);
}
.btn-ghost:hover { background: var(--border-bg); }
.btn-ghost:active { background: var(--border2-bg); }
.content-panel .btn-ghost { box-shadow: inset 0 0 0 2px var(--accent-7-border); color: var(--accent-7-fg-bold); }
.content-panel .btn-ghost:hover { background: var(--accent-7-border-bg); }
.btn-accent.disabled, .btn-ghost.disabled {
opacity: 0.25;
pointer-events: none;
}
.btn-accent.btn-sm, .btn-ghost.btn-sm {
height: 2.4em;
line-height: 2.4em;
padding: 0 1.5em;
font-size: 0.75rem;
}
.btn-accent.btn-lg, .btn-ghost.btn-lg {
font-size: 1.05rem;
}
.action-list {
display: flex;
flex-wrap: wrap;
gap: 0.75em;
list-style: none;
margin: 0 0 1.5em 0;
padding: 0;
}
.action-list-vertical { flex-direction: column; align-items: flex-start; }
.action-list-fit:not(.action-list-vertical) > li { flex: 1 1 0; }
.action-list-fit:not(.action-list-vertical) .btn-accent,
.action-list-fit:not(.action-list-vertical) .btn-ghost { width: 100%; }
.action-list-vertical.action-list-fit { align-items: stretch; }
/* Forms */
.content-panel label { color: var(--accent-7-fg-bold); }
.form-control,
.form-select {
background: var(--border-bg);
border: 0;
border-radius: var(--radius);
color: var(--fg-bold);
}
.form-control::placeholder { color: var(--fg-light); }
.form-control:focus,
.form-select:focus {
background: var(--border-bg);
color: var(--fg-bold);
box-shadow: 0 0 0 2px var(--accent-1);
}
.content-panel .form-control,
.content-panel .form-select {
background: var(--accent-7-border-bg);
color: var(--accent-7-fg-bold);
}
.content-panel .form-control::placeholder { color: var(--accent-7-fg-light); }
.content-panel .form-control:focus,
.content-panel .form-select:focus {
background: var(--accent-7-border-bg);
color: var(--accent-7-fg-bold);
}
.form-check-input {
background-color: var(--border-bg);
border: 0;
}
.form-check-input:checked {
background-color: var(--accent-1);
border-color: var(--accent-1);
}
.form-check-input:focus {
box-shadow: 0 0 0 2px var(--accent-1);
}
.content-panel .form-check-input { background-color: var(--accent-7-border-bg); }
/* Tables */
.table-aurora {
--bs-table-bg: transparent;
}
.table-aurora th {
font-size: 0.85em;
font-weight: 600;
}
.table-aurora tbody tr:nth-child(2n + 1) {
--bs-table-bg: var(--border-bg);
}
.content-panel .table-aurora {
--bs-table-border-color: var(--accent-7-border);
color: var(--accent-7-fg);
}
.content-panel .table-aurora th {
color: var(--accent-7-fg-bold);
}
.content-panel .table-aurora tbody tr:nth-child(2n + 1) {
--bs-table-bg: var(--accent-7-border-bg);
}
/* Icon list (elements.html social icons demo) */
.icon-list {
list-style: none;
margin: 0 0 1.5em 0;
padding: 0;
}
.icon-list li {
display: inline-block;
padding: 0 1em 0 0;
}
.icon-list a {
border: 0;
font-size: 1.3rem;
color: var(--fg-light);
}
.icon-list a:hover { color: var(--fg-bold); }
.content-panel .icon-list a { color: var(--accent-7-fg-light); }
.content-panel .icon-list a:hover { color: var(--accent-7-fg-bold); }
/* Inline / fit images */
.fit-image-grid img {
border-radius: var(--radius);
width: 100%;
}
.inline-photo {
max-width: 40%;
border-radius: var(--radius);
}
.inline-photo-start { float: left; margin: 0.25em 1.75em 1.25em 0; }
.inline-photo-end { float: right; margin: 0.25em 0 1.25em 1.75em; }
/* Footer */
.site-footer {
background: var(--ink-darker);
text-align: center;
padding: 6em 0;
}
.site-footer .icon-list {
font-size: 1.25em;
margin-bottom: 1.5em;
}
.site-footer .icon-list a { color: var(--fg-light); }
.site-footer .icon-list a:hover { color: var(--fg); }
.copyright-list {
list-style: none;
margin: 0;
padding: 0;
color: var(--fg-light);
font-size: 0.8rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.copyright-list li {
display: inline-block;
border-left: solid 1px var(--fg-light);
margin-left: 1em;
padding-left: 1em;
}
.copyright-list li:first-child {
border-left: 0;
margin-left: 0;
padding-left: 0;
}
@media (max-width: 991.98px) {
.site-footer { padding: 4em 0; }
}
@media (max-width: 575.98px) {
.site-footer { padding: 3em 1.5em; }
.copyright-list li {
display: block;
border-left: 0;
margin: 0;
padding: 0.4em 0;
}
}
/* Hero fade-in on load (index.html only; guarded so headless/reduced-motion
users see full content with no JS-dependent hidden state) */
@media (prefers-reduced-motion: no-preference) {
.hero-banner:after {
content: '';
position: absolute;
inset: 0;
background: var(--ink);
opacity: 0;
transition: opacity 3s ease-in-out;
pointer-events: none;
}
body.is-loading .hero-banner:after {
opacity: 1;
}
body.is-loading .hero-banner h2,
body.is-loading .hero-banner p,
body.is-loading .hero-banner .action-list {
opacity: 0;
}
.hero-banner h2,
.hero-banner p,
.hero-banner .action-list {
transition: opacity 0.75s ease;
}
}