/* ===================================================================== themes.css — TOKEN CONTRACT for kader-xai.github.io --------------------------------------------------------------------- Two independent axes, both set on : data-theme = "glass" | "heritage" (design family) data-mode = "light" | "dark" (light/dark) Maps to the brief's designs: glass+light -> A · Liquid Glass Light (DEFAULT) glass+dark -> B · Liquid Glass Dark + Butterflies heritage+light -> C · Heritage parchment heritage+dark -> C · Heritage candle-lit leather To add "Design D": append one :root[data-theme="d"][data-mode="…"] block below + (optionally) one decoration set in theme-switch.js. Components read ONLY the variables defined here — never hard-code a colour in a component. ===================================================================== */ :root{ --font: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; --font-display: var(--font); --radius-panel: 20px; --radius-hero: 26px; --radius-pill: 999px; --maxw: 1100px; } /* ---------- A · GLASS · LIGHT (default) ---------- */ :root, :root[data-theme="glass"][data-mode="light"]{ --gold:#a16a1f; --gold-soft:#8a6a2f; --gold-bright:#caa14a; --cyan:#2563b8; --ink:#1d2a4d; --ink-soft:rgba(29,42,77,.80); --ink-faint:rgba(29,42,77,.52); --glass-chip:rgba(255,255,255,.45); --glass-panel:rgba(255,255,255,.58); --glass-panel-2:rgba(255,255,255,.48); --glass-border:rgba(255,255,255,.75); --glass-border-soft:rgba(255,255,255,.55); --blur:blur(22px) saturate(1.2); --panel-shadow:0 18px 44px rgba(45,62,110,.12), inset 0 1px 0 rgba(255,255,255,.85); --hero-shadow:0 24px 60px rgba(45,62,110,.16), inset 0 1px 0 rgba(255,255,255,.9); --hero-bg:linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.42)); --chip-border:1px solid rgba(29,42,77,.14); --sectitle-fade:linear-gradient(90deg, rgba(161,106,31,.45), transparent); --vine-line:rgba(106,138,96,.50); --leaf-fill:rgba(136,168,118,.30); --bfly-line:rgba(161,106,31,.50); --field: radial-gradient(900px 600px at 12% -8%, rgba(147,170,240,.40), transparent 60%), radial-gradient(800px 700px at 108% 18%, rgba(125,196,235,.35), transparent 55%), radial-gradient(900px 800px at 80% 112%, rgba(238,178,158,.30), transparent 55%), radial-gradient(700px 600px at -10% 90%, rgba(168,212,170,.28), transparent 55%), linear-gradient(160deg, #e8eefb 0%, #eef2fa 45%, #e6ecf7 100%); } /* ---------- B · GLASS · DARK + BUTTERFLIES ---------- */ :root[data-theme="glass"][data-mode="dark"]{ --gold:#f2c14e; --gold-soft:#f6d27a; --gold-bright:#f6d27a; --cyan:#7fd4ff; --ink:#f4f8ff; --ink-soft:rgba(244,248,255,.78); --ink-faint:rgba(244,248,255,.55); --glass-chip:rgba(255,255,255,.08); --glass-panel:rgba(30,41,69,.55); --glass-panel-2:rgba(20,28,50,.50); --glass-border:rgba(255,255,255,.30); --glass-border-soft:rgba(255,255,255,.16); --blur:blur(22px) saturate(1.25); --panel-shadow:0 18px 44px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18); --hero-shadow:0 24px 60px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.2); --hero-bg:linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); --chip-border:1px solid var(--glass-border-soft); --sectitle-fade:linear-gradient(90deg, rgba(242,193,78,.6), transparent); --vine-line:rgba(126,158,116,.55); --leaf-fill:rgba(146,178,128,.32); --bfly-line:rgba(242,193,78,.62); --field: radial-gradient(900px 600px at 12% -8%, rgba(99,102,241,.45), transparent 60%), radial-gradient(800px 700px at 108% 18%, rgba(56,189,248,.30), transparent 55%), radial-gradient(900px 800px at 80% 112%, rgba(236,99,140,.28), transparent 55%), radial-gradient(700px 600px at -10% 90%, rgba(245,193,78,.22), transparent 55%), linear-gradient(160deg, #0a1024 0%, #0b1230 45%, #070b1c 100%); } /* ---------- C · HERITAGE · LIGHT (parchment) ---------- */ :root[data-theme="heritage"][data-mode="light"]{ --font:"EB Garamond", Georgia, serif; --font-display:"Cormorant Garamond","Playfair Display", Georgia, serif; --gold:#9c7b2e; --gold-soft:#8a6a2f; --gold-bright:#caa14a; --cyan:#5b6e8c; --ink:#2c2417; --ink-soft:rgba(44,36,23,.82); --ink-faint:rgba(44,36,23,.55); --glass-chip:rgba(250,244,228,.85); --glass-panel:rgba(250,244,228,.88); --glass-panel-2:rgba(245,236,214,.82); --glass-border:rgba(156,123,46,.55); --glass-border-soft:rgba(156,123,46,.40); --blur:none; --panel-shadow:0 2px 0 rgba(156,123,46,.25), 0 14px 30px rgba(60,45,20,.12); --hero-shadow:0 2px 0 rgba(156,123,46,.3), 0 18px 36px rgba(60,45,20,.16); --hero-bg:rgba(250,244,228,.92); --chip-border:1px solid rgba(156,123,46,.45); --sectitle-fade:linear-gradient(90deg, rgba(156,123,46,.55), transparent); --radius-panel:6px; --radius-hero:8px; --vine-line:rgba(156,123,46,.6); --leaf-fill:rgba(176,143,66,.32); --bfly-line:rgba(156,123,46,.7); --rule:rgba(156,123,46,.55); --field: radial-gradient(1200px 900px at 50% 0%, rgba(244,236,214,.9), transparent 70%), radial-gradient(600px 500px at 0% 100%, rgba(214,196,150,.35), transparent 60%), radial-gradient(600px 500px at 100% 100%, rgba(214,196,150,.30), transparent 60%), linear-gradient(180deg, #f6efda 0%, #f1e7cc 100%); } /* ---------- C · HERITAGE · DARK (candle-lit leather) ---------- */ :root[data-theme="heritage"][data-mode="dark"]{ --font:"EB Garamond", Georgia, serif; --font-display:"Cormorant Garamond","Playfair Display", Georgia, serif; --gold:#caa14a; --gold-soft:#b8923f; --gold-bright:#e3c474; --cyan:#9fb0c8; --ink:#efe3c8; --ink-soft:rgba(239,227,200,.82); --ink-faint:rgba(239,227,200,.55); --glass-chip:rgba(40,32,20,.7); --glass-panel:rgba(36,28,18,.85); --glass-panel-2:rgba(26,20,12,.82); --glass-border:rgba(202,161,74,.45); --glass-border-soft:rgba(202,161,74,.30); --blur:none; --panel-shadow:0 2px 0 rgba(202,161,74,.22), 0 16px 34px rgba(0,0,0,.45); --hero-shadow:0 2px 0 rgba(202,161,74,.28), 0 20px 40px rgba(0,0,0,.5); --hero-bg:rgba(36,28,18,.9); --chip-border:1px solid rgba(202,161,74,.4); --sectitle-fade:linear-gradient(90deg, rgba(202,161,74,.6), transparent); --radius-panel:6px; --radius-hero:8px; --vine-line:rgba(202,161,74,.55); --leaf-fill:rgba(202,161,74,.30); --bfly-line:rgba(202,161,74,.66); --rule:rgba(202,161,74,.5); --field: radial-gradient(1000px 800px at 50% 0%, rgba(58,44,24,.7), transparent 70%), radial-gradient(600px 500px at 0% 100%, rgba(40,30,16,.6), transparent 60%), linear-gradient(180deg, #241c12 0%, #1a140c 100%); } /* ===================================================================== BASE — everything below reads ONLY from the tokens above ===================================================================== */ body{ font-family:var(--font) !important; color:var(--ink); line-height:1.55; background:var(--field) fixed !important; position:relative; } @supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){ :root{ --glass-panel:rgba(255,255,255,.92); --glass-panel-2:rgba(255,255,255,.9); } } h1,h2,h3,h4,h5,h6,.quarto-title h1.title{ font-family:var(--font-display); color:var(--ink); font-weight:700; letter-spacing:-0.01em; } p,li,td,th,dd,dt,.quarto-title-block .description{ color:var(--ink-soft); } a{ color:var(--cyan); text-decoration:none; } a:hover{ color:var(--gold); } :focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; border-radius:4px; } /* ---- Glass panel utility + Quarto card mapping ---- */ .panel, .quarto-listing .card, .callout, pre, .on-card, .ml-viz, .lib-hero, .mlg-hero{ border-radius:var(--radius-panel); background:var(--glass-panel) !important; border:1px solid var(--glass-border-soft) !important; box-shadow:var(--panel-shadow) !important; -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); } .quarto-listing .card{ overflow:hidden; transition:transform .18s, box-shadow .18s; } .quarto-listing .card:hover{ transform:translateY(-4px); } .quarto-listing .card-title,.listing-title{ font-family:var(--font-display); color:var(--ink); } .quarto-listing .card-text,.listing-description{ color:var(--ink-soft); } /* heritage double-rule inner frame */ :root[data-theme="heritage"] .panel, :root[data-theme="heritage"] .quarto-listing .card{ position:relative; } :root[data-theme="heritage"] .panel::before, :root[data-theme="heritage"] .quarto-listing .card::before{ content:""; position:absolute; inset:6px; border:1px solid var(--glass-border-soft); border-radius:3px; pointer-events:none; z-index:1; } /* ---- Pills / tags / categories ---- */ .quarto-categories .quarto-category,.listing-category, .glass-pill{ border-radius:var(--radius-pill); background:var(--glass-chip) !important; border:var(--chip-border) !important; color:var(--ink-soft) !important; font-weight:600; letter-spacing:.02em; text-transform:none; } /* ---- Section title ---- */ .sec-title{ font-size:.7rem; font-weight:800; letter-spacing:2.4px; text-transform:uppercase; color:var(--gold); display:flex; align-items:center; gap:8px; } .sec-title::after{ content:""; flex:1; height:1px; background:var(--sectitle-fade); } /* ---- Navbar = frosted pill bar ---- */ .navbar{ background:var(--glass-panel) !important; border:1px solid var(--glass-border-soft); border-radius:var(--radius-pill); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); box-shadow:var(--panel-shadow); margin:.7rem auto; max-width:calc(var(--maxw) + 40px); width:calc(100% - 2rem); padding:.5rem 1.1rem; } .navbar .navbar-brand{ color:var(--ink) !important; font-family:var(--font-display); font-weight:800; } .navbar .nav-link,.navbar .nav-link i{ color:var(--ink-soft) !important; font-weight:600; } .navbar .nav-link:hover,.navbar .nav-link.active{ color:var(--gold) !important; } .navbar .dropdown-menu{ background:var(--glass-panel) !important; -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--glass-border-soft); border-radius:16px; box-shadow:var(--panel-shadow); } .navbar .dropdown-menu .dropdown-item,.navbar .dropdown-menu a{ color:var(--ink) !important; border-radius:10px; } .navbar .dropdown-menu .dropdown-item:hover{ background:var(--glass-chip); color:var(--gold) !important; } /* ---- Code ---- */ code{ background:var(--glass-chip); color:var(--gold); border-radius:6px; padding:.1em .4em; } pre code{ background:transparent; color:var(--ink); } /* ---- Buttons ---- */ .btn-primary,.about-link.btn,a.about-link{ border-radius:var(--radius-pill); background:var(--glass-chip) !important; border:var(--chip-border) !important; color:var(--ink) !important; -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); box-shadow:var(--panel-shadow); } .btn-primary:hover,a.about-link:hover{ color:var(--gold) !important; } /* ---- Footer / TOC ---- */ #TOC a{ color:var(--ink-faint); } #TOC a:hover,#TOC a.active{ color:var(--gold); } #quarto-footer,.nav-footer{ background:transparent !important; border-top:1px solid var(--glass-border-soft); color:var(--ink-faint); } .nav-footer a{ color:var(--cyan); } /* ---- About-trestles hero as a glass header card ---- */ .quarto-about-trestles .about-entity, .quarto-about-trestles .about-contents{ background:var(--hero-bg); border:1px solid var(--glass-border); border-radius:var(--radius-hero); box-shadow:var(--hero-shadow); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); padding:1.6rem 1.5rem; } .quarto-about-trestles{ gap:2rem; max-width:1296px; margin-inline:auto; } .quarto-about-trestles .about-contents{ max-width:none; } .quarto-about-trestles .about-image{ border-radius:50%; border:3px solid rgba(255,255,255,.95); box-shadow:0 10px 30px rgba(45,62,110,.25); } :root[data-theme="heritage"] .quarto-about-trestles .about-image{ border-color:var(--gold-bright); } .about-link{ background:var(--glass-chip) !important; border:var(--chip-border) !important; border-radius:var(--radius-pill); color:var(--ink) !important; } /* ===================================================================== THEME SWITCHER (injected by theme-switch.js) ===================================================================== */ #theme-switch{ position:fixed; bottom:16px; right:16px; z-index:1000; display:flex; gap:6px; align-items:center; padding:6px; border-radius:var(--radius-pill); background:var(--glass-panel); border:1px solid var(--glass-border-soft); box-shadow:var(--panel-shadow); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); } #theme-switch button{ font-family:var(--font); font-size:.74rem; font-weight:700; letter-spacing:.04em; border:1px solid transparent; border-radius:var(--radius-pill); padding:.32rem .7rem; cursor:pointer; color:var(--ink-soft); background:transparent; } #theme-switch button.active{ background:var(--glass-chip); border-color:var(--glass-border-soft); color:var(--gold); } #theme-switch .ts-sep{ width:1px; height:18px; background:var(--glass-border-soft); margin:0 2px; } #theme-switch .ts-mode{ display:flex; align-items:center; gap:7px; font-size:.78rem; padding:.4rem .85rem; } #theme-switch .ts-mode .ts-ic{ font-size:1rem; } /* ===================================================================== DECORATION LAYER ===================================================================== */ .deco-layer{ position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; } .deco-layer .vine{ position:absolute; width:60px; opacity:1; } .deco-layer .bfly{ position:absolute; } .deco-layer .flourish{ position:absolute; opacity:.55; } .deco-layer .bfly{ opacity:.9; } :root[data-theme="glass"][data-mode="light"] .deco-layer .vine{ opacity:.85; } :root[data-theme="glass"][data-mode="light"] .deco-layer .flourish{ opacity:.5; } :root[data-theme="glass"][data-mode="dark"] .deco-layer .flourish{ opacity:.6; } .quarto-container, main, .page-columns{ position:relative; z-index:2; } @media (prefers-reduced-motion:reduce){ *{ scroll-behavior:auto !important; } } @media (max-width:768px){ #theme-switch{ bottom:12px; right:12px; } .deco-layer .vine{ opacity:.4; } .deco-layer .flourish{ width:64px !important; height:64px !important; } }