/* ========================================================================== AtomAfrica — Brand & UI System Banking → Economic Ownership → Credit -------------------------------------------------------------------------- BRAND TOKENS Only Deep Petrol Ink (#0E1B26) is LOCKED. All other hexes below are PROVISIONAL — swap the exact codes here once finalized and the whole site updates. Rules encoded: • Ink on Bone / Bone on Ink (never low-contrast mixes) • Copper is an accent — keep it under ~10% of any surface • NairaPacket orange (#FF7A00) must NEVER appear on AtomAfrica surfaces (declared only as a reference token; intentionally unused in CSS) ========================================================================== */ :root { /* --- Core palette --- */ --ink: #0E1B26; /* Primary — Deep Petrol Ink (LOCKED) */ --ink-2: #16283A; /* Elevated dark surface (provisional) */ --ink-3: #0A141C; /* Deepest ink (provisional) */ --bone: #F4EFE5; /* Background — Bone (provisional) */ --bone-2: #EAE3D4; /* Bone shade — cards/borders (provisional) */ --bone-3: #FBF8F1; /* Bone tint — raised cards (provisional) */ --copper: #B4703A; /* Accent / Ownership — sparingly (provisional) */ --copper-2: #9A5C2C; /* Copper deep — hover (provisional) */ /* --- Product accents --- */ --bank-blue: #1E73BE; /* AtomBank (provisional) */ --own-copper: var(--copper); /* AtomOwn */ --credit-green: #2F9E5B; /* AtomCredit (provisional) */ /* --- Reference only: NEVER use on AtomAfrica surfaces --- */ --np-orange: #FF7A00; /* NairaPacket brand — reference token, unused */ /* --- Semantic --- */ --text: var(--ink); --text-muted: #4A5763; --text-on-ink: var(--bone); --text-on-ink-muted: #A9B4BE; --surface: var(--bone); --surface-card: var(--bone-3); --border: #DED6C4; --border-on-ink: rgba(244, 239, 229, 0.14); /* Page accent — overridden per product theme (see [data-theme]) */ --accent: var(--copper); --accent-deep: var(--copper-2); /* --- Type --- */ --font-head: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* --- Radius / shadow / layout --- */ --radius-sm: 8px; --radius: 16px; --radius-lg: 24px; --shadow-sm: 0 1px 2px rgba(14, 27, 38, .06), 0 1px 3px rgba(14, 27, 38, .04); --shadow: 0 10px 30px rgba(14, 27, 38, .08); --shadow-lg: 0 24px 60px rgba(14, 27, 38, .14); --maxw: 1200px; --nav-h: 76px; } /* Per-product theming: set data-theme on */ [data-theme="bank"] { --accent: var(--bank-blue); --accent-deep: #17578f; } [data-theme="own"] { --accent: var(--copper); --accent-deep: var(--copper-2); } [data-theme="credit"] { --accent: var(--credit-green); --accent-deep: #227a45; } /* ========================================================================== RESET / BASE ========================================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } body { font-family: var(--font-body); color: var(--text); background-color: var(--bone); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; color: var(--ink); } h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); } h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); } h3 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); } h4 { font-size: 1.2rem; } p { color: var(--text-muted); } a { color: var(--accent); text-decoration: none; transition: color .2s ease; } a:hover { color: var(--accent-deep); } img, svg { max-width: 100%; height: auto; } strong { color: var(--ink); font-weight: 600; } .container { max-width: var(--maxw); } /* Accessible focus */ a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* Skip link */ .skip-link { position: absolute; left: 12px; top: -60px; z-index: 2000; background: var(--ink); color: var(--bone); padding: 10px 16px; border-radius: var(--radius-sm); transition: top .2s ease; } .skip-link:focus { top: 12px; color: var(--bone); } /* Highlight span */ .highlight { color: var(--accent); } .text-copper { color: var(--copper) !important; } .on-ink .highlight { color: var(--accent); } /* ========================================================================== NAVBAR ========================================================================== */ .aa-nav { background: var(--ink); border-bottom: 1px solid var(--border-on-ink); min-height: var(--nav-h); } .aa-nav .navbar-brand { display: inline-flex; align-items: center; gap: 10px; padding: 0; } .aa-nav .brand-mark { height: 44px; width: auto; display: block; } .aa-nav .nav-link { color: var(--text-on-ink) !important; font-weight: 500; font-size: .98rem; padding: .5rem .9rem !important; border-radius: var(--radius-sm); } .aa-nav .nav-link:hover, .aa-nav .nav-link:focus { color: #fff !important; } .aa-nav .nav-link.active { color: #fff !important; } .aa-nav .nav-link.active::after { content: ""; display: block; height: 2px; margin-top: 4px; background: var(--accent); border-radius: 2px; } .aa-nav .navbar-toggler { border-color: var(--border-on-ink); } .aa-nav .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(180,112,58,.5); } /* Dropdown */ .aa-nav .dropdown-menu { background: var(--ink-2); border: 1px solid var(--border-on-ink); border-radius: var(--radius); padding: 8px; box-shadow: var(--shadow-lg); } .aa-nav .dropdown-item { color: var(--text-on-ink); border-radius: var(--radius-sm); padding: 10px 12px; white-space: normal; } .aa-nav .dropdown-item:hover, .aa-nav .dropdown-item:focus { background: rgba(255,255,255,.06); color: #fff; } .aa-nav .dropdown-item .di-title { font-weight: 600; display: flex; align-items: center; gap: 8px; } .aa-nav .dropdown-item .di-sub { font-size: .82rem; color: var(--text-on-ink-muted); } /* Product dot */ .pdot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; } .pdot--bank { background: var(--bank-blue); } .pdot--own { background: var(--copper); } .pdot--credit { background: var(--credit-green); } /* ========================================================================== BUTTONS ========================================================================== */ .btn { font-family: var(--font-head); font-weight: 600; border-radius: 999px; padding: .72rem 1.5rem; letter-spacing: -.01em; transition: all .2s ease; border: 1.5px solid transparent; } .btn-atom { background: var(--copper); color: #fff; } .btn-atom:hover { background: var(--copper-2); color: #fff; transform: translateY(-1px); } .btn-accent { background: var(--accent); color: #fff; } .btn-accent:hover { background: var(--accent-deep); color: #fff; transform: translateY(-1px); } .btn-ink { background: var(--ink); color: var(--bone); } .btn-ink:hover { background: var(--ink-2); color: #fff; transform: translateY(-1px); } .btn-bone { background: var(--bone); color: var(--ink); } .btn-bone:hover { background: #fff; color: var(--ink); transform: translateY(-1px); } .btn-outline-ink { border-color: var(--ink); color: var(--ink); background: transparent; } .btn-outline-ink:hover { background: var(--ink); color: var(--bone); } .btn-outline-bone { border-color: rgba(244,239,229,.5); color: var(--bone); background: transparent; } .btn-outline-bone:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); } .btn-lg { padding: .9rem 2rem; font-size: 1.05rem; } /* ========================================================================== SECTIONS / LAYOUT HELPERS ========================================================================== */ .section { padding: clamp(56px, 8vw, 110px) 0; } .section-sm { padding: clamp(40px, 5vw, 64px) 0; } .section-ink { background: var(--ink); color: var(--text-on-ink); } .section-ink h1, .section-ink h2, .section-ink h3, .section-ink h4 { color: var(--bone); } .section-ink p { color: var(--text-on-ink-muted); } .section-ink strong { color: #fff; } .section-ink-2 { background: var(--ink-2); color: var(--text-on-ink); } .section-ink-2 h1,.section-ink-2 h2,.section-ink-2 h3,.section-ink-2 h4 { color: var(--bone); } .section-ink-2 p { color: var(--text-on-ink-muted); } .bg-bone-2 { background: var(--bone-2); } .eyebrow { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; font-weight: 600; color: var(--accent); display: inline-block; margin-bottom: 1rem; } .section-ink .eyebrow { color: var(--accent); } .lead-lg { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--text-muted); } .section-ink .lead-lg { color: var(--text-on-ink-muted); } /* Progression gradient (Bank → Own → Credit) */ .progression-bar { height: 6px; width: 100%; background: linear-gradient(90deg, var(--bank-blue) 0%, var(--copper) 50%, var(--credit-green) 100%); } .progression-chip { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--font-head); font-weight: 600; color: var(--ink); background: var(--bone-3); border: 1px solid var(--border); border-radius: 999px; padding: 10px 18px; } .section-ink .progression-chip { color: var(--bone); background: rgba(255,255,255,.05); border-color: var(--border-on-ink); } .progression-chip .arrow { color: var(--text-muted); } .section-ink .progression-chip .arrow { color: var(--text-on-ink-muted); } /* ========================================================================== HERO ========================================================================== */ .hero { position: relative; overflow: hidden; background: var(--ink); color: var(--bone); padding: clamp(56px, 7vw, 104px) 0 clamp(56px, 8vw, 110px); } .aa-nav.sticky-top { z-index: 1030; } .hero h1 { color: var(--bone); } .hero p { color: var(--text-on-ink-muted); } .hero .eyebrow { color: var(--accent); } .hero-orbit { position: absolute; inset: 0; pointer-events: none; opacity: .5; background: radial-gradient(closest-side, rgba(30,115,190,.35), transparent 70%) -10% 20% / 60% 60% no-repeat, radial-gradient(closest-side, rgba(180,112,58,.28), transparent 70%) 110% 40% / 55% 55% no-repeat, radial-gradient(closest-side, rgba(47,158,91,.22), transparent 70%) 60% 120% / 55% 55% no-repeat; } .hero-accent { /* single-accent hero glow, uses page --accent */ position: absolute; inset: 0; pointer-events: none; opacity: .55; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 40%, transparent), transparent 72%) 90% 10% / 70% 80% no-repeat; } .hero .container { position: relative; z-index: 1; } /* ========================================================================== CARDS ========================================================================== */ .card-atom { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 34px); height: 100%; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .card-atom:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--accent); } .section-ink .card-atom { background: var(--ink-2); border-color: var(--border-on-ink); } .section-ink .card-atom h3, .section-ink .card-atom h4 { color: var(--bone); } .section-ink .card-atom p { color: var(--text-on-ink-muted); } /* Product card top rule uses its own accent */ .card-product { position: relative; overflow: hidden; } .card-product::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--p, var(--accent)); } .card-product--bank { --p: var(--bank-blue); } .card-product--own { --p: var(--copper); } .card-product--credit { --p: var(--credit-green); } .card-product .badge-product { font-family: var(--font-head); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .72rem; color: var(--p, var(--accent)); } /* Module / feature list */ .feature-item { display: flex; gap: 14px; align-items: flex-start; } .feature-item .fi-mark { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 700; } .feature-item h4 { margin-bottom: 2px; } /* Check list */ .check-list { list-style: none; } .check-list li { position: relative; padding-left: 32px; margin-bottom: 12px; color: var(--text-muted); } .check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 800; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, transparent); display: grid; place-items: center; font-size: .8rem; } .section-ink .check-list li { color: var(--text-on-ink-muted); } /* ========================================================================== STATS ========================================================================== */ .stat { } .stat .stat-num { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1; color: var(--accent); letter-spacing: -.03em; } .section-ink .stat .stat-num { color: var(--accent); } .stat .stat-label { margin-top: 8px; color: var(--text-muted); font-size: .98rem; } .section-ink .stat .stat-label { color: var(--text-on-ink-muted); } /* ========================================================================== STEPS ========================================================================== */ .steps { counter-reset: step; } .step { position: relative; padding-left: 62px; margin-bottom: 28px; } .step::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--bone); font-family: var(--font-head); font-weight: 700; display: grid; place-items: center; } .section-ink .step::before { background: var(--accent); color: #fff; } .step h4 { margin-bottom: 4px; } /* ========================================================================== FORMS ========================================================================== */ .form-atom label { font-weight: 600; color: var(--ink); margin-bottom: 6px; } .form-atom .form-control, .form-atom .form-select { border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: .8rem 1rem; background: #fff; color: var(--ink); } .form-atom .form-control:focus, .form-atom .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } .form-note { font-size: .9rem; color: var(--text-muted); } .form-success { display: none; background: color-mix(in srgb, var(--credit-green) 12%, #fff); border: 1px solid var(--credit-green); color: #1c5c37; padding: 14px 18px; border-radius: var(--radius-sm); } /* ========================================================================== FAQ (Bootstrap accordion overrides) ========================================================================== */ .accordion-atom .accordion-item { background: var(--bone-3); border: 1px solid var(--border); border-radius: var(--radius) !important; margin-bottom: 12px; overflow: hidden; } .accordion-atom .accordion-button { font-family: var(--font-head); font-weight: 600; color: var(--ink); background: transparent; padding: 1.15rem 1.25rem; } .accordion-atom .accordion-button:not(.collapsed) { color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); box-shadow: none; } .accordion-atom .accordion-button:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); } .accordion-atom .accordion-body { color: var(--text-muted); padding-top: 0; } /* ========================================================================== FOOTER ========================================================================== */ .aa-footer { background: var(--ink-3); color: var(--text-on-ink-muted); padding: clamp(48px, 6vw, 80px) 0 28px; } .aa-footer h5 { color: var(--bone); font-size: 1rem; letter-spacing: .02em; margin-bottom: 8px; } .aa-footer a { color: var(--text-on-ink-muted); } .aa-footer a:hover { color: var(--bone); } .aa-footer .foot-tag { color: var(--bone); font-family: var(--font-head); font-weight: 600; } .aa-footer .foot-prod { color: var(--bone); font-weight: 600; } .aa-footer .foot-prod span { color: var(--text-on-ink-muted); font-weight: 400; } .aa-footer .brand-mark { height: 36px; margin-bottom: 14px; } .aa-footer hr { border-color: var(--border-on-ink); opacity: 1; } .aa-footer .legal a { margin: 0 6px; } /* ========================================================================== MISC / UTILITIES ========================================================================== */ .divider-line { height: 1px; background: var(--border); border: 0; } .section-ink .divider-line { background: var(--border-on-ink); } .text-balance { text-wrap: balance; } .rounded-atom { border-radius: var(--radius-lg); } .shadow-atom { box-shadow: var(--shadow); } /* Reveal-on-scroll */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .reveal.is-visible { opacity: 1; transform: none; } /* Fine print / disclosure */ .fineprint { font-size: .9rem; color: var(--text-muted); border-left: 3px solid var(--border); padding-left: 16px; } .section-ink .fineprint { color: var(--text-on-ink-muted); border-color: var(--border-on-ink); } /* Eligibility / callout box */ .callout { background: var(--bone-3); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 44px); } .section-ink .callout { background: var(--ink-2); border-color: var(--border-on-ink); } /* Keep-what-matters row */ .keep-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--bone-3); border: 1px solid var(--border); border-radius: 999px; padding: 8px 16px; margin: 0 8px 12px 0; font-weight: 500; color: var(--ink); } .keep-badge.plus { background: var(--ink); color: var(--bone); border-color: var(--ink); } .section-ink .keep-badge { background: rgba(255,255,255,.05); border-color: var(--border-on-ink); color: var(--bone); } @media (max-width: 991.98px) { .aa-nav .navbar-nav { padding-top: 10px; } .aa-nav .nav-cta-wrap { margin-top: 10px; } } /* ========================================================================== BRAND GRAPHICS — cohesive SVG motif system, wired site-wide via shared selectors so every page inherits the same visual language. • atom-orbit.svg — 3-orbit atom (Bank blue → Own copper → Credit green) • pattern-network.svg — faint "connection" texture for dark surfaces ========================================================================== */ /* Atom watermark centred behind EVERY hero (pure CSS — no per-page markup). Slowly rotating brand backdrop; sits under the content (container z-index:1). */ .hero::after { content: ""; position: absolute; z-index: 0; pointer-events: none; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(760px, 94%); aspect-ratio: 1 / 1; background: url("../img/atom-orbit.svg") center / contain no-repeat; opacity: .22; } @media (max-width: 991.98px) { .hero::after { width: 150%; opacity: .14; } } @media (prefers-reduced-motion: no-preference) { .hero::after { animation: aa-spin 80s linear infinite; } @keyframes aa-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } } /* Connection-network texture on dark surfaces + footer */ .section-ink, .section-ink-2 { background-image: url("../img/pattern-network.svg"); background-repeat: repeat; background-size: 300px auto; } .aa-footer { background-image: url("../img/pattern-network.svg"); background-repeat: repeat; background-size: 260px auto; } /* keep foreground above texture */ .section-ink > .container, .section-ink-2 > .container, .aa-footer > .container { position: relative; z-index: 1; } /* Subtle atom watermark in every CTA callout — ties CTAs together across pages */ .callout { position: relative; overflow: hidden; } .callout > * { position: relative; z-index: 1; } .callout::after { content: ""; position: absolute; z-index: 0; pointer-events: none; right: -60px; bottom: -60px; width: 240px; height: 240px; background: url("../img/atom-orbit.svg") center / contain no-repeat; opacity: .09; } /* Small inline atom mark (optional decorative use in copy/eyebrows) */ .atom-mark { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; background: url("../img/atom-orbit.svg") center / contain no-repeat; } /* ========================================================================== MOTION / ANIMATION (Looping effects are gated behind prefers-reduced-motion: no-preference. One-shot entrances rely on the global reduced-motion rule to appear instantly, so content is never left hidden.) ========================================================================== */ /* Hero content entrance — staggered fade-up on load */ .hero [class*="col-"] > * { animation: aa-fade-up .7s both cubic-bezier(.2, .7, .2, 1); } .hero [class*="col-"] > *:nth-child(1) { animation-delay: .05s; } .hero [class*="col-"] > *:nth-child(2) { animation-delay: .14s; } .hero [class*="col-"] > *:nth-child(3) { animation-delay: .23s; } .hero [class*="col-"] > *:nth-child(4) { animation-delay: .32s; } .hero [class*="col-"] > *:nth-child(5) { animation-delay: .41s; } .hero [class*="col-"] > *:nth-child(6) { animation-delay: .50s; } @keyframes aa-fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } /* Scroll-reveal directional + emphasis variants (JS toggles .is-visible) */ .reveal-left { transform: translateX(-30px); } .reveal-right { transform: translateX(30px); } .reveal-scale { transform: scale(.94); } .reveal-left.is-visible, .reveal-right.is-visible, .reveal-scale.is-visible { transform: none; } /* Stat numbers pop as their block reveals */ .reveal .stat-num { transition: transform .55s cubic-bezier(.2, .8, .2, 1) .12s, opacity .55s ease .12s; } .reveal:not(.is-visible) .stat-num { transform: scale(.8); opacity: .25; } /* Dropdown open animation */ .aa-nav .dropdown-menu.show { animation: aa-fade-up .18s ease both; } /* Card icon micro-interaction */ .card-atom .fi-mark { transition: transform .25s ease; } .card-atom:hover .fi-mark { transform: translateY(-2px) scale(1.06); } /* Team avatars */ .team-photo { width: 116px; height: 116px; border-radius: 50%; object-fit: cover; object-position: center top; display: block; margin: 0 auto 1rem; border: 3px solid var(--bone-3); box-shadow: var(--shadow-sm); transition: transform .25s ease; } .card-atom:hover .team-photo { transform: scale(1.04); } /* ========================================================================== BLOG ========================================================================== */ .blog-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .blog-filter { font-family: var(--font-head); font-weight: 600; font-size: .9rem; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--border); color: var(--ink); background: var(--bone-3); text-decoration: none; transition: all .2s ease; } .blog-filter:hover { border-color: var(--accent); color: var(--accent); } .blog-filter.active { background: var(--ink); color: var(--bone); border-color: var(--ink); } /* Cards */ .blog-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; text-decoration: none; color: inherit; } .blog-card-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bone-2); } .blog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .blog-card:hover .blog-card-media img { transform: scale(1.05); } .blog-card-body { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 24px; flex: 1; } .blog-chip { align-self: flex-start; font-family: var(--font-head); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); padding: 4px 10px; border-radius: 999px; } .blog-card-title { font-size: 1.25rem; margin: 2px 0; color: var(--ink); } .blog-card-excerpt { color: var(--text-muted); font-size: .98rem; margin: 0; } .blog-meta { margin-top: auto; padding-top: 6px; font-size: .85rem; color: var(--text-muted); } /* Pager */ .blog-pager { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 48px; } .blog-pager-count { color: var(--text-muted); font-weight: 600; } /* Single post */ .post-hero { padding: clamp(48px, 7vw, 90px) 0 clamp(40px, 5vw, 64px); } .post-crumbs { font-size: .9rem; margin-bottom: 16px; } .post-crumbs a { color: var(--bone); opacity: .85; } .post-crumbs a:hover { opacity: 1; } .post-crumbs span { margin: 0 8px; color: var(--text-on-ink-muted); } .post-title { color: var(--bone); max-width: 22ch; } .post-meta { color: var(--text-on-ink-muted); margin: 14px 0 0; } .post-cover { width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--radius-lg); margin: -48px auto 0; display: block; box-shadow: var(--shadow-lg); position: relative; z-index: 1; } .post-body { max-width: 760px; margin: 48px auto 0; font-size: 1.125rem; line-height: 1.8; color: #2b3a45; } .post-body > *:first-child { margin-top: 0; } .post-body h2 { font-size: 1.9rem; margin: 1.8em 0 .5em; color: var(--ink); } .post-body h3 { font-size: 1.4rem; margin: 1.5em 0 .4em; color: var(--ink); } .post-body p { margin: 0 0 1.2em; } .post-body a { color: var(--accent); text-decoration: underline; } .post-body ul, .post-body ol { margin: 0 0 1.2em 1.2em; } .post-body li { margin-bottom: .5em; } .post-body img { max-width: 100%; border-radius: var(--radius); margin: 1.5em 0; } .post-body blockquote { border-left: 4px solid var(--accent); padding: 4px 0 4px 20px; margin: 1.5em 0; font-size: 1.25rem; color: var(--ink); font-family: var(--font-head); } .post-share { max-width: 760px; margin: 40px auto 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 28px; } .post-content { padding-bottom: clamp(56px, 8vw, 104px); } /* Homepage "most read" slider (Swiper) */ .blog-swiper { padding: 6px 4px 56px; } .blog-swiper .swiper-slide { height: auto; } .blog-swiper .swiper-slide .blog-card { height: 100%; } .blog-swiper .swiper-button-prev, .blog-swiper .swiper-button-next { color: var(--ink); } .blog-swiper .swiper-button-prev:hover, .blog-swiper .swiper-button-next:hover { color: var(--copper); } .blog-swiper .swiper-button-prev::after, .blog-swiper .swiper-button-next::after { font-size: 1.4rem; font-weight: 700; } .blog-swiper .swiper-pagination-bullet { background: var(--ink); opacity: .3; } .blog-swiper .swiper-pagination-bullet-active { background: var(--copper); opacity: 1; } .card-atom [class*="fa-"] { transition: transform .25s ease; } .card-atom:hover > [class*="fa-"] { transform: scale(1.12); } /* Ambient looping motion — only when motion is welcome */ @media (prefers-reduced-motion: no-preference) { .progression-bar { background-size: 200% 100%; animation: aa-slide 7s linear infinite; } @keyframes aa-slide { to { background-position: -200% 0; } } .hero-orbit, .hero-accent { animation: aa-pulse 9s ease-in-out infinite; } @keyframes aa-pulse { 0%, 100% { opacity: .5; } 50% { opacity: .8; } } }