/* ========================================================================== MEDITERRANEAN — one page. Loaded on a/mediterranean.html only. Founder, 2026-09-26: the page is Annie's Claude artifact, shell excepted. A sky, one sun and three whitewashed walls with cobalt doors, windows and a dome; the name on a whitewash slab; a glazed-tile band; the sun slider on a cobalt panel; then the record on whitewash. The shell (rail, top bar, community drawer) is never restyled: every rule here is scoped to .me-page main, .me-hero, .me-wrap, .me-rec or .me-tiles. ONE SUN. Every shadow derives from one variable, --me-len (0 at noon, 1 at the low end), written on by x-mediterranean.js. At rest the shadow is near-vertical, short and crisp. --me-sat washes the cobalt on display surfaces only (.me-disp); reading matter never follows the sun. Nothing transitions or animates; the one motion is the reader's hand. Palette: every colour value is ours. Documented materials are lime whitewash (Cycladic) and stucco, red clay tile and terracotta (Revival); cobalt, lemon and olive are our reading, and the page labels them so (founder constraint, 2026-09-29). WCAG ratios: ink #1E2430 on whitewash #FBF9F3 . 14.8 (body text) cobalt #1B4B9B on whitewash . . . . . 7.9 (headings, links) white #FFFFFF on cobalt . . . . . . . 8.3 (slider panel, tiles) white #FFFFFF on terra #B4552F . . . 4.9 (the brief tile) deep terra #A04A27 on whitewash . . . 5.7 (grade labels, diagnostic) lemon #F2D23C on cobalt . . . . . . . 5.6 (slider output) Decorative only (never text): sky #6FB3E8 · #B9DCF5, sun #FFF6C7, olive #6B7A3A · #3E4A22, lemon on whitewash, rule #E3DFD3. ========================================================================== */ @font-face { font-family: "Marcellus MD"; src: url("fonts/marcellus.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Work Sans MD"; src: url("fonts/work-sans.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; } .me-page { --me-white: #FBF9F3; --me-cob: #1B4B9B; --me-terra: #B4552F; --me-terra-t: #A04A27; --me-ink: #1E2430; --me-lemon: #F2D23C; --me-olive: #6B7A3A; --me-olive-d: #3E4A22; --me-sky: #6FB3E8; --me-sky2: #B9DCF5; --me-sunc: #FFF6C7; --me-rule: #E3DFD3; --me-display: "Marcellus MD", "Palatino Linotype", Georgia, serif; --me-face: "Work Sans MD", "Helvetica Neue", Arial, sans-serif; /* THE SUN. Noon at rest. */ --me-len: 0; } /* The derived shadow, one set for the whole route. */ .me-hero, .me-wrap, .me-rec, .me-tiles { --me-sx: calc(4px + var(--me-len) * 44px); --me-sy: calc(6px + var(--me-len) * 10px); --me-sb: calc(var(--me-len) * 22px); --me-sa: calc(0.55 - var(--me-len) * 0.35); --me-sat: calc(1 - var(--me-len) * 0.75); } .me-page main { background: var(--me-white); color: var(--me-ink); overflow-x: hidden; } /* Present, never arriving: the shell's scroll reveal does not fade the record (outranks site.css's .js-reveal rule). */ .me-page main > section.me-rec { opacity: 1; transform: none; transition: none; will-change: auto; } /* ---- shared register --------------------------------------------------- */ .me-hero, .me-wrap, .me-rec { font: 400 18px/1.65 var(--me-face); color: var(--me-ink); font-synthesis: style; overflow-wrap: break-word; } .me-hero *, .me-wrap *, .me-rec * { box-sizing: border-box; } .me-wrap a, .me-rec a { color: var(--me-cob); text-decoration-thickness: 2px; text-underline-offset: 3px; } .me-wrap a:hover, .me-rec a:hover { color: var(--me-terra-t); } .me-wrap :focus-visible, .me-rec :focus-visible { outline: 3px solid var(--me-terra); outline-offset: 3px; } .me-wrap b, .me-rec b { font-weight: 600; } .me-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .me-sh { box-shadow: var(--me-sx) var(--me-sy) var(--me-sb) rgba(20, 30, 60, var(--me-sa)); } .me-disp { filter: saturate(var(--me-sat)); } .me-h2 { margin: 0 0 14px; font: 400 clamp(32px, 4.6vw, 52px)/1.1 var(--me-display); color: var(--me-cob); } .me-h3 { margin: 28px 0 10px; font: 400 26px/1.2 var(--me-display); color: var(--me-cob); } .me-grade { display: inline-block; margin-bottom: 8px; font: 600 12px/1.4 var(--me-face); letter-spacing: 0.12em; text-transform: uppercase; color: var(--me-terra-t); } .me-quote { margin: 0 0 14px; font: 400 clamp(20px, 2.6vw, 28px)/1.35 var(--me-display); } .me-quote span { font: 400 15px/1.5 var(--me-face); } .me-quote--terra { color: var(--me-terra-t); } .me-quiet { color: #4A4F5A; font-size: 16px; } .me-n { font-size: 0.6em; color: var(--me-terra-t); } /* ---- hero: sky, sun, walls, the name on whitewash ---------------------- */ .me-hero { position: relative; overflow: hidden; background: linear-gradient(var(--me-sky), var(--me-sky2)); padding: clamp(40px, 6vw, 80px) clamp(16px, 4vw, 40px) 0; } .me-sun { position: absolute; right: 10%; top: calc(6% + var(--me-len) * 48%); width: 90px; height: 90px; border-radius: 50%; background: var(--me-sunc); box-shadow: 0 0 60px var(--me-sunc); } .me-walls { position: relative; display: flex; align-items: flex-end; max-width: 1100px; height: clamp(260px, 42vw, 460px); margin: 0 auto; } .me-wall { position: relative; background: var(--me-white); border-radius: 18px 18px 0 0; } .me-w1 { flex: 1.3; height: 78%; } .me-w2 { flex: 1; height: 100%; border-radius: 120px 120px 0 0; } .me-w3 { flex: 0.8; height: 62%; } .me-walls i { position: absolute; display: block; background: var(--me-cob); } .me-door { left: 50%; bottom: 0; width: 34%; height: 52%; transform: translateX(-50%); border-radius: 999px 999px 0 0; } .me-win { top: 18%; width: 22%; height: 20%; border-radius: 6px; } .me-win--l { left: 18%; } .me-win--r { right: 18%; } .me-win--c { left: 38%; width: 26%; } .me-dome { left: 50%; top: -18%; width: 46%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; clip-path: inset(0 0 50% 0); } .me-title { position: relative; max-width: 900px; margin: -30px auto 0; padding: 26px 20px 40px; background: var(--me-white); border-radius: 12px; text-align: center; } .me-h1 { margin: 0; font: 400 clamp(32px, 9vw, 120px)/1 var(--me-display); letter-spacing: 0.02em; overflow-wrap: normal; color: var(--me-cob); text-shadow: var(--me-sx) var(--me-sy) var(--me-sb) rgba(20, 30, 60, var(--me-sa)); } .me-def { margin: 12px 0 0; } .me-aka { margin: 10px 0 0; font: 500 14px/1.5 var(--me-face); letter-spacing: 0.2em; text-transform: uppercase; color: var(--me-terra-t); } /* The glazed-tile band: cobalt on whitewash, drawn. */ .me-tiles { height: 40px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2280%22%20height%3D%2280%22%3E%3Crect%20width%3D%2280%22%20height%3D%2280%22%20fill%3D%22%23FBF9F3%22/%3E%3Cpath%20d%3D%22M40%204%20L76%2040%20L40%2076%20L4%2040Z%22%20fill%3D%22none%22%20stroke%3D%22%231B4B9B%22%20stroke-width%3D%224%22/%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2212%22%20fill%3D%22%231B4B9B%22/%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%225%22%20fill%3D%22%23FBF9F3%22/%3E%3Cpath%20d%3D%22M0%200%20L14%200%20L0%2014Z%20M80%200%20L66%200%20L80%2014Z%20M0%2080%20L14%2080%20L0%2066Z%20M80%2080%20L66%2080%20L80%2066Z%22%20fill%3D%22%231B4B9B%22/%3E%3Cpath%20d%3D%22M40%2016%20V24%20M40%2056%20V64%20M16%2040%20H24%20M56%2040%20H64%22%20stroke%3D%22%231B4B9B%22%20stroke-width%3D%223%22/%3E%3C/svg%3E") 0 0 / 40px 40px; } .me-rec > .me-tiles { margin-top: 60px; } /* ---- the wrap and its sections ---------------------------------------- */ .me-wrap { max-width: 1080px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) 60px; } .me-wrap > section { margin-top: 60px; } .me-wrap p { margin: 0 0 14px; max-width: 70ch; } .me-card { background: var(--me-white); border: 2px solid var(--me-ink); border-radius: 14px; padding: clamp(18px, 3vw, 30px); } /* The sun control: cobalt panel, white text, the lemon thumb. */ .me-sunctl { background: var(--me-cob); color: #FFFFFF; border-radius: 18px; padding: clamp(20px, 3vw, 32px); } .me-sunctl .me-h2 { color: #FFFFFF; } .me-sunctl p { max-width: none; } .me-sun__label { display: block; margin-top: 16px; font: 600 14px/1.4 var(--me-face); letter-spacing: 0.1em; text-transform: uppercase; } .me-sun__range { display: block; width: 100%; height: 44px; margin: 0; accent-color: var(--me-lemon); cursor: pointer; } .me-sunctl :focus-visible { outline-color: var(--me-lemon); } .me-sun__out { display: block; margin: 4px 0 12px; font: 400 34px/1.2 var(--me-display); color: var(--me-lemon); } .me-nojs { font-style: italic; } /* What carries the look: the eight dimensions as whitewash tiles. */ .me-dims { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .me-dims li { padding: 16px; border: 1px solid var(--me-rule); border-radius: 12px; background: #FFFFFF; } .me-dims li.me-dim--on { border: 2px solid var(--me-cob); } .me-dims h3 { margin: 0 0 6px; font: 400 22px/1.2 var(--me-display); } .me-dims h3 a { display: inline-flex; align-items: center; min-height: 44px; } .me-dims p { margin: 0; font-size: 16px; } .me-tags a { display: inline-flex; align-items: center; min-height: 44px; margin-right: 10px; } .me-swatch { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; } .me-swatch li { display: flex; align-items: flex-end; min-height: 88px; padding: 8px; border-radius: 10px; border: 1px solid var(--me-rule); font: 500 13px/1.2 var(--me-face); letter-spacing: 0.02em; } .me-mats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin: 12px 0 0; padding: 0; list-style: none; } .me-mats li > .me-grade { margin: 12px 0 2px; } .me-mats li > p { margin: 0; font-size: 15px; line-height: 1.45; } .me-grade--ours { color: var(--me-cob); } .me-mat--white { background: var(--me-white); border: 1px solid var(--me-rule); } .me-split { margin: 14px auto 0; max-width: 46ch; font: 400 15px/1.5 var(--me-face); } .me-split b { font-weight: 600; } .me-mat { height: 140px; border-radius: 14px; } .me-mat svg { display: block; width: 100%; height: 140px; } .me-mat--terra { background: var(--me-terra); border-radius: 60px 60px 14px 14px; } .me-mat--tile { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2280%22%20height%3D%2280%22%3E%3Crect%20width%3D%2280%22%20height%3D%2280%22%20fill%3D%22%23FBF9F3%22/%3E%3Cpath%20d%3D%22M40%204%20L76%2040%20L40%2076%20L4%2040Z%22%20fill%3D%22none%22%20stroke%3D%22%231B4B9B%22%20stroke-width%3D%224%22/%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2212%22%20fill%3D%22%231B4B9B%22/%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%225%22%20fill%3D%22%23FBF9F3%22/%3E%3Cpath%20d%3D%22M0%200%20L14%200%20L0%2014Z%20M80%200%20L66%200%20L80%2014Z%20M0%2080%20L14%2080%20L0%2066Z%20M80%2080%20L66%2080%20L80%2066Z%22%20fill%3D%22%231B4B9B%22/%3E%3Cpath%20d%3D%22M40%2016%20V24%20M40%2056%20V64%20M16%2040%20H24%20M56%2040%20H64%22%20stroke%3D%22%231B4B9B%22%20stroke-width%3D%223%22/%3E%3C/svg%3E") 0 0 / 70px 70px; } .me-lemon { fill: var(--me-lemon); stroke: var(--me-ink); stroke-width: 2; } .me-leaf { fill: var(--me-olive); stroke: var(--me-ink); stroke-width: 1.5; } .me-branch { fill: none; stroke: var(--me-ink); stroke-width: 2.5; } .me-olive { fill: var(--me-olive-d); stroke: var(--me-ink); stroke-width: 1.5; } /* Rules: a list inside the card, area in Marcellus, kind in terracotta. */ .me-rules { list-style: none; margin: 10px 0 0; padding: 0; } .me-rules li { padding: 14px 0; border-top: 2px solid var(--me-rule); } .me-rules h3 { margin: 0 0 2px; font: 400 24px/1.2 var(--me-display); color: var(--me-cob); } .me-rules p { margin: 0; } .me-ev { display: inline-block; padding: 0 8px; border: 1px solid var(--me-terra-t); border-radius: 999px; font-size: 13px; color: var(--me-terra-t); } /* Comparisons and rule-outs, side by side. */ .me-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .me-cols--one { grid-template-columns: 1fr; } .me-cmp { padding-left: 16px; border-left: 4px solid var(--me-cob); } .me-cmp .me-grade { display: block; margin-bottom: 2px; } .me-out dt { font: 400 22px/1.2 var(--me-display); color: var(--me-cob); } .me-out dd { margin: 0 0 14px; } /* The record's facts: small whitewash plates. */ .me-meta { margin: 0 0 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .me-meta > div { padding: 10px 14px; border-radius: 10px; background: #FFFFFF; border: 1px solid var(--me-rule); } .me-meta > .me-meta--wide { grid-column: 1 / -1; } .me-meta dt { font: 600 12px/1.4 var(--me-face); letter-spacing: 0.12em; text-transform: uppercase; color: var(--me-terra-t); } .me-meta dd { margin: 0; } .me-firm { font-weight: 600; } .me-tw { overflow-x: auto; margin-top: 18px; } .me-ctab { width: 100%; border-collapse: collapse; font-size: 17px; } .me-ctab caption { text-align: left; font-style: italic; margin-bottom: 6px; } .me-ctab th, .me-ctab td { padding: 10px; border-bottom: 2px solid var(--me-rule); text-align: left; font-weight: 400; } .me-ctab thead th { font: 600 12px/1.4 var(--me-face); letter-spacing: 0.12em; text-transform: uppercase; color: var(--me-terra-t); } .me-ctab tbody th { font: 400 20px/1.3 var(--me-display); color: var(--me-cob); } /* Neighbours. */ .me-conf { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .me-conf a, .me-conf div { display: block; padding: 18px; border-radius: 14px; background: #FFFFFF; border: 2px solid var(--me-ink); color: var(--me-ink); text-decoration: none; } .me-conf b { display: block; font: 400 26px/1.2 var(--me-display); color: var(--me-cob); } .me-conf span { display: block; } /* Use it: the tiles. Specific enough to outrank `.me-rec a`. */ .me-use { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .me-rec a.me-u { display: block; min-height: 44px; padding: 18px; border-radius: 14px; color: #FFFFFF; text-decoration: none; } .me-rec a.me-u b { display: block; font: 400 26px/1.2 var(--me-display); } .me-rec a.me-u--cob { background: var(--me-cob); } .me-rec a.me-u--terra { background: var(--me-terra); } .me-rec a.me-u--ink { background: var(--me-ink); } .me-rec a.me-u:hover { background: var(--me-ink); color: #FFFFFF; } .me-rec a.me-u:focus-visible { outline-color: var(--me-ink); } .me-foot { margin-top: 18px; } .me-foot a { display: inline-flex; align-items: center; min-height: 44px; } @media (max-width: 820px) { .me-dims, .me-mats { grid-template-columns: 1fr 1fr; } .me-swatch { grid-template-columns: repeat(4, minmax(0, 1fr)); } .me-cols, .me-meta, .me-use { grid-template-columns: 1fr; } .me-w3 { display: none; } } @media (max-width: 600px) { /* The same sun at a smaller size: the name's shadow scales with it. */ .me-h1 { text-shadow: calc(var(--me-sx) / 2) calc(var(--me-sy) / 2) calc(var(--me-sb) / 2) rgba(20, 30, 60, var(--me-sa)); } .me-title { padding: 22px 12px 32px; } } @media (max-width: 420px) { .me-sun { width: 64px; height: 64px; } .me-mat, .me-mat svg { height: 110px; } } /* QA (2026-09-29): the research-dimension table fits a phone instead of scrolling sideways with no cue. */ @media (max-width: 30rem) { .me-ctab { font-size: 15px; } .me-ctab th, .me-ctab td { padding: 8px 6px 8px 0; hyphens: auto; } .me-ctab thead th { font-size: 11px; letter-spacing: 0.04em; } .me-ctab tbody th { font-size: 17px; } }