/* ============================================================================ AMYAR GHAFFARY — Services & Rates · 2026 File: services.css Loads AFTER Amyar.portfolio.css, which supplies the fonts, the reset and the design tokens (--bg, --ink, --accent-cool, --space-*, --ease, …). Nothing in here redefines those; this file only adds the page's own material system. THE MATERIAL — "light through glass" ------------------------------------ Every surface on this page is one of three things, and never a fourth: 1. GLASS a translucent slab. Blurred backdrop, a 1px rim that is brightest along its top edge (light falls from above), and a specular bloom that tracks the pointer. 2. LIGHT pure emission. Blue radial gradients, no border, no fill — used for the aurora backdrop and the card bloom. 3. INK type and hairlines. Flat, no effects, maximum legibility. One light source governs the page. `services.js` writes the pointer position into --lx / --ly on , and each glass slab converts that into its own local --mx / --my (percent, slab-relative) plus --prox (0..1, how close the pointer is). Specular strength, rim brightness and bloom all read --prox, so slabs near the cursor genuinely catch more light than slabs far from it. That single shared source is what stops this reading as "six cards that each have a hover state". Nothing on this page moves under the pointer. The slabs do not tilt, lift or follow the cursor — only the light travels across them. Depth comes from the layered fills, the rim and the two-part shadow, not from motion. Palette is strictly the site's moonlight blue (#a8c8ee → #6f9fd1) on near black. No second hue anywhere. Section numbering skips 4, 5 and 8: the hero, the 3D prism that stood in it and the price-match slab were all removed on request. The gaps are left in place so the remaining numbers keep matching the comments that reference them elsewhere. ============================================================================ */ /* ============================================================================ 1. PAGE TOKENS ============================================================================ */ .rates-page { /* Glass fills — layered so the slab reads as a solid with thickness, not a flat transparent rectangle. */ --glass-fill: linear-gradient(157deg, rgba(255, 255, 255, 0.058) 0%, rgba(255, 255, 255, 0.022) 38%, rgba(255, 255, 255, 0.008) 68%, rgba(168, 200, 238, 0.030) 100%); /* The hovered fill sits only just above the resting one. Most of the "this slab is live" signal comes from the rim; the fill only has to nudge. */ --glass-fill-hi: linear-gradient(157deg, rgba(255, 255, 255, 0.070) 0%, rgba(255, 255, 255, 0.027) 38%, rgba(255, 255, 255, 0.011) 68%, rgba(168, 200, 238, 0.038) 100%); --glass-edge: rgba(255, 255, 255, 0.085); --glass-edge-hi: rgba(168, 200, 238, 0.22); /* Blur is expensive; one value, reused, so the compositor can share work. */ --glass-blur: blur(26px) saturate(150%); /* Depth. Two shadows: a tight contact shadow that anchors the slab, and a wide soft one that lifts it off the page. */ --slab-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.055) inset, 0 -1px 0 0 rgba(0, 0, 0, 0.30) inset, 0 2px 6px -2px rgba(0, 0, 0, 0.6), 0 26px 60px -28px rgba(0, 0, 0, 0.9); --slab-shadow-hi: 0 1px 0 0 rgba(255, 255, 255, 0.10) inset, 0 -1px 0 0 rgba(0, 0, 0, 0.30) inset, 0 2px 8px -2px rgba(0, 0, 0, 0.6), 0 44px 90px -34px rgba(0, 0, 0, 0.95), 0 0 46px -38px rgba(111, 159, 209, 0.26); --r-slab: 20px; --r-tier: 13px; /* Secondary text, lifted for this page. The site-wide greys were set for large type on flat near-black. Here they carry small print — tier descriptions, card one-liners, terms — sitting on glass that is itself slightly lighter than the page, which eats what little separation they had. The old --ink-4 (#6e6e6e) measured 3.8:1 against the background: under the 4.5:1 minimum for body text, and the reason it read as half-visible. Both are raised until they clear it comfortably — ~6.4:1 and ~9.9:1 — while staying clearly subordinate to --ink. Overridden here rather than at :root so the home page keeps its own calibration; every rule on this page reads these tokens, so the whole page lifts together and nothing drifts out of step. */ --ink-3: #b4b6bb; /* was #9a9a9a — section subs, terms copy */ --ink-4: #8f9298; /* was #6e6e6e — tier descriptions, labels, footnotes */ background: var(--bg); } /* ============================================================================ 2. THE AURORA — the page's light, fixed behind everything. Two slow-drifting blue fields plus a vignette. Fixed, so it never scrolls past; the content moves through the light rather than the light moving with the content. `pointer-events:none` throughout — this layer is decoration. ============================================================================ */ .rates-aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; /* Own layer, so the drift animation never repaints the page content. */ will-change: transform; contain: strict; } .rates-aurora span { position: absolute; display: block; border-radius: 50%; filter: blur(90px); opacity: 0.5; } /* Upper-left cool wash */ .rates-aurora .au-1 { top: -22vh; left: -12vw; width: 62vw; height: 62vw; background: radial-gradient(circle, rgba(111, 159, 209, 0.20), transparent 66%); animation: au-drift-1 34s var(--ease) infinite alternate; } /* Right-hand pale highlight, lifts the top of the page */ .rates-aurora .au-2 { top: 4vh; right: -18vw; width: 54vw; height: 54vw; background: radial-gradient(circle, rgba(168, 200, 238, 0.17), transparent 64%); animation: au-drift-2 41s var(--ease) infinite alternate; } /* Deep pool low on the page, warms the bundles/terms end */ .rates-aurora .au-3 { bottom: -26vh; left: 24vw; width: 58vw; height: 58vw; background: radial-gradient(circle, rgba(111, 159, 209, 0.13), transparent 68%); animation: au-drift-3 47s var(--ease) infinite alternate; } @keyframes au-drift-1 { to { transform: translate3d(7vw, 5vh, 0) scale(1.14); } } @keyframes au-drift-2 { to { transform: translate3d(-6vw, 8vh, 0) scale(1.09); } } @keyframes au-drift-3 { to { transform: translate3d(5vw, -6vh, 0) scale(1.12); } } /* No grain layer here on purpose: Amyar.portfolio.css already lays one over every page via body::before. A second one would double the texture. */ /* Everything real sits above the aurora. */ .rates-main { position: relative; z-index: 2; } /* ============================================================================ 3. SHELL ============================================================================ */ .rates-wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .rates-section { padding-block: clamp(64px, 11vh, 128px); } /* With no hero, the first section is the top of the page and has to clear the fixed Back pill on its own. */ .rates-main > .rates-section:first-child { padding-top: clamp(112px, 15vh, 168px); } /* Section heading — mirrors .section-head on the home page but tighter, since this page is a document rather than a showcase. */ .rs-head { max-width: 62ch; margin-bottom: clamp(32px, 5vh, 56px); } .rs-kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-4); margin-bottom: var(--space-5); } .rs-kicker::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-cool); box-shadow: 0 0 10px 1px rgba(168, 200, 238, 0.8); } .rs-title { font-size: clamp(28px, 4.4vw, 46px); font-weight: 300; letter-spacing: -0.025em; line-height: 1.1; color: var(--ink); } /* Upright, not italic. The Bai Jamjuree faces this site loads are all font-style:normal — no italic cut is ever downloaded — so `font-style: italic` was making the browser synthesise one by shearing the uprights. That is the "tilted" look. Colour alone carries the emphasis. */ .rs-title em { font-style: normal; color: var(--accent-cool); } .rs-sub { margin-top: var(--space-5); font-size: clamp(15px, 1.5vw, 17px); font-weight: 300; line-height: 1.65; color: var(--ink-3); } /* ============================================================================ 6. CATEGORY SLABS — the heart of the page. Six glass slabs. Collapsed they show the category and its entry price; open they reveal the tiers. TWO INDEPENDENT COLUMNS, NOT ONE GRID ------------------------------------- The obvious build — six slabs in a two-column grid — shares rows between the columns, so opening a slab grows its row and shoves the slab beside it down too. Nothing can fix that from inside a grid; shared rows are what a grid is. So the columns are real: two flex stacks side by side, each owning its own slabs. Opening one only moves what is below it in the same column. The split is 01–03 / 04–06 rather than odds/evens, which means the DOM order stays 01→06. Two things fall out of that for free: the single-column layout needs no `order` juggling and no `display:contents`, and reading order, keyboard tab order and visual order never disagree — the trap that comes with reordering columns visually. The trade is that the desktop eye reads down the left column then down the right, which is how a menu or a printed price list is read anyway. ============================================================================ */ .cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: clamp(16px, 2vw, 24px); } /* The grid's row-gap and this column-gap are the same value on purpose: when the grid collapses to one column on mobile, the two stacks run together as a single evenly spaced list with no seam where they join. */ .cat-col { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 24px); min-width: 0; } .cat { /* Pointer state, written by services.js. Defaults keep the slab looking correct before the first pointermove and on touch devices, which never send one. Nothing here moves the slab — only the light travels. */ --mx: 50%; --my: 0%; --prox: 0; position: relative; border: 1px solid var(--glass-edge); border-radius: var(--r-slab); background: var(--glass-fill); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--slab-shadow); transition: box-shadow 0.5s var(--ease), border-color 0.5s var(--ease), background 0.5s var(--ease); /* Rounded corners must clip the specular sheet and the tier drawer. */ overflow: hidden; } /* Specular — a small bloom centred on the pointer, faded by distance. This is the layer that makes six slabs behave like one lit surface. Kept low: on a near-black page a highlight this size reads clearly at very little alpha, and anything stronger washes out the tier text underneath it. */ .cat::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; background: radial-gradient( 180px circle at var(--mx) var(--my), rgba(168, 200, 238, 0.035), rgba(168, 200, 238, 0.010) 34%, transparent 58%); opacity: var(--prox); transition: opacity 0.45s var(--ease); } /* Rim light — a 1px inner stroke that brightens on the pointer's side. Drawn as a masked gradient border so it can be lit independently of the fill. */ .cat::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; padding: 1px; background: radial-gradient( 215px circle at var(--mx) var(--my), var(--glass-edge-hi), rgba(168, 200, 238, 0.03) 55%, transparent 78%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); /* Never fully off. --mx/--my rest at (50%, 0%), so with no pointer in play the slab still carries a soft highlight along its top edge — light falling from above. That resting state is all a touch device ever sees, and it is what stops the collapsed grid reading as six grey rectangles. The two numbers do different jobs: the first sets that resting edge, the second is how far the pointer can push it. Only the second was cut — the rim brightens far less under the cursor now, while the cards keep exactly the same definition when nothing is hovering them. */ opacity: calc(0.34 + var(--prox) * 0.38); transition: opacity 0.45s var(--ease); } .cat.is-lit { background: var(--glass-fill-hi); border-color: rgba(255, 255, 255, 0.13); box-shadow: var(--slab-shadow-hi); } /* When any category is open, the others step back. They stay readable and fully interactive — this is focus, not a lock — and any slab recovers the moment it is hovered or focused within. */ .cat-grid.has-open .cat:not(.is-open) { opacity: 0.58; transition: opacity 0.5s var(--ease), transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease), background 0.5s var(--ease); } .cat-grid.has-open .cat:not(.is-open):hover, .cat-grid.has-open .cat:not(.is-open):focus-within { opacity: 1; } /* --- Slab header: the always-visible button ------------------------------- */ .cat-head { position: relative; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(14px, 1.8vw, 22px); width: 100%; padding: clamp(22px, 2.6vw, 30px); text-align: left; background: none; border: 0; cursor: pointer; } .cat-head:focus-visible { outline: 2px solid var(--accent-cool); outline-offset: -4px; border-radius: var(--r-slab); } .cat-icon { position: relative; display: grid; place-items: center; width: 46px; height: 46px; flex: none; border: 1px solid var(--glass-edge); border-radius: 13px; background: rgba(255, 255, 255, 0.035); color: var(--accent-cool); transition: color 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease); } .cat-icon svg { width: 21px; height: 21px; } .cat.is-lit .cat-icon { color: #dbe8f8; border-color: rgba(168, 200, 238, 0.34); box-shadow: 0 0 22px -4px rgba(111, 159, 209, 0.7), inset 0 0 16px -6px rgba(168, 200, 238, 0.6); } .cat-titles { min-width: 0; } .cat-num { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; color: var(--ink-4); margin-bottom: 6px; } /* Both are s inside a