/* ============================================================================ aesthetecoding.io — "Atelier Synthesis" Faithful extraction of the approved design study (C+). One stylesheet. Theming + state live on . Every rule is scoped to .acx so the design is self-contained. ========================================================================== */ /* --------------------------------------------------------------------------- SELF-HOSTED FONTS (no third-party requests) Newsreader & Public Sans are variable; IBM Plex Mono is static 400/500. --------------------------------------------------------------------------- */ @font-face{ font-family:"Newsreader"; font-style:normal; font-weight:200 800; font-optical-sizing:auto; font-display:swap; src:url("fonts/Newsreader.woff2") format("woff2"); } @font-face{ font-family:"Newsreader"; font-style:italic; font-weight:200 800; font-optical-sizing:auto; font-display:swap; src:url("fonts/Newsreader-Italic.woff2") format("woff2"); } @font-face{ font-family:"Public Sans"; font-style:normal; font-weight:100 900; font-display:swap; src:url("fonts/PublicSans.ttf") format("truetype"); } @font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/IBMPlexMono-Regular.woff2") format("woff2"); } @font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/IBMPlexMono-Medium.woff2") format("woff2"); } /* --------------------------------------------------------------------------- TOKENS — change these to retheme globally --------------------------------------------------------------------------- */ .acx{ /* type families */ --news:"Newsreader", Georgia, serif; /* display / headings / body serif */ --serif:"Newsreader", Georgia, serif; /* article reading column */ --sans:"Public Sans", system-ui, sans-serif; /* UI */ --mono:"IBM Plex Mono", ui-monospace, monospace; /* meta / code / wordmark */ /* brand accents (shared across themes) */ --amber:#efa23c; --red:#e23b2e; --green:#37a14f; --blue:#1f9be0; /* structure */ --maxw:1060px; /* content width */ --readw:680px; /* reading column width */ --pad:40px; /* page side padding */ --radius:16px; /* large cards / covers */ --radius-md:12px; /* code blocks / hero img */ --radius-sm:8px; /* toggles */ --radius-pill:999px; /* chips / tags / provenance */ /* font-size control (driven by data-font; see toggle rules) */ --fs-scale:1; container-type:inline-size; font-family:var(--sans); color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; line-height:1.6; margin:0; min-height:100vh; } .acx *{ box-sizing:border-box; } /* ---- THEME PALETTES ---- */ .acx[data-theme="dark"]{ --bg:#141009; --bg2:#1c1610; --panel:#1f1813; --line:#30271b; --ink:#f1ece3; --dim:#bcb19c; --faint:#a3957c; --amber-text:#efa23c; --glow:rgba(239,162,60,.34); --cover-a:#1c160e; --cover-b:#241c12; } .acx[data-theme="light"]{ --bg:#f4efe5; --bg2:#fbf7ef; --panel:#fffdf8; --line:#e6dccb; --ink:#1b150c; --dim:#5b5341; --faint:#6b6149; --amber-text:#9a5a12; --glow:rgba(239,162,60,.26); --cover-a:#ebe3d2; --cover-b:#e2d8c4; } /* ---- FONT-SIZE CONTROL ---- */ .acx[data-font="s"]{ --fs-scale:1; } .acx[data-font="m"]{ --fs-scale:1.14; } .acx[data-font="l"]{ --fs-scale:1.28; } /* ---- ECO / PERFORMANCE MODE : drop webfonts → system stacks, kill motion ---- */ .acx[data-eco="on"]{ --news:Georgia, "Times New Roman", serif; --serif:Georgia, "Times New Roman", serif; --sans:system-ui, -apple-system, "Segoe UI", sans-serif; --mono:ui-monospace, "SF Mono", Menlo, monospace; } .acx[data-eco="on"] *{ animation:none !important; transition:none !important; } /* keyboard focus — deliberate amber ring on every interactive control */ .acx a:focus-visible, .acx button:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; border-radius:6px; } .acx a{ color:inherit; } .acx .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); } /* =========================================================================== MASTHEAD (the only header on the index) =========================================================================== */ .acx .mast{ position:relative; overflow:hidden; border-bottom:1px solid var(--line); background: radial-gradient(135% 175% at 50% -30%, var(--glow), transparent 62%), radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--amber) 8%, transparent), transparent 70%), var(--bg); } .acx[data-eco="on"] .mast{ background:var(--bg); } .acx .mast-tools{ position:absolute; top:18px; right:0; left:0; padding:0 var(--pad); display:flex; align-items:center; gap:10px; justify-content:flex-end; } /* segmented toggles (theme + font) */ .acx .seg{ display:inline-flex; background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:3px; gap:2px; } .acx .seg button{ border:0; background:transparent; cursor:pointer; color:var(--faint); font-family:var(--mono); font-size:12px; border-radius:6px; width:28px; height:26px; display:inline-flex; align-items:center; justify-content:center; padding:0; } .acx .seg button svg{ width:15px; height:15px; } .acx .seg.font button:nth-child(1){ font-size:11px; } .acx .seg.font button:nth-child(3){ font-size:14px; } /* active states (driven by data-theme / data-font) */ .acx[data-theme="dark"] .seg.theme [data-v="dark"], .acx[data-theme="light"] .seg.theme [data-v="light"], .acx[data-font="s"] .seg.font [data-v="s"], .acx[data-font="m"] .seg.font [data-v="m"], .acx[data-font="l"] .seg.font [data-v="l"]{ background:var(--amber); color:#14100a; } /* eco leaf toggle */ .acx .leaf{ width:32px; height:32px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--panel); color:var(--faint); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; } .acx .leaf svg{ width:16px; height:16px; } .acx[data-eco="on"] .leaf{ background:rgba(55,161,79,.16); border-color:var(--green); color:var(--green); } /* masthead lockup */ .acx .mast-in{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:58px 0 38px; } .acx .monk{ width:84px; height:auto; display:block; filter:drop-shadow(0 14px 26px rgba(0,0,0,.4)); } .acx[data-eco="on"] .monk{ filter:none; } /* theme-swapped logo (no JS needed) */ .acx .monk.for-light{ display:none; } .acx[data-theme="light"] .monk.for-dark{ display:none; } .acx[data-theme="light"] .monk.for-light{ display:block; } .acx .wordmark{ font-family:var(--mono); font-weight:500; font-size:clamp(22px,4.4cqi,34px); letter-spacing:-.01em; margin:16px 0 0; color:var(--ink); white-space:nowrap; } .acx .wordmark .b{ color:var(--amber-text); font-weight:500; } /* rotating punchline */ .acx .punch{ font-family:var(--news); font-style:italic; font-weight:400; line-height:1.4; font-size:clamp(16px,2.4cqi,22px); color:var(--dim); margin:14px 0 0; white-space:nowrap; } .acx .rot{ display:inline-block; position:relative; margin-right:.16em; } .acx .rot .w{ display:inline-block; color:var(--ink); font-weight:500; will-change:transform,opacity; } /* topics rail under the wordmark */ .acx .mast-topics{ display:flex; align-items:center; justify-content:center; gap:13px; margin:22px 0 2px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--faint); flex-wrap:wrap; } .acx .mast-topics::before, .acx .mast-topics::after{ content:""; height:1px; width:30px; background:var(--line); } .acx .mast-topics a{ color:var(--faint); text-decoration:none; white-space:nowrap; cursor:pointer; } .acx .mast-topics a:hover{ color:var(--amber-text); } .acx .mast-topics a.on{ color:var(--amber-text); border-bottom:1.5px solid var(--amber); } .acx .mast-topics .sep{ opacity:.45; } /* =========================================================================== FEATURED (À la une) =========================================================================== */ .acx .feat-wrap{ padding:42px 0 6px; } .acx .feat{ display:grid; grid-template-columns:1.18fr .95fr; gap:38px; align-items:center; } .acx .feat .eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--amber-text); display:flex; align-items:center; gap:11px; margin-bottom:18px; } .acx .feat .eyebrow::after{ content:""; height:1px; width:54px; background:linear-gradient(90deg,var(--amber),transparent); } .acx .feat h2{ font-family:var(--news); font-weight:500; font-size:clamp(calc(28px*var(--fs-scale)),4.4cqi,calc(44px*var(--fs-scale))); line-height:1.06; letter-spacing:-.018em; margin:0 0 16px; text-wrap:balance; } .acx .feat p{ color:var(--dim); font-size:calc(16px*var(--fs-scale)); margin:0 0 22px; max-width:44ch; } .acx .feat .meta{ font-family:var(--mono); font-size:12px; color:var(--faint); display:flex; gap:13px; align-items:center; flex-wrap:wrap; } .acx .feat .meta>*{ white-space:nowrap; } .acx .feat .meta .cat{ color:var(--ink); display:inline-flex; align-items:center; gap:7px; } .acx .feat .meta .cat::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--blue); } .acx .feat .cta{ display:inline-flex; align-items:center; gap:8px; margin-top:24px; font-family:var(--mono); font-size:13px; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--amber); padding-bottom:4px; white-space:nowrap; } .acx .feat .cta .ar{ color:var(--amber-text); } .acx .feat .ph{ aspect-ratio:5/4; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); position:relative; } /* =========================================================================== SECTION HEAD + TAG FILTER =========================================================================== */ .acx .sec{ display:flex; align-items:baseline; gap:14px; padding:46px 0 2px; } .acx .sec h2{ font-family:var(--news); font-weight:500; font-size:24px; letter-spacing:-.01em; margin:0; } .acx .sec .ct{ font-family:var(--mono); font-size:12px; color:var(--faint); } .acx .sec .rule{ flex:1; height:1px; background:var(--line); } .acx .filter{ display:flex; gap:8px; padding:18px 0 8px; overflow-x:auto; } .acx .chip{ font-family:var(--mono); font-size:12px; white-space:nowrap; border:1px solid var(--line); background:transparent; color:var(--dim); border-radius:var(--radius-pill); padding:6px 14px; cursor:pointer; } .acx .chip:hover{ border-color:var(--amber); color:var(--ink); } .acx .chip.on{ background:var(--ink); color:var(--bg); border-color:var(--ink); } /* =========================================================================== POST LIST (stripped, scannable rows) =========================================================================== */ .acx .list{ padding:6px 0 8px; } .acx .row{ display:grid; grid-template-columns:72px 1fr auto; gap:22px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; } .acx .row .thumb{ width:72px; height:72px; border-radius:11px; overflow:hidden; border:1px solid var(--line); position:relative; } .acx .row .mid{ min-width:0; } .acx .row h3{ font-family:var(--news); font-weight:500; font-size:calc(20px*var(--fs-scale)); line-height:1.2; letter-spacing:-.012em; margin:0 0 7px; text-wrap:pretty; transition:color .18s ease; } .acx .row:hover h3{ color:var(--amber-text); } .acx .row .m{ font-family:var(--mono); font-size:11px; color:var(--faint); display:flex; gap:11px; align-items:center; flex-wrap:wrap; } .acx .row .m > *{ white-space:nowrap; } .acx .row .m .cat{ display:inline-flex; align-items:center; gap:6px; color:var(--dim); } .acx .row .m .cat::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--cat,var(--amber)); } .acx .row .date{ font-family:var(--mono); font-size:12px; color:var(--faint); white-space:nowrap; } /* cover placeholders + eco icon tiles */ .acx .cover{ position:absolute; inset:0; background:repeating-linear-gradient(135deg,var(--cover-a) 0 10px,var(--cover-b) 10px 20px); display:flex; align-items:flex-end; } /* real cover image — layers over the striped placeholder, cropped by object-fit. per-card focal point via --focus (e.g. style="--focus:78% 40%") keeps the subject in frame. */ .acx .cover-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--focus,50% 50%); display:block; } .acx[data-eco="on"] .cover-img{ display:none; } .acx .cover .lbl{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); background:color-mix(in srgb,var(--bg) 72%,transparent); border:1px solid var(--line); border-radius:6px; padding:4px 8px; margin:12px; } .acx .ico{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; flex-direction:column; gap:9px; background:var(--bg2); color:var(--cat,var(--amber)); } .acx .ico svg{ width:30px; height:30px; } .acx .ico .gl{ font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); } .acx .row .thumb .ico svg{ width:26px; height:26px; } .acx .row .thumb .ico .gl{ display:none; } .acx[data-eco="on"] .cover{ display:none; } .acx[data-eco="on"] .ico{ display:flex; } /* eco: shrink the featured tile to a compact thumb */ .acx[data-eco="on"] .feat{ grid-template-columns:1fr 140px; align-items:center; } .acx[data-eco="on"] .feat .ph{ aspect-ratio:1; border-radius:14px; } .acx[data-eco="on"] .feat .ico{ gap:7px; } .acx[data-eco="on"] .feat .ico svg{ width:28px; height:28px; } /* =========================================================================== POST-GENERATION PROVENANCE BADGE =========================================================================== */ .acx .prov{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); border:1px solid var(--line); border-radius:var(--radius-pill); padding:3px 9px; white-space:nowrap; } .acx .prov .pg{ display:inline-flex; color:var(--prov,var(--faint)); } .acx .prov .pg svg{ width:12px; height:12px; } .acx .prov-full .pg svg{ width:15px; height:15px; margin:-1px -1px -2px; } .acx .prov-none{ --prov:var(--green); } .acx .prov-enriched{ --prov:var(--amber-text); } .acx .prov-full{ --prov:var(--blue); } .acx .m .prov{ border:0; padding:0; gap:5px; } /* inline variant in list rows */ .acx .read .prov{ margin-top:16px; } /* format indicator — shown when an entry is a slide-deck (meta.json "format": "deck") */ .acx .fmt-slides{ display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--blue); border:1px solid var(--line); border-radius:var(--radius-pill); padding:3px 9px; white-space:nowrap; } .acx .fmt-slides svg{ width:12px; height:12px; } .acx .m .fmt-slides{ border:0; padding:0; gap:5px; } /* =========================================================================== FOOTER (index) — social links live here =========================================================================== */ .acx .foot{ border-top:1px solid var(--line); margin-top:16px; padding:30px 0 56px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; font-family:var(--mono); font-size:12px; color:var(--faint); } .acx .foot .foot-social{ display:flex; gap:4px; } .acx .foot .foot-social a{ width:34px; height:34px; border:1px solid var(--line); border-radius:var(--radius-sm); display:inline-flex; align-items:center; justify-content:center; color:var(--faint); } .acx .foot .foot-social a:hover{ color:var(--ink); border-color:var(--amber); } .acx .foot .foot-social svg{ width:17px; height:17px; } .acx .foot .foot-text{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end; text-align:right; } .acx .foot .fpunch{ font-family:var(--news); font-style:italic; font-size:15px; color:var(--dim); } .acx .foot .b{ color:var(--amber-text); } /* =========================================================================== READING VIEW (article page) =========================================================================== */ .acx .rbar{ position:relative; border-bottom:1px solid var(--line); background:radial-gradient(120% 320% at 16% -120%, var(--glow), transparent 50%), var(--bg); } .acx[data-eco="on"] .rbar{ background:var(--bg); } .acx .rbar-in{ display:flex; align-items:center; gap:14px; padding:18px 0; } .acx .rbar .brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); } .acx .rbar .brand img{ width:42px; height:auto; } .acx .rbar .brand img.for-light{ display:none; } .acx[data-theme="light"] .rbar .brand img.for-dark{ display:none; } .acx[data-theme="light"] .rbar .brand img.for-light{ display:block; } .acx .rbar .brand .wm{ font-family:var(--mono); font-size:17px; font-weight:500; white-space:nowrap; letter-spacing:-.01em; } .acx .rbar .brand .wm .b{ color:var(--amber-text); } .acx .rbar .sp{ flex:1; } /* reading-bar toggles: static (not absolute like the masthead's) */ .acx .rbar .mast-tools{ position:static; padding:0; justify-content:flex-end; } .acx .read .rhead{ max-width:var(--readw); margin:0 auto; padding:42px var(--pad) 0; } .acx .read .back{ font-family:var(--mono); font-size:12px; color:var(--faint); text-decoration:none; } .acx .read .back:hover{ color:var(--amber-text); } .acx .read .kick{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber-text); margin:26px 0 14px; display:flex; align-items:center; gap:8px; } .acx .read h1{ font-family:var(--news); font-weight:500; font-size:clamp(calc(30px*var(--fs-scale)),5cqi,calc(46px*var(--fs-scale))); line-height:1.05; letter-spacing:-.02em; margin:0; text-wrap:balance; } .acx .read .byl{ font-family:var(--mono); font-size:12px; color:var(--faint); margin:18px 0 0; display:flex; gap:13px; flex-wrap:wrap; } .acx .read .byl > *{ white-space:nowrap; } .acx .read .byl b{ color:var(--ink); font-weight:500; } .acx .read .heroimg{ max-width:920px; margin:32px auto 24px; padding:0 var(--pad); } .acx .read .heroimg .ph{ aspect-ratio:16/9; border-radius:14px; border:1px solid var(--line); position:relative; overflow:hidden; } .acx .read .eco-cap{ display:none; max-width:var(--readw); margin:32px auto 0; padding:0 var(--pad); } .acx .read .eco-cap .b2{ display:flex; align-items:center; gap:14px; border:1px dashed var(--line); border-radius:var(--radius-md); padding:16px 18px; color:var(--faint); font-family:var(--mono); font-size:12px; } .acx .read .eco-cap svg{ width:22px; height:22px; color:var(--green); flex:0 0 auto; } .acx[data-eco="on"] .read .heroimg{ display:none; } .acx[data-eco="on"] .read .eco-cap{ display:block; } .acx .read .col{ max-width:var(--readw); margin:0 auto; padding:6px var(--pad) 0; } .acx .read .col p{ font-family:var(--serif); font-size:calc(19px*var(--fs-scale)); line-height:1.74; margin:24px 0; color:var(--ink); } .acx .read .col p:first-of-type::first-letter{ font-size:3em; float:left; line-height:.86; padding:6px 12px 0 0; color:var(--amber-text); font-weight:600; font-family:var(--news); } .acx .read .col h2{ font-family:var(--news); font-weight:600; font-size:calc(27px*var(--fs-scale)); letter-spacing:-.01em; margin:40px 0 4px; } .acx .read .col pre{ font-family:var(--mono); font-size:13px; line-height:1.7; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-md); padding:18px 20px; overflow-x:auto; margin:26px 0; color:var(--dim); } .acx .read .col pre .c{ color:var(--faint); } .acx .read .col pre .k{ color:var(--amber-text); } .acx .read .col pre .s{ color:var(--green); } .acx .read .col blockquote{ margin:30px 0; padding-left:22px; border-left:3px solid var(--amber); font-family:var(--news); font-style:italic; font-size:calc(21px*var(--fs-scale)); color:var(--dim); } /* =========================================================================== END-OF-ARTICLE COLOPHON (arrangement B — inverted pyramid) =========================================================================== */ .acx .colo{ max-width:760px; margin:50px auto 0; padding:0 var(--pad); } .acx .colo-card{ border:1px solid var(--line); border-radius:var(--radius); padding:48px 40px; text-align:center; } .acx .colo-lock{ display:flex; flex-direction:column; align-items:center; gap:16px; max-width:520px; margin:0 auto; } .acx .colo .big{ font-family:var(--news); font-style:italic; font-size:28px; line-height:1.12; color:var(--ink); margin:0; text-wrap:balance; } .acx .colo .sub{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber-text); margin:0; } .acx .colo .wm-monk{ width:104px; height:auto; margin-top:-14px; pointer-events:none; } .acx .colo .wm-monk.for-light{ display:none; } .acx[data-theme="light"] .colo .wm-monk.for-dark{ display:none; } .acx[data-theme="light"] .colo .wm-monk.for-light{ display:block; } /* =========================================================================== RESPONSIVE =========================================================================== */ @container (max-width:720px){ .acx{ --pad:20px; } .acx .mast-tools{ position:static; padding:14px 20px 0; justify-content:center; flex-wrap:wrap; } .acx .mast-in{ padding:24px 0 30px; } .acx .monk{ width:72px; } /* touch targets ≥ 40px */ .acx .seg button{ width:40px; height:40px; } .acx .seg button svg{ width:18px; height:18px; } .acx .leaf{ width:42px; height:42px; } .acx .leaf svg{ width:20px; height:20px; } .acx .feat{ grid-template-columns:1fr; gap:22px; } .acx .feat .ph{ aspect-ratio:16/10; order:-1; } .acx .punch{ white-space:normal; } .acx .row{ grid-template-columns:56px 1fr; } .acx .row .thumb{ width:56px; height:56px; } .acx .row .date{ display:none; } .acx .rbar-in{ padding:14px 0; } .acx .rbar-in{ flex-wrap:wrap; gap:10px 12px; } .acx .rbar .sp{ display:none; } .acx .rbar .mast-tools{ width:100%; justify-content:flex-start; padding:0; } .acx .foot{ justify-content:center; text-align:center; } .acx .foot .foot-text{ justify-content:center; text-align:center; } }