697 lines
52 KiB
CSS
697 lines
52 KiB
CSS
/* ==================================================================
|
|
AnwarPi design system v2 — "lattice"
|
|
Identity: the triangle-lattice mark. Graphite surfaces, a silver
|
|
luminance ramp borrowed from the logo, one champagne accent kept for
|
|
the signature triangle, members-only marks and the primary hover.
|
|
Type: IBM Plex Sans Arabic throughout; hierarchy comes from weight and size.
|
|
Loaded last; v2 pages are scoped with #site.v2, shared chrome
|
|
(header, footer, buttons, fields) applies to every page.
|
|
================================================================== */
|
|
|
|
:root {
|
|
--ink: #131519;
|
|
--ink-2: #17191d;
|
|
--basalt: #1c1f24;
|
|
--seam: #2b2f36;
|
|
--seam-2: #3a3f47;
|
|
--mist: #ece9e3;
|
|
--stone: #a3a09a;
|
|
--dim: #7b7974;
|
|
--champagne: #d4b47c;
|
|
--champagne-ink: #1a150c;
|
|
|
|
/* legacy aliases so older page sheets follow the new palette */
|
|
--bg: var(--ink);
|
|
--surface: var(--basalt);
|
|
--fg: var(--mist);
|
|
--muted: var(--stone);
|
|
--border: var(--seam);
|
|
--accent: var(--champagne);
|
|
--accent-ink: var(--champagne-ink);
|
|
|
|
--font-display: var(--font-sans), "Segoe UI", sans-serif;
|
|
--font-body: var(--font-sans), "SF Arabic", "Segoe UI", sans-serif;
|
|
|
|
--wrap: 1200px;
|
|
--gutter: clamp(18px, 4vw, 40px);
|
|
--r-sm: 8px;
|
|
--r-md: 12px;
|
|
--r-lg: 18px;
|
|
}
|
|
|
|
body { background: var(--ink); color: var(--mist); }
|
|
#site {
|
|
background: var(--ink);
|
|
color: var(--mist);
|
|
font: 400 17px/1.85 var(--font-body);
|
|
}
|
|
#site :is(h1, h2, h3) { font-family: var(--font-display); font-weight: 700; letter-spacing: 0; color: var(--mist); text-wrap: balance; }
|
|
#site h1 { font-size: clamp(36px, 4.6vw, 60px); line-height: 1.3; max-width: none; }
|
|
#site h2 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.4; margin: 0; }
|
|
#site h3 { font-size: 21px; line-height: 1.5; }
|
|
#site p { margin: 0; }
|
|
#site a { color: inherit; }
|
|
#site ::selection { background: color-mix(in oklch, var(--champagne) 35%, transparent); }
|
|
#site :focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; border-radius: 4px; }
|
|
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
|
|
|
|
#site .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
|
|
#site .wrap.narrow { max-width: 860px; }
|
|
#site .lede { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.9; color: var(--stone); max-width: 58ch; }
|
|
#site .muted { color: var(--stone); }
|
|
#site .fine { font-size: 13px; color: var(--dim); }
|
|
#site .text-link { color: var(--mist); text-decoration: underline; text-decoration-color: var(--seam-2); text-underline-offset: 5px; text-decoration-thickness: 1px; font-weight: 500; min-height: 0; display: inline; }
|
|
#site .text-link:hover { text-decoration-color: var(--champagne); color: var(--mist); }
|
|
|
|
/* ---------- Buttons ---------- */
|
|
#site .btn {
|
|
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
|
min-height: 48px; padding: 10px 22px; border-radius: var(--r-sm);
|
|
font: 600 15px/1.4 var(--font-body); border: 1px solid transparent;
|
|
transition: background-color .18s ease, border-color .18s ease, color .18s ease;
|
|
transform: none; box-shadow: none; text-decoration: none; white-space: nowrap;
|
|
}
|
|
#site .btn::after { content: none; }
|
|
#site .btn:hover { transform: none; box-shadow: none; }
|
|
#site .btn-primary { background: var(--mist); border-color: var(--mist); color: var(--ink); }
|
|
#site .btn-primary:hover { background: var(--champagne); border-color: var(--champagne); color: var(--champagne-ink); }
|
|
#site :is(.btn-quiet, .btn-secondary, .btn-ghost) { background: transparent; border-color: var(--seam-2); color: var(--mist); }
|
|
#site :is(.btn-quiet, .btn-secondary, .btn-ghost):hover { border-color: var(--mist); background: transparent; color: var(--mist); }
|
|
#site .btn:disabled { opacity: .6; cursor: wait; }
|
|
#site .actions { display: flex; flex-wrap: wrap; gap: 12px; }
|
|
|
|
/* ---------- Badges & meta ---------- */
|
|
#site .badge {
|
|
display: inline-flex; align-items: center; gap: 6px; height: 26px; padding-inline: 10px;
|
|
border: 1px solid var(--seam-2); border-radius: 999px; font: 500 12.5px/1 var(--font-body); color: var(--stone);
|
|
}
|
|
#site .badge svg { width: 12px; height: 12px; }
|
|
#site .badge-vip { border-color: color-mix(in oklch, var(--champagne) 60%, transparent); color: var(--champagne); }
|
|
#site .meta-row { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13.5px; color: var(--dim); }
|
|
#site .meta-row > span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--seam-2); margin-inline-end: 14px; vertical-align: middle; }
|
|
#site .for-you { color: var(--champagne); }
|
|
|
|
/* ---------- Header ---------- */
|
|
#site .site-header {
|
|
position: sticky; top: 0; z-index: 40;
|
|
background: color-mix(in oklch, var(--ink) 88%, transparent);
|
|
backdrop-filter: saturate(140%) blur(14px);
|
|
border-bottom: 1px solid var(--seam);
|
|
}
|
|
#site .site-header .nav-inner { max-width: var(--wrap); padding-inline: var(--gutter); min-height: 72px; gap: 28px; }
|
|
#site .site-header .logo { font: 600 21px/1 var(--font-display); gap: 12px; color: var(--mist); }
|
|
#site .site-header img.logo-mark, #site .menu-head img.logo-mark, #site .site-footer img.logo-mark { width: 34px; height: 30px; }
|
|
#site .site-header nav.nav-links { gap: 4px; margin-inline-start: auto; }
|
|
#site .site-header nav.nav-links a { color: var(--stone); font: 500 15px/1 var(--font-body); padding: 10px 14px; border-radius: var(--r-sm); background: none; }
|
|
#site .site-header nav.nav-links a:hover { color: var(--mist); background: none; }
|
|
#site .site-header nav.nav-links a[aria-current=page] { color: var(--mist); background: none; box-shadow: inset 0 -2px 0 var(--champagne); border-radius: 0; }
|
|
#site .site-header .nav-login, #site .menu-foot .nav-login {
|
|
min-height: 40px; padding: 8px 16px; border-radius: var(--r-sm); border: 1px solid var(--seam-2);
|
|
font: 600 14px/1 var(--font-body); color: var(--mist); background: transparent;
|
|
}
|
|
#site .site-header .nav-login:hover { border-color: var(--mist); }
|
|
#site .icon-btn { border-radius: var(--r-sm); border-color: var(--seam-2); background: transparent; color: var(--mist); }
|
|
#site .menu-drawer { background: var(--ink); border-color: var(--seam); }
|
|
#site .menu-links a { font: 600 22px/1.4 var(--font-display); border-color: var(--seam); }
|
|
#site .menu-links a span { color: var(--dim); }
|
|
#site .skip-link { background: var(--mist); color: var(--ink); }
|
|
|
|
/* ---------- Footer ---------- */
|
|
#site .site-footer { border-top: 1px solid var(--seam); background: var(--ink); padding-block: 56px 32px; margin-top: 0; }
|
|
#site .site-footer .container { max-width: var(--wrap); padding-inline: var(--gutter); }
|
|
#site .site-footer .logo { font: 600 20px/1 var(--font-display); gap: 12px; }
|
|
#site .site-footer .footer-col strong { font: 600 14px/1.6 var(--font-body); color: var(--mist); }
|
|
#site .site-footer .footer-col a { color: var(--stone); font-size: 14.5px; min-height: 36px; }
|
|
#site .site-footer .footer-col a:hover { color: var(--mist); }
|
|
#site .site-footer .footer-bottom { border-top-color: var(--seam); color: var(--dim); font-size: 13px; margin-top: 40px; }
|
|
|
|
/* ---------- Fields (all pages) ---------- */
|
|
#site :is(.input, .textarea, .control, .field input:not([type=checkbox]):not([type=radio]), select, textarea) {
|
|
background: var(--ink-2); border: 1px solid var(--seam-2); border-radius: var(--r-sm); color: var(--mist);
|
|
}
|
|
#site :is(.input, .textarea, .control, select, textarea):focus { outline: none; border-color: var(--champagne); box-shadow: 0 0 0 3px color-mix(in oklch, var(--champagne) 20%, transparent); }
|
|
#site .field label, #site label > .filter-label { font: 500 14px/1.6 var(--font-body); color: var(--stone); }
|
|
#site .eyebrow, #site .crumb { font: 500 14px/1.6 var(--font-body); color: var(--champagne); letter-spacing: 0; text-transform: none; }
|
|
|
|
/* ---------- Section heads ---------- */
|
|
#site .section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 40px; margin-bottom: 36px; }
|
|
#site .section-head p { color: var(--stone); max-width: 52ch; }
|
|
|
|
/* ==================================================================
|
|
HOME
|
|
================================================================== */
|
|
#site.v2-home .home-hero { padding-block: clamp(56px, 8vw, 104px) clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--seam); }
|
|
#site.v2-home .home-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
|
|
#site.v2-home .home-hero h1 { font-size: clamp(40px, 5.4vw, 72px); line-height: 1.25; max-width: 12ch; }
|
|
#site.v2-home .home-hero .lede { margin-top: 24px; }
|
|
#site.v2-home .home-hero .actions { margin-top: 36px; }
|
|
#site.v2-home .facts { display: flex; gap: clamp(24px, 4vw, 48px); margin: 48px 0 0; padding-top: 24px; border-top: 1px solid var(--seam); }
|
|
#site.v2-home .facts div { display: flex; flex-direction: column-reverse; }
|
|
#site.v2-home .facts dt { font-size: 14px; color: var(--stone); }
|
|
#site.v2-home .facts dd { margin: 0; font: 600 32px/1.2 var(--font-display); color: var(--mist); font-variant-numeric: tabular-nums; }
|
|
|
|
/* The library lattice */
|
|
#site .lattice { margin: 0; display: grid; gap: 22px; justify-items: center; }
|
|
#site .lattice-svg { width: 100%; max-width: 520px; height: auto; overflow: visible; }
|
|
#site .lattice-link { cursor: pointer; outline: none; }
|
|
#site .lattice-cell { transition: filter .2s ease, opacity .2s ease; }
|
|
#site .lattice-cell.is-vip { stroke: var(--champagne); stroke-width: 2.2; stroke-linejoin: round; paint-order: stroke; }
|
|
#site .lattice-svg:hover .lattice-link .lattice-cell, #site .lattice-svg:focus-within .lattice-link .lattice-cell { opacity: .55; }
|
|
#site .lattice-svg .lattice-link.is-active .lattice-cell { opacity: 1; filter: brightness(1.12); }
|
|
#site .lattice-link:focus-visible .lattice-cell { stroke: var(--mist); stroke-width: 3; }
|
|
#site .lattice-caption { width: 100%; max-width: 520px; min-height: 92px; padding: 16px 20px; border: 1px solid var(--seam); border-radius: var(--r-md); background: var(--ink-2); display: grid; gap: 4px; }
|
|
#site .lattice-caption-meta { display: flex; gap: 14px; font-size: 13px; color: var(--dim); }
|
|
#site .lattice-caption-meta .is-vip { color: var(--champagne); }
|
|
#site .lattice-caption-title { font: 600 19px/1.5 var(--font-display); color: var(--mist); }
|
|
#site .lattice-caption-title:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--champagne); }
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
#site .lattice-cell { animation: lattice-in .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 55ms + 120ms); transform-box: fill-box; transform-origin: center; }
|
|
@keyframes lattice-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
|
|
}
|
|
|
|
/* Paths */
|
|
#site.v2-home .home-paths { padding-block: clamp(64px, 8vw, 104px); }
|
|
#site.v2-home .paths { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--seam); }
|
|
#site.v2-home .paths li + li { border-inline-start: 1px solid var(--seam); }
|
|
#site.v2-home .path { display: grid; gap: 6px; padding: 28px 24px 30px; height: 100%; align-content: start; }
|
|
#site.v2-home .paths li:first-child .path { padding-inline-start: 0; }
|
|
#site.v2-home .path-art { width: 100%; height: 72px; border-radius: var(--r-sm); margin-bottom: 18px; opacity: .85; transition: opacity .2s ease; }
|
|
#site.v2-home .path:hover .path-art { opacity: 1; }
|
|
#site.v2-home .path-name { font: 600 24px/1.4 var(--font-display); }
|
|
#site.v2-home .path-hint { color: var(--stone); font-size: 15px; }
|
|
#site.v2-home .path-count { margin-top: 10px; font-size: 14px; color: var(--mist); text-decoration: underline; text-decoration-color: var(--seam-2); text-underline-offset: 5px; }
|
|
#site.v2-home .path:hover .path-count { text-decoration-color: var(--champagne); }
|
|
|
|
/* Start here */
|
|
#site.v2-home .home-start { padding-block: clamp(64px, 8vw, 104px); background: var(--ink-2); border-block: 1px solid var(--seam); }
|
|
#site.v2-home .start-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); }
|
|
#site.v2-home .start-lead-link { display: grid; gap: 14px; }
|
|
#site.v2-home .start-lead-art { width: 100%; aspect-ratio: 9 / 5; height: auto; border-radius: var(--r-lg); margin-bottom: 8px; }
|
|
#site.v2-home .start-lead h3 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.4; margin: 0; }
|
|
#site.v2-home .start-lead p { color: var(--stone); max-width: 56ch; }
|
|
#site.v2-home .start-lead-link:hover h3 { text-decoration: underline; text-decoration-color: var(--champagne); text-underline-offset: 8px; text-decoration-thickness: 1px; }
|
|
#site.v2-home .start-list { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; }
|
|
#site.v2-home .start-list li + li { border-top: 1px solid var(--seam); }
|
|
#site.v2-home .start-item { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 20px; align-items: center; padding-block: 18px; }
|
|
#site.v2-home .start-list li:first-child .start-item { padding-top: 0; }
|
|
#site.v2-home .start-item-art { width: 112px; height: 78px; border-radius: var(--r-sm); }
|
|
#site.v2-home .start-item-body { display: grid; gap: 4px; }
|
|
#site.v2-home .start-item-title { font: 600 18px/1.55 var(--font-display); }
|
|
#site.v2-home .start-item:hover .start-item-title { color: var(--champagne); }
|
|
|
|
/* Membership */
|
|
#site.v2-home .home-membership { padding-block: clamp(64px, 8vw, 104px); }
|
|
#site.v2-home .membership-panel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
|
|
#site.v2-home .membership-panel h2 { font-size: clamp(28px, 3vw, 40px); max-width: 18ch; }
|
|
#site.v2-home .membership-panel > div > p { color: var(--stone); margin-top: 18px; max-width: 50ch; }
|
|
#site .membership-offer { border: 1px solid var(--seam); border-top: 2px solid var(--champagne); border-radius: var(--r-md); padding: 28px; background: var(--basalt); display: grid; gap: 18px; }
|
|
#site .membership-offer .price { font: 600 40px/1 var(--font-display); color: var(--mist); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
|
|
#site .membership-offer .price span { font: 400 15px/1.5 var(--font-body); color: var(--stone); }
|
|
#site .membership-offer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
|
|
#site .membership-offer li { display: flex; gap: 12px; align-items: baseline; color: var(--mist); font-size: 15.5px; }
|
|
#site .membership-offer li::before { content: ""; flex: none; width: 9px; height: 8px; background: var(--champagne); clip-path: polygon(50% 0, 100% 100%, 0 100%); transform: translateY(-1px); }
|
|
#site .membership-offer .btn { justify-self: start; }
|
|
|
|
/* ==================================================================
|
|
LIBRARY
|
|
================================================================== */
|
|
#site.v2-library .lib-head { padding-block: clamp(48px, 7vw, 88px) 32px; border-bottom: 1px solid var(--seam); }
|
|
#site.v2-library .lib-head .lede { margin-top: 14px; }
|
|
#site.v2-library .lib-tools { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
|
|
#site .lib-search { flex: 1 1 320px; position: relative; display: block; }
|
|
#site .lib-search svg { position: absolute; inset-inline-start: 16px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--dim); pointer-events: none; }
|
|
#site .lib-search input { width: 100%; min-height: 52px; padding: 12px 14px; padding-inline-start: 46px; font-size: 16px; }
|
|
#site .lib-sort { display: flex; align-items: center; gap: 10px; color: var(--stone); font-size: 14px; }
|
|
#site .lib-sort select { min-height: 52px; padding-inline: 14px 36px; font-size: 15px; }
|
|
#site.v2-library .lib-filters { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 18px; }
|
|
#site .segmented { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--seam); border-radius: 999px; background: var(--ink-2); }
|
|
#site .segmented button { min-height: 38px; padding: 6px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--stone); font: 500 14px/1 var(--font-body); }
|
|
#site .segmented button:hover { color: var(--mist); }
|
|
#site .segmented button[aria-pressed=true] { background: var(--mist); color: var(--ink); }
|
|
#site.v2-library .lib-results { padding-block: 32px clamp(64px, 8vw, 104px); }
|
|
#site .results-count { color: var(--stone); font-size: 14px; margin-bottom: 20px; }
|
|
#site .lib-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
|
|
#site .guide-card { position: relative; display: flex; flex-direction: column; border-radius: var(--r-md); }
|
|
#site .guide-card-art { width: 100%; aspect-ratio: 2 / 1; height: auto; border-radius: var(--r-md); object-fit: cover; }
|
|
#site .art-cover { margin: 18px auto 26px; }
|
|
#site .art-cover img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--r-md, 10px); }
|
|
#site .home-start .guide-card-art { margin-bottom: 12px; }
|
|
#site .guide-card-body { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; flex: 1; }
|
|
#site .guide-card-title { font: 600 20px/1.5 var(--font-display); margin: 0; }
|
|
#site .guide-card-title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-md); }
|
|
#site .guide-card:hover .guide-card-title a { text-decoration: underline; text-decoration-color: var(--champagne); text-underline-offset: 6px; text-decoration-thickness: 1px; }
|
|
#site .guide-card-dek { color: var(--stone); font-size: 15px; line-height: 1.85; }
|
|
#site .guide-card-foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
|
|
#site .engagement { display: flex; align-items: center; gap: 14px; font-size: 13.5px; color: var(--dim); position: relative; z-index: 1; }
|
|
#site .like { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 10px; border: 1px solid var(--seam); border-radius: 999px; background: transparent; color: var(--stone); font: 500 13.5px/1 var(--font-body); }
|
|
#site .like svg { width: 14px; height: 14px; }
|
|
#site .like:hover { border-color: var(--seam-2); color: var(--mist); }
|
|
#site .like[aria-pressed=true] { color: var(--champagne); border-color: color-mix(in oklch, var(--champagne) 50%, transparent); }
|
|
#site .like[aria-pressed=true] svg path { fill: currentColor; }
|
|
#site .empty { display: none; padding: 48px 0; text-align: center; color: var(--stone); }
|
|
#site .empty.show { display: block; }
|
|
#site .empty p:first-child { font: 600 22px/1.5 var(--font-display); color: var(--mist); }
|
|
|
|
/* ==================================================================
|
|
ARTICLE
|
|
================================================================== */
|
|
#site.v2-article .art-head { padding-block: clamp(40px, 6vw, 80px); border-bottom: 1px solid var(--seam); }
|
|
#site.v2-article .art-head-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
|
|
#site .crumbs { display: flex; gap: 10px; font-size: 14px; color: var(--dim); margin-bottom: 20px; }
|
|
#site .crumbs a { color: var(--stone); }
|
|
#site .crumbs a:hover { color: var(--mist); }
|
|
#site.v2-article .art-head h1 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.3; }
|
|
#site.v2-article .art-head .lede { margin-top: 18px; }
|
|
#site .art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 28px; font-size: 14px; color: var(--stone); }
|
|
#site .art-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 20px; color: var(--dim); font-size: 13.5px; }
|
|
#site .save-btn { min-height: 34px; padding: 4px 14px; border: 1px solid var(--seam); border-radius: 999px; background: transparent; color: var(--stone); font: 500 13.5px/1 var(--font-body); }
|
|
#site .save-btn[aria-pressed=true] { color: var(--champagne); border-color: color-mix(in oklch, var(--champagne) 50%, transparent); }
|
|
#site.v2-article .art-head-art { width: 100%; height: auto; aspect-ratio: 26 / 21; border-radius: var(--r-lg); }
|
|
#site.v2-article .art-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: clamp(32px, 6vw, 96px); padding-block: clamp(40px, 6vw, 72px); align-items: start; }
|
|
#site .art-body { max-width: 68ch; font-size: 18.5px; line-height: 2; overflow-wrap: anywhere; }
|
|
#site .art-body .fade-out { -webkit-mask-image: linear-gradient(to bottom, #000 10%, transparent); mask-image: linear-gradient(to bottom, #000 10%, transparent); }
|
|
#site .art-body > * + * { margin-top: 1.1em; }
|
|
#site .art-body h2 { font-size: clamp(25px, 2.4vw, 31px); line-height: 1.45; margin-top: 2em; scroll-margin-top: 100px; }
|
|
#site .art-body h3 { font-size: 22px; margin-top: 1.6em; }
|
|
#site .art-body :is(ul, ol) { padding-inline-start: 1.3em; }
|
|
#site .art-body li + li { margin-top: .4em; }
|
|
#site .art-body li::marker { color: var(--champagne); }
|
|
#site .art-body blockquote { margin-inline: 0; padding: 4px 20px; border-inline-start: 2px solid var(--champagne); color: var(--mist); font-size: 19px; }
|
|
#site .art-body pre { direction: ltr; text-align: left; background: var(--ink-2); border: 1px solid var(--seam); border-radius: var(--r-md); padding: 20px 22px; overflow-x: auto; font: 14.5px/1.75 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
|
|
#site .art-body pre code { background: none; padding: 0; white-space: pre; }
|
|
#site .art-body hr { border: 0; height: 1px; background: var(--seam); margin-block: 2.4em; }
|
|
#site .art-body .intro { font-size: 21px; line-height: 1.9; color: var(--mist); }
|
|
#site .paywall { margin-top: 32px; padding: clamp(24px, 4vw, 40px); border: 1px solid var(--seam); border-top: 2px solid var(--champagne); border-radius: var(--r-md); background: var(--basalt); }
|
|
#site .paywall h2 { font-size: clamp(24px, 2.4vw, 30px); margin: 0 0 12px; }
|
|
#site .paywall p { color: var(--stone); font-size: 16.5px; }
|
|
#site .paywall-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 14px; }
|
|
#site .art-aside { position: sticky; top: 104px; display: grid; gap: 28px; }
|
|
#site .aside-title { font: 600 15px/1.6 var(--font-body); color: var(--mist); margin-bottom: 10px; }
|
|
#site .toc ol { list-style: none; margin: 0; padding: 0; border-inline-start: 1px solid var(--seam); }
|
|
#site .toc a { display: block; padding: 7px 16px; margin-inline-start: -1px; border-inline-start: 1px solid transparent; color: var(--stone); font-size: 14.5px; line-height: 1.6; }
|
|
#site .toc a:hover { color: var(--mist); border-inline-start-color: var(--champagne); }
|
|
#site .files ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--seam); }
|
|
#site .files li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 12px; border-bottom: 1px solid var(--seam); font-size: 14.5px; color: var(--stone); }
|
|
#site .files.is-locked li { justify-content: flex-start; gap: 10px; }
|
|
#site .files.is-locked svg { width: 14px; height: 14px; color: var(--champagne); flex: none; }
|
|
#site .dl-btn { min-height: 32px; padding: 4px 12px; border: 1px solid var(--seam-2); border-radius: var(--r-sm); background: transparent; color: var(--mist); font: 500 13px/1 var(--font-body); }
|
|
#site .dl-btn:hover { border-color: var(--champagne); color: var(--champagne); }
|
|
#site .file-access { color: var(--stone); font-size: 13px; }
|
|
#site .dl-locked { display: inline-flex; align-items: center; gap: 6px; color: var(--stone); font-size: 13px; }
|
|
#site .dl-locked svg { width: 13px; height: 13px; color: var(--champagne); }
|
|
#site .art-comments { padding-block: clamp(48px, 6vw, 80px); border-top: 1px solid var(--seam); }
|
|
#site .art-comments h2 { margin-bottom: 24px; }
|
|
#site .comment-list { display: grid; gap: 16px; }
|
|
#site .comment { padding: 18px 20px; border: 1px solid var(--seam); border-radius: var(--r-md); background: var(--ink-2); }
|
|
#site .comment header { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--dim); margin-bottom: 6px; }
|
|
#site .comment header strong { color: var(--mist); }
|
|
#site .comment.is-pending { border-style: dashed; }
|
|
#site .comment-form { display: grid; gap: 14px; margin-top: 28px; }
|
|
#site .comment-form textarea { width: 100%; min-height: 120px; padding: 14px; font-size: 16px; resize: vertical; }
|
|
#site .comment-form .btn { justify-self: start; }
|
|
#site .comment-form .status { color: var(--champagne); font-size: 14px; min-height: 1.6em; }
|
|
#site .comment-gate { margin-top: 28px; padding: 20px 24px; border: 1px solid var(--seam); border-radius: var(--r-md); background: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
|
|
#site .comment-gate p { color: var(--stone); }
|
|
#site .art-related { padding-block: clamp(48px, 6vw, 80px); border-top: 1px solid var(--seam); background: var(--ink-2); }
|
|
#site .art-related h2 { margin-bottom: 28px; }
|
|
#site .related-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border: 0; }
|
|
#site .related-item { display: grid; gap: 8px; }
|
|
#site .related-art { width: 100%; aspect-ratio: 2 / 1; height: auto; border-radius: var(--r-md); margin-bottom: 6px; }
|
|
#site .related-title { font: 600 19px/1.5 var(--font-display); }
|
|
#site .related-item:hover .related-title { color: var(--champagne); }
|
|
|
|
/* ==================================================================
|
|
MEMBERSHIP
|
|
================================================================== */
|
|
#site.v2-membership .mem-hero { padding-block: clamp(56px, 8vw, 104px); border-bottom: 1px solid var(--seam); }
|
|
#site.v2-membership .mem-hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
|
|
#site.v2-membership .mem-hero h1 { font-size: clamp(36px, 4.6vw, 60px); max-width: 15ch; }
|
|
#site.v2-membership .mem-hero .lede { margin-top: 22px; }
|
|
#site .mem-points { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--seam); }
|
|
#site .mem-points li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; padding-block: 16px; border-bottom: 1px solid var(--seam); }
|
|
#site .mem-points strong { font-weight: 600; color: var(--mist); }
|
|
#site .mem-points span { color: var(--stone); }
|
|
#site .plan { position: sticky; top: 104px; padding: 32px; border: 1px solid var(--seam); border-top: 2px solid var(--champagne); border-radius: var(--r-md); background: var(--basalt); display: grid; gap: 14px; }
|
|
#site .plan h2 { font: 600 20px/1.4 var(--font-display); }
|
|
#site .plan-price { font: 600 56px/1 var(--font-display); color: var(--mist); display: flex; align-items: baseline; gap: 10px; }
|
|
#site .plan-price span { font: 400 16px/1 var(--font-body); color: var(--stone); }
|
|
#site .plan-note { color: var(--stone); font-size: 15px; }
|
|
#site .plan-cta { display: grid; gap: 10px; margin-top: 8px; }
|
|
#site .plan-cta .cta-pair { display: grid; gap: 10px; }
|
|
#site .plan-cta .btn { width: 100%; }
|
|
#site .plan-soon { padding: 14px 16px; border: 1px dashed var(--seam-2); border-radius: var(--r-sm); color: var(--stone); font-size: 14.5px; }
|
|
#site .plan-soon a { color: var(--mist); text-decoration: underline; text-underline-offset: 4px; }
|
|
#site.v2-membership .mem-samples { padding-block: clamp(64px, 8vw, 104px); background: var(--ink-2); border-bottom: 1px solid var(--seam); }
|
|
#site .sample-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
|
|
#site .sample { display: grid; gap: 8px; align-content: start; height: 100%; }
|
|
#site .sample-art { width: 100%; aspect-ratio: 2 / 1; height: auto; border-radius: var(--r-md); margin-bottom: 8px; }
|
|
#site .sample-title { font: 600 20px/1.5 var(--font-display); }
|
|
#site .sample-dek { color: var(--stone); font-size: 15px; }
|
|
#site .sample-output { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--seam); font-size: 14.5px; color: var(--mist); display: grid; gap: 2px; }
|
|
#site .sample-output span { color: var(--champagne); font-size: 13px; }
|
|
#site .sample:hover .sample-title { color: var(--champagne); }
|
|
#site.v2-membership .mem-compare { padding-block: clamp(64px, 8vw, 104px); }
|
|
#site.v2-membership .mem-compare h2 { margin-bottom: 28px; }
|
|
#site .table-wrap { overflow-x: auto; border: 1px solid var(--seam); border-radius: var(--r-md); }
|
|
#site .mem-compare table { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 520px; }
|
|
#site .mem-compare :is(th, td) { padding: 16px 20px; text-align: start; border-bottom: 1px solid var(--seam); }
|
|
#site .mem-compare tbody tr:last-child :is(th, td) { border-bottom: 0; }
|
|
#site .mem-compare thead th { font: 600 14px/1.4 var(--font-body); color: var(--stone); background: var(--ink-2); }
|
|
#site .mem-compare tbody th { font-weight: 500; color: var(--mist); }
|
|
#site .mem-compare td { color: var(--stone); }
|
|
#site .mem-compare .is-member { color: var(--mist); background: color-mix(in oklch, var(--champagne) 5%, transparent); }
|
|
#site .mem-compare thead .is-member { color: var(--champagne); }
|
|
#site.v2-membership .mem-faq { padding-block: clamp(64px, 8vw, 104px); border-top: 1px solid var(--seam); }
|
|
#site .faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
|
|
#site .faq-grid > div > p { color: var(--stone); margin-top: 14px; }
|
|
#site .faq-list { border-top: 1px solid var(--seam); }
|
|
#site .faq-item { border-bottom: 1px solid var(--seam); background: none; border-radius: 0; }
|
|
#site .faq-button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 14px 0; background: none; border: 0; color: var(--mist); font: 600 17px/1.5 var(--font-body); text-align: start; }
|
|
#site .faq-button span:last-child { color: var(--champagne); font-size: 22px; }
|
|
#site .faq-answer { padding: 0 0 20px; color: var(--stone); max-width: 60ch; }
|
|
|
|
/* ==================================================================
|
|
ABOUT
|
|
================================================================== */
|
|
#site.v2-about .about-hero { padding-block: clamp(56px, 8vw, 104px); border-bottom: 1px solid var(--seam); }
|
|
#site.v2-about .about-hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
|
|
#site.v2-about .about-hero .lede { margin-top: 22px; }
|
|
#site.v2-about .about-mark { width: 100%; max-width: 340px; height: auto; justify-self: center; }
|
|
#site.v2-about .about-team { padding-block: clamp(64px, 8vw, 104px); }
|
|
#site.v2-about .about-team h2 { margin-bottom: 32px; }
|
|
#site .people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
|
|
#site .person { padding: clamp(24px, 3vw, 36px); border: 1px solid var(--seam); border-radius: var(--r-md); background: var(--ink-2); display: grid; gap: 12px; align-content: start; }
|
|
#site .person-role { color: var(--champagne); font-size: 14px; }
|
|
#site .person h3 { font-size: 28px; margin: 0; }
|
|
#site .person > p:not(.person-role) { color: var(--stone); }
|
|
#site .tags { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
|
|
#site .tags li { padding: 4px 12px; border: 1px solid var(--seam-2); border-radius: 999px; font-size: 13.5px; color: var(--stone); }
|
|
#site.v2-about .about-principles { padding-block: clamp(64px, 8vw, 104px); background: var(--ink-2); border-block: 1px solid var(--seam); }
|
|
#site .principles-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); }
|
|
#site .principles { margin: 0; display: grid; border-top: 1px solid var(--seam); }
|
|
#site .principles div { padding-block: 22px; border-bottom: 1px solid var(--seam); display: grid; gap: 6px; }
|
|
#site .principles dt { font: 600 21px/1.5 var(--font-display); display: flex; align-items: center; gap: 12px; }
|
|
#site .principles dt::before { content: ""; width: 12px; height: 10px; background: var(--champagne); clip-path: polygon(50% 0, 100% 100%, 0 100%); flex: none; }
|
|
#site .principles dd { margin: 0; color: var(--stone); padding-inline-start: 24px; }
|
|
#site.v2-about .about-contact { padding-block: 48px; }
|
|
#site .contact-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
|
|
#site .contact-strip p { font: 600 22px/1.5 var(--font-display); }
|
|
|
|
/* ==================================================================
|
|
AUTH & UTILITY PAGES (restyle of existing markup)
|
|
================================================================== */
|
|
#site .auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100dvh - 73px); }
|
|
#site .auth-story { background: var(--ink-2); border-inline-end: 1px solid var(--seam); padding: clamp(40px, 6vw, 88px) clamp(24px, 6vw, 88px); display: flex; flex-direction: column; justify-content: center; gap: 18px; color: var(--mist); }
|
|
#site .auth-mark { width: clamp(120px, 14vw, 180px); height: auto; margin-bottom: 20px; }
|
|
#site .auth-story h1 { font-size: clamp(32px, 3.6vw, 48px); max-width: 14ch; }
|
|
#site .auth-story p { color: var(--stone); max-width: 40ch; font-size: 17px; }
|
|
#site .auth-form-wrap { padding: clamp(40px, 6vw, 88px) clamp(24px, 6vw, 88px); display: flex; align-items: center; justify-content: center; }
|
|
#site .auth-form { width: min(420px, 100%); }
|
|
#site .auth-form .eyebrow { display: none; }
|
|
#site .auth-form h2 { font-size: 32px; margin-bottom: 6px; }
|
|
#site .auth-form .lead { color: var(--stone); font-size: 16px; margin: 0 0 24px; }
|
|
#site .auth-form .btn { width: 100%; }
|
|
#site .auth-form .magic { min-height: 48px; border: 1px solid var(--seam-2); border-radius: var(--r-sm); background: transparent; color: var(--mist); font: 600 15px/1 var(--font-body); }
|
|
#site .auth-form .magic:hover { border-color: var(--mist); background: transparent; color: var(--mist); }
|
|
#site .auth-form .divider { color: var(--dim); }
|
|
#site .auth-form .divider::before, #site .auth-form .divider::after { background: var(--seam); }
|
|
#site .password-toggle { color: var(--stone); border-radius: var(--r-sm); }
|
|
|
|
/* Shared cards on account, onboarding, payment and reset pages */
|
|
#site :is(.reset-card, .state-card, .card, .settings-card, .profile, .choice-body, .start-card, .upgrade-note, .files-card, .weekly, .hero-note) {
|
|
background: var(--basalt); border: 1px solid var(--seam); border-radius: var(--r-md); color: var(--mist);
|
|
}
|
|
#site :is(.page-privacy, .page-terms) .policy { max-width: 760px; }
|
|
#site :is(.page-privacy, .page-terms) .policy h2 { font-size: 24px; margin-top: 40px; }
|
|
#site :is(.page-privacy, .page-terms) .policy p, #site :is(.page-privacy, .page-terms) .policy li { color: var(--stone); }
|
|
#site .notice { border: 1px solid var(--seam-2); border-inline-start: 2px solid var(--champagne); background: var(--ink-2); color: var(--stone); border-radius: var(--r-sm); padding: 12px 16px; }
|
|
#site main.nf h1 { font-size: clamp(36px, 5vw, 56px); }
|
|
|
|
/* ==================================================================
|
|
RESPONSIVE
|
|
================================================================== */
|
|
@media (max-width: 1024px) {
|
|
#site .lib-grid, #site .sample-grid, #site .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
#site.v2-home .paths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
#site.v2-home .paths li:nth-child(3) { border-inline-start: 0; }
|
|
#site.v2-home .paths li:nth-child(n+3) { border-top: 1px solid var(--seam); }
|
|
#site.v2-home .paths li:nth-child(3) .path { padding-inline-start: 0; }
|
|
}
|
|
@media (max-width: 920px) {
|
|
#site.v2-home .home-hero-grid, #site.v2-home .start-grid, #site.v2-home .membership-panel,
|
|
#site.v2-article .art-head-grid, #site.v2-article .art-layout, #site.v2-membership .mem-hero-grid,
|
|
#site .faq-grid, #site.v2-about .about-hero-grid, #site .principles-grid, #site .auth { grid-template-columns: minmax(0, 1fr); }
|
|
#site.v2-home .lattice { order: -1; }
|
|
#site .lattice-svg { max-width: 380px; }
|
|
#site.v2-article .art-head-art { aspect-ratio: 3 / 1; max-height: 180px; }
|
|
#site .art-aside { position: static; order: -1; }
|
|
#site .plan { position: static; }
|
|
#site .auth-story { border-inline-end: 0; border-bottom: 1px solid var(--seam); }
|
|
#site.v2-about .about-mark { max-width: 200px; justify-self: start; order: -1; }
|
|
#site .people { grid-template-columns: minmax(0, 1fr); }
|
|
#site .site-header .nav-inner { min-height: 64px; }
|
|
}
|
|
@media (max-width: 620px) {
|
|
#site { font-size: 16px; }
|
|
#site .lib-grid, #site .sample-grid, #site .related-grid { grid-template-columns: minmax(0, 1fr); }
|
|
#site.v2-home .paths { grid-template-columns: minmax(0, 1fr); }
|
|
#site.v2-home .paths li + li { border-inline-start: 0; border-top: 1px solid var(--seam); }
|
|
#site.v2-home .path { padding-inline: 0; }
|
|
#site.v2-home .facts { gap: 20px; }
|
|
#site.v2-home .facts dd { font-size: 26px; }
|
|
#site.v2-home .start-item { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; }
|
|
#site.v2-home .start-item-art { width: 88px; height: 64px; }
|
|
#site .actions .btn, #site .paywall-actions .btn { flex: 1 1 100%; }
|
|
#site .art-body { font-size: 17px; }
|
|
#site .mem-points li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
|
|
#site .segmented { border-radius: var(--r-md); }
|
|
#site .lib-sort { flex: 1 1 100%; }
|
|
#site .lib-sort select { flex: 1; }
|
|
#site .auth-story { padding-block: 32px; }
|
|
#site .auth-mark { width: 88px; margin-bottom: 4px; }
|
|
#site .auth-story p { display: none; }
|
|
}
|
|
|
|
/* Neutralise legacy hover lifts and spacing on the new cards. */
|
|
#site .guide-card, #site .guide-card:hover, #site .weekly:hover { padding: 0; transform: none; box-shadow: none; border: 0; background: none; }
|
|
#site .post.guide-card { gap: 0; }
|
|
|
|
/* ==================================================================
|
|
v2.1 — calmer: triangles live only in the logo. Text-led cards.
|
|
================================================================== */
|
|
#site .membership-offer li::before { width: 6px; height: 6px; border-radius: 50%; clip-path: none; transform: translateY(-3px); }
|
|
#site .principles dt::before { content: none; }
|
|
#site .principles dd { padding-inline-start: 0; }
|
|
|
|
/* Hero: latest guides panel */
|
|
#site .hero-panel { border: 1px solid var(--seam); border-radius: var(--r-lg); background: var(--ink-2); padding: 28px 28px 24px; display: grid; gap: 8px; }
|
|
#site .hero-panel h2 { font-size: 15px; font-family: var(--font-body); font-weight: 600; color: var(--stone); margin-bottom: 4px; }
|
|
#site .hero-panel ul { list-style: none; margin: 0; padding: 0; }
|
|
#site .hero-panel li + li { border-top: 1px solid var(--seam); }
|
|
#site .hero-panel li a { display: grid; gap: 6px; padding-block: 16px; }
|
|
#site .hero-panel li a:has(.hero-panel-thumb) { display: flex; gap: 12px; align-items: center; }
|
|
#site .hero-panel-thumb { width: 72px; height: 48px; object-fit: cover; border-radius: 8px; flex: none; }
|
|
#site .hero-panel-title { font: 600 19px/1.5 var(--font-display); color: var(--mist); }
|
|
#site .hero-panel li a:hover .hero-panel-title { color: var(--champagne); }
|
|
#site .hero-panel .is-vip { color: var(--champagne); }
|
|
#site .hero-panel .text-link { justify-self: start; margin-top: 8px; font-size: 14.5px; }
|
|
|
|
/* Paths without art */
|
|
#site.v2-home .path { padding-block: 26px 28px; }
|
|
|
|
/* Start here: lead as a quiet panel, list as text rows */
|
|
#site.v2-home .start-lead-link { padding: clamp(24px, 3vw, 40px); border: 1px solid var(--seam); border-radius: var(--r-lg); background: var(--ink); height: 100%; align-content: end; min-height: 320px; }
|
|
#site.v2-home .start-lead h3 { font-size: clamp(28px, 3vw, 40px); }
|
|
#site.v2-home .start-item { grid-template-columns: minmax(0, 1fr); padding-block: 20px; }
|
|
|
|
/* Library cards: bordered, text-led */
|
|
#site .guide-card, #site .guide-card:hover { border: 1px solid var(--seam); border-radius: var(--r-md); background: var(--ink-2); padding: 24px; }
|
|
#site .guide-card:hover { border-color: var(--seam-2); }
|
|
#site .guide-card-body { padding-top: 0; }
|
|
#site .lib-grid { gap: 20px; }
|
|
|
|
/* Article head: single column */
|
|
#site.v2-article .art-head-grid { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
|
|
|
|
/* Related + samples: bordered text cards */
|
|
#site :is(.related-item, .sample) { padding: 24px; border: 1px solid var(--seam); border-radius: var(--r-md); background: var(--ink); height: 100%; align-content: start; }
|
|
#site :is(.related-item, .sample):hover { border-color: var(--seam-2); }
|
|
|
|
#site .lib-search input { background: var(--ink-2); border: 1px solid var(--seam-2); border-radius: var(--r-sm); color: var(--mist); }
|
|
#site .lib-search input::placeholder { color: var(--dim); }
|
|
#site .lib-search input:focus { outline: none; border-color: var(--champagne); box-shadow: 0 0 0 3px color-mix(in oklch, var(--champagne) 20%, transparent); }
|
|
#site .site-header { background: color-mix(in oklch, var(--ink) 92%, transparent); }
|
|
#site :is(.lattice-caption-title, .hero-panel-title, .start-item-title, .guide-card-title, .related-title, .sample-title, .path-name) { font-weight: 600; }
|
|
|
|
/* ==================================================================
|
|
Theme C — "مؤسسي هادئ": light grey page, white surfaces, emerald
|
|
accent, Readex Pro throughout. Tokens remap every rule above.
|
|
================================================================== */
|
|
:root {
|
|
--ink: #ffffff; /* page / white sections */
|
|
--ink-2: #f7f8fa; /* alternate sections, hero */
|
|
--basalt: #ffffff; /* raised cards */
|
|
--seam: #e3e6eb; /* hairlines */
|
|
--seam-2: #d0d5dd; /* stronger borders */
|
|
--mist: #101828; /* text */
|
|
--stone: #5d6675; /* secondary text */
|
|
--dim: #7a8391; /* tertiary text */
|
|
--champagne: #0e7c66; /* accent (emerald) — name kept for the rules above */
|
|
--champagne-ink: #ffffff;
|
|
--accent-hover: #0b6654;
|
|
--vip: #a86f12;
|
|
--font-display: var(--font-sans), "Segoe UI", sans-serif;
|
|
--font-body: var(--font-sans), "Segoe UI", sans-serif;
|
|
color-scheme: only light;
|
|
}
|
|
body, #site { background: var(--ink); color: var(--mist); }
|
|
#site { font: 400 17px/1.8 var(--font-body); }
|
|
#site h1 { font-weight: 700; }
|
|
#site :is(h2, h3) { font-weight: 700; }
|
|
#site ::selection { background: #0e7c6626; }
|
|
|
|
#site .btn-primary { background: var(--champagne); border-color: var(--champagne); color: #fff; }
|
|
#site .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
|
|
#site :is(.btn-quiet, .btn-secondary, .btn-ghost) { background: #fff; border-color: var(--seam-2); color: var(--mist); }
|
|
#site :is(.btn-quiet, .btn-secondary, .btn-ghost):hover { border-color: var(--mist); background: #fff; }
|
|
#site .btn { border-radius: 10px; font-weight: 700; }
|
|
|
|
#site .site-header { background: rgba(255, 255, 255, .94); }
|
|
#site .site-header nav.nav-links a { font-weight: 400; }
|
|
#site .site-header nav.nav-links a[aria-current=page] { box-shadow: none; font-weight: 700; color: var(--mist); }
|
|
#site .site-header .nav-login { background: #fff; }
|
|
#site .site-footer { background: var(--ink-2); }
|
|
|
|
#site .kicker { color: var(--champagne); font-weight: 700; font-size: 15px; margin-bottom: 18px; }
|
|
#site .meta-row > span + span::before { content: none; }
|
|
#site .meta-row > span:first-child { color: var(--champagne); font-weight: 700; }
|
|
#site .meta-row .is-vip, #site .is-vip { color: var(--vip); }
|
|
#site .badge-vip { color: var(--vip); border-color: #e7c98f; background: #fdf6e8; }
|
|
#site .badge { background: #fff; }
|
|
#site .guide-card .badge-free { color: #166534; background: #eaf7ee; border-color: #b8dec4; }
|
|
#site .for-you { color: var(--champagne); }
|
|
|
|
/* Home */
|
|
#site.v2-home .home-hero { background: var(--ink-2); }
|
|
#site.v2-home .home-hero h1 { font-size: clamp(38px, 4.8vw, 62px); max-width: 13ch; }
|
|
#site .hero-panel { background: #fff; }
|
|
#site .hero-panel-title { font-weight: 700; font-size: 17.5px; }
|
|
#site.v2-home .home-paths { background: #fff; }
|
|
#site.v2-home .path-name { font-weight: 700; }
|
|
#site.v2-home .home-start { background: var(--ink-2); }
|
|
#site .card-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
|
|
#site .guide { position: relative; height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 26px; background: #fff; border: 1px solid var(--seam); border-radius: 14px; transition: border-color .15s ease, box-shadow .15s ease; }
|
|
#site .guide:hover { border-color: #b9c0ca; box-shadow: 0 6px 20px -12px rgba(16, 24, 40, .25); }
|
|
#site .guide h3 { font-size: 20px; line-height: 1.55; margin: 4px 0 0; }
|
|
#site .guide h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
|
|
#site .guide-dek { color: var(--stone); font-size: 15.5px; }
|
|
#site .guide-link { margin-top: auto; padding-top: 10px; color: var(--champagne); font-weight: 700; font-size: 15px; }
|
|
#site.v2-home .home-membership { background: #fff; }
|
|
#site .membership-offer { background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
|
|
#site .membership-offer li::before { background: var(--champagne); }
|
|
|
|
/* Library & cards */
|
|
#site .guide-card, #site .guide-card:hover { background: #fff; }
|
|
#site .guide-card:hover { border-color: #b9c0ca; box-shadow: 0 6px 20px -12px rgba(16, 24, 40, .25); }
|
|
#site .guide-card-title { font-weight: 700; }
|
|
#site .guide-card:hover .guide-card-title a { text-decoration: none; color: var(--champagne); }
|
|
#site.v2-library .lib-head { background: var(--ink-2); }
|
|
#site .segmented { background: #fff; }
|
|
#site .segmented button[aria-pressed=true] { background: var(--champagne); color: #fff; }
|
|
#site .lib-search input, #site :is(.input, .textarea, .control, .field input:not([type=checkbox]):not([type=radio]), select, textarea) { background: #fff; }
|
|
#site .like[aria-pressed=true] { color: #c2410c; border-color: #fdba74; }
|
|
|
|
/* Article */
|
|
#site.v2-article .art-head { background: var(--ink-2); }
|
|
#site .art-body pre { background: #0f172a; color: #e2e8f0; border-color: #0f172a; }
|
|
#site .paywall { background: #f2faf7; border-color: #cfe9e1; border-top-color: var(--champagne); }
|
|
#site .comment, #site .comment-gate { background: #fff; }
|
|
#site .art-related { background: var(--ink-2); }
|
|
#site :is(.related-item, .sample) { background: #fff; }
|
|
#site :is(.related-item, .sample):hover { border-color: #b9c0ca; }
|
|
#site .related-item:hover .related-title, #site .sample:hover .sample-title { color: var(--champagne); }
|
|
|
|
/* Membership */
|
|
#site.v2-membership .mem-hero { background: var(--ink-2); }
|
|
#site .plan { background: #fff; box-shadow: 0 12px 32px -20px rgba(16, 24, 40, .35); }
|
|
#site .mem-compare .is-member { background: #f2faf7; }
|
|
#site .mem-compare thead th { background: var(--ink-2); }
|
|
#site .sample-output span { color: var(--champagne); font-weight: 700; }
|
|
#site .faq-button span:last-child { color: var(--champagne); }
|
|
|
|
/* About & auth */
|
|
#site.v2-about .about-hero { background: var(--ink-2); }
|
|
#site .person { background: #fff; }
|
|
#site .person-role { color: var(--champagne); font-weight: 700; }
|
|
#site .tags li { background: var(--ink-2); border-color: var(--seam); }
|
|
#site .auth-story { background: var(--ink-2); }
|
|
#site .auth-form .magic { background: #fff; }
|
|
|
|
@media (max-width: 1024px) { #site .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
|
@media (max-width: 620px) { #site .card-grid { grid-template-columns: minmax(0, 1fr); } }
|
|
|
|
/* ==================================================================
|
|
Theme C — account, onboarding, payment, verification, legal pages
|
|
================================================================== */
|
|
#site :is(.page-head, .onboarding-head, .page-onboarding .head) { background: var(--ink-2); border-bottom: 1px solid var(--seam); padding-block: clamp(40px, 6vw, 72px); }
|
|
#site :is(.page-head, .onboarding-head, .page-onboarding .head) .sub { color: var(--stone); margin-top: 10px; }
|
|
#site .container { max-width: var(--wrap); padding-inline: var(--gutter); }
|
|
#site :is(.page-privacy, .page-terms) .hero { background: var(--ink-2); border-bottom: 1px solid var(--seam); }
|
|
#site :is(.reset, .verification, .page-payment-success main, .page-payment-cancelled main, .gate) { background: var(--ink-2); }
|
|
#site :is(.reset-card, .state-card, .verification .card, .gate-card) { background: #fff; border: 1px solid var(--seam); border-radius: 16px; box-shadow: 0 12px 32px -24px rgba(16, 24, 40, .35); }
|
|
#site .gate { min-height: 60vh; display: grid; place-items: center; padding: clamp(40px, 8vw, 96px) var(--gutter); }
|
|
#site .gate-card { width: min(560px, 100%); padding: clamp(28px, 5vw, 48px); display: grid; gap: 14px; }
|
|
#site .gate-card h1 { font-size: clamp(28px, 3vw, 36px); }
|
|
#site .gate-card p { color: var(--stone); }
|
|
#site .gate-card .actions { margin-top: 8px; }
|
|
|
|
/* status icons */
|
|
#site .status-mark { width: 56px; height: 56px; border-radius: 50%; border: 0; display: grid; place-items: center; background: #e7f5f0; color: var(--champagne); }
|
|
#site .page-payment-cancelled .status-mark { background: #fdf0e6; color: #b45309; }
|
|
#site .status-mark svg { width: 26px; height: 26px; }
|
|
|
|
/* steps lists (verify) & progress */
|
|
#site .steps { border-top: 1px solid var(--seam); }
|
|
#site .step-num { color: var(--champagne); font-weight: 700; font-variant-numeric: tabular-nums; }
|
|
#site .email { font-family: var(--font-body); letter-spacing: 0; direction: ltr; unicode-bidi: isolate; background: var(--ink-2); border: 1px solid var(--seam); border-radius: 8px; padding: 4px 12px; display: inline-block; }
|
|
#site :is(.progress-copy, #progressLabel, #progressPercent) { font-family: var(--font-body); letter-spacing: 0; color: var(--stone); font-size: 14px; }
|
|
#site .progress-track { background: var(--seam); border-radius: 999px; height: 6px; overflow: hidden; }
|
|
#site .progress-bar { background: var(--champagne); border-radius: 999px; height: 100%; }
|
|
|
|
/* onboarding step nav + choices */
|
|
#site .step-nav { border-top: 0; }
|
|
#site .step-nav :is(button, div, a) { font-family: var(--font-body); color: var(--stone); border-color: var(--seam); background: transparent; }
|
|
#site .step-nav [aria-current=step], #site .step-nav .active { color: var(--mist); font-weight: 700; }
|
|
#site .step-nav .done { color: var(--champagne); }
|
|
#site .choice { cursor: pointer; }
|
|
#site .choice input { position: absolute; opacity: 0; pointer-events: none; }
|
|
#site .choice-body { background: #fff; border: 1px solid var(--seam); border-radius: 14px; position: relative; transition: border-color .15s ease, box-shadow .15s ease; }
|
|
#site .choice:hover .choice-body { border-color: #b9c0ca; }
|
|
#site .choice input:checked + .choice-body { border-color: var(--champagne); box-shadow: 0 0 0 3px #0e7c661f; }
|
|
#site .choice input:focus-visible + .choice-body { outline: 2px solid var(--champagne); outline-offset: 2px; }
|
|
#site .choice-mark { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--seam-2); background: #fff; }
|
|
#site .choice input:checked + .choice-body .choice-mark { border: 6px solid var(--champagne); }
|
|
#site .choice-title { font-weight: 700; color: var(--mist); }
|
|
#site .choice-copy { color: var(--stone); }
|
|
#site :is(.notice-card, .upgrade-note, .benefit, .membership-card, .prefs, .billing) { background: #fff; border-color: var(--seam); border-radius: 14px; color: var(--mist); }
|
|
#site .benefit-num { color: var(--champagne); font-family: var(--font-body); }
|
|
#site .member-strip { background: #e7f5f0; color: #0b5a4a; border-bottom: 1px solid #cfe9e1; font: 700 14.5px/1.6 var(--font-body); letter-spacing: 0; text-align: center; padding: 10px var(--gutter); margin: 0; }
|
|
|
|
/* switches */
|
|
#site .switch .track { background: var(--seam-2); }
|
|
#site .switch input:checked + .track { background: var(--champagne); }
|
|
|
|
/* account settings */
|
|
#site .settings-layout { padding-block: clamp(32px, 5vw, 56px); }
|
|
#site .settings-nav :is(a, button) { font-family: var(--font-body); color: var(--stone); border-color: var(--seam); }
|
|
#site .settings-nav :is(a, button)[aria-current], #site .settings-nav :is(a, button).active, #site .settings-nav :is(a, button)[aria-selected=true] { color: var(--mist); font-weight: 700; }
|
|
#site .settings-nav :is(a, button)::before, #site .settings-nav :is(a, button)::after { background: var(--champagne); }
|
|
#site .panels > * { background: #fff; border: 1px solid var(--seam); border-radius: 16px; padding: clamp(22px, 3vw, 32px); }
|
|
#site :is(.billing-row, .pref-row) { border-color: var(--seam); }
|
|
#site .billing-row.head { color: var(--stone); font-weight: 700; }
|
|
#site .price-tag { font-family: var(--font-body); color: var(--mist); font-weight: 700; }
|
|
#site .text-danger { color: #b42318; }
|
|
#site .hint, #site .panel-sub, #site .desc { color: var(--stone); }
|
|
#site .pw-rules li { color: var(--stone); }
|
|
#site .pw-rules li.ok { color: var(--champagne); }
|