/** * FutureLearn AIVerse — SEAFOAM LIGHT THEME * Redesign layer. Loaded LAST, after app.css. * * theme.css holds the palette. This file holds the design language the * palette is expressed through: canvas, chrome, rhythm, and the shared * primitives (eyebrow / title / lede / panel / button) that the index and * every inner page are now built from. * * SPECIFICITY NOTE * app.css styles page internals as `.page-x .component` (0,2,0). Rules here * therefore carry a `.sf-theme` prefix — a class added to in * layouts/main.blade.php — so they tie on specificity and win on load order. * Base/element rules (html, body, inputs, links) don't need it. * * Sections: * 1 Canvas & rhythm 7 Hero * 2 Shared primitives 8 Index sections * 2b Dark-ground exceptions 9 Inner pages * 3 Header 10 Forms, buttons, misc chrome * 4 Mobile drawer 11 Responsive * 5 Cart drawer * 6 Footer */ /* ============================================================ 1 — CANVAS & RHYTHM ============================================================ */ html { scroll-behavior: smooth; } body { background-color: var(--canvas); color: var(--color-ink); } /* Soft seafoam aurora fixed behind the page, so large white areas never read as flat. Costs nothing and touches no section background. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(900px 520px at 12% -6%, rgba(149, 213, 178, 0.30), transparent 62%), radial-gradient(760px 480px at 92% 8%, rgba(183, 228, 199, 0.26), transparent 60%), radial-gradient(1100px 700px at 50% 108%, rgba(216, 243, 220, 0.55), transparent 66%); } /* One vertical rhythm for every band on the site. */ .pt-120 { padding-top: var(--band) !important; } .pb-120 { padding-bottom: var(--band) !important; } .pt-90, .pt-100 { padding-top: calc(var(--band) * 0.78) !important; } .pb-90, .pb-100 { padding-bottom: calc(var(--band) * 0.78) !important; } .sf-theme .auto-container { max-width: 1280px; padding-left: var(--gutter); padding-right: var(--gutter); } /* Alternating bands so long pages breathe. */ .sf-theme .bg-light, .sf-theme .about-story-section, .sf-theme .why-panels-section { background: var(--canvas-tint) !important; } .sf-theme .category-index-section, .sf-theme .programs-rail-section, .sf-theme .topup-console-section { background: radial-gradient(1100px 620px at 12% -12%, rgba(183, 228, 199, 0.35), transparent 64%), radial-gradient(900px 540px at 92% 112%, rgba(216, 243, 220, 0.55), transparent 62%), var(--color-paper) !important; } ::selection { background: var(--seafoam-3); color: var(--pine-4); } /* Scrollbar — seafoam, not system grey. */ * { scrollbar-color: var(--seafoam-4) transparent; scrollbar-width: thin; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--seafoam-3); border: 3px solid transparent; background-clip: content-box; border-radius: 999px; } *::-webkit-scrollbar-thumb:hover { background: var(--seafoam-5); background-clip: content-box; } :focus-visible { outline: 2px solid var(--pine-1); outline-offset: 3px; border-radius: 6px; } /* ============================================================ 2 — SHARED PRIMITIVES The index page and every inner page use the same eyebrow, heading, lede, panel and button, matched structurally so new sections inherit the language without extra CSS. ============================================================ */ /* ---- Eyebrow: seafoam pill ---- */ .sf-theme [class*="__eyebrow"]:not([class*="eyebrow-"]), .sf-theme [class*="__badge"]:not([class*="badge-"]):not([class*="cart-item"]), .sf-theme [class*="__kicker"]:not([class*="kicker-"]) { display: inline-flex !important; align-items: center; gap: 9px; padding: 7px 16px 7px 13px; border-radius: 999px; background: var(--seafoam-1); border: 1px solid var(--seafoam-2); color: var(--pine-2) !important; font-family: var(--font-inter), sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; line-height: 1; margin-bottom: 22px; box-shadow: none; } /* The dot / rule inside an eyebrow. */ .sf-theme [class*="__eyebrow-dot"] { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--seafoam-5); box-shadow: 0 0 0 3px rgba(82, 183, 136, 0.22); animation: sfPulse 2.4s ease-in-out infinite; } .sf-theme [class*="__eyebrow-line"] { width: 18px; height: 2px; flex: 0 0 18px; border-radius: 2px; background: var(--seafoam-5); } @keyframes sfPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(82, 183, 136, 0.22); } 50% { box-shadow: 0 0 0 6px rgba(82, 183, 136, 0.05); } } /* ---- Section headings ---- */ .sf-theme [class*="__title"]:not([class*="title-"]), .sf-theme .faq-title { font-family: var(--font-graphik), sans-serif; color: var(--pine-4); letter-spacing: -0.028em; line-height: 1.08; text-wrap: balance; } .sf-theme .cat-idx__title, .sf-theme .astory__title, .sf-theme .prail__title, .sf-theme .wpanels__title, .sf-theme .tconsole__title, .sf-theme .abthero__title, .sf-theme .abtpath__title, .sf-theme .abtbricks__title, .sf-theme .abtquad__title, .sf-theme .authx__title, .sf-theme .ctaside__title, .sf-theme .ctmain__title, .sf-theme .cdx-mast__title, .sf-theme .cdx-path__title, .sf-theme .idx__title, .sf-theme .faq-title { font-size: clamp(30px, 3.5vw, 50px); font-weight: 700; margin-bottom: 18px; } /* Accent word inside a heading — seafoam gradient. */ .sf-theme [class*="__title-accent"], .sf-theme .sf-accent { background: linear-gradient(100deg, var(--pine-1) 0%, var(--seafoam-5) 55%, var(--seafoam-4) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---- Lede / supporting copy ---- */ .sf-theme [class*="__lede"], .sf-theme [class*="__subtitle"], .sf-theme .prail__sub, .sf-theme .astory__desc, .sf-theme .ctmain__sub { color: var(--color-pencil); font-size: clamp(15.5px, 1.1vw, 17.5px); line-height: 1.68; max-width: 62ch; margin-bottom: 0; } /* ---- Panel / card ---- */ .sf-theme [class*="__panel"]:not([class*="panel-"]), .sf-theme [class*="__card"]:not([class*="card-"]), .sf-theme .wpanel, .sf-theme .abtpath__card, .sf-theme .cdx-rung__card, .sf-theme .tconsole__node { background: var(--color-paper); border: 1px solid var(--seafoam-2); border-radius: 22px; box-shadow: var(--lift-sm); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease; } .sf-theme [class*="__panel"]:not([class*="panel-"]):hover, .sf-theme [class*="__card"]:not([class*="card-"]):hover, .sf-theme .wpanel:hover, .sf-theme .abtpath__card:hover, .sf-theme .cdx-rung__card:hover { transform: translateY(-5px); border-color: var(--seafoam-4); box-shadow: var(--lift-lg); } /* ------------------------------------------------------------ 2b — DARK-GROUND EXCEPTIONS The primitives above assume a light surface. These regions sit on pine or on photography, so they take the glass variant. ------------------------------------------------------------ */ .sf-theme :is(.artify-hero, .artify-hero--bg, .prail__poster, .cdx-mast, .abthero, .ctdesk__aside, .ftr, .sf-dark) :is([class*="__eyebrow"]:not([class*="eyebrow-"]), [class*="__badge"]:not([class*="badge-"]), [class*="__kicker"]:not([class*="kicker-"])) { background: rgba(216, 243, 220, 0.10); border: 1px solid rgba(183, 228, 199, 0.30); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--seafoam-2) !important; } .sf-theme :is(.artify-hero, .artify-hero--bg, .prail__poster, .cdx-mast, .abthero, .ctdesk__aside, .ftr, .sf-dark) [class*="__title"]:not([class*="title-"]) { color: #fff; } .sf-theme :is(.artify-hero, .artify-hero--bg, .prail__poster, .cdx-mast, .abthero, .ctdesk__aside, .ftr, .sf-dark) [class*="__lede"] { color: rgba(216, 243, 220, 0.80); } .sf-theme :is(.artify-hero, .artify-hero--bg, .prail__poster, .cdx-mast, .abthero, .ctdesk__aside, .ftr, .sf-dark) :is([class*="__eyebrow-dot"], [class*="__eyebrow-line"]) { background: var(--seafoam-4); } .sf-theme :is(.cdx-mast, .abthero, .ctdesk__aside, .ftr, .sf-dark) :is([class*="__panel"]:not([class*="panel-"]), [class*="__card"]:not([class*="card-"])) { background: rgba(216, 243, 220, 0.06); border-color: rgba(183, 228, 199, 0.22); box-shadow: none; } /* ============================================================ 3 — HEADER (light seafoam glass) ============================================================ */ .xh { background: rgba(255, 255, 255, 0.78); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border-bottom: 1px solid rgba(183, 228, 199, 0.7); } .xh--scrolled { /* background: rgba(255, 255, 255, 0.93); border-bottom-color: var(--seafoam-2); box-shadow: 0 10px 30px -18px rgba(16, 36, 26, 0.35); */ } .xh::before { height: 2px; background: linear-gradient(90deg, var(--pine-2) 0%, var(--seafoam-5) 25%, var(--seafoam-3) 50%, var(--seafoam-5) 75%, var(--pine-2) 100%); background-size: 200% 100%; opacity: 1; } /* The wordmark ships white for the old dark bar. This filter chain solves exactly to #1b4332, so it reads as pine on the light one. */ .xh__logo-img, .xh__drawer-logo { filter: brightness(0) saturate(100%) invert(82%) sepia(43%) saturate(752%) hue-rotate(87deg) brightness(22%) contrast(85%); } /* ---- Nav ---- */ .xh__nav-link { color: var(--pine-3); font-weight: 600; } .xh__nav-link:hover { color: var(--pine-2); background: var(--seafoam-1); } .xh__nav-link--active { color: var(--pine-2) !important; background: var(--seafoam-1) !important; border-color: var(--seafoam-2) !important; box-shadow: none; } .xh__nav-link::after, .xh__nav-link--active::after { background: linear-gradient(90deg, var(--pine-1), var(--seafoam-5)); } .xh__caret { color: var(--pine-1); } /* ---- Dropdowns ---- */ .xh__dropdown { /* Opaque: these panels open over the hero photography. */ background: var(--color-paper) !important; border: 1px solid var(--seafoam-2) !important; border-radius: 18px !important; box-shadow: 0 30px 70px -30px rgba(16, 36, 26, 0.35), var(--ring) !important; padding: 10px !important; } .xh__dropdown::before { background: var(--color-paper) !important; border-color: var(--seafoam-2) !important; } .xh__drop-header-title { color: var(--pine-4); } .xh__drop-header-line { background: linear-gradient(90deg, var(--seafoam-3), transparent); } .xh__drop-item { color: var(--pine-3); border-radius: 12px; font-weight: 550; } .xh__drop-item::before { background: var(--seafoam-1) !important; } .xh__drop-item:hover { color: var(--pine-2); border-color: var(--seafoam-2); box-shadow: none; } .xh__drop-item--active { color: var(--pine-2); background: var(--seafoam-1); } .xh__drop-item--muted { color: var(--color-graphite); } .xh__drop-item--all { border-top: 1px solid var(--seafoam-2); color: var(--pine-2); } .xh__drop-item--all:hover { color: var(--pine-3); } .xh__drop-item--danger { color: #b4453c; } .xh__drop-item--danger:hover { color: #93362f; border-color: rgba(180, 69, 60, 0.25); } .xh__drop-item--danger::before { background: rgba(180, 69, 60, 0.07) !important; } .xh__drop-ico { background: var(--seafoam-1); color: var(--pine-1); border-radius: 9px; } .xh__drop-item:hover .xh__drop-ico { background: var(--seafoam-5); color: #fff; } .xh__drop-item--danger .xh__drop-ico { background: rgba(180, 69, 60, 0.1); color: #b4453c; } .xh__drop-item--danger:hover .xh__drop-ico { background: #b4453c; color: #fff; } .xh__drop-ico-flag { box-shadow: 0 0 0 1px var(--seafoam-2); } .xh__drop-check { color: var(--seafoam-5); } .xh__drop-divider { border-color: var(--seafoam-2); background: var(--seafoam-2); opacity: 1; } /* ---- Account block ---- */ .xh__acct-head { background: var(--seafoam-1); border-radius: 14px; } .xh__acct-head-avatar, .xh__acct-avatar { background: linear-gradient(135deg, var(--pine-2), var(--seafoam-5)); color: #fff; } .xh__acct-head-name { color: var(--pine-4); } .xh__acct-head-credits { color: var(--pine-1); } .xh__acct-head-credits i { color: var(--seafoam-5); } /* ---- Pill triggers ---- */ .xh__pill-btn, .xh__acct-btn, .xh__burger { background: var(--color-paper); border: 1px solid var(--seafoam-2); color: var(--pine-3); box-shadow: var(--lift-sm); } .xh__pill-btn:hover, .xh__pill-drop:hover .xh__pill-btn, .xh__acct-btn:hover, .xh__pill-drop--account:hover .xh__acct-btn, .xh__burger:hover { color: var(--pine-2); background: var(--seafoam-1); border-color: var(--seafoam-4); } .xh__acct-ico { color: var(--pine-1); } .xh__flag { box-shadow: 0 0 0 1px var(--seafoam-2); } .xh__burger span { background: var(--pine-3); } .xh__burger:hover span { background: var(--pine-2); } /* app.css locks .cart-btn / .modern-cart-btn to a white glyph with !important for the old dark bar — reclaim it for the light one. */ .xh__cart-btn.cart-btn, .xh__cart-btn.modern-cart-btn { width: 44px !important; height: 44px !important; color: var(--pine-3) !important; background: var(--color-paper) !important; border: 1px solid var(--seafoam-2) !important; border-radius: 999px !important; font-size: 17px !important; } .xh__cart-btn.cart-btn:hover, .xh__cart-btn.modern-cart-btn:hover { color: var(--pine-2) !important; background: var(--seafoam-1) !important; border-color: var(--seafoam-4) !important; transform: translateY(-1px) !important; } .xh__cart-badge, .xh__cart-btn .cart-badge, .xh__cart-btn .cart-count { background: var(--pine-2) !important; color: #fff !important; border: 2px solid var(--color-paper) !important; top: -3px !important; right: -3px !important; } /* ---- Primary CTA ---- */ .xh__start-btn, .xh__cta-register { background: linear-gradient(135deg, var(--pine-2) 0%, var(--pine-1) 100%); color: #fff !important; border: none; box-shadow: 0 8px 22px -10px rgba(27, 67, 50, 0.7); } .xh__start-btn::before { background: linear-gradient(135deg, var(--pine-1) 0%, var(--seafoam-5) 100%); } .xh__start-btn:hover, .xh__cta-register:hover { box-shadow: 0 14px 34px -12px rgba(27, 67, 50, 0.65); transform: translateY(-1px); } /* ============================================================ 4 — MOBILE DRAWER ============================================================ */ .xh__drawer-overlay { background: rgba(11, 32, 24, 0.42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .xh__drawer-panel { background: var(--color-paper); border-left: 1px solid var(--seafoam-2); box-shadow: -24px 0 70px -30px rgba(16, 36, 26, 0.5); } .xh__drawer-panel::before { background: linear-gradient(180deg, var(--seafoam-1), transparent 40%); } .xh__drawer-head { border-bottom: 1px solid var(--seafoam-2); } .xh__drawer-close { color: var(--pine-3); background: var(--seafoam-1); border: 1px solid var(--seafoam-2); } .xh__drawer-close:hover { color: #fff; background: var(--pine-2); border-color: var(--pine-2); } .xh__drawer-link { color: var(--pine-3); border-radius: 12px; } .xh__drawer-link:hover, .xh__drawer-toggle--open { color: var(--pine-2); background: var(--seafoam-1); } .xh__drawer-link i { color: var(--pine-1); } .xh__drawer-link--danger, .xh__drawer-link--danger i { color: #b4453c; } .xh__drawer-caret { color: var(--pine-1); } .xh__drawer-sub-link { color: var(--color-pencil); } .xh__drawer-sub-link:hover { color: var(--pine-2); background: var(--seafoam-1); } .xh__drawer-sub-ico { background: var(--seafoam-1); color: var(--pine-1); } .xh__drawer-sub-link--muted { color: var(--color-graphite); } .xh__drawer-footer { border-top: 1px solid var(--seafoam-2); } .xh__drawer-btn { background: linear-gradient(135deg, var(--pine-2), var(--pine-1)); color: #fff; border: none; border-radius: 999px; } .xh__drawer-btn--outline { background: transparent; color: var(--pine-2); border: 1.5px solid var(--seafoam-4); } .xh__drawer-btn--outline:hover { background: var(--seafoam-1); } /* ============================================================ 5 — CART DRAWER ============================================================ */ .sf-theme .cartcanvas__info { background: var(--color-paper); border-left: 1px solid var(--seafoam-2); } .sf-theme .modern-cart-drawer h4, .sf-theme .modern-cart-drawer .cart-footer h5 { color: var(--pine-4) !important; } .sf-theme .modern-cart-drawer .border-bottom, .sf-theme .modern-cart-drawer .cart-footer { border-color: var(--seafoam-2) !important; } .sf-theme .cartcanvas__close { background: var(--seafoam-1); color: var(--pine-2); border: 1px solid var(--seafoam-2); transition: background 0.25s ease, color 0.25s ease; } .sf-theme .cartcanvas__close:hover { background: var(--pine-2); color: #fff; } .sf-theme .cart-list > li { border: 1px solid var(--seafoam-2) !important; box-shadow: var(--lift-sm) !important; border-radius: 16px !important; } .sf-theme .cart-thumb img { border-radius: 10px; width: 56px; height: 56px; object-fit: cover; } .sf-theme .cart-thumb--credits { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 10px; background: var(--seafoam-1); color: var(--pine-1); } .offcanvas__overlay { background: rgba(11, 32, 24, 0.4); } /* ============================================================ 6 — FOOTER (deep pine anchor) ============================================================ */ .ftr { background: radial-gradient(1200px 520px at 50% -30%, rgba(82, 183, 136, 0.22), transparent 65%), linear-gradient(180deg, #12362a 0%, #0b2018 100%); color: rgba(216, 243, 220, 0.72); --ftr-hair: rgba(183, 228, 199, 0.16); } .ftr::before { background: linear-gradient(90deg, var(--seafoam-5) 0%, var(--seafoam-3) 50%, var(--seafoam-5) 100%); } .ftr__glow { background: radial-gradient(circle, rgba(82, 183, 136, 0.30) 0%, rgba(149, 213, 178, 0.10) 45%, transparent 70%); } .ftr__shell { padding-top: 80px; } /* The footer keeps the white wordmark, but the FA glyph ships purple/blue. Rotating the hue lands both stops in the seafoam family; white is unsaturated so it passes through untouched. */ .ftr__logo img { filter: hue-rotate(-95deg) saturate(0.9); } .ftr__statement { color: rgba(216, 243, 220, 0.62); } .ftr__heading { color: var(--seafoam-3) !important; } .ftr__links a, .ftr__contact a, .ftr__copy a { color: rgba(216, 243, 220, 0.72); transition: color 0.22s ease; } .ftr__links a:hover, .ftr__contact a:hover, .ftr__copy a:hover { color: var(--seafoam-2); } .ftr__contact-label { color: var(--seafoam-4) !important; } .ftr__field { background: rgba(216, 243, 220, 0.06); border: 1px solid rgba(183, 228, 199, 0.22); border-radius: 999px; transition: border-color 0.25s ease, background 0.25s ease; } .ftr__field:focus-within { border-color: var(--seafoam-4); background: rgba(216, 243, 220, 0.1); } .sf-theme .ftr__field .email { background: transparent; border: none; color: var(--seafoam-1); } .sf-theme .ftr__field .email::placeholder { color: rgba(216, 243, 220, 0.42); } .ftr__send { background: linear-gradient(135deg, var(--seafoam-5), var(--seafoam-4)); color: var(--pine-4); border-radius: 999px; } .ftr__send:hover { background: var(--seafoam-3); } .ftr__top-link { color: var(--seafoam-3); } .ftr__top-link:hover { color: var(--seafoam-1); } .ftr__payment { filter: grayscale(1) brightness(1.6); opacity: 0.65; } .ftr__payment:hover { filter: none; opacity: 1; } .scroll-to-top { background: linear-gradient(135deg, var(--pine-2), var(--seafoam-5)) !important; color: #fff !important; border-radius: 50% !important; box-shadow: var(--glow) !important; } /* ============================================================ 7 — HERO ============================================================ */ .sf-theme .artify-hero--bg__slide { min-height: min(88vh, 780px); } /* Pine-tinted scrim, so the imagery sits in the same colour family. */ .sf-theme .artify-hero--bg__overlay { background: linear-gradient(100deg, rgba(8, 28, 21, 0.86) 0%, rgba(8, 28, 21, 0.66) 42%, rgba(11, 32, 24, 0.22) 72%, rgba(11, 32, 24, 0.05) 100%), radial-gradient(760px 420px at 8% 88%, rgba(82, 183, 136, 0.24), transparent 65%); } .sf-theme .artify-hero--bg__badge { border-radius: 999px; padding: 8px 18px 8px 14px; align-self: flex-start; margin-bottom: 26px; } .sf-theme .artify-hero--bg__badge-line { background: var(--seafoam-4); } .sf-theme .artify-hero--bg__badge-text { color: var(--seafoam-2); letter-spacing: 0.14em; } .sf-theme .artify-hero--bg__title { letter-spacing: -0.032em; line-height: 1.03; } .sf-theme .artify-hero--bg__title-main { color: #fff; } .sf-theme .artify-hero--bg__title-accent { background: linear-gradient(100deg, var(--seafoam-3) 0%, var(--seafoam-5) 50%, var(--seafoam-2) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .sf-theme .artify-hero--bg__desc { color: rgba(216, 243, 220, 0.82); max-width: 54ch; margin: 22px 0 36px; line-height: 1.7; } .sf-theme .artify-hero--bg__buttons { gap: 14px; } .sf-theme .artify-hero--bg__btn { border-radius: 999px; padding: 15px 30px; font-weight: 650; letter-spacing: 0.005em; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease; } .sf-theme .artify-hero--bg__btn--primary { background: linear-gradient(135deg, var(--seafoam-5) 0%, var(--seafoam-4) 100%); color: var(--pine-4); border: none; box-shadow: 0 14px 34px -14px rgba(82, 183, 136, 0.9); } .sf-theme .artify-hero--bg__btn--primary:hover { background: linear-gradient(135deg, var(--seafoam-3), var(--seafoam-2)); transform: translateY(-2px); box-shadow: 0 20px 44px -16px rgba(82, 183, 136, 0.95); } .sf-theme .artify-hero--bg__btn--secondary { background: rgba(216, 243, 220, 0.08); border: 1px solid rgba(183, 228, 199, 0.4); color: var(--seafoam-1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .sf-theme .artify-hero--bg__btn--secondary:hover { background: rgba(216, 243, 220, 0.16); border-color: var(--seafoam-3); transform: translateY(-2px); } .sf-theme .artify-hero--bg__dots { gap: 10px; } .sf-theme .artify-hero--bg__dot { width: 8px; height: 8px; background: rgba(216, 243, 220, 0.35); border: none; border-radius: 999px; transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease; } .sf-theme .artify-hero--bg__dot:hover { background: var(--seafoam-3); } .sf-theme .artify-hero--bg__dot.is-active { width: 34px; background: var(--seafoam-5); } /* ============================================================ 8 — INDEX SECTIONS ============================================================ */ .sf-theme .cat-idx__aura, .sf-theme .wpanels__glow, .sf-theme .tconsole__glow { background: radial-gradient(circle, rgba(116, 198, 157, 0.30) 0%, transparent 70%); } /* ---- Category index ---- */ .sf-theme .cat-idx { gap: clamp(32px, 4vw, 64px); } .sf-theme .cat-idx__frame { border-radius: 26px; border: 1px solid var(--seafoam-2); background: var(--seafoam-1); box-shadow: var(--lift-lg); } .sf-theme .cat-idx__frame-ring { border-color: rgba(82, 183, 136, 0.35); } .sf-theme .cat-idx__frame-veil { background: linear-gradient(180deg, transparent 45%, rgba(8, 28, 21, 0.72) 100%); } .sf-theme .cat-idx__slide-fallback { background: var(--seafoam-2); color: var(--pine-1); } .sf-theme .cat-idx__caption-index { color: var(--seafoam-3); } .sf-theme .cat-idx__list { border-top: 1px solid var(--seafoam-2); } .sf-theme .cat-idx__item { border-bottom: 1px solid var(--seafoam-2); } .sf-theme .cat-idx__row { border-radius: 18px; border: 1px solid transparent; padding: 18px 20px; gap: 18px; background: transparent; transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease; } .sf-theme .cat-idx__row:hover, .sf-theme .cat-idx__row.is-active { background: var(--color-paper); border-color: var(--seafoam-2); box-shadow: var(--lift-md); transform: translateX(4px); } .sf-theme .cat-idx__num { color: var(--seafoam-4); font-variant-numeric: tabular-nums; } .sf-theme .cat-idx__row.is-active .cat-idx__num { color: var(--seafoam-5); } .sf-theme .cat-idx__thumb, .sf-theme .cat-idx__glyph { border-radius: 14px; background: var(--seafoam-1); color: var(--pine-1); border: 1px solid var(--seafoam-2); } .sf-theme .cat-idx__name { color: var(--pine-4); } .sf-theme .cat-idx__desc { color: var(--color-graphite); } .sf-theme .cat-idx__go { color: var(--pine-1); } .sf-theme .cat-idx__go-label { color: var(--pine-1); } .sf-theme .cat-idx__go-icon { background: var(--seafoam-1); color: var(--pine-2); border-radius: 999px; } /* app.css turns these white on hover/active for the old dark band. */ .sf-theme .cat-idx__row:hover .cat-idx__name, .sf-theme .cat-idx__row.is-active .cat-idx__name { color: var(--pine-4); } .sf-theme .cat-idx__row:hover .cat-idx__desc, .sf-theme .cat-idx__row.is-active .cat-idx__desc { color: var(--color-pencil); } .sf-theme .cat-idx__row:hover .cat-idx__num, .sf-theme .cat-idx__row.is-active .cat-idx__num { color: var(--seafoam-5); } .sf-theme .cat-idx__row:hover .cat-idx__go-label, .sf-theme .cat-idx__row.is-active .cat-idx__go-label { color: var(--pine-1); } .sf-theme .cat-idx__row:hover .cat-idx__glyph, .sf-theme .cat-idx__row.is-active .cat-idx__glyph, .sf-theme .cat-idx__row:hover .cat-idx__go-icon, .sf-theme .cat-idx__row.is-active .cat-idx__go-icon { background: linear-gradient(140deg, var(--pine-2), var(--seafoam-5)); color: #fff; border-color: transparent; } .sf-theme .cat-idx__row:focus-visible, .sf-theme .cat-idx__row.is-active { background: var(--color-paper); } /* ---- About story ---- */ .sf-theme .astory__masthead { gap: clamp(28px, 4vw, 72px); align-items: end; margin-bottom: clamp(40px, 5vw, 72px); } .sf-theme .astory__band { gap: clamp(14px, 1.6vw, 24px); } .sf-theme .astory__shot { border-radius: 22px; overflow: hidden; border: 1px solid var(--seafoam-2); box-shadow: var(--lift-md); transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .sf-theme .astory__shot:hover { transform: translateY(-8px) scale(1.01); } .sf-theme .astory__shot--round { border-radius: 999px; } .sf-theme .astory__shot-veil { background: linear-gradient(180deg, transparent 55%, rgba(8, 28, 21, 0.42) 100%); } .sf-theme .astory__cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; padding: 14px 16px 14px 26px; border-radius: 999px; background: linear-gradient(135deg, var(--pine-2), var(--pine-1)); color: #fff; font-weight: 650; box-shadow: 0 12px 30px -14px rgba(27, 67, 50, 0.8); transition: transform 0.3s ease, box-shadow 0.3s ease; } .sf-theme .astory__cta:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 18px 40px -16px rgba(27, 67, 50, 0.75); } .sf-theme .astory__cta-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: rgba(216, 243, 220, 0.18); } .sf-theme .astory__ledger { gap: clamp(24px, 3vw, 48px); margin-top: clamp(48px, 6vw, 88px); } .sf-theme .astory__pillar-rule { background: linear-gradient(90deg, var(--seafoam-5), transparent); } .sf-theme .astory__pillar-num { color: var(--seafoam-4); } .sf-theme .astory__pillar-title { color: var(--pine-4); } .sf-theme .astory__pillar-desc { color: var(--color-pencil); } /* ---- Programs rail ---- */ .sf-theme .prail__head { gap: 32px; margin-bottom: clamp(32px, 4vw, 56px); } .sf-theme .prail__nav { width: 46px; height: 46px; border-radius: 999px; background: var(--color-paper); border: 1px solid var(--seafoam-2); color: var(--pine-2); box-shadow: var(--lift-sm); transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease; } .sf-theme .prail__nav:hover:not(:disabled) { background: var(--pine-2); color: #fff; transform: translateY(-2px); } .sf-theme .prail__nav:disabled { opacity: 0.35; cursor: not-allowed; } .sf-theme .prail__all { display: inline-flex; align-items: center; gap: 9px; padding: 13px 24px; border-radius: 999px; background: var(--seafoam-1); border: 1px solid var(--seafoam-2); color: var(--pine-2); font-weight: 650; transition: background 0.25s ease, color 0.25s ease; } .sf-theme .prail__all:hover { background: var(--pine-2); color: #fff; border-color: var(--pine-2); } .sf-theme .prail__track { gap: clamp(16px, 1.8vw, 26px); } .sf-theme .prail__poster { border-radius: 22px; overflow: hidden; box-shadow: var(--lift-md); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease; } .sf-theme .prail__poster:hover { transform: translateY(-8px); box-shadow: var(--lift-lg); } .sf-theme .prail__poster-scrim { background: linear-gradient(180deg, rgba(8, 28, 21, 0.05) 30%, rgba(8, 28, 21, 0.62) 62%, rgba(8, 28, 21, 0.92) 100%); } .sf-theme .prail__poster-index { color: rgba(216, 243, 220, 0.7); } .sf-theme .prail__poster-title { color: #fff; } .sf-theme .prail__poster-summary { color: rgba(216, 243, 220, 0.78); } .sf-theme .prail__poster-cta { color: var(--seafoam-3); } .sf-theme .prail__poster-cta-ico { background: var(--seafoam-5); color: var(--pine-4); border-radius: 999px; } .sf-theme .prail__progress { background: var(--seafoam-2); border-radius: 999px; height: 3px; margin-top: 28px; } .sf-theme .prail__progress-bar { background: linear-gradient(90deg, var(--pine-1), var(--seafoam-5)); border-radius: 999px; } /* ---- Why panels ---- */ .sf-theme .wpanels { gap: clamp(20px, 2.4vw, 32px); } .sf-theme .wpanel { padding: clamp(28px, 3vw, 40px); overflow: hidden; } .sf-theme .wpanel__ghost { color: var(--seafoam-1); } .sf-theme .wpanel__icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: linear-gradient(135deg, var(--seafoam-1), var(--seafoam-2)); color: var(--pine-2); font-size: 22px; margin-bottom: 22px; transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease; } .sf-theme .wpanel:hover .wpanel__icon { background: linear-gradient(135deg, var(--pine-2), var(--seafoam-5)); color: #fff; transform: rotate(-6deg) scale(1.05); } .sf-theme .wpanel__title { color: var(--pine-4); } .sf-theme .wpanel__desc { color: var(--color-pencil); } .sf-theme .wpanel__rule { background: linear-gradient(90deg, var(--seafoam-5), transparent); } /* ---- Top-up console (index + /points/topup) ---- */ .sf-theme .tconsole__head { text-align: center; margin-bottom: clamp(36px, 4vw, 56px); } .sf-theme .tconsole__head .tconsole__lede { margin-left: auto; margin-right: auto; } .sf-theme .tconsole__deck { background: var(--color-paper); border: 1px solid var(--seafoam-2); border-radius: 26px; box-shadow: var(--lift-lg); padding: clamp(22px, 2.6vw, 34px); gap: clamp(16px, 2vw, 28px); } .sf-theme .tconsole__cell-label { color: var(--color-graphite); } .sf-theme .tconsole__input { background: var(--seafoam-1); border: 1px solid var(--seafoam-2); border-radius: 16px; transition: border-color 0.25s ease, box-shadow 0.25s ease; } .sf-theme .tconsole__input:focus-within { border-color: var(--seafoam-5); box-shadow: 0 0 0 4px rgba(82, 183, 136, 0.16); } .sf-theme .tconsole__sym { color: var(--pine-1); } .sf-theme .tconsole__amount { background: transparent; border: none; color: var(--pine-4); } .sf-theme .tconsole__op { color: var(--seafoam-4); } .sf-theme .tconsole__multi, .sf-theme .tconsole__out { color: var(--pine-2); } .sf-theme .tconsole__go { background: linear-gradient(135deg, var(--pine-2), var(--pine-1)); color: #fff; border: none; border-radius: 999px; box-shadow: 0 12px 30px -14px rgba(27, 67, 50, 0.8); transition: transform 0.28s ease, box-shadow 0.28s ease; } .sf-theme .tconsole__go:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -16px rgba(27, 67, 50, 0.75); } .sf-theme .tconsole__go-ico { background: rgba(216, 243, 220, 0.2); border-radius: 999px; } .sf-theme .tconsole__readout { gap: clamp(14px, 2vw, 30px); margin-top: 22px; } .sf-theme .tconsole__readout-item { color: var(--color-pencil); } .sf-theme .tconsole__readout-item strong { color: var(--pine-2); } .sf-theme .tconsole__readout-item--trust { color: var(--pine-1); } .sf-theme .tconsole__track { gap: clamp(16px, 2vw, 26px); } .sf-theme .tconsole__node { padding: 26px 22px; } .sf-theme .tconsole__node-multi { color: var(--pine-1); background: var(--seafoam-1); border-radius: 999px; padding: 4px 12px; } .sf-theme .tconsole__node-dot { background: var(--seafoam-1); color: var(--pine-2); border: 1px solid var(--seafoam-2); } .sf-theme .tconsole__node-name { color: var(--pine-4); } .sf-theme .tconsole__node-range { color: var(--pine-1); } .sf-theme .tconsole__node-desc { color: var(--color-graphite); } .sf-theme .timeline-step-highlight { border-color: var(--seafoam-5) !important; background: linear-gradient(180deg, var(--seafoam-1), var(--color-paper)) !important; box-shadow: 0 0 0 4px rgba(82, 183, 136, 0.14), var(--lift-md) !important; transform: translateY(-4px); } .sf-theme .timeline-step-highlight .tconsole__node-dot { background: var(--pine-2); color: #fff; border-color: var(--pine-2); } .sf-theme .tconsole__perks { gap: clamp(12px, 1.6vw, 20px); margin-top: clamp(32px, 4vw, 52px); } .sf-theme .tconsole__perk { background: var(--color-paper); border: 1px solid var(--seafoam-2); border-radius: 999px; padding: 12px 20px 12px 12px; color: var(--pine-3); box-shadow: var(--lift-sm); } .sf-theme .tconsole__perk-ico { background: var(--seafoam-1); color: var(--pine-1); border-radius: 999px; } /* ------------------------------------------------------------ 8b — Reclaiming the four bands that used to be dark category-index, why-panels, authx (login/register/forgot) and the about-us path band all shipped white-on-pine. They're light now, so every white ink rule needs an equal-specificity answer. ------------------------------------------------------------ */ .sf-theme .cat-idx__title, .sf-theme .wpanels__title, .sf-theme .authx__title, .sf-theme .abtpath__title { color: var(--pine-4); } .sf-theme .cat-idx__subtitle, .sf-theme .authx__lede, .sf-theme .abtpath__lede, .sf-theme .wpanel__desc, .sf-theme .abtpath__desc, .sf-theme .authx__point-desc { color: var(--color-pencil); } .sf-theme .cat-idx__slide-fallback i { color: var(--pine-1); } .sf-theme .cat-idx__thumb { color: var(--pine-1); } .sf-theme .wpanel, .sf-theme .wpanels:hover .wpanel, .sf-theme .wpanels:hover .wpanel:hover { border-color: var(--seafoam-2); } .sf-theme .wpanels:hover .wpanel:hover { border-color: var(--seafoam-4); } .sf-theme .wpanel__ghost, .sf-theme .wpanel:first-child .wpanel__ghost, .sf-theme .wpanels:hover .wpanel .wpanel__ghost, .sf-theme .wpanels:hover .wpanel:hover .wpanel__ghost { color: var(--seafoam-1); } .sf-theme .wpanel__icon, .sf-theme .wpanel:first-child .wpanel__icon, .sf-theme .wpanels:hover .wpanel .wpanel__icon { color: var(--pine-2); border-color: var(--seafoam-2); } .sf-theme .wpanels:hover .wpanel:hover .wpanel__icon { color: #fff; } .sf-theme .wpanel__title { color: var(--pine-4); } .sf-theme .authx__point-title, .sf-theme .authx__brand-name, .sf-theme .abtpath__topic { color: var(--pine-4); } .sf-theme .authx__brand-tagline { color: var(--color-graphite); } .sf-theme .authx__point-mark { background: linear-gradient(135deg, var(--pine-2), var(--seafoam-5)); color: #fff; } .sf-theme .abtpath__step:hover .abtpath__node, .sf-theme .abtbrick:hover .abtbrick__check { background: var(--pine-2); color: #fff; } /* ============================================================ 9 — INNER PAGES Same shell treatment everywhere, so the site reads as one product. ============================================================ */ .sf-theme .abthero-section, .sf-theme .abtpath-section, .sf-theme .abtquad-section, .sf-theme .abtbricks-section, .sf-theme .ctdesk-section, .sf-theme .authx-section, .sf-theme .faq-section, .sf-theme .instructor-section, .sf-theme .instructor-detail-section, .sf-theme .idx, .sf-theme .wlt, .sf-theme .cart-redesign, .sf-theme .pay, .sf-theme .dbx, .sf-theme .doc, .sf-theme .ordr { background: radial-gradient(900px 420px at 15% 0%, rgba(183, 228, 199, 0.40), transparent 62%), radial-gradient(700px 380px at 90% 4%, rgba(216, 243, 220, 0.60), transparent 60%), var(--canvas) !important; } /* Alternate the about-page bands so the page still has rhythm. */ .sf-theme .abtquad-section, .sf-theme .abtbricks-section { background: var(--canvas-tint) !important; } .sf-theme .pay, .sf-theme .idx, .sf-theme .wlt, .sf-theme .dbx, .sf-theme .ordr { padding-top: clamp(40px, 5vw, 72px) !important; } .sf-theme .pay__shell, .sf-theme .idx__shell, .sf-theme .wlt__shell, .sf-theme .dbx__shell, .sf-theme .doc__shell, .sf-theme .ordr__shell { max-width: 1280px; padding-left: var(--gutter); padding-right: var(--gutter); } /* Auth cards (login / register / forgot password) */ .sf-theme .authx__card { background: var(--color-paper); border: 1px solid var(--seafoam-2); border-radius: 26px; box-shadow: var(--lift-lg); padding: clamp(28px, 3.4vw, 46px); } .sf-theme .authx__card-title { color: var(--pine-4); } .sf-theme .authx__card-sub { color: var(--color-pencil); } /* Catalog / cart / dashboard panels */ .sf-theme .idx__panel, .sf-theme .wlt__panel, .sf-theme .dbx__panel, .sf-theme .cart-item-card, .sf-theme .cart-sidebar { background: var(--color-paper); border: 1px solid var(--seafoam-2); border-radius: 22px; box-shadow: var(--lift-sm); } .sf-theme .idx__panel-title, .sf-theme .wlt__panel-title, .sf-theme .dbx__panel-title, .sf-theme .cart-sidebar__title, .sf-theme .cart-item-card__title { color: var(--pine-4); } .sf-theme .idx__panel-cta, .sf-theme .dbx__panel-cta { color: var(--pine-2); font-weight: 650; } /* Filled CTA on the course-detail spec card — white ink, not pine. */ .sf-theme .cdx-spec-card__cta { color: #fff; font-weight: 700; border-radius: 999px; box-shadow: 0 12px 30px -14px rgba(27, 67, 50, 0.85); } .sf-theme .cdx-spec-card__cta:hover { color: #fff; transform: translateY(-2px); } /* Contact aside stays a deliberate pine accent block. */ .sf-theme .ctdesk__aside { background: radial-gradient(600px 400px at 20% 0%, rgba(82, 183, 136, 0.28), transparent 65%), linear-gradient(165deg, #12362a 0%, #0b2018 100%) !important; border-radius: 26px; } /* Course detail masthead sits on pine, like the hero. */ .sf-theme .cdx-mast__bg::after, .sf-theme .cdx-mast::after { background: linear-gradient(100deg, rgba(8, 28, 21, 0.90) 0%, rgba(11, 32, 24, 0.60) 60%, rgba(11, 32, 24, 0.25) 100%); } /* Long-form copy (policy pages, FAQs, course briefs) */ .sf-theme .doc__shell p, .sf-theme .doc__body p, .sf-theme .cdx-brief p, .sf-theme .faq-answer p { color: var(--color-pencil); line-height: 1.75; } .sf-theme .doc__shell h2, .sf-theme .doc__shell h3, .sf-theme .doc__body h2, .sf-theme .doc__body h3 { color: var(--pine-4); letter-spacing: -0.02em; } .sf-theme .doc__shell a, .sf-theme .doc__body a { color: var(--pine-1); text-underline-offset: 3px; } /* Order result pages */ .sf-theme .ordr__btn { border-radius: 999px; background: linear-gradient(135deg, var(--pine-2), var(--pine-1)); color: #fff; border: none; box-shadow: 0 12px 30px -14px rgba(27, 67, 50, 0.8); } .sf-theme .ordr__btn:hover { color: #fff; transform: translateY(-2px); } /* ============================================================ 10 — FORMS, BUTTONS, MISC CHROME ============================================================ */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="search"], input[type="date"], select, textarea, .form-control, .form-select { background: var(--color-paper); border: 1px solid var(--seafoam-2); border-radius: 12px; color: var(--color-ink); transition: border-color 0.22s ease, box-shadow 0.22s ease; } input:focus, select:focus, textarea:focus, .form-control:focus, .form-select:focus { border-color: var(--seafoam-5); box-shadow: 0 0 0 4px rgba(82, 183, 136, 0.15); outline: none; } ::placeholder { color: var(--color-graphite); opacity: 1; } .sf-theme .btn-primary, .sf-theme .theme-btn:not(.ftr__send), .sf-theme .modern-btn-solid, .sf-theme .enroll-btn:not(.tconsole__go), .sf-theme .btn-checkout { background: linear-gradient(135deg, var(--pine-2) 0%, var(--pine-1) 100%) !important; border: none !important; color: #fff !important; border-radius: 999px !important; box-shadow: 0 10px 26px -12px rgba(27, 67, 50, 0.75); transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease; } .sf-theme .btn-primary:hover, .sf-theme .theme-btn:not(.ftr__send):hover, .sf-theme .modern-btn-solid:hover, .sf-theme .enroll-btn:not(.tconsole__go):hover, .sf-theme .btn-checkout:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 16px 36px -14px rgba(27, 67, 50, 0.7); } .sf-theme .btn-outline-primary, .sf-theme .modern-btn-outline { background: var(--color-paper) !important; border: 1.5px solid var(--seafoam-3) !important; color: var(--pine-2) !important; border-radius: 999px !important; } .sf-theme .btn-outline-primary:hover, .sf-theme .modern-btn-outline:hover { background: var(--seafoam-1) !important; border-color: var(--seafoam-5) !important; } .sf-theme .db-points-badge--amber { background: var(--seafoam-1) !important; color: var(--pine-2) !important; border-radius: 999px !important; font-weight: 650; } a { color: var(--pine-1); } a:hover { color: var(--pine-2); } hr { border-color: var(--seafoam-2); opacity: 1; } /* Preloader on the light canvas */ #preloader.flx-loader, .flx-loader__panel { background: var(--canvas); } .flx-loader__word { color: var(--pine-3); } .flx-loader__status, .flx-loader__count { color: var(--pine-1); } .flx-loader__count i { color: var(--seafoam-5); } .flx-loader__track { stroke: var(--seafoam-2); } .flx-loader__dots { stroke: var(--seafoam-3); } .flx-loader__head { background: var(--seafoam-5); } /* Toasts */ .artify-toast { background: rgba(255, 255, 255, 0.96) !important; border: 1px solid var(--seafoam-2) !important; border-radius: 16px !important; box-shadow: var(--lift-lg) !important; color: var(--pine-3) !important; } /* ============================================================ 11 — RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .sf-theme .cat-idx__stage { display: none; } .sf-theme .astory__masthead { grid-template-columns: 1fr; } } @media (max-width: 768px) { :root { --band: 64px; --gutter: 18px; } .sf-theme .artify-hero--bg__slide { min-height: 74vh; } .sf-theme .artify-hero--bg__buttons { flex-wrap: wrap; } .sf-theme .artify-hero--bg__btn { flex: 1 1 100%; justify-content: center; } .sf-theme .tconsole__deck { flex-direction: column; align-items: stretch; } .sf-theme .tconsole__op { display: none; } .sf-theme .prail__controls .prail__nav { display: none; } .sf-theme [class*="__eyebrow"]:not([class*="eyebrow-"]) { font-size: 10.5px; margin-bottom: 16px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }