/* profile.af — design system layered on top of Tailwind. Editorial SaaS: white canvas, charcoal ink, neutral UI, colour only where it carries meaning. The sky→violet→pink gradient is a BRAND MOMENT only (final CTA, hero detail, logo, premium highlight) — never a default fill. Colour comes from the logo and nowhere else. Two ramps, and the difference between them is the whole rule: --pf-brand-* are the logo's literal stops and are decorative; --pf-primary/-accent/-secondary are those same hues walked down to AA and are the only ones allowed under text. Semantic success/warning/danger stay off-brand on purpose. ── Token contract ─────────────────────────────────────────────────────── --pf-ink* platform action colour (charcoal). Chrome buttons ONLY. --pf-primary the *themeable* accent. head.php re-declares it per page: platform chrome → brand violet (default) public profile → that profile's saved colour Never bind chrome buttons to it, or a user's pink profile would repaint the dashboard. Links/focus/data-viz may use it. --pf-btn-* resolved button surface. :root = ink; theme bodies remap it back to --pf-primary so profiles keep their personality. */ :root{ /* Canvas & surfaces */ --pf-bg:#FFFFFF; --pf-surface:#FFFFFF; --pf-surface-soft:#F7F8FA; --pf-surface-strong:#F1F3F6; --pf-border:#E5E7EB; --pf-border-strong:#D4D8DF; /* Type */ --pf-text:#111318; --pf-muted:#5F6673; /* text-secondary */ /* DECORATIVE ONLY — 3.2:1 on white. Clears the 3:1 non-text bar (icons, separators, placeholder glyphs, chart gridlines) but FAILS WCAG AA 4.5:1 for body text. Never colour readable copy with it; use --pf-muted (5.9:1). */ --pf-muted-2:#8B919C; /* Action (platform chrome) */ --pf-ink:#17191E; --pf-ink-hover:#000000; --pf-ink-ring:rgba(17,19,24,.16); /* ── BRAND COLOURS — THE SINGLE SOURCE OF TRUTH ───────────────────────── The four logo colours, exact. Nothing else in this file, in tailwind.config.js or in any view may declare a brand colour: every branded surface in the product resolves to one of these four or to --pf-grad below. Do not add a fifth, and do not adjust these values — they are the logo. */ --pf-brand-cyan:#49CCF9; --pf-brand-violet:#7B68EE; --pf-brand-pink:#FD71AF; --pf-brand-yellow:#FFC800; /* Primary = the logo's violet, unmodified. It is the hinge of the gradient and the one stop that works as an interface colour, so it drives links, primary buttons, focus rings, active nav, tabs, switches, checkboxes, radios, sliders, progress bars, selected states and chart series. */ --pf-primary:var(--pf-brand-violet); /* themeable; see contract above */ --pf-accent:var(--pf-brand-pink); /* The same two colours as bare channels, so a tint can be written `rgb(var(--pf-primary-rgb) / 12%)`. NOT a second source of truth: every runtime emitter writes the hex and the triplet together from one hex, via pf_color_vars() in helpers.php. These are the defaults for pages that never emit either — the auth screens, the dashboard, the maintenance page. See the note on pf_color_vars for why the tints stopped using color-mix(…, transparent). */ --pf-brand-violet-rgb:123 104 238; --pf-brand-pink-rgb:253 113 175; --pf-primary-rgb:var(--pf-brand-violet-rgb); --pf-accent-rgb:var(--pf-brand-pink-rgb); --pf-secondary:var(--pf-brand-cyan); --pf-dark:#111318; /* ── RENDERINGS OF THOSE FOUR — not new brand colours ─────────────────── The four values above are 1.55:1 to 4.15:1 against white, so none of them can legally carry 14px text or sit under white text. Each `-ink` below is its own hue darkened by the MINIMUM needed to reach 4.5:1 on white, on --pf-surface-soft and on its own tint — violet only moves 11%, so a link still reads as the logo's violet. Text-bearing surfaces use these; every decorative surface (gradient, glow, wash, chart fill, slider track, progress bar, illustration accent) uses the exact value. Each `-soft`/`-border`/`-ring` is the same hue diluted into white, so a tinted card is visibly the same colour as the button beside it. */ --pf-primary-ink:#6D5CD3; /* 5.09 white / 4.79 soft — links, small labels, button fill */ --pf-primary-hover:#5F4FC0; /* one step further, for hover/active */ --pf-primary-soft:#F7F6FE; --pf-primary-soft-2:#F2F0FD; --pf-primary-border:#DFDBFB; --pf-cyan-ink:#2C7A95; /* 4.86 / 4.57 */ --pf-cyan-soft-2:#EDFAFE; --pf-pink-ink:#B04F7A; /* 4.95 / 4.65 */ --pf-pink-soft-2:#FFF1F7; --pf-yellow-ink:#8C6E00; /* 4.83 / 4.55 */ --pf-yellow-soft-2:#FFFAE6; /* Semantic — deliberately NOT rebranded. These carry meaning, not identity; a green that drifts toward the brand stops reading as "success". All three re-verified at AA on white (5.02 / 5.02 / 4.83). */ --pf-success:#15803D; --pf-warning:#B45309; --pf-danger:#DC2626; --pf-info:var(--pf-brand-violet); /* Shape & motion */ --pf-radius-ctl:10px; /* buttons, inputs */ --pf-radius:14px; /* cards */ --pf-radius-lg:16px; --pf-radius-media:22px; /* major media blocks */ --pf-ring:rgba(123,104,238,.22); --pf-shadow-sm:0 1px 2px rgba(17,19,24,.05); --pf-shadow-md:0 8px 24px -12px rgba(17,19,24,.16); --pf-shadow-lg:0 24px 60px -24px rgba(17,19,24,.28); /* ── Motion ───────────────────────────────────────────────────────────── Three durations and two curves for the whole interaction layer. Before these existed the file carried thirteen different durations between 60ms and 500ms, so two controls that do the same kind of thing moved at different speeds depending on when they were written. --pf-dur-1 state flips in place — hover, focus ring, colour, tick --pf-dur-2 a surface appearing — dropdown, tooltip, popover, tab body --pf-dur-3 something crossing distance — drawer, modal, panel Scale rule: the further a thing travels the longer it may take, and nothing in the product chrome exceeds --pf-dur-3. Anything slower reads as lag rather than polish. --pf-ease enter/settle — decelerates into place (the default) --pf-ease-io moving between two known states, e.g. a drawer sliding Deliberately NOT tokenised: the landing page's theme-rotator crossfades (.pf-pv-*, 500ms). Those are ambient demonstration, not interaction, and interaction speed would destroy the effect. prefers-reduced-motion is handled once, globally, further down this file (it flattens every duration to .001ms), so a component never needs its own reduced-motion branch just to be safe. */ --pf-dur-1:150ms; --pf-dur-2:180ms; --pf-dur-3:240ms; --pf-ease:cubic-bezier(.2,.7,.2,1); --pf-ease-io:cubic-bezier(.4,0,.2,1); /* Resolved button surface (chrome). Charcoal, NOT the brand: a dashboard full of violet buttons stops reading as a neutral workspace, and the brand loses its meaning when every action carries it. The brand button is .pf-btn-brand, applied by hand to marketing CTAs only. Theme bodies remap these three to the profile's colour further down. */ --pf-btn-bg:var(--pf-ink); --pf-btn-bg-hover:var(--pf-ink-hover); --pf-btn-ring:var(--pf-ink-ring); /* Type stack — platform chrome only. Public-profile themes re-declare font-family on their own body class, so a user's serif/mono theme is never overwritten by the platform font. */ --pf-font:"Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; /* ── THE BRAND GRADIENT — ONE TOKEN, ONE DIRECTION ────────────────────── Cyan → violet → pink → yellow, 100deg, at the official stops. This is the only gradient in the product. Nothing may declare its own: no page- specific sweep, no reversed copy, no two-stop shortcut. If a surface needs the brand gradient it uses --pf-grad, and if it needs it quieter it uses one of the three derivatives below — all of which keep the same four hues in the same order, so they read as one system rather than as a rainbow. */ --pf-grad:linear-gradient(100deg,#49CCF9 0%,#7B68EE 35%,#FD71AF 68%,#FFC800 100%); /* Derivatives. Same hues, same order, same angle — only the intensity moves. --pf-grad-soft the wash: 6% of the ramp over white. Ambient glows, auth canvas, hero backdrops, empty/loading states. --pf-grad-preview in-page product mocks, which must not out-shout the page they sit inside. --pf-grad-ink the only one that carries type, and the ONE place the ramp is not all four colours. Why: the bare ramp runs 1.55:1 to 4.15:1 on white, so it has to be darkened before white text can sit on it or before it can be used as text — and a darkened yellow is brown. There is no value that is both recognisably #FFC800 and legible; #FFC800 at 4.5:1 is #8C6E00, olive. Rather than ship a muddy fourth stop, type-bearing surfaces run cyan → violet → pink at their -ink values: same ramp, same direction, stopped one stop early. The yellow keeps its full strength everywhere it belongs — the wash, the glows, progress bars, chart series, the mark itself. */ --pf-grad-soft:linear-gradient(100deg,#F4FCFF 0%,#F7F6FE 35%,#FFF6FA 68%,#FFFCF0 100%); --pf-grad-preview:linear-gradient(100deg,#A9E2F8 0%,#B3A9EE 35%,#F3B4CE 68%,#FFDF8F 100%); --pf-grad-ink:linear-gradient(100deg,#2C7A95 0%,#6D5CD3 48%,#B04F7A 100%); /* Dark spotlight: deep charcoal base + soft ambient glows. On a near-black ground the EXACT brand values are what read, and nothing on top of them is text, so these are the four logo colours at low alpha — no substitutes. Kept wide and faint: three large soft radials rather than one saturated wash is the difference between premium and neon. */ --pf-dark-base:#101216; --pf-glow-violet:rgba(123,104,238,.22); /* #7B68EE */ --pf-glow-cyan:rgba(73,204,249,.16); /* #49CCF9 */ --pf-glow-pink:rgba(253,113,175,.13); /* #FD71AF */ --pf-glow-yellow:rgba(255,200,0,.10); /* #FFC800 */ } /* Platform chrome font — scoped to NON-theme bodies only. Deliberately NOT applied via Tailwind's `font-sans` (which stays Inter) nor via html/inherit: a `body[class*="theme-"]` counter-rule would be 0-1-1 and would out-specify `.theme-academic{font-family:Georgia}` (0-1-0), silently stealing every theme's typography. Selecting the chrome instead means a public profile is never touched at all. */ body:not([class*="theme-"]){ font-family:var(--pf-font); } /* Public profiles keep their own personality: the action colour falls back to the profile's --pf-primary (which head.php/profile_shell sets per user). */ body[class*="theme-"]{ --pf-btn-bg:var(--pf-primary); --pf-btn-bg-hover:var(--pf-primary); --pf-btn-ring:var(--pf-ring); } *{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* scroll-padding keeps focused/anchored fields clear of the sticky save bars (profile + theme pages) so a sticky action row never covers the input the user is typing in. */ html{ scroll-behavior:smooth; scroll-padding-bottom:110px; scroll-padding-top:84px; } body{ font-feature-settings:"cv11","ss01"; } /* Responsive safety net — prevents horizontal scroll from oversized media or long unbreakable strings (emails, URLs, single long names). Element-selector specificity stays below Tailwind utilities, so sized images are unaffected. */ img,svg,video{ max-width:100%; } /* User images must never be stretched or squashed. `cover` + centred focal point means anything the layout forces into a fixed box is CROPPED, not distorted — and it is a no-op for images the layout leaves at their natural size (the box already matches the intrinsic ratio), so this is safe as a global default. Opt out with `object-contain` where the whole image must be visible. */ img{ object-fit:cover; object-position:center; } img.object-contain{ object-fit:contain; } /* A IS SOURCE SELECTION, NOT A LAYOUT BOX. ------------------------------------------------------------------ responsive_img() wraps its in a whenever the upload has WebP derivatives, and drops the wrapper when it does not (a placeholder, an SVG, a format Derive cannot read). Every one of its 32 call sites puts the sizing on the — `w-14 h-14 shrink-0` on Explore, `w-full h-full object-cover` in the themes — because that is the element they can see. In normal flow the wrapper is inline, owns nothing, and that is harmless. In a FLEX ROW it is not: the wrapper becomes the flex item, so it arrives with `flex-shrink:1` and `min-width:auto` while the `shrink-0` meant to protect it sits on a child that is no longer an item — and the `max-width: 100%` two rules above then drags the image down with the wrapper. Measured on /explore before this rule: a 56x56 avatar rendered **27x56** beside a long unbroken name, while the card next to it — same markup, same size, but a profile whose photo has NO derivatives and therefore no wrapper — stayed 56x56. Two cards on one page, disagreeing, because of a difference in the stored image rather than anything the layout asked for. `display:contents` removes the wrapper's box, which is what every call site already assumed it did. The children are `display:none` in the UA sheet and are unaffected, and carries no semantics, so nothing is removed from the accessibility tree. `.pf-gtile picture` further down wants a real box and is more specific, so it still wins. */ picture{ display:contents; } /* ---- Cover / banner images ------------------------------------------ ONE predictable frame for every profile banner: 16:3, matching the ratio new uploads are center-cropped to (Upload::SPECS). Older/legacy covers with a different intrinsic ratio still land here safely — object-fit crops them symmetrically instead of squashing. Phones get a taller 5:2 frame, because a 16:3 strip is only ~70px tall on a 375px screen. NEVER size a cover with a fixed height + w-full: that fixes BOTH axes to an arbitrary ratio and forces the browser to crop (or, without object-fit, stretch) unpredictably. aspect-ratio fixes one axis and derives the other. --pf-cover-pos is the focal-point hook: set it inline (e.g. "center 30%") to bias the crop; it safely defaults to centre. THE FRAME SIZES THE BANNER ON A LAPTOP — NOT THE VIEWPORT. `width:100%` + `aspect-ratio` derives the height from whatever box the image sits in, so a full-bleed banner's height is a FRACTION OF THE VIEWPORT: 270px at 1440, 360px at 1920, and it keeps growing. Above a 768px content column that reads as a page-wide photograph with a profile underneath it rather than as a profile header, and it upscales a file stored at 1600x300 (Upload::SPECS). `.pf-coverframe` bounds the image to the TEMPLATE'S OWN content column from 640px up, so the banner is a header element the avatar, name and actions sit against — the shape every professional profile uses. --pf-cover-w is that column, and it is the only thing a template overrides: a wider layout passes its own width and gets the same treatment at its own scale, which is what keeps this ONE rule instead of one per theme. The phone case is deliberately untouched: below 640px the banner stays full-bleed and square-cornered, because inset margins on a 390px screen spend the width that makes the image readable at all. */ .pf-coverframe{ margin-inline:auto; } @media (min-width:640px){ /* --pf-cover-bleed IS THE SPACE THE AVATAR SITS IN. Sized to the column alone, the banner and the avatar shared one left edge — technically aligned and visually cramped, because a banner that starts exactly where its avatar starts reads as a backdrop that ran out of room rather than as a header the avatar is placed on. The banner is therefore wider than the column it heads by this much on each side, which is the inset every professional profile header gives its photo. It is only ever an inset: `min(100%, …)` means that when the viewport is the constraint the banner simply stops bleeding rather than pushing the page wider. */ .pf-coverframe{ box-sizing:border-box; width:min(100%, calc(var(--pf-cover-w, 48rem) + 2 * var(--pf-cover-bleed, 1.5rem))); padding:var(--pf-cover-top, 1.5rem) var(--pf-cover-gutter, 1.25rem) 0; } } .pf-cover{ display:block; width:100%; aspect-ratio:5/2; object-fit:cover; object-position:var(--pf-cover-pos, center); background:var(--pf-surface-strong); } @media (min-width:640px){ /* max-height is a guard, not the mechanism: the width bound already caps the height, and this only stops a very wide --pf-cover-w from reintroducing a band. object-fit keeps the crop symmetrical, never a squash. */ .pf-cover{ aspect-ratio:16/3; max-height:var(--pf-cover-max, 240px); } /* Descendant, not child: responsive_img() wraps the in a (which is display:contents, so it has no box of its own). */ .pf-coverframe .pf-cover{ border-radius:var(--pf-radius-media); box-shadow:0 0 0 1px rgba(17,19,24,.06), var(--pf-shadow-sm); } } /* Project thumbnails: stored 16:9, so frame them at 16:9 — same reasoning. */ .pf-thumb{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; object-position:var(--pf-cover-pos, center); background:var(--pf-surface-strong); } /* `anywhere` (not break-word) so unbreakable words also shrink an element's min-content size — otherwise one long token widens a grid/flex column past the viewport and drags the whole layout off-screen (clipped, not scrolled, because of the overflow-x:clip guard below). Headings alone are not enough: theme heroes render headlines/taglines as

and emails/URLs as . */ h1,h2,h3,h4,p,a,li,dd,dt,blockquote,figcaption,cite{ overflow-wrap:anywhere; } /* Public profile pages render arbitrary user content (bios with raw URLs, long brand names) inside plain

s too — e.g. the pre-line About card. Inheritance carries this to every descendant, so one long token can never size a theme grid/flex track past the viewport. Scoped to theme bodies: dashboard/admin tables keep their scroll-inside-card behavior. */ body[class*="theme-"] div{ overflow-wrap:anywhere; } /* Hard stop for horizontal page scroll on every layout. `clip` (unlike `hidden`) does not create a scroll container, so position:sticky keeps working. Individual wide widgets scroll inside their own overflow-x-auto. */ html, body{ overflow-x: clip; } /* Grid/flex children may never force their track wider than the viewport — wide content (tables etc.) scrolls inside its own wrapper instead. */ .pf-card{ min-width:0; } /* The hidden attribute must always win — Tailwind display utilities (.flex etc.) otherwise out-cascade the UA/preflight [hidden] rule (e.g. bulk bars). */ [hidden]{ display:none !important; } /* Focus visibility for accessibility — one ring everywhere, always visible against both the white canvas and the dark spotlight sections. */ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible, select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--pf-primary); outline-offset:2px; border-radius:6px; } .pf-on-dark a:focus-visible,.pf-on-dark button:focus-visible{ outline-color:#fff; } /* Motion: honour the OS setting globally rather than per-component. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } /* ---- Buttons -------------------------------------------------------- Compact, confident, dark. Every variant carries the same geometry so a row of mixed buttons always lines up. Minimum 40px tall (44px on touch, see the touch-target rule below). */ .pf-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:600; font-size:.875rem; line-height:1.25rem; letter-spacing:-.005em; border-radius:var(--pf-radius-ctl); padding:.55rem 1rem; min-height:2.5rem; border:1px solid transparent; cursor:pointer; white-space:nowrap; transition:background-color var(--pf-dur-1) var(--pf-ease), border-color var(--pf-dur-1) var(--pf-ease), color var(--pf-dur-1) var(--pf-ease), box-shadow var(--pf-dur-1) var(--pf-ease), transform var(--pf-dur-1) var(--pf-ease); } .pf-btn:active{ transform:translateY(.5px); } /* A BUTTON'S ICON IS NEVER THE THING THAT GIVES WAY. An is a flex item like any other, so it inherits `flex-shrink:1` and a narrow button resolves its overflow by squashing the glyph rather than letting the label ellipsize — a 16px icon silently becomes 11px, and only on the buttons whose labels are longest. The label is `white-space:nowrap`, so the icon is the ONLY item with any give: without this rule it always loses. One declaration on the button system, not a fix per theme. */ .pf-btn > svg{ flex:0 0 auto; } .pf-btn-primary{ background:var(--pf-btn-bg); color:#fff; box-shadow:var(--pf-shadow-sm); } .pf-btn-primary:hover{ background:var(--pf-btn-bg-hover); box-shadow:0 4px 14px -4px var(--pf-btn-ring); } /* Secondary — a REAL button at rest. It carries a visible surface + border with no hover required: an action must never depend on hover to reveal that it is clickable (that also leaves it invisible on touch, where there is no hover). */ .pf-btn-ghost{ background:var(--pf-surface-soft); color:var(--pf-text); border-color:var(--pf-border-strong); } .pf-btn-ghost:hover{ background:var(--pf-surface-strong); border-color:#C2C7D0; } .pf-btn-ghost:active{ background:#E7EAEF; } /* Quiet tertiary — no border. ONLY for genuinely low-stakes inline actions (dropdown items, "Wrong email?"). Never for a section-level CTA. */ .pf-btn-subtle{ background:transparent; color:var(--pf-muted); } .pf-btn-subtle:hover{ background:var(--pf-surface-strong); color:var(--pf-text); } .pf-btn-danger{ background:#FEF2F2; color:#B91C1C; border-color:#FECACA; } .pf-btn-danger:hover{ background:#FEE2E2; border-color:#FCA5A5; } .pf-btn-danger-solid{ background:var(--pf-danger); color:#fff; } .pf-btn-danger-solid:hover{ background:#B91C1C; } .pf-btn-sm{ padding:.35rem .7rem; min-height:2rem; font-size:.8rem; border-radius:8px; gap:.35rem; } .pf-btn-lg{ padding:.75rem 1.4rem; min-height:3rem; font-size:.95rem; border-radius:12px; } .pf-btn-icon{ padding:.55rem; width:2.5rem; } .pf-btn-icon.pf-btn-sm{ padding:.35rem; width:2rem; } /* Disabled + loading — a button in flight must not be clickable twice. */ .pf-btn:disabled,.pf-btn[disabled],.pf-btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; pointer-events:none; } .pf-btn.is-loading{ position:relative; color:transparent !important; pointer-events:none; } .pf-btn.is-loading > *{ visibility:hidden; } .pf-btn.is-loading::after{ content:""; position:absolute; width:1rem; height:1rem; border:2px solid currentColor; border-radius:50%; border-top-color:transparent; color:#fff; animation:pf-spin .6s linear infinite; } .pf-btn-ghost.is-loading::after,.pf-btn-subtle.is-loading::after{ color:var(--pf-muted); } /* Touch targets live in ONE block near the END of this file — see "TOUCH TARGET LAYER". They must come after every component's own sizing declaration or those later, equal-specificity rules win on source order (media queries add no specificity). */ /* Icon-only action button (admin table rows: view / edit / suspend / delete). Replaces the ad-hoc `p-1.5 rounded-lg hover:bg-*` clusters that were copied across every admin list — one hit box, one hover language, one place to grow the target on touch. */ .pf-icon-btn{ display:inline-grid; place-items:center; width:2rem; height:2rem; flex:0 0 auto; border-radius:8px; color:var(--pf-muted); background:transparent; transition:background-color var(--pf-dur-1) var(--pf-ease), color var(--pf-dur-1) var(--pf-ease); } .pf-icon-btn:hover{ background:var(--pf-surface-strong); color:var(--pf-text); } .pf-icon-btn-success:hover{ background:#F0FDF4; color:var(--pf-success); } .pf-icon-btn-warning:hover{ background:#FFFBEB; color:var(--pf-warning); } .pf-icon-btn-danger:hover { background:#FEF2F2; color:var(--pf-danger); } /* Avatar menu trigger — the hit box grows on touch (see the touch layer) while the avatar chip inside keeps its 36px visual size. */ .pf-avatar-btn{ display:grid; place-items:center; border-radius:999px; } .pf-avatar-btn:hover{ background:var(--pf-surface-strong); } /* ---- Shared media-upload field (media_field + media_gallery) ---------- The preview IS the drop zone / click target. One visual language for every upload: avatar, cover, project cover, CV, and gallery tiles. */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .pf-media-drop{ position:relative; overflow:hidden; background:#f8fafc; border:1.5px dashed #d3dae4; border-radius:14px; display:grid; place-items:center; transition:border-color var(--pf-dur-1) var(--pf-ease), background var(--pf-dur-1) var(--pf-ease); } .pf-media-drop.pf-media-round{ border-radius:999px; } .pf-media-drop:hover{ border-color:var(--pf-primary); background:var(--pf-primary-soft); } .pf-media-drop.is-dragover{ border-style:solid; border-color:var(--pf-primary); background:var(--pf-primary-soft-2); box-shadow:0 0 0 4px var(--pf-ring); } .pf-media-hit{ position:absolute; inset:0; z-index:2; cursor:pointer; } .pf-media-img{ width:100%; height:100%; object-fit:cover; display:block; } .pf-media-img[data-empty]{ opacity:0; } .pf-media-empty{ position:absolute; inset:0; display:flex; flex-direction:column; gap:.25rem; align-items:center; justify-content:center; color:var(--pf-muted); pointer-events:none; padding:.5rem; text-align:center; } .pf-media-empty-txt{ font-size:.72rem; font-weight:600; color:var(--pf-muted); } .pf-media-pdf{ display:flex; flex-direction:column; gap:.35rem; align-items:center; color:#64748b; padding:.75rem; } .pf-media-pdfname{ font-size:.75rem; font-weight:600; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Hover "Replace" overlay — only meaningful once a file is present. */ .pf-media-overlay{ position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; gap:.35rem; font-size:.8rem; font-weight:700; color:#fff; background:rgba(15,23,42,.45); opacity:0; transition:opacity var(--pf-dur-1) var(--pf-ease); pointer-events:none; } .pf-media-drop.has-file:hover .pf-media-overlay{ opacity:1; } .pf-media-round .pf-media-overlay,.pf-media-drop.pf-media-round + * .pf-media-overlay{ border-radius:999px; } .pf-media.has-file .pf-media-empty{ display:none; } .pf-media-pdflink{ display:inline-flex; align-items:center; gap:.3rem; margin-top:.5rem; font-size:.78rem; font-weight:600; color:var(--pf-primary-ink); } .pf-media-pdflink:hover{ text-decoration:underline; } /* Actions: mobile = equal-width row (1 action = full width); desktop = compact. */ .pf-media-actions{ display:flex; gap:.5rem; align-items:center; } .pf-media-actions > *{ flex:1 1 0; min-width:0; } @media (min-width:640px){ .pf-media-actions > *{ flex:0 0 auto; } } /* Info popover — hides the technical ratio/dimension detail until asked. Anchored to the full-width field (not the icon) so it never overflows a narrow column; capped to the viewport width. */ .pf-media{ position:relative; } .pf-media-info{ display:inline-flex; color:#94a3b8; cursor:help; } .pf-media-info:hover,.pf-media-info:focus-visible{ color:var(--pf-primary-ink); outline:none; } .pf-media-pop{ position:absolute; left:0; top:1.75rem; z-index:20; width:16rem; max-width:calc(100vw - 2rem); background:#0f172a; color:#e2e8f0; font-size:.72rem; font-weight:500; line-height:1.5; padding:.55rem .7rem; border-radius:10px; box-shadow:0 8px 24px -6px rgba(15,23,42,.4); opacity:0; visibility:hidden; transform:translateY(-3px); transition:var(--pf-dur-1) var(--pf-ease); pointer-events:none; } .pf-media-info:hover .pf-media-pop,.pf-media-info:focus-visible .pf-media-pop,.pf-media-info.open .pf-media-pop{ opacity:1; visibility:visible; transform:none; } /* On phones AND tablets the popover becomes a bottom sheet — fixed, thumb-reachable, never clipped by a narrow column (tap the info icon to toggle). The absolute variant only survives at ≥1024px, where the dashboard column is wide enough that a 16rem popover anchored at left:0 still lands inside the viewport; below that it overhung the right edge. */ @media (max-width:1023.98px){ .pf-media-pop{ position:fixed; left:.75rem; right:.75rem; bottom:.75rem; top:auto; width:auto; max-width:none; font-size:.8rem; padding:.85rem 1rem; border-radius:14px; box-shadow:0 -8px 32px rgba(15,23,42,.35); transform:translateY(6px); z-index:70; } } /* Upload state line: Preparing / Cropping / Compressing / Uploading / Complete / Error. */ .pf-media-status{ margin-top:.3rem; font-size:.72rem; font-weight:600; color:#64748b; } .pf-media-status.is-busy{ color:var(--pf-primary-ink); } /* The animated ellipsis is a FIXED, NON-WRAPPING slot. At .5em it was narrower than the "..." it animates to, so the content wrapped to one character per line inside the inline-block and baseline alignment pushed the first two dots ABOVE the sentence — two dots floating over "Uploading…" with no visible cause. It only showed while a status stayed busy for more than a moment, which is now the normal case for an upload in flight. Wide enough for three dots, and told never to wrap. */ .pf-media-status.is-busy::after{ content:""; display:inline-block; width:1.5em; text-align:left; white-space:pre; animation:pf-ellipsis 1.2s steps(4,end) infinite; } @keyframes pf-ellipsis{ 0%{content:"";} 25%{content:".";} 50%{content:"..";} 75%{content:"...";} } .pf-media-status.is-ok{ color:var(--pf-success,#059669); } .pf-media-status.is-err{ color:var(--pf-danger,#dc2626); } /* Moderation state of a single media slot (media_field "review" data). The frame above keeps showing the APPROVED image — this strip is what tells the owner a replacement is queued, and shows them which one. */ .pf-media-review{ display:flex; align-items:flex-start; gap:.5rem; margin-top:.6rem; padding:.5rem .6rem; border-radius:10px; font-size:.72rem; line-height:1.45; border:1px solid; } .pf-media-review strong{ font-weight:700; } .pf-media-review--pending{ background:#fffbeb; border-color:#fde68a; color:#92400e; } .pf-media-review--rejected{ background:#fef2f2; border-color:#fecaca; color:#b91c1c; } .pf-media-review-thumb{ width:2.25rem; height:2.25rem; object-fit:cover; border-radius:7px; flex:none; border:1px solid rgba(0,0,0,.08); } .pf-media-review-thumb.pf-media-round{ border-radius:999px; } /* ---- Signup flow (register): OTP input + username availability ------- */ .pf-otp{ font-size:1.5rem; letter-spacing:.6em; text-align:center; font-weight:700; } .pf-un-ok, .pf-help.pf-un-ok{ color:#059669; font-weight:600; } .pf-un-bad, .pf-help.pf-un-bad{ color:#dc2626; font-weight:600; } .pf-input-ok{ border-color:#10b981 !important; box-shadow:0 0 0 3px rgba(16,185,129,.15); } .pf-input-bad{ border-color:#ef4444 !important; box-shadow:0 0 0 3px rgba(239,68,68,.12); } [data-resend-cooldown][disabled]{ color:#9ca3af; cursor:default; } [data-username-submit][disabled]{ opacity:.55; cursor:not-allowed; transform:none; } /* ---- Password reset: 6-box code entry (auth/reset) ------------------- States: is-checking (dimmed), is-ok (green + check), is-bad (red + one shake). The password section reveals via .pf-reveal once verified. */ .pf-otp-row{ display:flex; gap:.5rem; justify-content:space-between; } .pf-otp-cell{ width:2.85rem; height:3.3rem; min-width:0; text-align:center; font-size:1.3rem; font-weight:700; color:var(--pf-text); background:#fff; border:1px solid #e5e7eb; border-radius:10px; caret-color:var(--pf-primary); transition:border-color var(--pf-dur-1) var(--pf-ease), box-shadow var(--pf-dur-1) var(--pf-ease), background var(--pf-dur-1) var(--pf-ease), color var(--pf-dur-1) var(--pf-ease); } .pf-otp-cell:focus{ border-color:var(--pf-primary); box-shadow:0 0 0 4px var(--pf-ring); outline:none; } @media (max-width:359px){ .pf-otp-row{ gap:.35rem; } .pf-otp-cell{ width:2.5rem; height:3rem; font-size:1.15rem; } } .pf-otp-row.is-checking .pf-otp-cell{ opacity:.55; } .pf-otp-row.is-ok .pf-otp-cell{ border-color:var(--pf-success); background:#ecfdf5; color:#047857; box-shadow:0 0 0 3px rgba(16,185,129,.15); } .pf-otp-row.is-bad .pf-otp-cell{ border-color:var(--pf-danger); background:#fef2f2; color:#b91c1c; box-shadow:0 0 0 3px rgba(239,68,68,.12); } @keyframes pf-shake{ 10%,90%{transform:translateX(-1px);} 20%,80%{transform:translateX(2px);} 30%,50%,70%{transform:translateX(-4px);} 40%,60%{transform:translateX(4px);} } .pf-otp-row.is-shake{ animation:pf-shake .5s cubic-bezier(.36,.07,.19,.97) both; } .pf-otp-msg{ display:flex; align-items:center; gap:.35rem; min-height:1.25rem; margin-top:.6rem; font-size:.8rem; font-weight:600; color:#64748b; } .pf-otp-msg.is-ok{ color:#047857; } .pf-otp-msg.is-bad{ color:#b91c1c; } .pf-otp-msg.is-checking::after{ content:""; display:inline-block; width:.5em; text-align:left; animation:pf-ellipsis 1.2s steps(4,end) infinite; } .pf-reveal{ overflow:hidden; transition:max-height .45s cubic-bezier(.2,.7,.2,1), opacity .3s ease .12s; } .pf-reveal.is-collapsed{ max-height:0; opacity:0; visibility:hidden; } .pf-reveal.is-open{ max-height:26rem; opacity:1; visibility:visible; } @media (prefers-reduced-motion:reduce){ .pf-otp-row.is-shake{ animation:none; } .pf-reveal{ transition:none; } } /* ---- Admin Plan Controls -------------------------------------------- */ .pf-plan-table{ min-width:560px; } .pf-num-input{ width:5.5rem; padding:.35rem .55rem; font-size:.85rem; } .pf-num-input:disabled{ background:#f1f5f9; color:#94a3b8; } /* Retain-and-lock: content over the plan limit stays editable but is visually parked (and clamped out of the public page server-side). */ /* A row the plan does not currently publish. It is NOT an error and must not be dressed as one: the data is saved, intact, and comes back on its own when the plan does. This was amber-on-amber — the same palette the product uses for "something needs your attention" — which read as a fault the owner had caused. It is now the neutral resting surface with a dashed edge, which says "not live" without saying "wrong". */ .pf-row-locked{ background:var(--pf-surface-strong); border-style:dashed; border-color:var(--pf-line); } .pf-row-locked > .min-w-0{ opacity:.8; } /* ---- Password show/hide toggle (auto-wired in app.js) ---------------- */ .pf-pw-wrap{ position:relative; } .pf-pw-wrap .pf-input{ padding-right:2.7rem; } .pf-pw-toggle{ position:absolute; right:.35rem; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; border-radius:8px; color:#9ca3af; transition:color var(--pf-dur-1) var(--pf-ease), background var(--pf-dur-1) var(--pf-ease); } .pf-pw-toggle:hover{ color:#374151; background:#f3f4f6; } .pf-pw-toggle svg{ width:1.15rem; height:1.15rem; } /* Phones: the avatar field centers as a unit (photo, actions, copy). */ @media (max-width:639px){ .pf-media[data-round="1"]{ text-align:center; } .pf-media[data-round="1"] .pf-media-drop{ margin-inline:auto; } .pf-media[data-round="1"] .pf-media-head{ justify-content:center; } .pf-media[data-round="1"] .pf-media-actions{ justify-content:center; } } .pf-media.is-busy .pf-media-drop{ opacity:.6; } .pf-media-drop.is-progress::after{ content:""; position:absolute; left:0; bottom:0; height:3px; z-index:3; width:var(--pf-prog,0%); background:var(--pf-primary); transition:width var(--pf-dur-2) var(--pf-ease); } /* ---- Per-image upload progress (.pf-uprog) ---------------------------- ONE RING PER IMAGE, ON THE IMAGE. The question somebody watching an upload is asking is "is MY photo in yet" — and a single bar under a form holding a cover and four gallery tiles cannot answer it. The ring sits on the preview it belongs to, over a scrim light enough to keep the picture readable underneath: the image is the label, so covering it up would leave the indicator meaningless. Three states and no more. Counting (0–100), processing (the server is re-encoding — indeterminate, because "100%" that then sits there for a second reads as a hang), and failed (one button: retry). Built by media.js, never server-rendered: it is a transient state of a request in flight, not a property of the page. --------------------- */ .pf-uprog{ position:absolute; inset:0; z-index:4; display:grid; place-items:center; background:rgba(255,255,255,.72); border-radius:inherit; animation:pf-fade-in var(--pf-dur-1) var(--pf-ease); } @keyframes pf-fade-in{ from{ opacity:0; } } /* The ring is a conic gradient with a hole punched by ::before — the same technique .pf-progress uses, so there is one progress-ring idea in the product rather than an SVG here and a gradient there. */ .pf-uprog-ring{ position:relative; width:3.5rem; height:3.5rem; border-radius:999px; display:grid; place-items:center; background:conic-gradient(var(--pf-primary) calc(var(--v,0) * 1%), rgba(17,19,24,.18) 0); box-shadow:0 2px 10px rgba(17,19,24,.15); transition:background var(--pf-dur-1) linear; } .pf-uprog-ring::before{ content:""; position:absolute; inset:5px; border-radius:999px; background:var(--pf-surface); } .pf-uprog-pct{ position:relative; font-size:.72rem; font-weight:700; color:var(--pf-text); font-variant-numeric:tabular-nums; } /* Processing: a fixed quarter-arc that turns. No number, because there is no number — the bytes have arrived and the server is working. */ .pf-uprog.is-processing .pf-uprog-ring{ background:conic-gradient(var(--pf-primary) 25%, rgba(17,19,24,.12) 0); animation:pf-uprog-spin .9s linear infinite; } @keyframes pf-uprog-spin{ to{ transform:rotate(360deg); } } /* Failed: the scrim turns, the preview stays. Retry is the only control here — Remove already exists on the field and on the tile, and offering it twice in two shapes is how a small overlay becomes a dialog. */ .pf-uprog.is-failed{ background:rgba(220,38,38,.14); } .pf-uprog-retry{ display:inline-flex; align-items:center; gap:.35rem; padding:.4rem .7rem; border-radius:999px; border:0; cursor:pointer; background:var(--pf-surface); color:var(--pf-danger); font-size:.75rem; font-weight:700; box-shadow:0 2px 8px rgba(17,19,24,.18); } .pf-uprog-retry:hover{ background:var(--pf-danger); color:#fff; } /* The 72px gallery tile: the ring alone, no percentage — four characters at that size is a smudge, and the arc is the reading anyway. */ .pf-uprog--sm .pf-uprog-ring{ width:2.25rem; height:2.25rem; } /* A thicker arc, proportionally: at 32px with a 3px ring the sweep was a hairline over a pale photo and the tile read as "doing nothing". */ .pf-uprog--sm .pf-uprog-ring::before{ inset:5px; } .pf-uprog--sm .pf-uprog-retry{ padding:.3rem; border-radius:999px; } @media (prefers-reduced-motion:reduce){ .pf-uprog{ animation:none; } .pf-uprog.is-processing .pf-uprog-ring{ animation:none; opacity:.7; } } /* ---- Project gallery manager (media_gallery partial) ----------------- */ .pf-gallery-head{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.5rem; } .pf-gallery-count{ font-size:.72rem; font-weight:700; color:var(--pf-muted); background:var(--pf-surface-strong); padding:.15rem .5rem; border-radius:999px; } /* A JUSTIFIED ROW, NOT A SQUARE GRID. Project work is not one shape, and the editor must show the shape that is actually being stored — a 3:4 poster squeezed into a square tile is a second, invisible crop that disagrees with the file on its way to the server, so the editor and the public page would show two different pictures. Uniform ROW HEIGHT with width following the ratio (--pf-a) is what keeps a mixed gallery tidy while every tile stays true: one rhythm, no stretching, and the wrap means no horizontal overflow at any width. */ .pf-gallery-grid{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:.5rem; --pf-grow:72px; } @media (max-width:520px){ .pf-gallery-grid{ --pf-grow:84px; } } /* border-box, explicitly: the tile's ratio is its whole point, and a 1px border added OUTSIDE the box skews a short tile more than a tall one — a 5:2 strip would render measurably squarer than the file it represents. */ .pf-gtile{ position:relative; box-sizing:border-box; height:var(--pf-grow); width:calc(var(--pf-grow) * var(--pf-a, 1)); flex:0 0 auto; max-width:100%; border-radius:12px; overflow:hidden; background:#f1f5f9; border:1px solid #e5e7eb; } /* object-fit:cover on a box that is ALREADY the image's ratio crops nothing — it is here only to absorb the sub-pixel rounding of the width calculation. `picture` is inline by default; saved tiles render through responsive_img(), so it has to fill the tile or the img's 100% height resolves against nothing. */ .pf-gtile picture{ display:block; width:100%; height:100%; } .pf-gtile img{ width:100%; height:100%; object-fit:cover; display:block; } /* Uploading: the tile that is actually in flight says so. */ .pf-gtile.is-uploading{ opacity:.65; } .pf-gtile.is-uploading::after{ content:""; position:absolute; inset:0; z-index:3; background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent); animation:pf-gtile-sweep 1.1s linear infinite; } @keyframes pf-gtile-sweep{ from{ transform:translateX(-100%); } to{ transform:translateX(100%); } } .pf-gallery-grid.is-progress{ position:relative; } .pf-gallery-grid.is-progress::after{ content:""; position:absolute; left:0; bottom:-.4rem; height:3px; width:var(--pf-prog,0%); background:var(--pf-primary); border-radius:2px; transition:width var(--pf-dur-2) var(--pf-ease); } .pf-gtile.dragging{ opacity:.4; } .pf-gtile.drop-target{ outline:2px dashed var(--pf-primary); outline-offset:-2px; } .pf-gtile-remove{ position:absolute; top:.3rem; right:.3rem; z-index:2; width:1.5rem; height:1.5rem; display:grid; place-items:center; border-radius:999px; background:rgba(15,23,42,.6); color:#fff; transition:background var(--pf-dur-1) var(--pf-ease); } .pf-gtile-remove:hover{ background:var(--pf-danger); } .pf-gtile-handle{ position:absolute; bottom:.3rem; left:.3rem; z-index:2; width:1.5rem; height:1.5rem; display:grid; place-items:center; border-radius:7px; background:rgba(15,23,42,.55); color:#fff; cursor:grab; } .pf-gtile-handle:active{ cursor:grabbing; } /* A freshly picked image is SHOWN, not announced. This label used to be `inset:0` over an opaque lavender fill, so the moment somebody chose a photo the tile turned into a flat coloured square reading "New" — the preview was in the DOM the whole time, painted over. The tile is the preview; the marker is a corner badge on the same geometry as the review flag below it. */ .pf-gtile-pending{ position:absolute; left:.3rem; bottom:.3rem; z-index:2; display:inline-flex; align-items:center; gap:.2rem; padding:.1rem .35rem; border-radius:999px; background:var(--pf-primary); color:#fff; font-size:.6rem; font-weight:700; letter-spacing:.01em; } /* Unsaved: a primary ring separates "chosen, in this form" from the saved tiles beside it without touching the image itself. The entrance animation ends at opacity 1 on its own — a preview must never depend on a JS class arriving in order to become visible, which is the failure this whole change is about. */ @keyframes pf-gtile-in{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:none; } } .pf-gtile--new{ border-color:var(--pf-primary); box-shadow:0 0 0 2px var(--pf-primary-soft-2); animation:pf-gtile-in var(--pf-dur-2) var(--pf-ease) both; } /* Awaiting moderation: desaturated + amber-flagged, so a queued image reads as "not live yet" at a glance and can never be confused with a saved one. It is deliberately NOT draggable — it has no position in the gallery. */ .pf-gtile--review{ border-color:#fcd34d; } .pf-gtile--review img{ filter:grayscale(.55) opacity(.75); } .pf-gtile-flag{ position:absolute; left:.3rem; bottom:.3rem; z-index:2; display:inline-flex; align-items:center; gap:.2rem; padding:.1rem .35rem; border-radius:999px; background:#b45309; color:#fff; font-size:.6rem; font-weight:700; letter-spacing:.01em; } /* The add box keeps the row's height and stays square, so it reads as the one fixed element the varying tiles are laid against. */ .pf-gadd{ display:flex; flex-direction:column; gap:.3rem; align-items:center; justify-content:center; flex:0 0 auto; box-sizing:border-box; height:var(--pf-grow); width:var(--pf-grow); border-radius:12px; border:1.5px dashed #d3dae4; background:#f8fafc; color:#64748b; cursor:pointer; transition:border-color var(--pf-dur-1) var(--pf-ease), background var(--pf-dur-1) var(--pf-ease), color var(--pf-dur-1) var(--pf-ease); } .pf-gadd:hover{ border-color:var(--pf-primary); background:var(--pf-primary-soft); color:var(--pf-primary-ink); } .pf-gadd.is-dragover{ border-style:solid; border-color:var(--pf-primary); background:var(--pf-primary-soft-2); box-shadow:0 0 0 4px var(--pf-ring); } .pf-gadd-txt{ font-size:.68rem; font-weight:700; } /* ---- Report-a-profile reason picker (partials/report_form) ----------- Radios rather than a icon */ .pf-search{ position:relative; display:block; min-width:0; } .pf-search .pf-search-ico{ position:absolute; left:.8rem; top:50%; transform:translateY(-50%); display:inline-flex; color:#9ca3af; pointer-events:none; z-index:1; } .pf-search .pf-input{ padding-left:2.4rem; } /* Tabs / segmented filters (reusable: messages, notifications, admin lists) */ /* `flex-wrap:wrap` is load-bearing, not decoration: a bar wider than its column wraps to a second row. Without it the bar keeps one row and relies on overflow-x, and a wide strip (the analytics metric switcher in a 448px content column at 768px) puts a tab outside its own box. Only `.pf-tabs-icons` opts out, because collapsing to icons is what makes one row fit in the first place. */ .pf-tabs{ display:flex; align-items:center; flex-wrap:wrap; gap:.25rem; padding:.25rem; background:var(--pf-surface-strong); border-radius:12px; width:max-content; max-width:100%; overflow-x:auto; } .pf-tab{ display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; font-weight:600; color:var(--pf-muted); padding:.4rem .85rem; border-radius:9px; white-space:nowrap; transition:var(--pf-dur-1); } .pf-tab:hover{ color:var(--pf-text); background:var(--pf-surface-soft); } .pf-tab:focus-visible{ outline:2px solid var(--pf-primary); outline-offset:-2px; } /* AFTER :hover on purpose. `.pf-tab.active` and `.pf-tab:hover` are both specificity 0-2-0, so the selected pill only keeps its white fill under the pointer by being declared later. (It was not: a second, underline-flavoured copy of this component further down the file re-declared `.pf-tab:hover` with a grey fill, and hovering the selected tab greyed it out. That copy is gone — there is one tab component.) */ .pf-tab.active,.pf-tab.active:hover{ background:var(--pf-surface); color:var(--pf-text); box-shadow:var(--pf-shadow-sm); } .pf-tab .pf-tab-count{ font-size:.68rem; font-weight:700; padding:.05rem .4rem; border-radius:999px; background:var(--pf-border); color:var(--pf-muted); } .pf-tab.active .pf-tab-count{ background:var(--pf-ink); color:#fff; } /* Segmented tabs fill the container evenly on phones: 4 range tabs become 2×2, 3 folder tabs become 2 + one full-width — the same balanced rule as .pf-bgrid, driven by the same basis formula instead of a hand-picked 40% flex-basis. Two deliberate details: · Placed AFTER the base rule: media queries carry no extra weight, so `width:100%` has to out-order the base `width:max-content`, or the bar stays shrink-to-fit and never fills the row. · `:not(.pf-tabs-icons)` protects the compact icon bar below, which is deliberately a content-sized SCROLLING bar (icon-only inactive tabs) — wrapping it into balanced rows would undo that design. `.pf-tabs-stick` is a pinned bar and always carries `.pf-tabs-icons` too, so ONE `:not()` covers both. Do not add a second: `:not()` contributes its argument's specificity, so `:not(.pf-tabs-icons):not(.pf-tabs-stick)` is 0-3-0 and out-weighs `.pf-tabs.pf-tabs-compact` (0-2-0) instead of merely preceding it — which put the analytics range picker back into the 2×2 grid the compact opt-out exists to prevent. */ @media (max-width:479.98px){ .pf-tabs:not(.pf-tabs-icons){ --pf-bgrid-cols:2; --pf-bgrid-gap:.25rem; --pf-bgrid-basis:calc( (100% - (var(--pf-bgrid-cols) - 1) * var(--pf-bgrid-gap)) / var(--pf-bgrid-cols) - .05px); width:100%; flex-wrap:wrap; } .pf-tabs:not(.pf-tabs-icons) .pf-tab{ flex:1 1 var(--pf-bgrid-basis); justify-content:center; min-width:0; } /* Opt-out: keep ONE row. The 2×2 rule above is right for word labels ("Unread", "Archived") which cannot shrink, but a date-range bar is four to six three-character labels — stacking those into three rows costs more vertical space than the chart it filters. Placed after the wrap rule and matched at the same specificity (.pf-tabs.pf-tabs-compact = 0-2-0), so source order is what wins. flex:1 1 0 — every tab takes an equal share of the row rather than a share of its own content width, so the control is evenly divided whether the plan shows four options or six. min-width:0 — without it flex items refuse to shrink below their label and the bar would overflow instead of dividing. */ .pf-tabs.pf-tabs-compact{ flex-wrap:nowrap; gap:.125rem; width:100%; } .pf-tabs.pf-tabs-compact .pf-tab{ flex:1 1 0; min-width:0; justify-content:center; gap:.2rem; padding:.4rem .3rem; font-size:.75rem; } } /* Pins a .pf-tabs bar under the dashboard header (theme editor). Carries the sticky geometry only — no surface of its own, so the segmented pill is the one visible thing and the bar sits straight on the page background. Two load-bearing numbers, both tied to layout_dashboard.php: top = the header's h-16 (4rem) — anything less floats it over the header. z-index < the header's z-30: the header is sticky + z-30, so it opens a stacking context its dropdowns can never escape (their z-50 is scoped to it). At z-30 this bar, being later in the DOM, painted OVER the header and its notification menu; it must stay below. */ .pf-tabs.pf-tabs-stick{ position:sticky; top:4rem; z-index:20; } /* ── .pf-tabs-icons — THE mobile shape of a segmented tab bar ─────────────── Inactive tabs collapse to their icon; only the selected one keeps its label. This started as one page's rule (the Appearance editor's pinned bar) and is now the shared pattern, because every tab strip in the signed-in product has the same problem in the same place. Three word labels — "Inbox / Archived / All", "All / Unread / Read" — cannot shrink, so the balanced-wrap rule above turned each bar into two full-width rows of cards; an inbox opened on a phone spent ~160px of the first screen on four rows of filter chrome before a single message. Icon-collapsed, the same two bars are ~80px and read as one control instead of a list. TWO BANDS, not one — the rule from UI_UX_SYSTEM.md's "shell subtracts 320px": inside the dashboard/admin shell a 768px viewport gives
only ~384px, LESS than a 640px phone gets, because the phone has no rail. So the collapse fires below 640 and again between 768 and 1024, and the 640–767 band (a phone-shaped viewport with no rail) keeps its full labels. Requirements this encodes: · the label is visually hidden, never display:none — the icons carry no text of their own, so dropping it from the a11y tree would leave the control with no accessible name. An absolutely positioned child is not a flex item, so .pf-tab's gap collapses with it and the icon centres. · 2.75rem min box = a 44×44 touch target for an icon-only tab. · counts STAY visible. "3 unread" is the reason somebody looks at the bar; a `.pf-tab-label` nested inside a badge (e.g. "failed") still folds. · content-sized tabs + nowrap: the selected pill grows to exactly its label, the bar never wraps into rows, and if it still cannot fit it scrolls INSIDE itself (base .pf-tabs is overflow-x:auto) rather than pushing the page sideways. The BAR is content-sized too (base width:max-content), so two bars on one flex row — folder + read filter on the inbox — sit side by side wherever they fit and wrap to a second row only when they do not. Forcing width:100% here instead left a 200px-wide control inside a 340px grey track, twice over. · .pf-tab already carries `transition:var(--pf-dur-1)`, so a selection change eases between the two widths instead of snapping. */ @media (max-width:639.98px), (min-width:768px) and (max-width:1023.98px){ .pf-tabs.pf-tabs-icons{ max-width:100%; flex-wrap:nowrap; gap:.2rem; } .pf-tabs.pf-tabs-icons .pf-tab{ flex:0 1 auto; width:auto; min-width:2.75rem; min-height:2.75rem; justify-content:center; padding:.4rem .7rem; } .pf-tabs.pf-tabs-icons .pf-tab > svg{ flex:0 0 auto; } .pf-tabs.pf-tabs-icons .pf-tab:not(.active) .pf-tab-label{ position:absolute; width:1px; height:1px; margin:0; padding:0; border:0; overflow:hidden; white-space:nowrap; clip-path:inset(50%); } /* The active label is the one thing allowed to lose characters, and only when even the icon-collapsed bar is too wide for the column. */ .pf-tabs.pf-tabs-icons .pf-tab.active .pf-tab-label{ min-width:0; overflow:hidden; text-overflow:ellipsis; } } @media (max-width:639.98px){ /* At rest the pinned bar spans the content column, so its edges line up with the template cards below (base .pf-tabs is width:max-content, which would size it to the tabs instead). */ .pf-tabs.pf-tabs-stick{ width:auto; max-width:none; } /* Pinned: bleed out through
's 1.25rem inline padding to the viewport edges. The inline padding absorbs that bleed PLUS the bar's own .25rem inset (1.25 + .25 = 1.5rem), so the tabs sit at the same x in both states and nothing slides sideways as it pins. Only inline margin/padding change — the block axis, and so mb-5 and the bar's height, are untouched, so there is no vertical shift either. .is-stuck comes from app.js: a sticky element cannot detect its own stuck state in CSS (there is no :stuck), so it has to be observed. */ .pf-tabs.pf-tabs-stick.is-stuck{ margin-inline:-1.25rem; padding-inline:1.5rem; border-radius:0; } } /* Gradient text — brand moment only (hero keyword, logo wordmark). */ .pf-gradient-text{ background:var(--pf-grad); -webkit-background-clip:text; background-clip:text; color:transparent; } /* ── BRAND MARK ────────────────────────────────────────────────────────────── Every logo on the platform comes from brand_mark() (app/lib/helpers.php) and is sized by exactly one of these classes. The images carry their intrinsic width/height, so `width:auto` + a fixed height is what keeps the aspect ratio honest while the browser still reserves the correct box before load. The lockup is SVG, viewBox 1192×252 (≈4.73:1) — the same proportions as the 960×204 PNG it replaced, cropped to the drawn artwork so it drops in without resizing anything. Heights are set rather than widths because the mark has to line up optically with the text and buttons beside it. SIZE IS A RATIO OF THE BAR IT SITS IN, not a fixed number picked by eye. ClickUp is the reference: their header runs a logo at roughly a third of the bar's height, which is what stops a wide lockup from crowding the nav links beside it. --pf-brand-ratio holds that third; each slot multiplies it by its own bar height, so a bar that changes height takes the logo with it. public header 4rem → 22px (h-16, layout_public) mobile navhdr 4rem → 22px (.pf-navhdr, dashboard + admin drawer) auth screens — → 30px no bar; sized as the page's focal mark icon rail 40px → 24px box, not bar (see .pf-mrail-logo) The mark carries its own colour, so it always sits directly on the surface — there is no plate behind it. The gradient tile the old sparkles glyph needed would fight the logo's own gradient, not frame it. */ :root{ --pf-brand-ratio: .34; --pf-hdr-h: 4rem; } .pf-brand-word{ display:block; width:auto; flex:0 0 auto; height:calc(var(--pf-hdr-h) * var(--pf-brand-ratio)); } .pf-brand-word-lg{ display:block; width:auto; height:30px; flex:0 0 auto; } .pf-brand-icon{ display:block; width:auto; flex:0 0 auto; height:calc(var(--pf-hdr-h) * var(--pf-brand-ratio)); } /* The anchor wrapping a mark. inline-flex + centre kills the baseline gap an inline-block leaves under a replaced element — that descender space was pushing the footer and header lockups a couple of pixels off centre. */ .pf-brand-link{ display:inline-flex; align-items:center; } @media (max-width:479.98px){ /* Only the wide lockup steps down on narrow screens — at 4.7:1 it is what runs out of room beside the menu button. The square icon does not. */ .pf-brand-word{ height:20px; } } /* Animated entrance */ @keyframes pf-rise{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} } .pf-rise{ animation:pf-rise .6s cubic-bezier(.2,.7,.2,1) both; } /* Skill bar */ .pf-skillbar{ height:8px; border-radius:999px; background:#eef0f3; overflow:hidden; } .pf-skillbar > span{ display:block; height:100%; border-radius:999px; /* The official ramp, so a progress bar and the hero wordmark are the same four colours in the same order. No text sits on it, so it takes the exact values rather than the darkened rendering. The gradient spans the FILLED width, which means a bar always shows the whole sweep however full it is. */ background:var(--pf-grad); } /* Progress ring helper */ .pf-progress{ background:conic-gradient(var(--pf-brand-violet) calc(var(--v)*1%), #eef0f3 0); } /* Floating tooltip (icon rail) */ .pf-sbtip{ position:fixed; z-index:120; background:#0f172a; color:#fff; font-size:.75rem; font-weight:600; padding:.3rem .6rem; border-radius:7px; pointer-events:none; white-space:nowrap; opacity:0; box-shadow:0 6px 18px rgba(0,0,0,.25); transition:opacity .1s var(--pf-ease); } .pf-sbtip.on{ opacity:1; } /* Body scroll lock while a drawer is open (class set by app.js) */ @media (max-width:767.98px){ html.pf-drawer-open, html.pf-drawer-open body{ overflow:hidden; overscroll-behavior:none; } } /* Drawer overlay (fading, mobile only) */ .pf-overlay{ display:none; position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:45; cursor:pointer; opacity:0; pointer-events:none; transition:opacity var(--pf-dur-3); } @media (max-width:767.98px){ .pf-overlay{ display:block; } .pf-overlay.visible{ opacity:1; pointer-events:auto; } } /* ==================== TWO-LEVEL NAVIGATION SHELL ======================== ONE nav system for BOTH the user dashboard and the admin panel (partials/nav_shell.php, data from app/lib/Nav.php — only data differs). .pf-shellnav sticky wrapper holding both nav panels; the mobile drawer .pf-mrail 72px icon-only primary rail (labelled rows in the drawer) .pf-ctx contextual sidebar for the active module (collapsible) Motion contract: 180ms ease on hover/active surfaces and panel width. */ .pf-shellnav{ display:flex; position:sticky; top:0; z-index:40; height:100vh; height:100dvh; flex:0 0 auto; background:var(--pf-surface); } /* Desktop: the mobile-only full-width header is hidden and the body wrapper dissolves (display:contents) so the rail + panel stay DIRECT flex children of the shell — desktop structure is byte-for-byte unchanged. */ .pf-navhdr{ display:none; } .pf-navbody{ display:contents; } /* --- Primary rail ----------------------------------------------------- Desktop: 72px icon column. Mobile drawer: full-width labelled rows (.pf-mrail-caption/.pf-mrail-more become visible) — same markup. */ .pf-mrail{ width:72px; flex:0 0 72px; display:flex; flex-direction:column; align-items:center; padding:.75rem 0; border-right:1px solid #f3f4f6; background:var(--pf-surface); } .pf-mrail-head{ display:flex; align-items:center; justify-content:center; flex:0 0 auto; margin-bottom:.9rem; } /* No plate: the mark supplies its own colour, so the 40px box is just the hit area. It used to be a gradient tile because the sparkles glyph was a white line icon that needed one. */ .pf-mrail-logo{ display:grid; place-items:center; width:40px; height:40px; border-radius:12px; flex:0 0 auto; } /* Sized off the 40px box rather than the shared bar ratio: this is the only slot where the mark stands alone with nothing beside it to balance. */ .pf-mrail-logo .pf-brand-icon{ height:24px; } .pf-mrail-brand{ display:none; font-weight:800; letter-spacing:-.01em; min-width:0; align-items:center; gap:.5rem; } .pf-mrail-chip{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; background:var(--pf-surface-strong); color:var(--pf-muted); padding:.1rem .4rem; border-radius:5px; } .pf-mrail-close{ display:none; } .pf-mrail-nav{ display:flex; flex-direction:column; align-items:center; gap:.3rem; flex:1; min-height:0; overflow-y:auto; scrollbar-width:none; width:100%; padding:.1rem 0; } .pf-mrail-nav::-webkit-scrollbar{ display:none; } .pf-mrail-link{ position:relative; display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; color:var(--pf-muted); gap:.65rem; transition:background-color var(--pf-dur-2) var(--pf-ease), color var(--pf-dur-2) var(--pf-ease); } .pf-mrail-ico{ display:grid; place-items:center; flex:0 0 auto; } .pf-mrail-link:hover{ background:var(--pf-surface-soft); color:var(--pf-text); } /* .open = this section's submenu panel is currently showing (soft container). .active = the current page lives in this section — a filled ink pill, the primary state. Both can appear on different icons at once (preview another panel without navigating): the ink pill always marks the real page. No detached edge bar — the connected icon background carries the state. */ .pf-mrail-link.open{ background:var(--pf-surface-strong); color:var(--pf-text); } .pf-mrail-link.active, .pf-mrail-link.active:hover{ background:var(--pf-ink); color:#fff; } .pf-mrail-dot{ position:absolute; top:9px; right:9px; width:8px; height:8px; border-radius:50%; background:var(--pf-danger); box-shadow:0 0 0 2px var(--pf-surface); } /* Rail section captions: hidden — the rail is icon-only on every width (the active section's name shows in the contextual panel header instead). */ .pf-mrail-caption, .pf-mrail-more{ display:none; } /* --- Contextual sidebar ---------------------------------------------- */ .pf-ctx{ width:248px; flex:0 0 auto; overflow:hidden; border-right:1px solid #f3f4f6; background:var(--pf-surface); } .pf-ctx-inner{ display:flex; flex-direction:column; width:248px; height:100%; } .pf-ctx-head{ height:4rem; flex:0 0 auto; display:flex; align-items:center; gap:.5rem; padding:0 .8rem 0 1rem; border-bottom:1px solid #f3f4f6; } .pf-ctx-title{ flex:1; min-width:0; font-size:.95rem; font-weight:700; letter-spacing:-.01em; color:var(--pf-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pf-ctx-collapse{ display:none; place-items:center; width:26px; height:26px; border-radius:7px; border:1px solid #e5e7eb; background:#f9fafb; color:#9ca3af; cursor:pointer; transition:background-color var(--pf-dur-2) var(--pf-ease), color var(--pf-dur-2) var(--pf-ease); } .pf-ctx-collapse:hover{ background:#eef2f7; color:#374151; } .pf-ctx-nav{ flex:1; min-height:0; overflow-y:auto; padding:.75rem; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:#e2e8f0 transparent; } .pf-ctx-nav::-webkit-scrollbar{ width:4px; } .pf-ctx-nav::-webkit-scrollbar-track{ background:transparent; } .pf-ctx-nav::-webkit-scrollbar-thumb{ background:#e2e8f0; border-radius:999px; } .pf-ctx-nav:hover::-webkit-scrollbar-thumb{ background:#cbd5e1; } .pf-ctx-label{ font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--pf-muted); padding:.9rem .6rem .35rem; } /* The first group's label sits right under the panel head — drop the inter-group top padding so it doesn't open with a gap. */ .pf-ctx-nav > .pf-ctx-label:first-child{ padding-top:.15rem; } .pf-ctx-link{ display:flex; align-items:center; gap:.6rem; padding:.42rem .6rem; min-height:38px; border-radius:12px; color:var(--pf-muted); font-size:.875rem; font-weight:500; transition:background-color var(--pf-dur-2) var(--pf-ease), color var(--pf-dur-2) var(--pf-ease); } .pf-ctx-link:hover{ background:var(--pf-surface-soft); color:var(--pf-text); } .pf-ctx-link.active{ background:var(--pf-surface-strong); color:var(--pf-text); font-weight:600; box-shadow:0 1px 2px rgba(17,19,24,.05); } .pf-ctx-badge{ font-size:10px; font-weight:700; background:var(--pf-danger); color:#fff; border-radius:999px; padding:.1rem .4rem; min-width:1.1rem; text-align:center; } /* Hidden submenu panels (only the selected section's panel is shown). */ .pf-ctx-nav[hidden]{ display:none; } /* Keyboard focus — same ink ring on every nav affordance. */ .pf-mrail-link:focus-visible, .pf-mrail-logo:focus-visible, .pf-ctx-link:focus-visible, .pf-ctx-collapse:focus-visible, .pf-ctx-expand:focus-visible{ outline:2px solid var(--pf-primary-ink); outline-offset:2px; } /* Header affordance that re-opens a collapsed contextual panel (desktop). */ .pf-ctx-expand{ display:none; place-items:center; width:34px; height:34px; border-radius:10px; color:var(--pf-muted); transition:background-color var(--pf-dur-2) var(--pf-ease), color var(--pf-dur-2) var(--pf-ease); } .pf-ctx-expand:hover{ background:var(--pf-surface-strong); color:var(--pf-text); } /* Desktop: the contextual panel collapses to a pure icon-rail workspace. Width animates (contents keep their fixed 248px via .pf-ctx-inner). */ @media (min-width:768px){ .pf-ctx{ transition:width var(--pf-dur-2) var(--pf-ease); } .pf-ctx-collapse{ display:grid; } html.pf-ctx-collapsed .pf-ctx{ width:0; border-right-width:0; } html.pf-ctx-collapsed .pf-ctx-expand{ display:grid; } } /* Mobile: a TRUE full-screen navigation surface (like the public site's .pf-navsheet) — never a narrow side-drawer. Full-width header on top; below it the SAME two columns as desktop (icon rail + active submenu, both visible at once). NO drill-down, NO back arrow, NO separate submenu screen: tapping a rail icon just swaps the panel (JS). Only the rail and submenu scroll; the header stays fixed. Covers the whole viewport so no page strip shows beside. */ @media (max-width:767.98px){ .pf-shellnav{ position:fixed; inset:0; z-index:100; width:100vw; height:100dvh; flex-direction:column; background:var(--pf-surface); transform:translateX(-100%); visibility:hidden; transition:transform var(--pf-dur-3) var(--pf-ease-io), visibility 0s linear var(--pf-dur-3); } .pf-shellnav.open{ transform:translateX(0); visibility:visible; transition:transform var(--pf-dur-3) var(--pf-ease-io); } /* Full-width menu header (brand + role chip + close) */ .pf-navhdr{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex:0 0 auto; height:4rem; padding:0 .75rem 0 1rem; border-bottom:1px solid #f3f4f6; } .pf-navhdr-brand{ display:flex; align-items:center; gap:.6rem; min-width:0; min-height:44px; font-weight:800; letter-spacing:-.01em; color:var(--pf-text); } /* Inherits the shared bar ratio — .pf-navhdr is 4rem, the same as the public header, so the two read at identical size. */ .pf-navhdr-logo{ display:grid; place-items:center; width:2rem; height:2rem; flex:0 0 auto; } .pf-navhdr .pf-btn-icon{ width:44px; min-height:44px; flex:0 0 auto; } /* The two columns fill the remaining height; each scrolls on its own. The rail keeps its desktop 72px width; the active state is the icon's own ink pill (no edge bar), so nothing clips at the viewport edge. */ .pf-navbody{ display:flex; flex:1 1 auto; min-height:0; } .pf-mrail-head{ display:none; } /* brand now lives in .pf-navhdr */ .pf-ctx{ flex:1 1 auto; width:auto; min-width:0; border-right:0; } .pf-ctx-inner{ width:100%; } .pf-ctx-head{ padding-left:.9rem; } } /* ==================== MENU SURFACES (dropdowns / popovers) ============== ONE surface for every navigation menu — header notifications, the account menu, search results. They used to each carry their own ad-hoc bg/border/shadow utilities, which drifted apart. Same radius, border, shadow, spacing, entrance and hover language as the rest of the system. */ .pf-menu{ background:var(--pf-surface); border:1px solid var(--pf-border); border-radius:var(--pf-radius-lg); overflow:hidden; padding:.375rem; box-shadow:0 1px 2px rgba(17,19,24,.04), 0 12px 32px -12px rgba(17,19,24,.20); transform-origin:top right; animation:pf-menu-in .16s cubic-bezier(.2,.7,.2,1); } @keyframes pf-menu-in{ from{ opacity:0; transform:translateY(-4px) scale(.98); } } /* Section head inside a menu (e.g. "Notifications" + Mark all read) */ .pf-menu-head{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.5rem .625rem .625rem; } .pf-menu-title{ font-size:.8125rem; font-weight:700; color:var(--pf-text); } /* A row: the one hover language for every menu item. */ .pf-menu-item{ display:flex; align-items:center; gap:.625rem; width:100%; padding:.5rem .625rem; border-radius:9px; font-size:.875rem; font-weight:500; color:var(--pf-text); text-align:left; transition:background-color var(--pf-dur-1) var(--pf-ease), color var(--pf-dur-1) var(--pf-ease); } .pf-menu-item:hover{ background:var(--pf-surface-strong); } .pf-menu-item svg{ color:var(--pf-muted); flex:0 0 auto; } .pf-menu-item:hover svg{ color:var(--pf-text); } .pf-menu-item--danger{ color:var(--pf-danger); } .pf-menu-item--danger svg{ color:var(--pf-danger); } .pf-menu-item--danger:hover{ background:#FEF2F2; } .pf-menu-sep{ height:1px; margin:.375rem -.375rem; background:var(--pf-border); } /* Identity block at the top of the account menu */ .pf-menu-id{ padding:.625rem; } .pf-menu-id-name{ font-size:.875rem; font-weight:600; color:var(--pf-text); } .pf-menu-id-sub{ font-size:.75rem; color:var(--pf-muted); } /* Scrollable body (notification list, search results) */ .pf-menu-body{ max-height:20rem; overflow-y:auto; overscroll-behavior:contain; } .pf-menu-foot{ padding-top:.375rem; margin-top:.375rem; border-top:1px solid var(--pf-border); } .pf-menu-empty{ padding:1.75rem .625rem; text-align:center; font-size:.8125rem; color:var(--pf-muted); } @media (prefers-reduced-motion:reduce){ .pf-menu{ animation:none; } } /* Header dropdowns (notifications / account) on mobile: anchor to the VIEWPORT, not to the trigger — a trigger sitting mid-header would otherwise push a right-0 panel off the left edge. Fixed below the 4rem header with a safe ~12px gutter each side; width tracks the viewport, capped at the panel's own desktop max-width (max-w-[20rem]/[15rem] on the element). Right-aligned, and on narrow screens the equal gutters read as centred — never clipped either side. Desktop keeps the Tailwind `absolute right-0` beside the icon. */ @media (max-width:639.98px){ .pf-hdr-menu{ position:fixed !important; top:calc(4rem + .5rem) !important; left:auto !important; right:.75rem !important; margin-top:0 !important; width:calc(100vw - 1.5rem) !important; z-index:90 !important; transform-origin:top center; } } /* ---- Toasts ---- */ .pf-toasts{ position:fixed; top:1rem; right:1rem; z-index:120; display:flex; flex-direction:column; gap:.6rem; width:min(92vw,380px); } .pf-toast{ display:flex; align-items:flex-start; gap:.6rem; background:var(--pf-surface); border:1px solid var(--pf-border); border-left-width:4px; border-radius:12px; padding:.8rem .9rem; box-shadow:0 10px 30px rgba(16,24,40,.12); font-size:.875rem; color:var(--pf-text); animation:pf-toast-in .35s cubic-bezier(.2,.7,.2,1) both; } .pf-toast.hide{ animation:pf-toast-out .3s ease forwards; } .pf-toast-icon{ flex-shrink:0; margin-top:1px; } /* Dismiss: small glyph, finger-sized target (negative margin keeps the toast's own padding from growing around it). */ .pf-toast-close{ margin-left:auto; margin-block:-.6rem; margin-right:-.3rem; display:inline-grid; place-items:center; min-width:2.5rem; min-height:2.5rem; color:var(--pf-muted); cursor:pointer; line-height:1; border-radius:8px; } .pf-toast-close:hover{ background:#f1f5f9; color:var(--pf-text); } .pf-toast--success{ border-left-color:var(--pf-success); } .pf-toast--success .pf-toast-icon{ color:var(--pf-success); } .pf-toast--error{ border-left-color:var(--pf-danger); } .pf-toast--error .pf-toast-icon{ color:var(--pf-danger); } .pf-toast--info{ border-left-color:var(--pf-info); } .pf-toast--info .pf-toast-icon{ color:var(--pf-info); } .pf-toast--warning{ border-left-color:var(--pf-warning); } .pf-toast--warning .pf-toast-icon{ color:var(--pf-warning); } @keyframes pf-toast-in{ from{opacity:0; transform:translateX(20px);} to{opacity:1; transform:none;} } @keyframes pf-toast-out{ to{opacity:0; transform:translateX(20px);} } /* ---- Modal (custom confirm dialog) ---- */ .pf-modal{ position:fixed; inset:0; z-index:130; display:flex; align-items:center; justify-content:center; padding:1rem; opacity:0; pointer-events:none; transition:opacity var(--pf-dur-2) var(--pf-ease); } .pf-modal.open{ opacity:1; pointer-events:auto; } .pf-modal-backdrop{ position:absolute; inset:0; background:rgba(15,23,42,.55); backdrop-filter:blur(2px); } .pf-modal-card{ position:relative; background:var(--pf-surface); border-radius:16px; width:min(94vw,440px); box-shadow:0 24px 60px rgba(16,24,40,.28); padding:1.5rem; transform:translateY(12px) scale(.98); transition:transform var(--pf-dur-2) var(--pf-ease); } .pf-modal.open .pf-modal-card{ transform:none; } .pf-modal-icon{ width:3rem; height:3rem; border-radius:12px; display:grid; place-items:center; margin-bottom:1rem; } .pf-modal-icon--danger{ background:#fef2f2; color:var(--pf-danger); } .pf-modal-icon--primary{ background:var(--pf-primary-soft); color:var(--pf-primary-ink); } .pf-modal-title{ font-size:1.1rem; font-weight:700; color:var(--pf-text); } .pf-modal-body{ font-size:.9rem; color:var(--pf-muted); margin-top:.35rem; line-height:1.5; } /* Modal actions follow the balanced rule: the dialog is at most 440px wide, so a right-aligned pair at natural widths left dead space on one side and gave the two buttons different hit areas. Now two actions split the card evenly and a lone action takes the full width — same flex-basis + grow mechanic as .pf-bgrid, so a third action wraps to a full-width final row rather than orphaning. */ .pf-modal-actions{ --pf-bgrid-cols:2; --pf-bgrid-gap:.6rem; display:flex; flex-wrap:wrap; gap:var(--pf-bgrid-gap); justify-content:flex-end; margin-top:1.4rem; } .pf-modal-actions > *{ flex:1 1 var(--pf-bgrid-basis); min-width:0; } .pf-modal-actions .pf-btn{ width:100%; justify-content:center; } /* Large remote-content modal (admin detail views) */ .pf-modal-card--lg{ width:min(94vw,620px); max-height:min(88vh,760px); overflow-y:auto; padding:0; } /* The remote loaders hold a SKELETON now, not a centred "Loading…" line, so the placeholder has the reading direction and the padding of the content that replaces it — which is what stops the panel re-laying-itself out the moment the fetch lands. */ .pf-remote-loading{ padding:1.25rem 1.5rem; color:#94a3b8; font-size:.875rem; } .pf-remote-error{ padding:2.5rem 1.5rem; text-align:center; color:#64748b; font-size:.875rem; } .pf-remote-error a{ color:var(--pf-primary-ink); font-weight:600; } .pf-spinner{ display:inline-block; width:1rem; height:1rem; margin-right:.4rem; vertical-align:-2px; border:2px solid var(--pf-primary-border); border-top-color:var(--pf-brand-violet); border-radius:50%; animation:pf-spin .7s linear infinite; } @keyframes pf-spin{ to{ transform:rotate(360deg); } } /* ---- Visibility toggle state (row carries data-public="0|1") ---- */ [data-public="1"] .pf-vis-off{ display:none; } [data-public="0"] .pf-vis-on{ display:none; } /* ---- Empty / error states ---- Same anatomy for "nothing here yet", "no results", and "something broke": icon, one-line title, one-line explanation, one action. */ .pf-empty{ text-align:center; padding:3rem 1.5rem; } .pf-empty-icon{ width:3.5rem; height:3.5rem; border-radius:14px; display:grid; place-items:center; margin:0 auto 1rem; background:var(--pf-surface-strong); color:var(--pf-muted); } .pf-empty-title{ font-size:1rem; font-weight:700; color:var(--pf-text); } .pf-empty-text{ font-size:.875rem; color:var(--pf-muted); margin-top:.35rem; max-width:38ch; margin-inline:auto; line-height:1.6; } .pf-empty-actions{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-top:1.25rem; } .pf-empty-icon--danger{ background:#FEF2F2; color:var(--pf-danger); } .pf-empty-icon--warning{ background:#FFFBEB; color:var(--pf-warning); } /* ---- Skip link (WCAG 2.4.1 "Bypass Blocks") ---- Every layout whose pages repeat a navigation block needs one keyboard bypass to the content. It is visually hidden until focused, then paints as a normal ink pill in the top-left. Kept as a component (not the inline utility chain the public layout used to carry) so the four layouts cannot drift apart, and it sits above the sticky headers and the nav rail. */ .pf-skip{ position:absolute; left:-9999px; top:0; width:1px; height:1px; overflow:hidden; } .pf-skip:focus{ position:fixed; left:.75rem; top:.75rem; z-index:300; width:auto; height:auto; overflow:visible; padding:.55rem 1rem; border-radius:10px; background:var(--pf-ink); color:#fff; font-size:.875rem; font-weight:600; box-shadow:var(--pf-shadow-md); text-decoration:none; } /* ====================== PUBLIC THEMES ====================== */ /* Theme: Developer Dark */ .theme-developer{ background:#0b1020; color:#cbd5e1; font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; } .theme-developer .t-card{ background:#0f172a; border:1px solid #1e293b; border-radius:12px; } .theme-developer a{ color:#22d3ee; } .theme-developer .t-accent{ color:#22d3ee; } .theme-developer .t-chip{ background:#0f172a; border:1px solid #1e293b; color:#7dd3fc; } .theme-developer .t-mono-prompt::before{ content:"$ "; color:#22d3ee; } /* Theme: Creative Designer */ .theme-creative{ background:#fffaf5; color:#1f2937; } .theme-creative .t-hero{ background:linear-gradient(135deg,#fde68a 0%,#fca5a5 45%,#a78bfa 100%); } .theme-creative .t-card{ background:#fff; border-radius:22px; box-shadow:0 12px 40px rgba(167,139,250,.18); } .theme-creative .t-chip{ background:#f5f3ff; color:#6d28d9; border-radius:999px; } .theme-creative h1,.theme-creative h2{ letter-spacing:-.02em; } /* Theme: Academic */ .theme-academic{ background:#fbfaf7; color:#1f2933; font-family:Georgia,"Times New Roman",serif; } .theme-academic .t-card{ background:#fff; border:1px solid #e7e2d6; border-radius:6px; } .theme-academic .t-rule{ border-top:2px solid #1f2933; } .theme-academic a{ color:#7c2d12; text-decoration:underline; } .theme-academic .t-chip{ background:#f3efe6; color:#57534e; border-radius:4px; } /* Theme: Consultant Premium */ .theme-consultant{ background:#0c1a2b; color:#e6edf5; } .theme-consultant .t-hero{ background:linear-gradient(160deg,#0c1a2b,#13294a); } .theme-consultant .t-card{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:16px; backdrop-filter:blur(6px); } .theme-consultant .t-gold{ color:#d4af37; } .theme-consultant .t-chip{ background:rgba(212,175,55,.12); color:#e3c878; border:1px solid rgba(212,175,55,.3); } /* Theme: Modern Personal Brand */ .theme-brand{ background:#0a0a0f; color:#e5e7eb; } .theme-brand .t-hero{ background:radial-gradient(900px 500px at 20% -10%, rgba(236,72,153,.35), transparent 60%), radial-gradient(900px 500px at 90% 10%, rgba(99,102,241,.35), transparent 60%), #0a0a0f; } .theme-brand .t-card{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:18px; } .theme-brand .t-chip{ background:rgba(255,255,255,.06); color:#f9a8d4; border-radius:999px; } .theme-brand .t-grad{ background:linear-gradient(120deg,#f472b6,#818cf8); -webkit-background-clip:text; background-clip:text; color:transparent; } /* Theme: Minimal (default) */ .theme-minimal{ background:#fff; color:#111827; } .theme-minimal .t-card{ background:#fff; border:1px solid #eef0f3; border-radius:14px; } .theme-minimal .t-chip{ background:#f3f4f6; color:#374151; border-radius:8px; } /* Theme: Executive Minimal (premium) — centered editorial */ .theme-executive{ background:#fff; color:#0f172a; } .theme-executive .ex-top{ background:rgba(255,255,255,.82); backdrop-filter:blur(10px); border-bottom:1px solid var(--pf-border); } .theme-executive .ex-top a{ color:#475569; } .theme-executive .ex-top a:hover{ color:var(--pf-primary); } .theme-executive .ex-avatar{ box-shadow:0 0 0 1px var(--pf-border), 0 10px 30px rgba(15,23,42,.08); } .theme-executive .ex-name{ font-size:clamp(2rem,6vw,2.9rem); font-weight:800; letter-spacing:-.03em; line-height:1.05; } .theme-executive .ex-headline{ color:var(--pf-primary); font-weight:600; font-size:1.1rem; } .theme-executive .ex-rule{ height:1px; background:var(--pf-border); } .theme-executive .t-card{ background:#fff; border:1px solid var(--pf-border); border-radius:12px; } .theme-executive .t-chip{ background:#f1f5f9; color:#475569; border-radius:6px; } .theme-executive .t-accent{ color:var(--pf-primary); } .theme-executive a{ color:var(--pf-primary); } .theme-executive section > h2{ font-size:.8rem; text-transform:uppercase; letter-spacing:.14em; color:var(--pf-muted); font-weight:700; border-bottom:1px solid var(--pf-border); padding-bottom:.7rem; } /* Theme: Developer Pro Dark (premium) — fixed sidebar + mono accents */ .theme-devpro{ background:#0a0f1a; color:#cbd5e1; } .theme-devpro .dp-card{ background:#0f172a; border:1px solid #1e293b; border-radius:16px; } .theme-devpro .dp-name{ font-size:1.5rem; font-weight:800; color:#f8fafc; letter-spacing:-.01em; } .theme-devpro .t-accent{ color:var(--pf-accent); } .theme-devpro a{ color:var(--pf-accent); } .theme-devpro .t-card{ background:#0f172a; border:1px solid #1e293b; border-radius:12px; } .theme-devpro .t-chip{ background:#1e293b; color:#93c5fd; border-radius:6px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.72rem; } .theme-devpro .dp-btn{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.9rem; border-radius:10px; padding:.625rem 1.1rem; background:#1e293b; color:#e2e8f0; border:1px solid #334155; transition:var(--pf-dur-1); } .theme-devpro .dp-btn:hover{ background:#334155; } .theme-devpro .pf-input{ background:#0b1220; border-color:#1e293b; color:#e2e8f0; } .theme-devpro .pf-input::placeholder{ color:#64748b; } .theme-devpro .pf-skillbar{ background:#1e293b; } .theme-devpro section > h2{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:1.05rem; color:#f8fafc; font-weight:700; } .theme-devpro section > h2::before{ content:"// "; color:var(--pf-accent); } /* Theme: Creative Studio (premium) — bold asymmetric */ .theme-studio{ background:#fafafa; color:#18181b; } .theme-studio .st-hero{ background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(139,92,246,.12) 60%,rgba(20,184,166,.10)); border-bottom:1px solid var(--pf-border); } .theme-studio .st-avatar{ box-shadow:0 12px 40px rgba(139,92,246,.25); } .theme-studio .st-eyebrow{ text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; font-weight:700; color:var(--pf-accent); } .theme-studio .st-name{ font-size:clamp(2.4rem,8vw,4rem); font-weight:900; letter-spacing:-.04em; line-height:.98; background:linear-gradient(120deg,var(--pf-primary),var(--pf-accent)); -webkit-background-clip:text; background-clip:text; color:transparent; } .theme-studio .st-tag{ font-size:1.05rem; opacity:.8; } .theme-studio .t-card{ background:#fff; border:1px solid var(--pf-border); border-radius:18px; } .theme-studio .t-chip{ background:#f4f4f5; color:#3f3f46; border-radius:999px; } .theme-studio .t-accent{ color:var(--pf-accent); } .theme-studio a{ color:var(--pf-primary); } .theme-studio section > h2{ font-size:1.7rem; font-weight:800; letter-spacing:-.02em; } /* Theme: Academic Scholar (premium) — serif document */ .theme-scholar{ background:#fcfcfa; color:#1f2933; font-family:Georgia,'Times New Roman',serif; } .theme-scholar .sc-name{ font-size:2.3rem; font-weight:700; letter-spacing:-.01em; } .theme-scholar .sc-title{ font-style:italic; color:var(--pf-muted); font-size:1.1rem; } .theme-scholar .sc-meta a, .theme-scholar a{ color:#7c2d12; text-decoration:underline; } .theme-scholar .sc-rule{ border-top:2px solid #1f2933; } .theme-scholar .t-card{ background:#fff; border:1px solid #e7e2d6; border-radius:4px; } .theme-scholar .t-chip{ background:#f3efe6; color:#57534e; border-radius:3px; } .theme-scholar .t-accent{ color:#7c2d12; } .theme-scholar section > h2{ font-family:Georgia,serif; font-size:1.4rem; font-weight:700; border-bottom:1px solid #d6d3c8; padding-bottom:.4rem; } /* Theme: Freelancer Showcase (premium) — services-forward */ /* This theme is designed teal throughout (hero wash, chip, badge) and borrows --pf-secondary for its headline, accent and links. That token is now the logo's sky, so the teal is pinned here instead — otherwise moving a platform token would have repainted half of every published freelancer profile and left the other half teal. */ .theme-freelancer{ background:#f8fafc; color:#0f172a; --pf-secondary:#14B8A6; } .theme-freelancer .fr-hero{ background:radial-gradient(900px 360px at 50% -20%, rgba(20,184,166,.16), transparent 70%); border-bottom:1px solid var(--pf-border); } .theme-freelancer .fr-avatar{ box-shadow:0 0 0 4px #fff, 0 10px 30px rgba(15,23,42,.10); } .theme-freelancer .fr-badge{ display:inline-flex; align-items:center; gap:.45rem; background:#ecfdf5; color:#047857; border:1px solid #a7f3d0; border-radius:999px; padding:.3rem .8rem; font-size:.8rem; font-weight:600; } .theme-freelancer .fr-dot{ width:.5rem; height:.5rem; border-radius:999px; background:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,.25); } .theme-freelancer .fr-name{ font-size:2.4rem; font-weight:800; letter-spacing:-.02em; } .theme-freelancer .fr-headline{ color:var(--pf-secondary); font-weight:600; font-size:1.1rem; } .theme-freelancer .t-card{ background:#fff; border:1px solid var(--pf-border); border-radius:16px; } .theme-freelancer .t-chip{ background:#f0fdfa; color:#0f766e; border-radius:999px; } .theme-freelancer .t-accent{ color:var(--pf-secondary); } .theme-freelancer a{ color:var(--pf-secondary); } .theme-freelancer section > h2{ font-size:1.6rem; font-weight:800; } /* Theme: Personal Brand Premium (premium) — dark glassy mesh */ .theme-brandpro{ color:#e5e7eb; background: radial-gradient(900px 500px at 15% -10%, rgba(139,92,246,.30), transparent 60%), radial-gradient(900px 500px at 90% 0%, rgba(37,99,235,.28), transparent 58%), #0a0a12; } .theme-brandpro .bp-avatar{ box-shadow:0 0 0 2px rgba(255,255,255,.15), 0 16px 50px rgba(139,92,246,.4); } .theme-brandpro .bp-name{ font-size:clamp(2.4rem,7vw,3.6rem); font-weight:900; letter-spacing:-.03em; } .theme-brandpro .bp-grad{ background:linear-gradient(120deg,#a78bfa,#60a5fa,#5eead4); -webkit-background-clip:text; background-clip:text; color:transparent; } .theme-brandpro .bp-headline{ color:#c4b5fd; font-weight:600; font-size:1.15rem; } .theme-brandpro .bp-stat{ font-size:1.9rem; font-weight:800; color:#fff; } .theme-brandpro .t-card{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-radius:18px; backdrop-filter:blur(8px); } .theme-brandpro .t-chip{ background:rgba(255,255,255,.06); color:#ddd6fe; border-radius:999px; } .theme-brandpro .t-accent{ color:#a78bfa; } .theme-brandpro a{ color:#c4b5fd; } .theme-brandpro .pf-input{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); color:#e5e7eb; } .theme-brandpro .pf-input::placeholder{ color:#9ca3af; } .theme-brandpro .pf-skillbar{ background:rgba(255,255,255,.10); } .theme-brandpro section > h2{ font-size:1.7rem; font-weight:800; color:#f8fafc; } /* Theme: Modern Resume (premium) — two-column document */ .theme-resume{ background:#fff; color:#111827; } .theme-resume .rs-head{ border-bottom:2px solid var(--pf-text); } .theme-resume .rs-name{ font-size:2rem; font-weight:800; letter-spacing:-.02em; } .theme-resume .rs-title{ color:var(--pf-primary); font-weight:600; } .theme-resume .rs-body aside{ border-right:1px solid var(--pf-border); padding-right:2.5rem; } @media (max-width:767px){ .theme-resume .rs-body aside{ border-right:0; padding-right:0; } } .theme-resume .t-card{ background:#fff; border:1px solid var(--pf-border); border-radius:8px; } .theme-resume .t-chip{ background:#eff6ff; color:#1d4ed8; border-radius:4px; } .theme-resume .t-accent{ color:var(--pf-primary); } .theme-resume a{ color:var(--pf-primary); } .theme-resume section > h2{ font-size:.85rem; text-transform:uppercase; letter-spacing:.1em; color:var(--pf-primary); font-weight:700; } /* Theme: Portfolio Gallery (premium) — visual-first */ .theme-gallery{ background:#0c0c0d; color:#e5e7eb; } .theme-gallery .gl-bar{ background:rgba(12,12,13,.85); backdrop-filter:blur(10px); border-bottom:1px solid #232325; } .theme-gallery .gl-intro{ border-bottom:1px solid #1c1c1e; } .theme-gallery .gl-tag{ font-size:clamp(1.5rem,4vw,2.4rem); font-weight:700; letter-spacing:-.02em; line-height:1.2; } .theme-gallery #projects .t-card{ border-radius:14px; } .theme-gallery #projects img{ height:18rem; } .theme-gallery .t-card{ background:#161617; border:1px solid #232325; border-radius:12px; } .theme-gallery .t-chip{ background:#232325; color:#d4d4d8; border-radius:6px; } .theme-gallery .t-accent{ color:var(--pf-accent); } .theme-gallery a{ color:#e5e7eb; } .theme-gallery .pf-input{ background:#161617; border-color:#232325; color:#e5e7eb; } .theme-gallery .pf-skillbar{ background:#232325; } .theme-gallery section > h2{ font-size:1.6rem; font-weight:800; color:#fafafa; } /* No verification-badge rule here any more. This theme used to need one — its name is not a heading but a 16px sticky bar, where the old `.62em` badge landed at ~10px — and that hand-tuned 1.05em was the only per-theme badge size in the product. The shared component's clamp now holds the floor for every template at once (.pf-vtick, further down), which puts gallery at 16px without a special case. Do not reintroduce a per-theme badge size. */ /* Theme: Consultant Elite (premium) — light luxury, serif + gold */ .theme-elite{ background:#fbfaf7; color:#1c1917; } .theme-elite .el-hero{ background:linear-gradient(180deg,#fffdf8,#fbfaf7); border-bottom:1px solid #ece7db; } .theme-elite .el-avatar{ box-shadow:0 0 0 1px #e7dcc3, 0 10px 30px rgba(28,25,23,.10); } .theme-elite .el-name{ font-family:Georgia,serif; font-size:2.4rem; font-weight:700; letter-spacing:-.01em; } .theme-elite .el-title{ color:#b08d3a; font-weight:600; letter-spacing:.02em; text-transform:uppercase; font-size:.85rem; } .theme-elite .el-divider{ width:3rem; height:2px; background:#b08d3a; } .theme-elite .t-card{ background:#fff; border:1px solid #ece7db; border-radius:10px; } .theme-elite .t-chip{ background:#f5efe2; color:#8a6d2f; border-radius:4px; } .theme-elite .t-accent{ color:#b08d3a; } .theme-elite a{ color:#8a6d2f; } .theme-elite section > h2{ font-family:Georgia,serif; font-size:1.5rem; font-weight:700; } /* Theme: Student Starter (premium) — friendly, education-first */ .theme-student{ background:#f5f7ff; color:#1e293b; } .theme-student .sd-hero{ background:radial-gradient(800px 320px at 50% -30%, rgba(37,99,235,.14), transparent 70%); } .theme-student .sd-card{ background:#fff; border:1px solid var(--pf-border); border-radius:24px; box-shadow:0 10px 40px rgba(37,99,235,.08); } .theme-student .sd-name{ font-size:2.1rem; font-weight:800; letter-spacing:-.02em; } .theme-student .sd-headline{ color:var(--pf-primary); font-weight:600; } .theme-student .t-card{ background:#fff; border:1px solid var(--pf-border); border-radius:18px; } .theme-student .t-chip{ background:#eef2ff; color:#4338ca; border-radius:999px; } .theme-student .t-accent{ color:var(--pf-primary); } .theme-student a{ color:var(--pf-primary); } .theme-student section > h2{ font-size:1.5rem; font-weight:800; } /* Theme: Tech Founder (premium) — startup landing */ .theme-founder{ background:#ffffff; color:#0f172a; } .theme-founder .fd-hero{ background:linear-gradient(180deg,#f8fafc,#ffffff); border-bottom:1px solid var(--pf-border); } .theme-founder .fd-avatar{ box-shadow:0 8px 24px rgba(15,23,42,.12); } .theme-founder .fd-name{ font-size:clamp(2.4rem,7vw,3.8rem); font-weight:900; letter-spacing:-.035em; line-height:1; } .theme-founder .fd-headline{ color:var(--pf-primary); font-weight:700; font-size:1.15rem; } .theme-founder .fd-mission{ font-size:1.25rem; line-height:1.5; opacity:.8; } .theme-founder .fd-stat{ font-size:2.2rem; font-weight:900; color:var(--pf-primary); } .theme-founder .t-card{ background:#fff; border:1px solid var(--pf-border); border-radius:16px; box-shadow:0 1px 2px rgba(16,24,40,.04); } .theme-founder .t-chip{ background:#f1f5f9; color:#475569; border-radius:6px; } .theme-founder .t-accent{ color:var(--pf-primary); } .theme-founder a{ color:var(--pf-primary); } .theme-founder section > h2{ font-size:1.8rem; font-weight:800; letter-spacing:-.02em; } /* Theme: Elegant Classic (premium) — timeless serif */ .theme-classic{ background:#fffefb; color:#1a1a1a; font-family:Georgia,'Times New Roman',serif; } .theme-classic .cl-avatar{ box-shadow:0 0 0 1px #e5e0d5; } .theme-classic .cl-rule-top{ width:4rem; height:1px; background:#b8a98a; } .theme-classic .cl-rule-bottom{ width:6rem; height:1px; background:#b8a98a; } .theme-classic .cl-name{ font-size:2.4rem; font-weight:700; letter-spacing:.01em; } .theme-classic .cl-title{ font-style:italic; color:#6b6357; font-size:1.1rem; } .theme-classic .t-card{ background:#fff; border:1px solid #ece7da; border-radius:2px; } .theme-classic .t-chip{ background:#f4efe4; color:#6b6357; border-radius:2px; } .theme-classic .t-accent{ color:#9a7b3f; } .theme-classic a{ color:#9a7b3f; } .theme-classic section > h2{ font-family:Georgia,serif; font-size:1.4rem; font-weight:700; text-align:center; letter-spacing:.04em; } /* Theme link-colour rules (.theme-x a{color:var(--pf-primary)}) must never repaint solid action-button labels — primary-on-primary text is invisible. */ [class^="theme-"] .pf-btn-primary,[class*=" theme-"] .pf-btn-primary, [class^="theme-"] a.pf-btn-primary,[class*=" theme-"] a.pf-btn-primary{ color:#fff; } /* Gold/amber/cyan primaries need dark labels to pass contrast. */ .theme-consultant .pf-btn-primary,.theme-gallery .pf-btn-primary, .theme-elite .pf-btn-primary,.theme-classic .pf-btn-primary, .theme-noir .pf-btn-primary{ color:#171310; } .theme-developer .pf-btn-primary{ color:#0b1020; } /* Testimonial rating stars: filled up to the rating, dimmed outline after. */ .pf-star-fill{ fill:currentColor; } .pf-star-dim{ opacity:.3; } /* Themes whose accent is a dark neutral get muddy primary→accent gradients; solid primary reads cleaner (still follows saved custom primaries). */ .theme-elite .pf-skillbar > span,.theme-editorial .pf-skillbar > span, .theme-classic .pf-skillbar > span,.theme-scholar .pf-skillbar > span, .theme-gallery .pf-skillbar > span{ background:var(--pf-primary); } /* Quiet translucent ghost buttons on the dark heroes (default is white). */ .theme-developer .pf-btn-ghost,.theme-consultant .pf-btn-ghost, .theme-brand .pf-btn-ghost,.theme-gallery .pf-btn-ghost, .theme-brandpro .pf-btn-ghost{ background:rgba(255,255,255,.07); color:#e5e7eb; border-color:rgba(255,255,255,.18); } .theme-developer .pf-btn-ghost:hover,.theme-consultant .pf-btn-ghost:hover, .theme-brand .pf-btn-ghost:hover,.theme-gallery .pf-btn-ghost:hover, .theme-brandpro .pf-btn-ghost:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3); } /* Lazy image fade-in */ img[loading="lazy"]{ background:#f3f4f6; } /* Dashboard/admin header — ONE shared component (partials/dash_header.php) for both the user dashboard and the admin panel. 3-column layout (left breadcrumb/title | centre search | right controls). Identical on desktop and mobile; only the profile trigger compacts to avatar-only < sm. */ .pf-hdr{ height:4rem; flex:0 0 auto; display:flex; align-items:center; gap:.5rem; padding:0 .75rem; position:sticky; top:0; z-index:30; background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid var(--pf-border); } .pf-hdr-left{ flex:1; min-width:0; display:flex; align-items:center; gap:.5rem; } /* The search box gives up width before anything else. It was `flex-shrink:0` at a fixed 18rem, which the header cannot afford once the nav shell takes its 320px: at a 768px viewport the content column is 448px, and 18rem of unshrinkable search plus the right-hand controls pushed that cluster ~15px past the viewport edge, clipping the account button. A search field is the one control here that stays usable at any width. */ .pf-hdr-center{ position:relative; width:18rem; min-width:0; flex:0 1 18rem; } .pf-hdr-center input{ padding-left:2.25rem; } /* `flex:0 0 auto`, NOT `flex:1`. This cluster is a fixed set of controls — a bell and an avatar — but claiming an equal share meant it reserved 179px on a 390px screen for ~90px of content, and the breadcrumb opposite was squeezed into 131px and truncated to "Laun… / W…". Sized to its content, the left side gets that space back. `min-width:0` still lets the account name ellipsise on the wide layouts where it is shown. */ .pf-hdr-right{ flex:0 0 auto; min-width:0; display:flex; align-items:center; justify-content:flex-end; gap:.5rem; } @media (min-width:640px){ .pf-hdr{ padding:0 1.25rem; gap:.75rem; } .pf-hdr-right{ gap:.5rem; } } /* Right-cluster controls — Notifications + Profile are one component family: same 2.5rem control height, same hover/focus, sitting on a shared gap. */ .pf-hdr-iconbtn{ position:relative; display:inline-grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:12px; color:var(--pf-muted); background:transparent; cursor:pointer; transition:background-color var(--pf-dur-2) var(--pf-ease), color var(--pf-dur-2) var(--pf-ease); } .pf-hdr-iconbtn:hover{ background:var(--pf-surface-soft); color:var(--pf-text); } .pf-hdr-iconbtn:focus-visible{ outline:2px solid var(--pf-primary-ink); outline-offset:2px; } .pf-hdr-badge{ position:absolute; top:.15rem; right:.15rem; min-width:1.1rem; height:1.1rem; padding:0 .28rem; border-radius:999px; background:var(--pf-danger); color:#fff; font-size:10px; font-weight:700; line-height:1; display:grid; place-items:center; box-shadow:0 0 0 2px var(--pf-surface); } .pf-hdr-profile{ display:inline-flex; align-items:center; gap:.5rem; height:2.5rem; padding:.2rem .5rem .2rem .2rem; border-radius:999px; color:var(--pf-text); background:transparent; cursor:pointer; max-width:12rem; transition:background-color var(--pf-dur-2) var(--pf-ease), box-shadow var(--pf-dur-2) var(--pf-ease); } .pf-hdr-profile:hover{ background:var(--pf-surface-soft); } .pf-hdr-profile:focus-visible{ outline:2px solid var(--pf-primary-ink); outline-offset:2px; } .pf-hdr-profile-name{ min-width:0; max-width:8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.875rem; font-weight:600; letter-spacing:-.01em; } .pf-hdr-profile-caret{ display:grid; place-items:center; color:var(--pf-muted-2); } /* ====================== DATE PICKER (.pf-cal) ========================= The product's calendar popover — see the long comment above the controller in assets/js/app.js for why the native control was replaced. ONE MONTH AT EVERY WIDTH. There is no second pane and no breakpoint that adds one: the popover is a fixed-width card (19.5rem, capped to the viewport) holding a single six-row grid. Everything below is sized off that one assumption — the 7-column track, the ~40px cell, the tap targets. Colour contract: the ONLY saturated colour is the selection, which uses the product primary. Today is an outline, never a fill, so it can sit next to a selected day without the two competing for the same meaning. Everything else is ink and neutrals, so a dense grid still reads as calm. Structure: every day is a square button whose visible chip (.pf-cal-n) is inset inside it. Range shading paints the FULL cell behind that chip, so a span joins edge-to-edge across the row while the days themselves stay round. The day grid is seven per row but is NOT a calendar: it lists the days the month actually has, in reading order, with no weekday header row and no days borrowed from the neighbouring months. Seven is the track width, not a week — see the .pf-cal-grid block below. WHAT IS DELIBERATELY NOT HERE. No card inside the card, no separators the spacing can express on its own, no glow under the selected day, no second accent. The grid of numbers is the interface; everything else is either a control that changes it or it was deleted. When adding to this component, the question is not "does this look good" but "what can the user not do without it". */ .pf-dp-field{ position:relative; display:block; } .pf-dp-field .pf-input{ padding-right:2.25rem; } .pf-dp-icon{ position:absolute; right:.7rem; top:50%; transform:translateY(-50%); color:var(--pf-muted-2); pointer-events:none; display:grid; place-items:center; transition:color var(--pf-dur-1) var(--pf-ease); } .pf-dp-field:focus-within .pf-dp-icon{ color:var(--pf-text); } /* CENTRED IN THE VIEWPORT, ALWAYS WHOLE. This used to be anchored under its field and clamped with JS: measure the box, prefer below, flip above, cap the height when neither side fitted. On a field near the bottom of a long form that produced the two bugs this component was most often reported for — a card whose footer sat below the fold (so Done could not be reached without scrolling the page out from under the calendar it was anchored to), and, because the card was positioned in DOCUMENT coordinates, one that could extend the document itself and grow a scrollbar just by opening. `position:fixed` with `inset:0; margin:auto` removes both at the root: the card is centred in the VIEWPORT, so it cannot be off-screen, and it is out of the document's flow entirely, so it cannot lengthen the page. Nothing measures anything. `height:fit-content` is what makes the auto margins centre rather than stretch, and the max-height is the whole promise of the layout below: the card never exceeds the screen, the head and foot never shrink, and the body takes the overflow. */ .pf-cal{ position:fixed; inset:0; margin:auto; z-index:120; width:min(19.5rem, calc(100vw - 1.5rem)); height:fit-content; max-height:calc(100vh - 1.5rem); max-height:calc(100dvh - 1.5rem); display:flex; flex-direction:column; padding:.75rem .7rem .7rem; background:var(--pf-surface); border:1px solid var(--pf-border); border-radius:16px; /* One shadow. Its only job is to say "this floats above the page" — a second and third layer were saying it again, more expensively. */ box-shadow:0 16px 40px -16px rgba(17,19,24,.28); color:var(--pf-text); /* hidden, not auto: the CARD must never scroll, or the footer scrolls with it. Only .pf-cal-body does. */ overflow:hidden; overscroll-behavior:contain; -webkit-tap-highlight-color:transparent; } .pf-cal[hidden]{ display:none; } /* Background scroll lock while a picker is open (class set by datepicker.js through the shared window.pfScrollLock). The real lock is being taken out of flow by that module — this rule only has to hold the line on browsers where `overflow:hidden` IS enough, and to stop the frozen body from showing a second scrollbar. DELIBERATELY NOT WRAPPED IN A MEDIA QUERY. The lock is touch-only, but that gate lives in ONE place — `COARSE.matches` in datepicker.js, which is also what decides whether the class is ever added. A `(pointer:coarse)` here would be a second gate saying the same thing, and the failure mode of two gates is that they drift apart and the class gets set with no rule behind it. The class is never present on a fine pointer, so the query would not change a single frame. */ html.pf-cal-open, html.pf-cal-open body{ overflow:hidden; overscroll-behavior:none; } /* The card's only in-flow child (the live region beside it is .sr-only and out of flow), and therefore the real column: head, body, optional time row, optional note, foot. `min-height:0` here as well as on the body — a chain of flex items each refuses to shrink below its content until every link in it is told otherwise. */ .pf-cal-inner{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; } /* The dim behind the card. Shown only on touch (datepicker.js gates it on the same COARSE query as the scroll lock) — a desktop popover is small, anchored in a window the reader can see all of, and does not earn a modal's weight. z-index 119, one under the card: the two are siblings on , so this is the whole of the stacking relationship between them. rgba(15,23,42,.45) is the product's existing overlay value — the same dim the mobile drawer uses (.pf-overlay). Dark enough to say the page behind is out of play, light enough to keep the form readable underneath, which is what stops the picker feeling like a page you navigated to. */ .pf-cal-scrim{ position:fixed; inset:0; z-index:119; background:rgba(15,23,42,.45); -webkit-tap-highlight-color:transparent; } .pf-cal-scrim[hidden]{ display:none; } /* Opening motion only — no exit animation, because a picker that lingers on close feels slower than one that simply goes. The dim follows the same rule for a harder reason: Done and Cancel must leave NOTHING on screen still running when the scroll position is restored, or the restore happens under a fading overlay and reads as the page moving. */ .pf-cal-anim{ animation:pf-cal-in var(--pf-dur-2) var(--pf-ease); } @keyframes pf-cal-in{ from{ opacity:0; transform:translateY(-6px) scale(.98); } } /* A separate class, not .pf-cal-anim: that one is a bare class selector and would give the scrim the card's translate-and-scale entrance. */ .pf-cal-scrim.is-in{ animation:pf-cal-scrim-in var(--pf-dur-2) var(--pf-ease); } @keyframes pf-cal-scrim-in{ from{ opacity:0; } } /* Month steps carry a 5px drift in the direction of travel — just enough to say "the same grid moved", not enough to make the user wait for it. */ .pf-cal-body.is-next{ animation:pf-cal-next var(--pf-dur-2) var(--pf-ease); } .pf-cal-body.is-prev{ animation:pf-cal-prev var(--pf-dur-2) var(--pf-ease); } .pf-cal-body.is-zoom{ animation:pf-cal-zoom var(--pf-dur-2) var(--pf-ease); } @keyframes pf-cal-next{ from{ opacity:0; transform:translateX(5px); } } @keyframes pf-cal-prev{ from{ opacity:0; transform:translateX(-5px); } } @keyframes pf-cal-zoom{ from{ opacity:0; transform:scale(.97); } } @media (prefers-reduced-motion:reduce){ .pf-cal-anim,.pf-cal-body.is-next,.pf-cal-body.is-prev,.pf-cal-body.is-zoom, .pf-cal-scrim.is-in{ animation:none; } } /* ---- header: [‹] month year ⌄ [›] ---- */ .pf-cal-head{ flex:0 0 auto; display:flex; align-items:center; gap:.2rem; padding:0 .1rem .5rem; } .pf-cal-nav{ flex:0 0 auto; display:grid; place-items:center; width:2rem; height:2rem; border:0; border-radius:10px; background:transparent; color:var(--pf-muted); cursor:pointer; padding:0; transition:background-color var(--pf-dur-1) var(--pf-ease), color var(--pf-dur-1) var(--pf-ease); } .pf-cal-nav svg{ width:1.05rem; height:1.05rem; } .pf-cal-nav:hover{ background:var(--pf-surface-strong); color:var(--pf-text); } .pf-cal-nav:active{ transform:scale(.94); } .pf-cal-nav:focus-visible{ outline:2px solid var(--pf-primary-ink); outline-offset:2px; } .pf-cal-nav:disabled{ opacity:.3; cursor:not-allowed; background:transparent; } /* Month and year are two separate controls. A single "July 2026" chip hid the year behind a guess about what the caret would open; two labelled chips say what each one does and put both one click away. */ .pf-cal-titles{ flex:1 1 auto; min-width:0; display:flex; align-items:center; justify-content:center; gap:.1rem; } .pf-cal-title{ display:inline-flex; align-items:center; gap:.25rem; height:2rem; padding:0 .45rem; border:0; border-radius:9px; background:transparent; cursor:pointer; font:inherit; font-size:.9375rem; font-weight:650; letter-spacing:-.015em; font-variant-numeric:tabular-nums; color:var(--pf-text); white-space:nowrap; transition:background-color var(--pf-dur-1) var(--pf-ease), color var(--pf-dur-1) var(--pf-ease); } /* The year sits back a step: on a calendar you are nearly always changing the month, and the year is context until you reach for it. */ .pf-cal-title-year{ color:var(--pf-muted); font-weight:550; } .pf-cal-title svg{ width:.7rem; height:.7rem; color:var(--pf-muted-2); flex:0 0 auto; transition:transform var(--pf-dur-1) var(--pf-ease); } .pf-cal-title:hover{ background:var(--pf-surface-strong); color:var(--pf-text); } .pf-cal-title:focus-visible{ outline:2px solid var(--pf-primary-ink); outline-offset:2px; } .pf-cal-title[aria-expanded="true"]{ background:var(--pf-surface-strong); color:var(--pf-text); } .pf-cal-title[aria-expanded="true"] svg{ transform:rotate(180deg); color:var(--pf-text); } /* Kept in the flow, not removed: the arrows have nothing to step while the year list is open, and dropping them would slide the title sideways. */ .pf-cal-nav.is-blank{ visibility:hidden; pointer-events:none; } /* The ONLY part of the card that scrolls. `min-height:0` is what lets it actually shrink inside the flex column — without it a flex item refuses to go below its content's height, the card grows past its max-height, and the footer is pushed off the bottom of the screen: precisely the failure this layout exists to prevent. */ .pf-cal-body{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; /* Scrolling one axis makes the other a clipping edge, and that edge would otherwise fall exactly on the focus ring of the first and last column. The pair cancels out — the content box is unchanged — and buys the ring the few pixels it needs. */ padding-inline:.15rem; margin-inline:-.15rem; display:grid; align-content:start; } /* ---- day grid ---- Seven per row, and that is now ALL the seven means. There is no weekday header row and no borrowed days from the neighbouring months: the grid holds the days the month actually has, 1..28/29/30/31, in reading order. Seven columns are kept because everything below is already built on that track — the cell size, the chip, the range ribbon — and because five rows of seven is the shape that fits the card. */ /* The same 16.25rem box the month and year lists occupy, so switching views never resizes the card — and the same reason it matters more than it used to: the card is centred in the viewport, so a height change moves BOTH edges rather than just the bottom one. Five rows of squares come to about 12.9rem at this width, so there is always room to spare inside that box. `align-content:start` spends it all at the BOTTOM: stepping from March into February then drops the fifth row off the end, instead of re-centring and sliding the four rows that did not change. */ .pf-cal-grid{ display:grid; align-content:start; min-height:16.25rem; } /* No column gap: the cells must touch or a range would show seams between consecutive days. The breathing room lives inside each cell instead. */ .pf-cal-row{ display:grid; grid-template-columns:repeat(7,1fr); } .pf-cal-day{ position:relative; aspect-ratio:1; display:grid; place-items:center; border:0; background:transparent; padding:0; margin:0; cursor:pointer; font:inherit; font-size:.8125rem; font-weight:500; font-variant-numeric:tabular-nums; color:var(--pf-text); -webkit-tap-highlight-color:transparent; } /* The chip is the thing that reads as "a day" — hover, today, selection and focus all land here, never on the square cell, so the grid stays round. */ .pf-cal-n{ position:relative; z-index:2; display:grid; place-items:center; width:2.125rem; height:2.125rem; border-radius:999px; line-height:1; transition:background-color var(--pf-dur-1) var(--pf-ease), color var(--pf-dur-1) var(--pf-ease), box-shadow var(--pf-dur-1) var(--pf-ease), transform var(--pf-dur-1) var(--pf-ease); } .pf-cal-day:hover:not(.is-selected):not([aria-disabled="true"]) .pf-cal-n{ background:var(--pf-surface-strong); } .pf-cal-day:active:not([aria-disabled="true"]) .pf-cal-n{ transform:scale(.92); } /* The ring hugs the chip and is drawn OUTSIDE it against the card, so a focus ring never collides with the neighbouring day. */ .pf-cal-day:focus-visible{ outline:none; } .pf-cal-day:focus-visible .pf-cal-n{ box-shadow:0 0 0 2px var(--pf-surface), 0 0 0 4px var(--pf-ink); z-index:3; } /* Disabled (min/max/data-dp-disabled) stays VISIBLE but recedes — a hole in the grid is harder to scan than a dimmed number. The `.is-out` state that used to live here is gone with the days it described: no cell in the grid belongs to another month any more, so there is nothing left to dim for that reason. */ .pf-cal-day[aria-disabled="true"]{ color:var(--pf-muted-2); opacity:.4; cursor:not-allowed; } /* Today: a ring, never a fill. */ .pf-cal-day.is-today .pf-cal-n{ box-shadow:inset 0 0 0 1.5px var(--pf-border-strong); font-weight:600; } /* Selection: a filled chip and nothing else. It is already the only saturated thing on the card — a glow under it would be volume on a shout. */ .pf-cal-day.is-selected .pf-cal-n{ background:var(--pf-primary); color:#fff; font-weight:600; } /* Range. The band is a full-bleed pseudo-element BEHIND the chips, with the ends of each row rounded, so a span reads as one continuous ribbon that wraps at the week boundary. */ .pf-cal-day.in-range::before, .pf-cal-day.is-range-start::before, .pf-cal-day.is-range-end::before{ content:""; position:absolute; top:.1875rem; bottom:.1875rem; z-index:1; background:rgb(var(--pf-primary-rgb) / 10%); } /* The half-pixel bleed is deliberate: sub-pixel column rounding leaves hairline seams between touching cells at some zoom levels, and a ribbon with gaps in it looks broken rather than subtle. */ .pf-cal-day.in-range::before{ left:-.5px; right:-.5px; } .pf-cal-day.in-range.is-preview::before{ background:rgb(var(--pf-primary-rgb) / 6%); } .pf-cal-day.is-range-start::before{ left:50%; right:-.5px; } .pf-cal-day.is-range-end::before{ left:-.5px; right:50%; } .pf-cal-day.is-solo::before{ display:none; } /* The end under the pointer: outlined in the accent, so "where this would end" never looks like "where this ends". */ .pf-cal-day.is-ghost .pf-cal-n{ color:var(--pf-primary-ink); font-weight:700; box-shadow:inset 0 0 0 1.5px rgb(var(--pf-primary-rgb) / 55%); } /* Rounded only where the ribbon meets the edge of a week, so a span that wraps reads as one shape continued rather than two unrelated bars. */ .pf-cal-row .pf-cal-day.in-range:first-child::before, .pf-cal-row .pf-cal-day.is-range-end:first-child::before{ border-top-left-radius:999px; border-bottom-left-radius:999px; } .pf-cal-row .pf-cal-day.in-range:last-child::before, .pf-cal-row .pf-cal-day.is-range-start:last-child::before{ border-top-right-radius:999px; border-bottom-right-radius:999px; } /* Event indicator — one small dot, never a second colour system. */ .pf-cal-day.has-event .pf-cal-n::after{ content:""; position:absolute; bottom:.22rem; left:50%; transform:translateX(-50%); width:3.5px; height:3.5px; border-radius:50%; background:var(--pf-primary); } .pf-cal-day.is-selected.has-event .pf-cal-n::after{ background:rgba(255,255,255,.92); } /* ---- the month and year lists ---- Same footprint as the day grid, so swapping between them never resizes the card under the pointer, and the list lands on the same optical centre the dates just left. */ .pf-cal-choice{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:.25rem; align-content:center; padding:.25rem .15rem; min-height:16.25rem; } /* Years are a scroll, not a pagination: the list opens on the twelve around the current year and a flick reaches 1994. `height`, not `min-height`, or the grid would grow to fit a century instead of scrolling it. TWELVE AT A TIME, AND THE SAME TWELVE SHAPE AS THE MONTHS. The list used to show a ragged seven-and-a-bit rows: taller than the month grid, denser rows than the month grid, and always with a half-cut row at the bottom, which is what made it read as an endless column of numbers rather than a page you could take in. The window is now exactly one 3×4 page — four 2.75rem rows and the three .25rem gaps between them — so a year is chosen from twelve the same way a month is chosen from twelve. The 4.5rem of margin is not decoration: it restores the 16.25rem footprint the month grid occupies (2.25rem of centring space above and below its four rows), so switching between the two lists still does not resize the card. */ .pf-cal-choice-scroll{ align-content:start; min-height:0; height:11.75rem; padding-block:0; margin-block:2.25rem; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--pf-border-strong) transparent; /* iOS momentum, and rows that come to rest aligned rather than half cut off by the edge of the list. `proximity`, never `mandatory`: a mandatory snap fights a long flick and can trap the scroll between two rows. */ -webkit-overflow-scrolling:touch; scroll-snap-type:y proximity; } /* `start`, not `center`: with only four rows in view, centring a row leaves a sliced row above and below it. Aligning to the top is what keeps a whole twelve on screen. */ .pf-cal-choice-scroll .pf-cal-choice-item{ scroll-snap-align:start; } .pf-cal-choice-scroll::-webkit-scrollbar{ width:6px; } .pf-cal-choice-scroll::-webkit-scrollbar-thumb{ background:var(--pf-border-strong); border-radius:3px; } .pf-cal-choice-scroll::-webkit-scrollbar-track{ background:transparent; } .pf-cal-choice-item{ display:grid; place-items:center; min-height:2.75rem; padding:.4rem .25rem; border:0; border-radius:10px; background:transparent; cursor:pointer; font:inherit; font-size:.8125rem; font-weight:500; color:var(--pf-text); transition:background-color var(--pf-dur-1) var(--pf-ease), color var(--pf-dur-1) var(--pf-ease); } .pf-cal-choice-item:hover:not(.is-selected):not([aria-disabled="true"]){ background:var(--pf-surface-strong); } .pf-cal-choice-item:focus-visible{ outline:2px solid var(--pf-primary-ink); outline-offset:2px; } .pf-cal-choice-item.is-selected{ background:var(--pf-primary); color:#fff; font-weight:600; } /* WHERE THE LIST IS POINTING, which is not the same as what has been chosen. On a month/year field these lists are the picker itself, so a filled cell is a claim that the value is set — filling today's month for somebody who has only picked a year told them "August 2019" was already chosen. This is the quieter state for the view's own position: outlined, never filled, and not announced as current. */ .pf-cal-choice-item.is-anchor{ box-shadow:inset 0 0 0 1px var(--pf-border-strong); color:var(--pf-text); font-weight:600; } .pf-cal-choice-item[aria-disabled="true"]{ color:var(--pf-muted-2); opacity:.4; cursor:not-allowed; } /* The time row keeps its rule: it is a different KIND of input from the grid above it, and that is the one place in this card where a line says something spacing cannot. */ .pf-cal-time{ flex:0 0 auto; display:flex; align-items:center; gap:.65rem; margin-top:.6rem; padding-top:.65rem; border-top:1px solid var(--pf-border); } .pf-cal-time-lab{ font-size:.78rem; font-weight:500; color:var(--pf-muted); } .pf-cal-timeinput{ flex:1; padding-top:.35rem; padding-bottom:.35rem; font-size:.85rem; } /* ALWAYS DRAWN, and always the same two actions. A picker that sometimes has a confirm button and sometimes closes on its own is worse than either shape on its own — you have to work out which kind you are looking at before you know whether you have finished. Hence the divider: the row is now permanent, so a rule above it separates two real things rather than floating over an empty gap. */ /* `flex:0 0 auto` is not cosmetic here: it is the guarantee that Cancel and Done survive every viewport. The body above gives up its height first and scrolls; this row never does. */ .pf-cal-foot{ flex:0 0 auto; display:flex; align-items:center; gap:.4rem; margin-top:.55rem; padding:.55rem .1rem 0; border-top:1px solid var(--pf-border); } .pf-cal-foot-gap{ flex:1 1 auto; } /* The clamp notice. Quiet, not a warning: nothing went wrong — February simply has fewer days than January, and the picker is saying what it did about it. */ .pf-cal-note{ flex:0 0 auto; margin:.5rem .1rem 0; font-size:.75rem; line-height:1.45; color:var(--pf-muted); } .pf-cal-foot [data-dp-done], .pf-cal-foot [data-dp-cancel]{ min-height:2rem; padding:.35rem .9rem; border-radius:9px; font-size:.8125rem; } /* A static header title at reduced precision: same metrics as the chips it replaces, so the header does not change height between modes. */ .pf-cal-title-static{ display:inline-flex; align-items:center; height:2rem; padding:0 .4rem; font-size:.875rem; font-weight:600; color:var(--pf-text); } /* One quiet text action. A bordered button here would out-weigh the calendar it sits under, and it is not the thing the user came for. */ .pf-cal-link{ border:0; background:transparent; cursor:pointer; font:inherit; font-size:.78rem; font-weight:500; color:var(--pf-muted); padding:.35rem .5rem; margin-left:-.5rem; border-radius:8px; transition:background-color var(--pf-dur-1) var(--pf-ease), color var(--pf-dur-1) var(--pf-ease); } .pf-cal-link:hover{ background:var(--pf-surface-strong); color:var(--pf-text); } .pf-cal-link:focus-visible{ outline:2px solid var(--pf-primary-ink); outline-offset:2px; } /* Small phones: trim the card's own padding rather than the cells, so the tap targets survive the narrower viewport. */ @media (max-width:359.98px){ .pf-cal{ padding:.5rem; border-radius:16px; } .pf-cal-n{ width:2rem; height:2rem; } } /* ---- Breadcrumbs (dashboard + admin headers) ---- Separators are CSS, not markup: the
    then contains only real locations and a screen reader never announces "slash". */ .pf-crumbs{ min-width:0; display:flex; align-items:center; } .pf-crumbs-list{ display:flex; align-items:center; list-style:none; margin:0; padding:0; min-width:0; font-size:.875rem; color:var(--pf-muted); } /* Intermediates give up width first; the page you are ON is the last thing to truncate, because it is the one crumb that answers "where am I". */ .pf-crumb{ display:flex; align-items:center; min-width:0; flex:0 1 auto; } .pf-crumb.is-current, .pf-crumb-home, .pf-crumb-ellipsis{ flex:0 0 auto; } .pf-crumb + .pf-crumb::before{ content:"/"; flex:0 0 auto; margin:0 .4rem; color:var(--pf-muted-2); } .pf-crumb-link, .pf-crumb-text{ display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Intermediates get a ceiling so one long record name cannot push the current page out of the header; the full string stays in the title attribute. */ .pf-crumb-link{ max-width:12rem; color:var(--pf-muted); border-radius:6px; transition:color var(--pf-dur-1) var(--pf-ease); } .pf-crumb-link:hover{ color:var(--pf-text); text-decoration:underline; } /* The breadcrumb's home crumb is an icon, so it collapses to its 28px glyph and becomes the smallest tap target in the header. It clears WCAG 2.2's 24px, but 28px under a thumb, at the very top of the screen, next to the drawer button, is a miss. Coarse pointers get a comfortable 40px box; the glyph does not move, only the area around it grows, so nothing shifts on desktop. */ @media (pointer: coarse) { .pf-crumb-link{ min-height:2.5rem; min-width:2.5rem; display:inline-flex; align-items:center; justify-content:center; } } .pf-crumb-link:focus-visible{ outline:2px solid var(--pf-primary-ink); outline-offset:2px; } .pf-crumb-home .pf-crumb-link{ display:grid; place-items:center; width:1.75rem; height:1.75rem; max-width:none; margin-left:-.25rem; color:var(--pf-muted); } .pf-crumb-home .pf-crumb-link:hover{ background:var(--pf-surface-soft); color:var(--pf-text); text-decoration:none; } .pf-crumb-text{ max-width:16rem; color:var(--pf-text); font-weight:600; } .pf-crumb-ellipsis{ color:var(--pf-muted-2); cursor:default; display:none; } /* Narrow: fold everything between Home and the nearest parent. `.sr-only`, not `display:none` — see the comment in partials/breadcrumbs.php: the collapse is visual only, and the full trail stays in the accessibility tree. */ @media (max-width:639.98px){ .pf-crumbs .pf-crumb-ellipsis.is-multi{ display:flex; } .pf-crumbs .pf-crumb-fold{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .pf-crumb-link{ max-width:8rem; } .pf-crumb-text{ max-width:12rem; } } /* Phones below ~480px cannot show Home + a parent + the current page and keep all three legible — measured, the parent and the current label both collapsed to four characters. The nearest parent folds away too, leaving `⌂ / … / Current` with the whole remaining line for the page you are on. Nothing is lost: every folded crumb is still in the accessibility tree, and the ellipsis title lists them for a pointer user. */ @media (max-width:479.98px){ .pf-crumbs .pf-crumb-ellipsis{ display:flex; } .pf-crumbs .pf-crumb:not(.pf-crumb-home):not(.is-current):not(.pf-crumb-ellipsis){ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } } /* Tablet band: the contextual panel is already showing the section name as its own title with the current item highlighted, so the breadcrumb is repeating it — and repeating it badly, crushed to "D.. / O" by the search field beside it. Hidden only while that panel is actually on screen: with the panel collapsed the breadcrumb is the sole indicator of where you are, so it comes straight back. */ @media (min-width:768px) and (max-width:1023.98px){ html:not(.pf-ctx-collapsed) .pf-hdr-crumb{ display:none; } } /* The profile trigger drops to avatar-only in the two bands where the header is genuinely short of room. Below 640 that is the phone. From 768 to 1023 it is the tablet — counter-intuitive until you count the space: at 768 the nav shell claims 320px (72px rail + 248px panel), so the header has 448px to place a search field and two controls in, which is LESS than the same header gets on a 640px phone where the shell is a drawer. Viewport width and available width stop agreeing the moment a fixed-width sidebar exists. */ @media (max-width:639.98px), (min-width:768px) and (max-width:1023.98px){ .pf-hdr-profile{ padding:.2rem; gap:0; max-width:none; } .pf-hdr-profile-name, .pf-hdr-profile-caret{ display:none; } } /* Print: CV-friendly */ @media print{ .no-print{ display:none !important; } body{ background:#fff !important; color:#000 !important; } } /* (Tailwind display-utility parity layer moved to the very end of this file — it must come after ALL component display rules.) */ /* --- Billing cycle toggle + verification tick ------------------------ */ /* Chrome control, not a semantic accent — ink, like every other selected segmented control in the app (.pf-tab.active, .pf-page-link.active). */ .pf-cycle-active{ background:var(--pf-ink); color:#fff; } /* ============== VERIFICATION BADGE (.pf-vtick) — ONE COMPONENT ========= Every badge in the product comes out of Verification::tick(), and every name badge comes out of profile_name(). This is the only block that sizes or aligns them. There are no per-theme rules; adding one is a bug. WHY THIS WAS REWRITTEN. The name badge used to be `width:.62em`, sized against the heading it sat in. That reads as "proportional", and across one theme it is — but the twenty-one hero names range from 1rem (gallery, whose name lives in a 16px sticky bar and is not a heading at all) to clamp max 4.2rem (editorial). A fixed em multiple turned that into a badge that rendered anywhere from ~10px to ~42px depending on which template the same profile was viewed in: a smudge at one end, a balloon at the other. Gallery already carried a hand-tuned override to escape its end of that range, which is the tell that the ratio itself was wrong. THE SIZE. `clamp(1rem, .62em, 1.5rem)` keeps the em relationship — the badge still tracks the name, and the fitter in app.js can still shrink a long name without the badge detaching — but bounds it to 16px–24px, which is the band modern verified badges actually live in (X ships 16px in the timeline and ~20–24px on a profile header). Every template now lands inside one 8px band instead of a 32px one, and the two extremes are the only places the clamp does any work at all: gallery 1rem name → 16px (was 10px, patched to 16.8px per-theme) devpro 1.5rem → 16px (was 14.9px) minimal 1.875rem → 18.6px (unchanged — inside the band) elite 2.4rem → 23.8px (unchanged) executive 2.9rem → 24px (was 28.8px) editorial 4.2rem → 24px (was 41.7px) THE GAP is a fraction of the BADGE, not of the name. Tied to the name it was .18em — 2.9px on gallery and 12px on editorial, so the badge drifted away from the word it belongs to exactly where it was already largest. ALIGNMENT is `vertical-align:middle` on the wrapper, which puts the badge's midpoint on the parent's baseline + half its x-height. That is optical centring that re-solves itself for any combination of badge size and name size, at any viewport, with no per-theme nudging — which is what the old per-theme `-.16em` was hand-approximating. SELF-CONTAINED ON PURPOSE. The layout below is also emitted as Tailwind utilities (`inline-flex align-middle`) by Verification::tick(). Declaring it here as well means the component does not depend on those utilities surviving a purge, and app.css loads after tailwind.css so these win. */ .pf-vtick{ display:inline-flex; align-items:center; justify-content:center; /* Not inert: in Verification::chip() the tick IS a flex item, and without this a long label squashes it. */ flex:0 0 auto; vertical-align:middle; line-height:0; } /* `block`, not `inline-block`: a flex item blockifies anyway, and the `vertical-align:-2px` that used to sit here was dead for the same reason — vertical-align does nothing to a flex item. Alignment is the wrapper's job, above. */ .pf-vtick svg{ display:block; flex:0 0 auto; } /* The name badge — the one beside the display name in every theme hero. */ .pf-vtick .pf-tick-name{ --pf-vbadge:clamp(1rem, .62em, 1.5rem); /* min-* as well as width/height: the size is a floor the component owns, not a hint a flex or grid parent may shrink. Together with the SVG's own viewBox this is what makes stretching impossible. */ width:var(--pf-vbadge); height:var(--pf-vbadge); min-width:var(--pf-vbadge); min-height:var(--pf-vbadge); margin-left:calc(var(--pf-vbadge) * .26); } /* --- Profile display name (every theme hero, via profile_name()) ------- INVARIANT: the full name and its verification tick always occupy ONE line, are never truncated and never get an ellipsis. When the name is wider than its container the TYPE shrinks, never the text. `.pf-name` stays `display:inline` on purpose — the gradient themes (.t-grad/.bp-grad) paint background-clip:text on the ancestor, and an inline-block child would break that clip. Sizing is em-relative so every theme keeps its own heading scale; the tick is already em-sized above, so it shrinks in step and stays attached to the last word. */ .pf-name{ white-space:nowrap; hyphens:none; } /* No-JS / first-paint baseline for long names on narrow screens. Names that already fit are never touched, so no theme's visual identity changes. app.js ([data-name-fit]) then sets the exact size that fits. */ @media (max-width:640px){ .pf-name-long { font-size:.84em; } .pf-name-xlong{ font-size:.68em; } } @media (max-width:400px){ .pf-name-long { font-size:.74em; } .pf-name-xlong{ font-size:.58em; } } /* --- About: limited preview + Read more / Show less -------------------- The ONLY shortened section on a profile. Line-clamped (not height-cut) so the preview always ends on a full line, in whatever type each theme uses. Neutral styling — colour comes from the theme's own .t-accent. */ .pf-about-text.is-clamped{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:var(--pf-about-lines,7); line-clamp:var(--pf-about-lines,7); overflow:hidden; } @media (max-width:640px){ .pf-about-text.is-clamped{ --pf-about-lines:5; } } .pf-about-toggle{ display:inline-flex; align-items:center; gap:.25rem; margin-top:.85rem; font-size:.875rem; font-weight:600; cursor:pointer; /* No underline: the caret beside the label already says this is a control, and the theme's own accent colour carries the affordance. */ text-decoration:none; } .pf-about-toggle:hover{ opacity:.8; } .pf-about-caret{ transition:transform var(--pf-dur-2) var(--pf-ease); } [data-expanded="true"] .pf-about-caret{ transform:rotate(180deg); } @media (prefers-reduced-motion:reduce){ .pf-about-caret{ transition:none; } } /* ====================== MAX CUSTOMIZATION LAYER ====================== Applied on public profiles via body classes + --pfc-* vars emitted by Custom::bodyAttrs(). Placed after the theme styles so equal-specificity rules win by source order; body. descendant selectors out-rank the .theme-* rules. Values are server-validated hex only. */ /* Palette override (each class only present when that colour is set) */ body.pf-c-background{ background:var(--pfc-background); } body.pf-c-text{ color:var(--pfc-text); } body.pf-c-text h1, body.pf-c-text h2, body.pf-c-text h3{ color:var(--pfc-text); } body.pf-c-card .t-card{ background:var(--pfc-card); } body.pf-c-border .t-card{ border:1px solid var(--pfc-border); } body.pf-c-button .pf-btn-primary{ background:var(--pfc-button); color:#fff; } body.pf-c-link a:not(.pf-btn):not(.t-chip){ color:var(--pfc-link); } /* Section density */ body.pf-density-compact .t-card{ padding:1rem; } body.pf-density-compact main section{ margin-bottom:1.25rem; } body.pf-density-spacious .t-card{ padding:2.5rem; } body.pf-density-spacious main section{ margin-bottom:3.5rem; } /* Card radius */ body.pf-radius-sharp .t-card{ border-radius:4px; } body.pf-radius-round .t-card{ border-radius:22px; } body.pf-radius-pill .t-card{ border-radius:32px; } /* Button style (profile action buttons) */ body.pf-btnstyle-soft .pf-btn-primary{ background:rgb(var(--pfc-button-rgb, var(--pf-primary-rgb)) / 14%); color:var(--pfc-button, var(--pf-primary)); box-shadow:none; } body.pf-btnstyle-outline .pf-btn-primary{ background:transparent; color:var(--pfc-button, var(--pf-primary)); border:2px solid currentColor; box-shadow:none; } body.pf-btnstyle-pill .pf-btn{ border-radius:999px; } /* Social link style */ /* Social links follow the balanced rule on phones. Above 640px they stay content-sized pills — that is the themes' hero design and a link's own name is the right width for it. Below it they were a ragged wrap whose last line left dead space, so they become two equal columns with the trailing link taking the whole final row. Scoped OUT of `pf-social-icons`: that style renders label-less icon squares, and stretching a 1.15rem glyph across half the hero is not a button. */ .pf-social-row{ min-width:0; } @media (max-width:639.98px){ body:not(.pf-social-icons) .pf-social-row{ --pf-bgrid-cols:2; --pf-bgrid-gap:.5rem; --pf-bgrid-basis:calc( (100% - (var(--pf-bgrid-cols) - 1) * var(--pf-bgrid-gap)) / var(--pf-bgrid-cols) - .05px); width:100%; gap:var(--pf-bgrid-gap); } body:not(.pf-social-icons) .pf-social-row > .pf-social-chip{ flex:1 1 var(--pf-bgrid-basis); min-width:0; justify-content:center; } /* The label is the only elastic part of the chip, so it is what clips when a handle is long — the icon and the verification tick always stay visible. */ body:not(.pf-social-icons) .pf-social-row > .pf-social-chip .pf-social-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; } } body.pf-social-buttons .pf-social-chip{ padding:.55rem 1.1rem; border-radius:12px; font-weight:600; } body.pf-social-icons .pf-social-label{ display:none; } body.pf-social-icons .pf-social-chip{ padding:.55rem; border-radius:12px; } body.pf-social-icons .pf-social-chip .pf-social-ico svg{ width:1.15rem; height:1.15rem; } /* Icon sets (social icons) */ body.pf-icons-solid .pf-social-ico{ background:var(--pf-primary); color:#fff; border-radius:50%; padding:.3rem; } body.pf-icons-rounded .pf-social-ico{ background:rgb(var(--pf-primary-rgb) / 12%); color:var(--pf-primary-ink); border-radius:8px; padding:.3rem; } body.pf-icons-duotone .pf-social-ico{ background:rgb(var(--pf-accent-rgb) / 18%); color:var(--pf-primary-ink); border-radius:50%; padding:.3rem; } body.pf-icons-duotone .pf-social-ico svg{ opacity:.85; } body.pf-icons-thin .pf-social-ico svg{ stroke-width:1.1; } body.pf-icons-brand .pf-social-ico{ color:#fff; border-radius:50%; padding:.3rem; background:#64748b; } body.pf-icons-brand [data-platform="github"] .pf-social-ico{ background:#24292f; } body.pf-icons-brand [data-platform="linkedin"] .pf-social-ico{ background:#0a66c2; } body.pf-icons-brand [data-platform="twitter"] .pf-social-ico, body.pf-icons-brand [data-platform="x"] .pf-social-ico{ background:#0f1419; } body.pf-icons-brand [data-platform="facebook"] .pf-social-ico{ background:#1877f2; } body.pf-icons-brand [data-platform="instagram"] .pf-social-ico{ background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); } body.pf-icons-brand [data-platform="youtube"] .pf-social-ico{ background:#ff0000; } body.pf-icons-brand [data-platform="dribbble"] .pf-social-ico{ background:#ea4c89; } body.pf-icons-brand [data-platform="behance"] .pf-social-ico{ background:#1769ff; } body.pf-icons-brand [data-platform="tiktok"] .pf-social-ico{ background:#010101; } body.pf-icons-brand [data-platform="telegram"] .pf-social-ico{ background:#26a5e4; } body.pf-icons-brand [data-platform="whatsapp"] .pf-social-ico{ background:#25d366; } body.pf-icons-brand [data-platform="medium"] .pf-social-ico{ background:#191919; } /* Verified badge style */ body.pf-badge-gold .pf-vtick svg path:first-child{ fill:#d4a017; } body.pf-badge-mono .pf-vtick svg path:first-child{ fill:#334155; } /* Theme: Editorial Max — magazine paper + ink */ .theme-editorial{ background:#faf9f6; color:#191919; } .theme-editorial .ed-topline{ border-bottom:2px solid #191919; color:#6b6b6b; font-weight:600; } .theme-editorial .ed-kicker{ color:#b3261e; font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:.8rem; } .theme-editorial .ed-name{ font-family:Georgia,'Times New Roman',serif; font-weight:700; font-size:clamp(2.6rem,7vw,4.2rem); line-height:1.02; letter-spacing:-.02em; } .theme-editorial .ed-standfirst{ font-size:1.15rem; line-height:1.65; color:#44403c; } .theme-editorial .ed-avatar{ border-radius:2px; box-shadow:8px 8px 0 #e7e4dc; } .theme-editorial .ed-rule{ height:1px; background:#d9d5cb; } .theme-editorial .t-card{ background:#fff; border:1px solid #e7e4dc; border-radius:2px; } .theme-editorial .t-chip{ background:#efece4; color:#57534e; border-radius:2px; } .theme-editorial .t-accent{ color:#b3261e; } .theme-editorial a{ color:#b3261e; } .theme-editorial section > h2{ font-family:Georgia,serif; font-size:1.6rem; font-weight:700; border-bottom:2px solid #191919; padding-bottom:.4rem; letter-spacing:-.01em; } /* Theme: Luxury Noir Max — near-black + gold hairlines */ .theme-noir{ background:#0d0d0f; color:#e8e6e1; } .theme-noir .nr-frame{ border:1px solid #c8a951; border-radius:2px; } .theme-noir .nr-avatar{ border-radius:1px; filter:saturate(.9); } .theme-noir .nr-name{ font-family:Georgia,serif; font-weight:600; font-size:clamp(2.1rem,5vw,3rem); letter-spacing:.06em; text-transform:uppercase; } .theme-noir .nr-title{ color:#c8a951; font-size:.85rem; font-weight:600; text-transform:uppercase; letter-spacing:.28em; } .theme-noir .nr-rule{ width:3.5rem; height:1px; background:#c8a951; } .theme-noir .t-card{ background:#141416; border:1px solid #26262a; border-radius:4px; } .theme-noir .t-chip{ background:#1b1b1e; color:#d6c491; border:1px solid #2e2c26; border-radius:3px; } .theme-noir .t-accent{ color:#c8a951; } .theme-noir a{ color:#d6c491; } .theme-noir section > h2{ font-family:Georgia,serif; font-weight:600; font-size:1.25rem; text-transform:uppercase; letter-spacing:.18em; color:#e8e6e1; } .theme-noir .pf-btn-ghost{ background:transparent; color:#e8e6e1; border-color:#3a3a3f; } .theme-noir .pf-btn-ghost:hover{ background:#1b1b1e; border-color:#c8a951; } /* Theme: Casebook — case-study portfolio (product & UX designers) Paper-and-ink on purpose: the accent tints numbers, rules and links only, never a text background, so any user colour stays legible and the only saturation on the page comes from the person's own screenshots. */ .theme-casebook{ background:#fbfbf9; color:#16171a; } .theme-casebook .cb-shell{ max-width:66rem; margin-inline:auto; padding-inline:1.5rem; } .theme-casebook .cb-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.16em; color:#8a8a93; padding-bottom:.9rem; border-bottom:1px solid #e6e5e0; } .theme-casebook .cb-open{ display:inline-flex; align-items:center; gap:.45rem; color:#16171a; } .theme-casebook .cb-dot{ width:.45rem; height:.45rem; border-radius:50%; background:var(--pf-primary); box-shadow:0 0 0 3px rgb(var(--pf-primary-rgb) / 22%); } .theme-casebook .cb-hero{ display:grid; gap:2rem; align-items:start; padding-top:2.75rem; grid-template-columns:1fr; } .theme-casebook .cb-avatar{ width:88px; height:88px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 1px #e6e5e0; } .theme-casebook .cb-name{ font-size:clamp(2.4rem,6.5vw,4rem); font-weight:800; letter-spacing:-.035em; line-height:1.02; } .theme-casebook .cb-role{ margin-top:.85rem; font-size:1.05rem; font-weight:600; color:var(--pf-primary); } .theme-casebook .cb-lede{ margin-top:1rem; max-width:34rem; font-size:1.08rem; line-height:1.68; color:#4b4c53; } .theme-casebook .cb-h2, .theme-casebook section > h2{ font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.2em; color:#8a8a93; padding-bottom:.7rem; margin-bottom:2rem; border-bottom:1px solid #e6e5e0; } .theme-casebook .cb-cases{ display:flex; flex-direction:column; gap:3.5rem; } .theme-casebook .cb-case{ display:grid; grid-template-columns:1fr; gap:.75rem; } .theme-casebook .cb-case-num{ font-size:.8rem; font-weight:800; letter-spacing:.1em; font-variant-numeric:tabular-nums; color:var(--pf-primary-ink); } .theme-casebook .cb-case-link{ display:grid; gap:1.5rem; grid-template-columns:1fr; color:inherit; text-decoration:none; } .theme-casebook .cb-case-media{ overflow:hidden; border-radius:10px; background:#f1f0ec; border:1px solid #e6e5e0; } .theme-casebook .cb-case-img{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform var(--pf-dur-3) var(--pf-ease); } .theme-casebook .cb-case-link:hover .cb-case-img{ transform:scale(1.02); } .theme-casebook .cb-case-head{ display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap; } .theme-casebook .cb-case-title{ font-size:1.5rem; font-weight:700; letter-spacing:-.02em; } .theme-casebook .cb-case-year{ font-size:.8rem; font-variant-numeric:tabular-nums; color:#8a8a93; } .theme-casebook .cb-case-sum{ margin-top:.6rem; font-size:.98rem; line-height:1.65; color:#4b4c53; } .theme-casebook .cb-case-tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem; } .theme-casebook .cb-case-go{ display:inline-flex; align-items:center; gap:.3rem; margin-top:1.15rem; font-size:.88rem; font-weight:700; color:var(--pf-primary-ink); } .theme-casebook .cb-case-link:hover .cb-case-go{ gap:.55rem; } .theme-casebook .cb-case-go{ transition:gap var(--pf-dur-2) var(--pf-ease); } .theme-casebook .t-card{ background:#fff; border:1px solid #e6e5e0; border-radius:10px; } .theme-casebook .t-chip{ background:#f1f0ec; color:#5b5c63; border-radius:999px; padding:.2rem .6rem; font-size:.75rem; font-weight:600; } .theme-casebook .t-accent{ color:var(--pf-primary); } .theme-casebook a{ color:var(--pf-primary); } @media (min-width:900px){ .theme-casebook .cb-hero{ grid-template-columns:1fr auto; } .theme-casebook .cb-case{ grid-template-columns:3.5rem 1fr; gap:1.5rem; } /* Top-aligned, not centred: the media column is always taller than the text, so centring dropped every case title to the middle of its own image and read as a hole rather than as a column. */ .theme-casebook .cb-case-link{ grid-template-columns:1.15fr 1fr; align-items:start; gap:2.25rem; } .theme-casebook .cb-case-text{ padding-top:.25rem; } } /* Theme: Horizon — one continuous career chronology. The year gutter is a fixed width with tabular figures so every year in the column sits on the same axis; that alignment is what makes the spine read as drawn rather than typed. */ .theme-horizon{ background:#fff; color:#15171c; } .theme-horizon .hz-shell{ max-width:52rem; margin-inline:auto; padding-inline:1.5rem; } .theme-horizon .hz-hero{ display:flex; align-items:center; gap:1.25rem; } .theme-horizon .hz-avatar{ width:96px; height:96px; border-radius:20px; object-fit:cover; flex:0 0 auto; box-shadow:0 0 0 1px #e7e8ec; } .theme-horizon .hz-name{ font-size:clamp(1.9rem,5vw,2.6rem); font-weight:800; letter-spacing:-.03em; line-height:1.1; } .theme-horizon .hz-role{ margin-top:.3rem; font-weight:600; color:var(--pf-primary); } .theme-horizon .hz-meta{ display:flex; flex-wrap:wrap; gap:.25rem 1rem; margin-top:.6rem; font-size:.85rem; color:#6b6e78; } .theme-horizon .hz-meta span{ display:inline-flex; align-items:center; gap:.3rem; } .theme-horizon .hz-lede{ margin-top:1.5rem; font-size:1.05rem; line-height:1.7; color:#4a4d57; } .theme-horizon .hz-h2, .theme-horizon section > h2{ font-size:1.05rem; font-weight:700; letter-spacing:-.01em; color:#15171c; margin-bottom:1.75rem; padding-bottom:.6rem; border-bottom:1px solid #ebecf0; } .theme-horizon .hz-track{ position:relative; list-style:none; margin:0; padding:0; } .theme-horizon .hz-ev{ position:relative; display:grid; gap:.5rem; grid-template-columns:1fr; padding-left:1.5rem; padding-bottom:2rem; } /* The rail is drawn on the list item, not the list, so the last entry's line stops at its own node instead of running past the final card. */ .theme-horizon .hz-ev::before{ content:""; position:absolute; left:.3rem; top:.5rem; bottom:0; width:1px; background:#e7e8ec; } .theme-horizon .hz-ev:last-child::before{ display:none; } .theme-horizon .hz-node{ position:absolute; left:0; top:.35rem; width:.65rem; height:.65rem; border-radius:50%; background:#fff; border:2px solid var(--pf-primary); } .theme-horizon .hz-ev.is-now .hz-node{ background:var(--pf-primary); box-shadow:0 0 0 4px rgb(var(--pf-primary-rgb) / 16%); } .theme-horizon .hz-year{ display:flex; align-items:baseline; gap:.4rem; font-variant-numeric:tabular-nums; font-weight:700; font-size:.9rem; color:#15171c; } .theme-horizon .hz-year small{ font-weight:600; font-size:.78rem; color:#8b8e98; } .theme-horizon .hz-card{ padding:1.1rem 1.25rem; } .theme-horizon .hz-ev-head{ display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; flex-wrap:wrap; } .theme-horizon .hz-ev-title{ font-size:1.05rem; font-weight:700; letter-spacing:-.01em; } .theme-horizon .hz-kind{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; } .theme-horizon .hz-org{ margin-top:.15rem; font-size:.9rem; font-weight:600; } .theme-horizon .hz-where{ color:#8b8e98; font-weight:500; } .theme-horizon .hz-desc{ margin-top:.6rem; font-size:.9rem; line-height:1.65; color:#4a4d57; white-space:pre-line; } .theme-horizon .t-card{ background:#fff; border:1px solid #e7e8ec; border-radius:12px; } .theme-horizon .t-chip{ background:#f4f5f7; color:#5b5e68; border-radius:999px; padding:.15rem .55rem; font-size:.75rem; font-weight:600; } .theme-horizon .t-accent{ color:var(--pf-primary); } .theme-horizon a{ color:var(--pf-primary); } @media (min-width:720px){ /* Year moves into a fixed gutter; the rail sits between gutter and card. */ .theme-horizon .hz-ev{ grid-template-columns:4.5rem 1fr; gap:0 2rem; padding-left:0; } .theme-horizon .hz-year{ display:block; text-align:right; padding-top:.1rem; } .theme-horizon .hz-year small{ display:block; } .theme-horizon .hz-ev::before{ left:5.8rem; top:.6rem; } .theme-horizon .hz-node{ left:5.5rem; top:.45rem; } } /* ====================== MARKETING / EDITORIAL LAYER ====================== Public + landing surfaces. Principles: white canvas, huge charcoal type, hairline borders instead of shadows, real product UI instead of abstract decoration, and colour ONLY where it means something. The brand gradient (--pf-grad) appears at most a handful of times per page: the logo, one hero detail, and the closing CTA. Everything else is neutral. */ /* Gradient button — reserved for the single closing CTA per page. */ .pf-btn-gradient{ background:var(--pf-grad-ink); color:#fff; border:none; box-shadow:0 1px 2px rgba(17,19,24,.12); } .pf-btn-gradient:hover{ filter:brightness(1.06); box-shadow:0 6px 20px -6px rgba(124,58,237,.45); } /* Inverse — white on the dark spotlight / gradient panels. */ .pf-btn-invert{ background:#fff; color:var(--pf-text); } .pf-btn-invert:hover{ background:var(--pf-surface-strong); } /* Outline-on-dark. Carries a real, visible box at rest (translucent fill + a border strong enough to read against the gradient) — the hairline version looked like a disabled link until you hovered it. */ .pf-btn-outline-invert{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.55); } .pf-btn-outline-invert:hover{ background:rgba(255,255,255,.22); border-color:#fff; } .pf-btn-outline-invert:active{ background:rgba(255,255,255,.28); } /* ---- Public nav item + active state -------------------------------- Active = the same "selected" language the app chrome already uses for .pf-tab/.pf-ctx-link: a filled neutral pill with ink text. Recognisable at a glance without introducing a new colour. */ .pf-nav-item{ display:inline-flex; align-items:center; padding:.5rem .75rem; border-radius:8px; font-weight:500; color:var(--pf-muted); transition:color var(--pf-dur-1) var(--pf-ease), background-color var(--pf-dur-1) var(--pf-ease); } .pf-nav-item:hover{ color:var(--pf-text); background:var(--pf-surface-strong); } .pf-nav-item.is-active{ color:var(--pf-primary-ink); font-weight:600; background:var(--pf-surface-strong); } .pf-navsheet-link.is-active{ color:var(--pf-primary-ink); font-weight:700; } .pf-navsheet-link.is-active svg{ color:var(--pf-primary-ink); } /* ---- Section divider ------------------------------------------------ Two adjacent sections on the same white canvas get a hairline between them — whitespace alone left the page reading as one long undivided scroll. Sections that already sit on a tinted/dark surface bring their own edge and must NOT also get this, or the seam doubles. */ .pf-divide{ border-top:1px solid var(--pf-border); } /* Section eyebrow — quiet uppercase label, not a coloured pill. */ .pf-eyebrow{ display:inline-flex; align-items:center; gap:.45rem; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--pf-muted); } .pf-eyebrow svg{ color:var(--pf-accent); } .pf-on-dark .pf-eyebrow{ color:rgba(255,255,255,.6); } /* Announcement / trust pill — the one pill left on the page. */ /* Hero badge, with a rotating brand stroke. The pill itself does not move, resize or fade — only the hue travelling around its 1px edge. The interior stays plain white so the badge still reads as a quiet label rather than as decoration. The angle is a REGISTERED custom property: a plain `--x: 0deg` cannot be interpolated (custom properties animate as discrete strings), so without @property the conic gradient would jump rather than sweep. `--pf-pill-angle` is also declared normally on .pf-pill below, which matters — in a browser without @property support an unresolved var() would invalidate the whole conic-gradient and the stroke would vanish. With the fallback it simply holds still at 0deg. */ @property --pf-pill-angle{ syntax:""; initial-value:0deg; inherits:false; } @keyframes pf-pill-rotate{ to{ --pf-pill-angle:360deg; } } /* At rest this is an ordinary quiet badge: white inside, one hairline grey stroke. The brand ring is the HOVER state — it fades in over the (now transparent) border and thickens slightly. Padding is symmetric; the old .35rem right side existed for a .pf-pill-tag chip that nothing renders. */ .pf-pill{ position:relative; --pf-pill-angle:0deg; display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:600; color:var(--pf-text); background:var(--pf-surface); border:1px solid var(--pf-border); padding:.35rem .8rem; border-radius:999px; box-shadow:var(--pf-shadow-sm); transition:border-color var(--pf-dur-2) var(--pf-ease); } .pf-pill:hover{ border-color:transparent; } /* inset:-1px puts the ring on the border box, not the padding box, so the stroke lands exactly where the hairline sits and the badge's measured size never changes. The two-layer mask paints the interior out, leaving the frame. Paused at rest, so an invisible element costs nothing to render. */ .pf-pill::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none; opacity:0; background:conic-gradient(from var(--pf-pill-angle), var(--pf-brand-cyan), var(--pf-brand-violet), var(--pf-brand-pink), var(--pf-brand-yellow), var(--pf-brand-cyan)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:pf-pill-rotate 7s linear infinite; animation-play-state:paused; transition:opacity var(--pf-dur-2) var(--pf-ease); } .pf-pill:hover::before{ opacity:1; padding:1.5px; animation-play-state:running; } /* prefers-reduced-motion is handled globally further up (every animation is flattened to .001ms and one iteration), which parks this at its end state — a static stroke, no sweep. Nothing component-specific is needed. */ .pf-pill-tag{ display:inline-flex; align-items:center; gap:.25rem; font-size:.7rem; font-weight:700; background:var(--pf-surface-strong); color:var(--pf-muted); padding:.15rem .55rem; border-radius:999px; } /* Hero canvas — near-white with a barely-there grid. No blobs, no glow. */ .pf-mk-hero{ position:relative; overflow:clip; background:var(--pf-bg); } /* The hero canvas stays white. A brand wash here tinted the whole fold and made the page read heavier, which is the opposite of the intent — the colour belongs in the headline and the CTA, not behind them. */ .pf-mk-hero::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:1; background-image:linear-gradient(to right, rgba(17,19,24,.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(17,19,24,.045) 1px, transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(70rem 40rem at 70% 10%, #000, transparent 70%); mask-image:radial-gradient(70rem 40rem at 70% 10%, #000, transparent 70%); } .pf-mk-hero > *{ position:relative; } /* Display type — tight, heavy, near-black, controlled measure. */ .pf-mk-title{ font-weight:800; letter-spacing:-.035em; line-height:1.05; color:var(--pf-text); text-wrap:balance; } .pf-on-dark .pf-mk-title{ color:#fff; } .pf-mk-title .pf-gradient-text{ background:var(--pf-grad); -webkit-background-clip:text; background-clip:text; color:transparent; } /* Hero H1 — fluid so 320px never clips and 1440px never sprawls. */ .pf-h1{ font-size:clamp(2.25rem,5.2vw,4rem); } .pf-h2{ font-size:clamp(1.75rem,3.4vw,2.75rem); } /* Dark spotlight section — the editorial counterweight to all that white. */ /* Dark spotlight — deep charcoal base lit by soft, wide ambient glows. Three large low-opacity radials (violet high-right, blue low-left, a touch of warm peach) rather than one saturated wash: keeps it premium instead of neon, and large radii + low alpha avoid the banding a tight gradient produces. */ .pf-spotlight{ background:var(--pf-dark-base); color:#fff; position:relative; overflow:clip; } .pf-spotlight::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(60rem 34rem at 84% -8%, var(--pf-glow-violet), transparent 64%), radial-gradient(52rem 30rem at 2% 104%, var(--pf-glow-cyan), transparent 62%), radial-gradient(40rem 26rem at 55% 118%, var(--pf-glow-pink), transparent 60%), radial-gradient(34rem 22rem at 96% 96%, var(--pf-glow-yellow), transparent 58%); } .pf-spotlight > *{ position:relative; } .pf-on-dark{ color:#fff; } .pf-on-dark .pf-lede{ color:rgba(255,255,255,.68); } /* ==================== HERO PRODUCT WINDOW (landing) ====================== ClickUp-style hero composition: a Safari-grade browser window anchored to the hero's RIGHT edge — it bleeds to the viewport, its bottom sits on the hero baseline, and a CSS mask (never blur) melts its right + bottom edges into the page. Inside is a PREVIEW of a real profile — identity, availability, metrics, skills — a register quieter than the product itself: ghost actions, muted accents, no fills, no ambient motion. Nothing in here may compete with the hero headline or the page's CTAs. Tokens map 1:1 to design.md (the ClickUp-inspired system): colours from §2, 8px-grid spacing from §5, radius xl=16px ("hero components"), elevation L2 + hairline border per §6's "combine shadows with border strokes". Plus Jakarta Sans is already the platform font (--pf-font), so the design.md type face applies with nothing new loaded. #646464 is the darkest allowed secondary text; icons may drop to 55% of it, text never. Scoped: every rule lives under .hero-card-scene (the grid item in home.php). */ .hero-card-scene{ --ds-text:#292D34; /* Dark Charcoal — headings, key numbers */ --ds-text-2:#646464; /* Dark Gray — secondary text, metadata */ --ds-icon:rgba(100,100,100,.55); /* very subtle icons — never for text */ --ds-border:#E8E8E8; /* Medium Gray — borders, dividers */ --ds-surface:#F8F9FA; /* Light Gray — chrome, subtle surfaces */ --ds-track:#F0F0F0; /* Off-White — progress-bar track */ --ds-fill:#5D5D85; /* Muted Purple — the system's softer accent */ --ds-ok-bg:#D4EDDA; /* success badge, verbatim design.md §4 */ --ds-ok-ink:#155724; --ds-ok-bd:#C3E6CB; --radius:16px; --shadow-card:rgba(0,0,0,.08) 0px 4px 12px 0px; /* elevation L2 */ position:relative; min-width:0; color:var(--ds-text-2); } /* Below lg the window is an ordinary centred block; the lg query at the end of this section turns it into the right-anchored, baseline-sitting bleed. */ .hcs-card{ position:relative; display:flex; flex-direction:column; width:min(34rem,100%); margin-inline:auto; background:#fff; border:1px solid var(--ds-border); border-radius:var(--radius); box-shadow:var(--shadow-card); overflow:hidden; } /* Safari-grade chrome: macOS traffic lights, one minimal address pill. */ .hcs-frame{ display:flex; align-items:center; gap:12px; padding:8px 12px; min-width:0; background:var(--ds-surface); border-bottom:1px solid var(--ds-border); } .hcs-dots{ display:flex; gap:6px; flex:0 0 auto; } .hcs-dots span{ width:8px; height:8px; border-radius:999px; } .hcs-dots span:nth-child(1){ background:#FF5F57; } .hcs-dots span:nth-child(2){ background:#FEBC2E; } .hcs-dots span:nth-child(3){ background:#28C840; } /* width:0 (not merely min-width:0) is load-bearing: a flex item's min-content CONTRIBUTION is its content's min-content size, so the nowrap URL would set the scene's — and the hero grid's — floor to ~322px (the old hero window's lesson). A definite width:0 + flex-grow contributes zero. */ /* Safari's address field is a rounded RECT (design.md md=8px), not a marketing pill — the difference is what makes the chrome read "real". */ .hcs-url{ flex:1 1 0; width:0; min-width:0; max-width:20rem; margin-inline:auto; display:flex; align-items:center; justify-content:center; gap:4px; font-size:12px; font-weight:400; line-height:16px; color:var(--ds-text-2); background:#fff; border:1px solid var(--ds-border); border-radius:8px; padding:6px 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .hcs-url svg{ width:12px; height:12px; flex:0 0 auto; color:var(--ds-icon); } .hcs-frame-end{ width:36px; flex:0 0 auto; } /* mirrors the dots so the pill centres */ /* Cover — a whisper of the system purple over Light Gray; scenery only. */ .hcs-cover{ position:relative; height:80px; background: radial-gradient(90% 170% at 14% 0%, rgba(102,71,240,.07), transparent 56%), radial-gradient(75% 150% at 82% -25%, rgba(118,18,250,.05), transparent 58%), var(--ds-surface); } .hcs-cover::after{ content:""; position:absolute; inset:0; opacity:.03; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); } /* 8px grid: 32px card padding, 24px between sections, 4–12px inside components. The 30rem cap pairs with the right mask stop — content must end inside the opaque zone; whitespace past it is what the fade eats. */ .hcs-body{ padding:0 32px 32px; } .hcs-body > *{ max-width:30rem; } .hcs-avatar{ position:relative; width:64px; height:64px; margin-top:-32px; } .hcs-avatar img{ width:100%; height:100%; border-radius:50%; object-fit:cover; border:3px solid #fff; box-shadow:0 0 0 1px var(--ds-border); background:var(--ds-surface); } /* Identity — heading face at 600: design.md wants 650, but the loaded PJS weights are static (400–800), and 600 is the compliant step down. No tick here — verification lives in the summary grid, stated once. */ .hcs-name{ display:flex; align-items:center; gap:6px; margin-top:16px; font-size:18px; font-weight:600; letter-spacing:-.2px; color:var(--ds-text); line-height:24px; } .hcs-role{ margin-top:4px; font-size:14px; line-height:20px; color:var(--ds-text-2); } .hcs-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:12px; font-size:13px; line-height:20px; color:var(--ds-text-2); } .hcs-meta-item{ display:inline-flex; align-items:center; gap:4px; } .hcs-meta-item svg{ width:14px; height:14px; color:var(--ds-icon); flex:0 0 auto; } /* Availability — design.md's success status badge, verbatim (§4). nowrap is load-bearing: in the summary grid's ~100px column the two-word text would otherwise wrap and split the pill onto two lines. */ .hcs-avail{ display:inline-flex; align-items:center; height:20px; padding:4px 8px; border-radius:3px; font-size:12px; font-weight:600; line-height:1; white-space:nowrap; color:var(--ds-ok-ink); background:var(--ds-ok-bg); border:1px solid var(--ds-ok-bd); } /* Summary grid — Caption label over Emphasis value (design.md §3), two columns, hairline rows. Stacked under the identity by default; the ≥1280 block turns it into the bordered rail on the window's right side. */ .hcs-summary{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px 24px; margin-top:24px; align-content:start; } .hcs-sum-cell{ min-width:0; } .hcs-sum-cell:nth-child(n+3){ border-top:1px solid var(--ds-border); padding-top:12px; } .hcs-sum-l{ display:block; font-size:12px; font-weight:400; line-height:16px; color:var(--ds-text-2); } .hcs-sum-v{ display:flex; align-items:center; gap:4px; margin-top:2px; font-size:14px; font-weight:600; line-height:20px; color:var(--ds-text); font-variant-numeric:tabular-nums; } /* The rating star inherits charcoal — an amber star would add a colour family. */ .hcs-sum-v svg{ width:12px; height:12px; fill:currentColor; flex:0 0 auto; } /* Verification: stroke tick in the system's muted purple, not a filled glyph. */ .hcs-sum-ok svg{ width:14px; height:14px; fill:none; color:var(--ds-fill); } /* Actions — ghost, compact, mockup-scale. The product's real buttons are 44px (design.md touch targets); a preview must not look that tappable, or it competes with the page's CTAs. */ .hcs-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; } .hcs-btn{ display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 16px; border-radius:8px; font-size:13px; font-weight:500; line-height:20px; white-space:nowrap; color:var(--ds-text-2); background:transparent; border:1px solid var(--ds-border); } .hcs-btn svg{ width:13px; height:13px; color:var(--ds-icon); flex:0 0 auto; } /* Socials — very subtle: icon-only at 55% gray, no divider. */ .hcs-social{ display:flex; align-items:center; gap:16px; margin-top:24px; } .hcs-soc{ display:inline-flex; color:var(--ds-icon); } .hcs-soc svg{ width:16px; height:16px; } /* Motion — the entrance rise only. No ambient loops: a static preview may not blink at the reader while the page's real CTAs are asking for a click. The animation opts IN to motion, and the global reduce kill at the top of this file is the second line of defence. */ @keyframes hcs-enter{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion:no-preference){ .hcs-card{ animation:hcs-enter .7s cubic-bezier(.2,.8,.2,1) both; } } @media (min-width:1024px){ /* Anchor right + sit on the baseline. Negative margins on a STRETCHED grid item enlarge it beyond its row: margin-right bleeds the window past the shell's centring gutter and 2rem padding to the viewport edge, and margin-bottom:-6rem drops its bottom through the hero's pb-24 onto the section baseline. The hero's overflow:clip keeps all of it off the scrollbar. */ .hero-card-scene{ margin-right:calc(-1 * (max(0px, (100vw - 1280px) / 2) + 2rem)); margin-bottom:-6rem; padding-left:3rem; /* breathing room between the copy and the window */ /* Soft white fade, right + bottom — a real alpha mask, never blur, so the window dissolves into the textured hero background instead of ending with a hard border. The stops are PAIRED with the body's content cap: content must end inside the opaque zone, so only window whitespace fades. Retune stops and cap together — every breakpoint block below that changes one changes both. */ -webkit-mask-image: linear-gradient(to right, #000 78%, transparent 100%), linear-gradient(to bottom, #000 76%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, #000 78%, transparent 100%), linear-gradient(to bottom, #000 76%, transparent 100%); mask-composite: intersect; } .hcs-card{ width:auto; max-width:none; margin-inline:0; height:100%; } .hcs-body{ flex:1 1 auto; } } /* Narrow lg (1024–1279): the window is only ~575–720px wide — a tighter column + tighter gutter keeps the content edge ~25px inside the 78% stop at exactly 1024px. The summary grid stacks here, and the stacked content nearly fills the row-height window (~92%) — there is no bottom whitespace to fade. margin-top:-3rem buys 48px of headroom (the window rises into the hero's top padding), which puts the last grid row at ~85% and the 88% stop safely past it. */ @media (min-width:1024px) and (max-width:1279px){ .hero-card-scene{ padding-left:1.5rem; margin-top:-3rem; -webkit-mask-image: linear-gradient(to right, #000 78%, transparent 100%), linear-gradient(to bottom, #000 88%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, #000 78%, transparent 100%), linear-gradient(to bottom, #000 88%, transparent 100%); mask-composite: intersect; } .hcs-body > *{ max-width:23rem; } } /* Wide lg (≥1280): the summary grid takes the window's empty right side as a bordered rail beside the identity. Content widens to 34rem, so the right mask stop rises with it: 88% of the 1280px window is ~638px, keeping the 624px content edge inside the opaque zone at the tightest width. */ @media (min-width:1280px){ .hcs-body > *{ max-width:34rem; } .hcs-split{ display:flex; gap:32px; } .hcs-main{ flex:1 1 auto; min-width:0; } .hcs-summary{ flex:0 0 224px; margin-top:0; border-left:1px solid var(--ds-border); padding-left:24px; } .hero-card-scene{ -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%), linear-gradient(to bottom, #000 76%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, #000 88%, transparent 100%), linear-gradient(to bottom, #000 76%, transparent 100%); mask-composite: intersect; } } /* Feature cards — flat, bordered, quiet. Hover lifts the border, not the box. */ .pf-feat{ background:var(--pf-surface); border:1px solid var(--pf-border); border-radius:var(--pf-radius-lg); padding:1.5rem; transition:border-color var(--pf-dur-2) var(--pf-ease), background-color var(--pf-dur-2) var(--pf-ease); } .pf-feat:hover{ border-color:var(--pf-border-strong); background:var(--pf-surface-soft); } a.pf-feat:hover{ background:var(--pf-surface); } /* Tinted icon chips — the sanctioned place for accent colour. Three brand hues (sky / violet / pink) plus the logo's amber, each a tint surface under its AA-safe ink: 5.02, 4.64, 4.81, 4.55. `blue` and `teal` are kept as aliases of the sky chip rather than invented as extra hues — the logo has four stops and a fifth would be off-brand. */ .pf-ico-chip{ display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:10px; } .pf-ico-sky, .pf-ico-blue, .pf-ico-teal { background:var(--pf-cyan-soft-2); color:var(--pf-cyan-ink); } .pf-ico-violet { background:var(--pf-primary-soft-2); color:var(--pf-primary-ink); } .pf-ico-pink { background:var(--pf-pink-soft-2); color:var(--pf-pink-ink); } .pf-ico-amber { background:var(--pf-yellow-soft-2); color:var(--pf-yellow-ink); } .pf-ico-emerald{ background:#F0FDF4; color:#15803D; } .pf-ico-ink { background:var(--pf-surface-strong); color:var(--pf-text); } .pf-on-dark .pf-ico-chip{ background:rgba(255,255,255,.08); color:#fff; } /* Numbered steps — ink counters, hairline rule between them. */ .pf-step{ display:flex; gap:1rem; align-items:flex-start; } .pf-step-n{ flex:0 0 auto; display:grid; place-items:center; width:1.75rem; height:1.75rem; border-radius:999px; font-size:.75rem; font-weight:700; font-variant-numeric:tabular-nums; color:#fff; background:var(--pf-ink); } .pf-on-dark .pf-step-n{ background:#fff; color:var(--pf-text); } /* Stat block — real numbers only; never render this with invented data. */ .pf-stat-n{ font-size:clamp(1.75rem,3vw,2.5rem); font-weight:800; letter-spacing:-.03em; color:var(--pf-text); font-variant-numeric:tabular-nums; line-height:1; } .pf-on-dark .pf-stat-n{ color:#fff; } .pf-stat-l{ font-size:.8rem; font-weight:600; color:var(--pf-muted); margin-top:.4rem; } /* Brand gradient panel — final CTA + auth brand column. Same surface, so the two biggest brand moments in the product are pixel-identical. */ /* The official gradient at FULL strength, with charcoal type on it rather than white. That is what lets the cyan and the yellow stay bright: white needs a dark ground, which meant darkening the ramp until it went muddy (the yellow end turns olive). Ink on the bright ramp measures 4.47 to 11.96 across the sweep, so the panel is both the exact brand colours and readable. */ .pf-brand-panel, .pf-cta-panel{ position:relative; overflow:clip; color:var(--pf-text); background:var(--pf-grad); } /* A soft white bloom, which LIFTS the ramp — on a light panel that helps the ink rather than fighting it. */ .pf-brand-panel::before, .pf-cta-panel::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(32rem 18rem at 88% -25%, rgba(255,255,255,.22), transparent 62%), radial-gradient(26rem 15rem at 6% 125%, rgba(255,255,255,.16), transparent 60%); } .pf-brand-panel > *, .pf-cta-panel > *{ position:relative; } .pf-cta-panel{ border-radius:var(--pf-radius-media); } /* ==================== PRODUCT PREVIEW (profile_preview) ================== A miniature of a real profile.af page, shared by the hero mockup, the dark share card and the theme tiles. Structure: cover → avatar (own row, overlapping) → name → role → meta → chips. Everything below the cover shares ONE left edge (--pv-pad). Vertical rhythm is a small fixed scale, not ad-hoc margins, so the card never reads as crowded. Sizes are in px on purpose: this is a fixed-scale miniature, and inheriting a parent's font-size made it wobble between the hero and the dark card. Nothing here sets a fixed min-content width that could widen its grid track at 320px (see the mock-url note above). */ /* Every painted property resolves from a custom property. That is what lets the theme showcase retint the SAME preview instance (colours, type, radii, buttons) by swapping one class — and, because custom properties on colour properties animate, the change crossfades for free with no layout shift. */ .pf-pv{ --pv-pad:1rem; --pv-ava:3.25rem; --pv-radius:14px; --pv-chip-radius:7px; --pv-btn-radius:8px; --pv-font:inherit; --pv-name-weight:700; --pv-name-spacing:-.015em; --pv-name-transform:none; --pv-role-transform:none; --pv-role-spacing:0; --pv-role-weight:500; /* light defaults */ --pv-bg:#fff; --pv-fg:var(--pf-text); --pv-muted:var(--pf-muted); --pv-muted-2:var(--pf-muted-2); --pv-outline:var(--pf-border); --pv-ava-bg:linear-gradient(135deg,#EEF1FF,#F4EEFB 55%,#FBEEF1); --pv-ava-fg:#4B5162; --pv-chip-bg:var(--pf-surface-soft); --pv-chip-fg:var(--pf-muted); --pv-chip-bd:var(--pf-border); --pv-accent:var(--pf-primary); --pv-ok:var(--pf-success); --pv-ok-halo:rgba(21,128,61,.14); --pv-btn-bg:var(--pf-ink); --pv-btn-fg:#fff; --pv-btn2-bg:transparent; --pv-btn2-fg:var(--pf-muted); --pv-btn2-bd:var(--pf-border); --pv-sep:var(--pf-border-strong); border-radius:var(--pv-radius); overflow:hidden; min-width:0; background:var(--pv-bg); color:var(--pv-fg); font-family:var(--pv-font); box-shadow:0 0 0 1px var(--pv-outline); transition:background-color .5s ease, color .5s ease, box-shadow .5s ease, border-radius .5s ease; } .pf-pv-cover{ position:relative; width:100%; height:4.75rem; } /* A whisper of depth on the banner so it reads as a designed cover, not a flat swatch: a top sheen fading to a faint floor shadow. Kept very low-alpha. */ .pf-pv-cover::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.16), transparent 45%, rgba(0,0,0,.05)); } .pf-pv-body{ padding:0 var(--pv-pad) var(--pv-pad); } /* Overlaps the cover by ~55% of its height, with a hairline ring rather than a thick border. The ring is the card background, so it re-tints with the theme. Holds a name monogram, lifted off the cover with a soft shadow. */ .pf-pv-avatar{ position:relative; z-index:1; width:var(--pv-ava); height:var(--pv-ava); margin-top:calc(var(--pv-ava) * -.55); margin-bottom:.625rem; border-radius:999px; display:grid; place-items:center; font-size:20px; font-weight:600; letter-spacing:-.01em; background:var(--pv-ava-bg); color:var(--pv-ava-fg); box-shadow:0 0 0 3px var(--pv-bg), 0 8px 18px -8px rgba(17,19,24,.28); transition:background-color .5s ease, color .5s ease, box-shadow .5s ease; } .pf-pv-name{ font-size:17px; font-weight:var(--pv-name-weight); line-height:1.25; letter-spacing:var(--pv-name-spacing); text-transform:var(--pv-name-transform); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .5s ease, letter-spacing .5s ease; } .pf-pv-role{ font-size:13.5px; font-weight:var(--pv-role-weight); line-height:1.35; margin-top:.1875rem; color:var(--pv-muted); letter-spacing:var(--pv-role-spacing); text-transform:var(--pv-role-transform); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .5s ease, letter-spacing .5s ease; } /* One compact row: location · availability. */ .pf-pv-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; font-size:12px; font-weight:500; min-width:0; color:var(--pv-muted); transition:color .5s ease; } .pf-pv-meta-item{ display:inline-flex; align-items:center; gap:.3rem; min-width:0; } .pf-pv-meta svg{ color:var(--pv-muted-2); transition:color .5s ease; } .pf-pv-meta-sep{ width:3px; height:3px; border-radius:999px; flex:0 0 auto; background:var(--pv-sep); } .pf-pv-dot{ width:.4375rem; height:.4375rem; border-radius:999px; flex:0 0 auto; background:var(--pv-ok); box-shadow:0 0 0 2.5px var(--pv-ok-halo); transition:background-color .5s ease, box-shadow .5s ease; } .pf-pv-avail{ color:var(--pv-ok); font-weight:600; transition:color .5s ease; } .pf-pv-chips{ display:flex; flex-wrap:wrap; gap:.375rem; margin-top:.875rem; } .pf-pv-chip{ font-size:11.5px; font-weight:500; line-height:1; padding:.375rem .5625rem; border-radius:var(--pv-chip-radius); white-space:nowrap; background:var(--pv-chip-bg); color:var(--pv-chip-fg); box-shadow:inset 0 0 0 1px var(--pv-chip-bd); transition:background-color .5s ease, color .5s ease, border-radius .5s ease, box-shadow .5s ease; } /* ==================== DARK SHARE CARD ==================================== Single consumer now: the analytics spotlight's dashboard card (home.php). Premium dark surface, one whisper of brand glow, hairline structure. Self-contained (its own palette), so it never depends on --pv-* vars. */ .pf-share-card{ position:relative; overflow:hidden; border-radius:var(--pf-radius-media); padding:1.5rem; background:#16181D; border:1px solid rgba(255,255,255,.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 40px 80px -40px rgba(0,0,0,.8); } @media (min-width:640px){ .pf-share-card{ padding:1.75rem; } } .pf-share-card::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(34rem 15rem at 88% -35%, rgba(123,104,238,.16), transparent 62%); } .pf-share-card > *{ position:relative; } .pf-share-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; } .pf-share-tag{ display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; font-size:.6875rem; font-weight:600; color:#A6AEBB; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); padding:.3rem .6rem; border-radius:999px; } .pf-share-tag svg{ color:#8B919C; } /* Quiet pills — deliberately NOT CTA buttons. Hairline ghost pills, muted text, no fill. Used by the dashboard card's quick actions (.pf-dash-acts). */ .pf-share-btn{ display:inline-flex; align-items:center; gap:.4rem; font-size:.8125rem; font-weight:600; line-height:1; color:#A6AEBB; padding:.5rem .8rem; border-radius:9px; border:1px solid rgba(255,255,255,.10); background:transparent; } .pf-share-btn svg{ color:#8B919C; flex:0 0 auto; } /* ================= DASHBOARD VARIANT (spotlight card) ==================== A crop of views/dashboard/index.php — completion, counters, views trend, quick actions, in the product's own order — not an analytics illustration. Density comes from hairlines and tight type; the real page nests cards, which at this size would only add frames around three numbers. Violet is reserved for data (the completion fill and the plot) — every label, number, delta and icon stays in neutral ink, so the card gains information without gaining colour. That rule is why the counters' chips are a white wash rather than the dashboard's brand-tinted ones. */ .pf-dash-l{ display:block; font-size:.625rem; font-weight:600; line-height:1; letter-spacing:.09em; text-transform:uppercase; color:#8B919C; } .pf-dash-block{ margin-top:1.35rem; padding-top:1.35rem; border-top:1px solid rgba(255,255,255,.08); } .pf-dash-trend-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; } /* Direction is carried by the arrow glyph, not by a green fill — the card keeps its one-accent rule, and the cue survives colourblind and forced-colours. */ .pf-dash-delta{ display:inline-flex; align-items:center; gap:.3rem; flex:0 0 auto; font-size:.75rem; font-weight:600; color:#A6AEBB; font-variant-numeric:tabular-nums; } .pf-dash-delta svg{ color:#8B919C; flex:0 0 auto; } /* Sized to the counters, not above them: the real page shouts this number in gradient text, which is exactly the infographic note the preview must not hit. */ .pf-dash-pct{ flex:0 0 auto; font-size:1.0625rem; font-weight:700; letter-spacing:-.02em; line-height:1; color:#F5F7FA; font-variant-numeric:tabular-nums; } /* index.php fills its completion meter with .pf-skillbar — same component here, re-skinned for the dark surface and dropped to the card's data scale so it carries the same weight as the plot. Scoped to .pf-dash-card so the product's light 8px gradient default stays untouched everywhere else. */ .pf-dash-card .pf-skillbar{ height:5px; margin-top:.7rem; background:rgba(255,255,255,.08); } .pf-dash-card .pf-skillbar > span{ background:rgba(123,104,238,.55); } .pf-dash-spark{ display:block; width:100%; height:5rem; margin-top:.85rem; } /* The dashboard's stat card, scaled: icon chip, then value over label. */ .pf-dash-kpis{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:1.35rem; padding-top:1.35rem; border-top:1px solid rgba(255,255,255,.08); } .pf-dash-kpi{ display:flex; align-items:center; gap:.55rem; min-width:0; padding-inline:.85rem; border-left:1px solid rgba(255,255,255,.08); } .pf-dash-kpi:first-child{ padding-left:0; border-left:0; } .pf-dash-kpi:last-child{ padding-right:0; } .pf-dash-kpi-ico{ flex:0 0 auto; display:grid; place-items:center; width:1.75rem; height:1.75rem; border-radius:9px; color:#A6AEBB; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.07); } .pf-dash-kpi-v{ display:block; font-size:1.0625rem; font-weight:700; letter-spacing:-.02em; line-height:1.1; color:#E9ECF2; font-variant-numeric:tabular-nums; } /* The label is the first thing with slack in a three-up row, so it clips rather than widening the track or wrapping under the chip. */ .pf-dash-kpi .pf-dash-l{ margin-top:.3rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Below ~560px the card is too narrow to seat a chip and a label side by side in a third of it — the chip wins on width and the label truncates to "PROFIL…". The chip is the decoration and the label is the information, so the chip goes and the labels wrap onto two lines instead of clipping. Must stay after the rule above: same specificity, so source order is what decides it. */ @media (max-width:560px){ .pf-dash-kpi{ gap:0; padding-inline:.6rem; } .pf-dash-kpi-ico{ display:none; } .pf-dash-kpi .pf-dash-l{ white-space:normal; overflow:visible; } } /* Quick actions: the dashboard's list, wrapped into pills. They reuse .pf-share-btn, which is already the "quiet, not a CTA" pill on this card. */ .pf-dash-acts{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.95rem; } /* ---- Dark treatment: only re-assigns the variables above ---- */ .pf-pv-dark{ --pv-bg:#14161A; --pv-fg:#F2F4F7; --pv-muted:#A6AEBB; --pv-muted-2:#767E8B; --pv-outline:rgba(255,255,255,.09); --pv-ava-bg:#242830; --pv-ava-fg:#8D95A1; --pv-chip-bg:rgba(255,255,255,.06); --pv-chip-fg:#C3CAD4; --pv-chip-bd:rgba(255,255,255,.08); --pv-ok:#3DD68C; --pv-ok-halo:rgba(61,214,140,.16); --pv-sep:#3A404A; --pv-btn-bg:#fff; --pv-btn-fg:#14161A; --pv-btn2-fg:#C3CAD4; --pv-btn2-bd:rgba(255,255,255,.16); } /* ---- Compact tile — same anatomy, smaller scale ---- */ .pf-pv-sm{ --pv-pad:.75rem; --pv-ava:2.25rem; } .pf-pv-sm .pf-pv-cover{ height:3rem; } .pf-pv-sm .pf-pv-avatar{ margin-bottom:.5rem; } .pf-pv-sm .pf-pv-name{ font-size:13px; } .pf-pv-sm .pf-pv-role{ font-size:11px; margin-top:.125rem; } .pf-pv-sm .pf-pv-chips{ margin-top:.5rem; gap:.25rem; } .pf-pv-sm .pf-pv-chip{ font-size:10px; padding:.25rem .4375rem; border-radius:6px; } /* ---- Large variant (theme showcase) ---- height is FIXED. The three templates deliberately differ in layout (centred vs left, 2-up vs stacked cards, serif vs mono), which changes their natural height — pinning the box means those structural differences can never resize the card or shift the section. Content is anchored to the top and simply has more or less air beneath it. */ .pf-pv-lg{ --pv-pad:1.5rem; --pv-ava:4.5rem; height:22rem; } .pf-pv-lg .pf-pv-cover{ height:6.5rem; } .pf-pv-lg .pf-pv-avatar{ margin-bottom:.875rem; } .pf-pv-lg .pf-pv-name{ font-size:22px; } .pf-pv-lg .pf-pv-role{ font-size:15px; margin-top:.25rem; } .pf-pv-lg .pf-pv-meta{ font-size:13px; margin-top:.875rem; } .pf-pv-lg .pf-pv-chips{ margin-top:1rem; } .pf-pv-lg .pf-pv-chip{ font-size:12.5px; padding:.4375rem .6875rem; } @media (max-width:640px){ .pf-pv-lg{ --pv-pad:1.125rem; --pv-ava:3.5rem; } .pf-pv-lg .pf-pv-cover{ height:5rem; } .pf-pv-lg .pf-pv-name{ font-size:19px; } .pf-pv-lg .pf-pv-role{ font-size:14px; } } /* Crossfading cover: one layer per theme, stacked. background-image cannot be transitioned, so the gradient is swapped by fading layers rather than by animating a single background — that is what makes the change a real crossfade instead of a hard cut. */ .pf-pv-cover-layer{ position:absolute; inset:0; opacity:0; transition:opacity .5s ease; } .pf-pv-cover-layer.is-active{ opacity:1; } /* Theme buttons + content blocks (large variant only) — these exist to show that a theme restyles ACTIONS and CARDS, not just colours. */ /* Two compact actions — a real public profile's primary/secondary. Left-aligned and auto-width so they sit in the card's crisp zone, clear of the right-edge fade. A hairline above separates them from the identity block. */ .pf-pv-actions{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.125rem; padding-top:1.125rem; border-top:1px solid var(--pv-outline); } .pf-pv-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem; font-size:12.5px; font-weight:600; line-height:1; padding:.625rem 1rem; border-radius:var(--pv-btn-radius); white-space:nowrap; background:var(--pv-btn-bg); color:var(--pv-btn-fg); transition:background-color .5s ease, color .5s ease, border-radius .5s ease; } .pf-pv-btn-2{ background:var(--pv-btn2-bg); color:var(--pv-btn2-fg); box-shadow:inset 0 0 0 1px var(--pv-btn2-bd); transition:background-color .5s ease, color .5s ease, border-radius .5s ease, box-shadow .5s ease; } /* ================= THEME DEFINITIONS (showcase) ========================= Each mirrors the real theme's character in app.css (.theme-minimal / .theme-executive / .theme-brandpro) — palette, radii, type treatment — so the preview is an honest miniature of what the visitor actually gets. */ /* Minimal Professional (Free): white, ink, quiet geometry. */ .pv-t-minimal{ --pv-bg:#fff; --pv-fg:#111827; --pv-muted:#5F6673; --pv-outline:#EEF0F3; --pv-chip-bg:#F3F4F6; --pv-chip-fg:#374151; --pv-chip-bd:transparent; --pv-accent:#111318; --pv-radius:14px; --pv-chip-radius:8px; --pv-btn-bg:#111318; --pv-btn-fg:#fff; } /* Executive Minimal (Pro): editorial — tight name, uppercase tracked role, blue accent, squarer corners. */ .pv-t-executive{ --pv-bg:#fff; --pv-fg:#0f172a; --pv-muted:#475569; --pv-muted-2:#94A3B8; --pv-outline:#E2E8F0; --pv-chip-bg:#F1F5F9; --pv-chip-fg:#475569; --pv-chip-bd:transparent; --pv-accent:var(--pf-primary-ink); --pv-radius:12px; --pv-chip-radius:6px; --pv-btn-radius:6px; --pv-btn-bg:var(--pf-primary-ink); --pv-btn-fg:#fff; --pv-name-weight:800; --pv-name-spacing:-.03em; --pv-role-transform:uppercase; --pv-role-spacing:.14em; --pv-role-weight:600; } /* Colour only. A theme must never change a metric that drives height (font-size, line-height, padding) — that would resize the card and shift the section. */ .pv-t-executive .pf-pv-role{ color:var(--pf-primary-ink); } /* ---- Editorial: magazine. Centred masthead, serif, hairline rules, square cards, red accent. A different LAYOUT, not just a different palette. ---- */ .pv-t-editorial{ --pv-bg:#FAF9F6; --pv-fg:#191919; --pv-muted:#57534E; --pv-muted-2:#8A857C; --pv-outline:#E7E4DC; --pv-ava-bg:#EFECE4; --pv-ava-fg:#8A857C; --pv-chip-bg:#EFECE4; --pv-chip-fg:#57534E; --pv-chip-bd:transparent; --pv-accent:#B3261E; --pv-radius:2px; --pv-chip-radius:2px; --pv-btn-radius:2px; --pv-btn-bg:#191919; --pv-btn-fg:#FAF9F6; --pv-btn2-bd:#191919; --pv-btn2-fg:#191919; --pv-font:Georgia,"Times New Roman",serif; --pv-name-weight:700; --pv-name-spacing:-.01em; --pv-role-transform:uppercase; --pv-role-spacing:.18em; --pv-role-weight:700; } /* Centred masthead: the avatar, name, role, meta and chips all centre, and the cards sit under a hairline rule — the anatomy of a magazine standfirst. */ .pv-t-editorial .pf-pv-body{ text-align:center; } .pv-t-editorial .pf-pv-avatar{ margin-inline:auto; } .pv-t-editorial .pf-pv-meta, .pv-t-editorial .pf-pv-chips, .pv-t-editorial .pf-pv-actions{ justify-content:center; } .pv-t-editorial .pf-pv-role{ font-size:11px; color:#B3261E; } /* ---- Developer Pro: dark terminal. Monospace throughout, square everything, stacked full-width cards, cyan/violet accent. ---- */ .pv-t-devpro{ --pv-bg:#0A0F1A; --pv-fg:#F8FAFC; --pv-muted:#94A3B8; --pv-muted-2:#64748B; --pv-outline:#1E293B; --pv-ava-bg:#1E293B; --pv-ava-fg:#7DD3FC; --pv-chip-bg:#1E293B; --pv-chip-fg:#93C5FD; --pv-chip-bd:transparent; --pv-accent:#A78BFA; --pv-radius:6px; --pv-chip-radius:4px; --pv-btn-radius:4px; --pv-ok:#4ADE80; --pv-ok-halo:rgba(74,222,128,.16); --pv-sep:#334155; --pv-btn-bg:#A78BFA; --pv-btn-fg:#0A0F1A; --pv-btn2-fg:#93C5FD; --pv-btn2-bd:#334155; --pv-font:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --pv-name-weight:700; --pv-name-spacing:0; } /* Terminal cue + a single stacked column of cards (vs the 2-up grid elsewhere). */ .pv-t-devpro .pf-pv-name::before{ content:"~/ "; color:#A78BFA; font-weight:400; } .pv-t-devpro .pf-pv-role::before{ content:"// "; color:#64748B; } /* Personal Brand Premium: dark glassy mesh, gradient name, violet accent. */ .pv-t-brandpro{ --pv-bg:#0A0A12; --pv-fg:#F5F3FF; --pv-muted:#C4B5FD; --pv-muted-2:#8B84B8; --pv-outline:rgba(255,255,255,.10); --pv-ava-bg:rgba(255,255,255,.06); --pv-ava-fg:#C4B5FD; --pv-chip-bg:rgba(255,255,255,.06); --pv-chip-fg:#DDD6FE; --pv-chip-bd:rgba(255,255,255,.10); --pv-accent:#A78BFA; --pv-radius:18px; --pv-chip-radius:999px; --pv-btn-radius:999px; --pv-ok:#5EEAD4; --pv-ok-halo:rgba(94,234,212,.18); --pv-sep:rgba(255,255,255,.18); --pv-btn-bg:#A78BFA; --pv-btn-fg:#14121F; --pv-btn2-fg:#DDD6FE; --pv-btn2-bd:rgba(255,255,255,.18); --pv-name-weight:900; --pv-name-spacing:-.03em; /* The dark mesh the real theme is known for. */ background-image: radial-gradient(30rem 16rem at 12% -20%, rgba(139,92,246,.30), transparent 60%), radial-gradient(28rem 15rem at 92% 0%, rgba(37,99,235,.28), transparent 58%); } .pv-t-brandpro .pf-pv-name{ background:linear-gradient(120deg,#A78BFA,#60A5FA 55%,#5EEAD4); -webkit-background-clip:text; background-clip:text; color:transparent; } @media (prefers-reduced-motion:reduce){ .pf-pv, .pf-pv *, .pf-pv-cover-layer{ transition:none !important; } } /* Narrow phones: keep the miniature legible without letting it crowd. */ @media (max-width:400px){ .pf-pv{ --pv-pad:.875rem; --pv-ava:2.875rem; } .pf-pv-name{ font-size:16px; } .pf-pv-role{ font-size:13px; } } /* Section action ("See all 20" / "Explore all") — see partials/section_action.php. The arrow nudges on hover; the button itself is already visible at rest. */ .pf-section-action svg{ transition:transform var(--pf-dur-2) var(--pf-ease); } .pf-section-action:hover svg{ transform:translateX(2px); } /* ==================== THEME SHOWCASE ROTATOR ============================= Crossfade between three real template previews. Both slides are stacked in a fixed-ratio grid cell (grid-area:1/1), so switching cannot shift layout — there is no height change to animate around. JS only toggles .is-active. */ .pf-rot{ position:relative; display:grid; } .pf-rot-slide{ grid-area:1/1; opacity:0; visibility:hidden; transition:opacity .5s ease, visibility 0s linear .5s; } .pf-rot-slide.is-active{ opacity:1; visibility:visible; transition:opacity .5s ease; } /* Dots — a 44px-tall transparent hit box with a 4px pill painted inside it. (background-clip:content-box does NOT work here: it clips the paint to the content box, which carries no border-radius, so the pills rendered as hard rectangles. The bar has to be its own rounded element.) */ .pf-rot-dots{ display:flex; gap:.4rem; align-items:center; } .pf-rot-dot{ position:relative; width:1.6rem; height:2.75rem; padding:0; border:0; background:transparent; cursor:pointer; } .pf-rot-dot::before{ content:""; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:.25rem; border-radius:999px; background:var(--pf-border-strong); transition:background-color var(--pf-dur-2) var(--pf-ease); } .pf-rot-dot:hover::before{ background:var(--pf-muted-2); } .pf-rot-dot.is-active::before{ background:var(--pf-ink); } /* A rotating panel is decoration; if the user asked for less motion, show the first template and never move. */ @media (prefers-reduced-motion:reduce){ .pf-rot-slide{ transition:none; } } /* ==================== MOBILE NAV OVERLAY ================================ Full-screen white sheet (not a dropdown): logo + close on top, large rows, auth actions pinned at the bottom. Internally scrollable so it survives a 667px-tall viewport. Focus is trapped while open and restored on close (see the [data-navsheet] controller in app.js). */ .pf-navsheet{ position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; background:#fff; opacity:0; visibility:hidden; transform:translateY(-.5rem); transition:opacity var(--pf-dur-2) var(--pf-ease), transform var(--pf-dur-2) var(--pf-ease), visibility 0s linear var(--pf-dur-2); } .pf-navsheet.is-open{ opacity:1; visibility:visible; transform:none; transition:opacity var(--pf-dur-2) var(--pf-ease), transform var(--pf-dur-2) var(--pf-ease); } .pf-navsheet-head{ display:flex; align-items:center; justify-content:space-between; height:4rem; padding-inline:1.25rem; border-bottom:1px solid var(--pf-border); flex:0 0 auto; } /* Every control in the sheet is 44px unconditionally — this surface only ever exists on touch, so it does not wait for the (pointer:coarse) layer. */ .pf-navsheet-head > a{ display:flex; align-items:center; min-height:44px; } .pf-navsheet-head .pf-btn-icon{ width:44px; min-height:44px; } /* Scrolling the sheet's list must not chain to the page behind it. */ .pf-navsheet-body{ overscroll-behavior:contain; } .pf-navsheet-body{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:.5rem 1.25rem; } .pf-navsheet-link{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:3.5rem; padding:.5rem 0; font-size:1.0625rem; font-weight:600; color:var(--pf-text); border-bottom:1px solid var(--pf-border); } .pf-navsheet-link:active{ color:var(--pf-muted); } .pf-navsheet-link svg{ color:var(--pf-muted-2); flex:0 0 auto; } /* Auth actions pinned to the bottom; safe-area inset for gesture-bar phones. */ .pf-navsheet-foot{ flex:0 0 auto; display:grid; gap:.6rem; padding:1rem 1.25rem; padding-bottom:calc(1rem + env(safe-area-inset-bottom)); border-top:1px solid var(--pf-border); background:#fff; } .pf-navsheet-foot .pf-btn{ width:100%; min-height:3rem; font-size:.95rem; } html.pf-navsheet-open, html.pf-navsheet-open body{ overflow:hidden; overscroll-behavior:none; } /* ==================== AUTH PAGES ======================================== Full-viewport white canvas with one soft pastel ambient wash at the top. Large radii + very low alpha = no banding, no neon. */ /* The auth screens fit the viewport — they must not scroll. Height is pinned to the dynamic viewport (100dvh accounts for mobile browser chrome), the middle column is the only flexible track, and it may scroll INTERNALLY as a last resort on very short screens rather than growing the page. */ .pf-auth{ position:relative; height:100dvh; max-height:100dvh; display:flex; flex-direction:column; background:var(--pf-bg); overflow:hidden; } /* Ambient wash, left → right: warm peach → pink → violet → pale blue, fading to a clean white centre where the form actually sits. Wide radii + low alpha = no banding and no neon; nothing coloured sits behind the inputs. */ .pf-auth::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background: radial-gradient(42rem 24rem at 4% -10%, rgba(255,224,198,.80), transparent 60%), radial-gradient(40rem 24rem at 26% -12%, rgba(252,214,224,.75), transparent 60%), radial-gradient(44rem 26rem at 62% -14%, rgba(226,214,250,.70), transparent 60%), radial-gradient(46rem 26rem at 96% -10%, rgba(206,224,255,.80), transparent 62%); } .pf-auth > *{ position:relative; z-index:1; } /* The only flexible track. min-height:0 is required — a flex child defaults to min-height:auto and would refuse to shrink below its content, pushing the footer off-screen and re-introducing the page scroll we just removed. */ .pf-auth-main{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; display:flex; align-items:center; justify-content:center; padding:1.5rem 1.25rem; } .pf-auth-card{ width:100%; max-width:24rem; margin-inline:auto; } /* Brand mark above the heading (rendered once, by layout_auth) */ .pf-auth-logo{ display:flex; justify-content:center; margin-bottom:1rem; } .pf-auth-title{ font-size:1.75rem; font-weight:800; letter-spacing:-.025em; line-height:1.15; color:var(--pf-text); } .pf-auth-sub{ font-size:.9rem; color:var(--pf-muted); margin-top:.5rem; } .pf-auth-head{ margin-bottom:1.5rem; } /* No card. The form sits directly on the ambient canvas — the white panel was a second surface on top of an already-white page, and it boxed the fields in for no reason. Kept as a class (rather than deleted from the views) so the four auth screens still share one structural hook. */ .pf-auth-panel{ background:transparent; border:0; border-radius:0; padding:0; box-shadow:none; } @media (max-width:479.98px){ .pf-auth-title{ font-size:1.5rem; } } /* Short viewports (iPhone SE / 375×667 with browser chrome): compact the fixed chrome — header, footer, logo, heading gaps — so the form fits outright and the internal scrollbar never has to appear. The fields themselves are never shrunk; only the surrounding air is. */ @media (max-height:740px){ .pf-auth > footer{ padding-block:.875rem; } .pf-auth-main{ padding-block:1rem; } .pf-auth-logo{ margin-bottom:.625rem; } .pf-auth-logo .pf-brand-word-lg{ height:26px; } .pf-auth-title{ font-size:1.375rem; } .pf-auth-sub{ margin-top:.25rem; font-size:.85rem; } .pf-auth-head{ margin-bottom:1rem; } .pf-sep{ margin:.875rem 0; } } /* Very short viewports (320×568). Trims the last of the surrounding air so even the tallest screen — sign in, with Google below the form — fits outright. */ @media (max-height:600px){ .pf-auth > footer{ padding-block:.625rem; font-size:.6875rem; } .pf-auth-main{ padding-block:.625rem; } .pf-auth-logo{ margin-bottom:.5rem; } .pf-auth-head{ margin-bottom:.875rem; } .pf-sep{ margin:.75rem 0; } } /* One link style for every auth secondary link (forgot password, account switch, back to sign in) so they never drift apart across the four screens. */ .pf-auth-link{ font-size:.875rem; font-weight:600; color:var(--pf-primary-ink); } .pf-auth-link:hover{ text-decoration:underline; } /* Separator above "Continue with Google" (which stays BELOW the email/password form — that order is deliberate and must not be flipped). */ .pf-sep{ display:flex; align-items:center; gap:.75rem; margin:1.25rem 0; } .pf-sep::before,.pf-sep::after{ content:""; flex:1; height:1px; background:var(--pf-border); } .pf-sep span{ font-size:.75rem; font-weight:500; color:var(--pf-muted); } /* ========================= TOUCH TARGET LAYER ============================ Coarse pointers (phones, tablets) get a ~44px practical minimum hit box. POSITION MATTERS: this must sit after every component's own width/height declaration. A media query adds no specificity, so an earlier `@media (pointer:coarse){ .pf-pw-toggle{height:2.5rem} }` loses to the later base `.pf-pw-toggle{height:2rem}` on source order — which is exactly how the first version of this layer silently did nothing. Dense admin tables would become unusable if every control grew to a full 44px, so compact/icon controls land at 40px — comfortably tappable while keeping row density workable. Primary buttons get the full 44px. */ @media (pointer:coarse){ /* Buttons */ .pf-btn{ min-height:2.75rem; } /* 44px */ .pf-btn-sm{ min-height:2.5rem; } /* 40px */ .pf-btn-icon{ width:2.75rem; } .pf-btn-icon.pf-btn-sm{ width:2.5rem; } .pf-icon-btn{ width:2.5rem; height:2.5rem; } /* Segmented controls, pagination, links-as-buttons */ .pf-tab{ min-height:2.5rem; } .pf-page-link{ min-width:2.75rem; height:2.75rem; } .pf-link-btn{ min-height:2.25rem; } .pf-back-btn{ min-height:2.5rem; } .pf-pw-toggle{ width:2.5rem; height:2.5rem; } /* Two-level nav shell (user dashboard + admin) */ .pf-ctx-link{ min-height:44px; } .pf-ctx-collapse{ width:2.25rem; height:2.25rem; } .pf-ctx-expand{ width:44px; height:44px; } .pf-mrail-link{ min-height:48px; } .pf-hdr-iconbtn,.pf-hdr-profile{ min-height:44px; } /* Header account menu */ .pf-avatar-btn{ width:2.75rem; height:2.75rem; } /* Billing cycle segmented toggle (Monthly / Annual) */ [data-billing-cycle]{ min-height:2.5rem; } /* Date picker chrome. The day cells need nothing — they are 1/7th of a ≥276px grid, so they are already ~40px square — but the header arrows and the footer's text actions are deliberately small on a mouse. */ .pf-cal-nav{ width:2.5rem; height:2.5rem; } .pf-cal-title{ height:2.5rem; } .pf-cal-link{ min-height:2.5rem; padding-inline:.65rem; } .pf-cal-foot [data-dp-done], .pf-cal-foot [data-dp-cancel]{ min-height:2.75rem; } .pf-cal-title-static{ height:2.5rem; } /* Nothing for the year list here any more. It used to need a touch override because its rows were 2.25rem — a comfortable size under a mouse and a miss under a thumb. Now that it is the same 3×4 page as the months, its rows are the months' 2.75rem at every pointer type, and a second set of metrics for touch would only make the two lists disagree. */ /* Upload-details info trigger — a 14px icon is not a tap target. The icon stays 14px; only the hit box grows. */ .pf-media-info{ min-width:2.5rem; min-height:2.5rem; align-items:center; justify-content:center; margin:-.5rem; } /* Gallery tile overlay controls sit ON the thumbnail, so the VISIBLE control stays small (a 44px chip would cover the image it belongs to). Instead the hit area is extended to ~44×44 with a transparent ::before that reaches outward into the tile's own padding — bigger target, same visual weight, and it never overlaps the neighbouring tile. */ .pf-gtile-remove,.pf-gtile-handle{ width:1.75rem; height:1.75rem; } .pf-gtile-remove::before,.pf-gtile-handle::before{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:inherit; } } /* ================= TAILWIND DISPLAY-UTILITY PARITY LAYER ================= MUST stay the LAST rules in this file. app.css loads after tailwind.css, so component rules like .pf-btn{display:inline-flex} out-cascade the equal-specificity display utilities (`hidden`, `md:hidden`, `sm:inline-flex`, …). Re-asserting them here, in Tailwind's own order (base first, then ascending breakpoints), restores exact utility semantics at the same 0-1-0 specificity — never solve this by raising component selector specificity (that broke md:hidden once already). */ .hidden{ display:none; } @media (min-width:640px){ .sm\:block{ display:block; } .sm\:flex{ display:flex; } .sm\:inline-flex{ display:inline-flex; } .sm\:hidden{ display:none; } } @media (min-width:768px){ .md\:block{ display:block; } .md\:flex{ display:flex; } .md\:inline-flex{ display:inline-flex; } .md\:hidden{ display:none; } } @media (min-width:1024px){ .lg\:block{ display:block; } .lg\:flex{ display:flex; } .lg\:inline-flex{ display:inline-flex; } .lg\:grid{ display:grid; } .lg\:hidden{ display:none; } } @media (min-width:1280px){ .xl\:block{ display:block; } .xl\:flex{ display:flex; } .xl\:inline-flex{ display:inline-flex; } .xl\:grid{ display:grid; } .xl\:hidden{ display:none; } } /* ===================================================================== CV BUILDER (dashboard → CV builder) + ADMIN CV PANEL --------------------------------------------------------------------- The screen is a FLOW, not a settings page: choose a design · choose what goes on it · adjust how it looks · check it · download. Every family below exists to keep that flow readable at 320px and dense at 1920px, using the existing tokens and nothing else. .pf-cv-grid the two columns. Controls on the left, the A4 document sticky on the right, capped at 440px — past that an A4 page gains no useful detail and only steals width from the controls, which are what needs it. .pf-tpl the picker card. The thumbnail inside it is an