/* ============================================================
Craft of Design — base stylesheet
Colours and sizes follow the design brief.
Design basis: Figma layouts at 1440 x 1024.
============================================================ */
/* ---------- Fonts ---------------------------------------------
All font files live in fonts/ and are served with the site.
Body text: TeX Gyre Bonum, a free Bookman revival (GUST Font
License, web embedding permitted; source: CTAN,
https://ctan.org/pkg/tex-gyre-bonum).
------------------------------------------------------------ */
@font-face {
font-family: "Devinne Swash";
src: url("../fonts/devinne-swash.regular.ttf") format("truetype");
font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Cinzel Black";
src: url("../fonts/Cinzel-Black.ttf") format("truetype");
font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Courgette";
src: url("../fonts/Courgette-Regular.ttf") format("truetype");
font-weight: normal; font-style: normal; font-display: swap;
}
/* Bonum in four styles — the browser picks the matching one
whenever text is set in bold or italic. */
@font-face {
font-family: "Bonum"; src: url("../fonts/texgyrebonum-regular.otf") format("opentype");
font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Bonum"; src: url("../fonts/texgyrebonum-bold.otf") format("opentype");
font-weight: bold; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Bonum"; src: url("../fonts/texgyrebonum-italic.otf") format("opentype");
font-weight: normal; font-style: italic; font-display: swap;
}
@font-face {
font-family: "Bonum"; src: url("../fonts/texgyrebonum-bolditalic.otf") format("opentype");
font-weight: bold; font-style: italic; font-display: swap;
}
/* ---------- Colours and sizes ------------------------------ */
:root {
--base: #E9D8FF; /* page background */
--element: #C3A7E6; /* surfaces, e.g. mirror glass */
--title: #470D5A; /* title, text, footer */
--accent: #803790; /* H1 and H2 */
--edge: #2D2D2D; /* beside the page */
--frame-outer: #8B8B8B; /* portfolio, outer line */
--frame-inner: #ADADAD; /* portfolio, inner line */
--font-title: "Devinne Swash", serif;
--font-h1: "Cinzel Black", serif;
--font-h2: "Courgette", cursive;
--font-text: "Bonum", Georgia, serif;
--page-width: 144rem; /* equals 1440 px */
}
/* ---------- Sizing base -------------------------------------
At a 1440 px wide window 1rem = 10px. In narrower windows the
whole page scales down evenly. The lower limit keeps text
readable; below 900 px the mobile layout takes over (see end).
------------------------------------------------------------ */
html {
font-size: clamp(6.25px, calc(100vw / 144), 10px);
}
/* line breaks that apply to only one of the two layouts */
br.mobile-only { display: none; }
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--edge);
color: var(--title);
font-family: var(--font-text);
font-size: 1.7rem;
line-height: 1.5;
}
/* ---------- Page frame --------------------------------------
Keeps the page at 1440 px and centres it; whatever is left at
the sides shows the dark body background.
Minimum height is the full window, so the footer never floats
halfway up on short pages.
------------------------------------------------------------ */
.page {
width: 100%;
max-width: var(--page-width);
min-height: 100vh;
margin: 0 auto;
background: var(--base);
display: flex;
flex-direction: column;
}
/* ---------- Stardust ----------------------------------------
Fine silver four-point stars as a separate layer behind all
content (tile 820 px, evenly distributed). Elements with
transparent areas - mirror frames, portfolio frame, monitors,
watermarks - keep the background clear with a patch in the
page colour.
------------------------------------------------------------ */
.page { position: relative; isolation: isolate; }
.page::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: url("../images/texture/stardust.png") 0 0 / 820px 820px repeat;
opacity: 0.85;
}
/* Clearing patches: a separate layer BEHIND all content
(z-index -1 in the stacking context of .page, above the
stardust), so their soft edges never cover text or arrows. */
.mirror-row::before,
.brand-monitor::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: var(--base);
box-shadow: 0 0 3rem 2rem var(--base);
}
/* Portfolio: only clear the area between the two frame lines
(on mobile the frame is rotated; a shadow would lie on top of
the lines there) */
.folio-frame { background: var(--base); }
/* ---------- Header ------------------------------------------ */
.header {
text-align: center;
padding: 3rem 2rem 0;
}
/* The title links back to the home page. It changes nothing
visually - without it the subpages would have no way back. */
.header-title-link { text-decoration: none; color: inherit; display: block; }
.header-title {
font-family: var(--font-title);
color: var(--title);
font-size: 10rem; /* 100 px per Figma */
line-height: 1;
margin: 0;
letter-spacing: 0.02em;
font-weight: normal;
/* Capitals on every page and device. The HTML keeps
"Craft of Design" so screen readers read it as words
instead of spelling it out. */
text-transform: uppercase;
}
.header-subtitle {
font-family: var(--font-h1);
color: var(--accent);
font-size: 6rem; /* 60 px per Figma */
line-height: 1.1;
margin: 1.5rem 0 0;
font-weight: normal;
}
/* ---------- Content area ------------------------------------
Fills the space between header and footer.
------------------------------------------------------------ */
.content {
flex: 1;
padding: 2rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* ---------- Footer ------------------------------------------
Three links plus copyright on one line, as in the layout.
------------------------------------------------------------ */
.footer {
display: flex;
justify-content: center;
align-items: center; /* everything on one line */
gap: 6.5rem; /* slightly tighter, as in the layout */
padding: 2rem 2rem 2.5rem;
font-size: 2rem; /* 20 px per Figma */
}
.footer a {
color: var(--title);
text-decoration: none;
}
.footer a:hover,
.footer a:focus-visible { text-decoration: underline; }
.footer-copyright { white-space: nowrap; }
/* ---------- Placeholder during construction -----------------
Removed once the respective page is built.
------------------------------------------------------------ */
.placeholder {
text-align: center;
padding: 6rem 2rem;
font-style: italic;
opacity: 0.55;
}
/* ============================================================
Home page — the five mirrors
Measured from the Figma layout:
group 1298 x 434, centred on the page
mirror 289 x 434, offset 252.25 (i.e. 36.75 overlap)
Glass areas measured from the frame image:
201.5 x 299, centres at 144.5 / 396.8 / 649 / 901.3 / 1153.5
============================================================ */
.mirror-row {
position: relative;
width: 129.8rem;
height: 43.4rem;
}
/* The ornament lies above the glass areas but ignores clicks -
otherwise the mirrors would be dead where they overlap.
It is a background rather than an , so phones only load
the single frame and not the group of five as well. */
.mirror-row::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: url("../images/mirror-group.png") center / 100% 100% no-repeat;
}
/* One mirror: the open area inside the ornament. Each mirror
takes its centre from --center; everything else is shared. */
.mirror {
position: absolute;
top: 6.75rem;
left: calc(var(--center) * 0.1rem - 10.075rem);
width: 20.15rem;
height: 29.9rem;
border-radius: 50%;
background:
/* narrow, crisp light streak - what gives a mirror away above
all: a reflection with an edge, not a soft haze */
linear-gradient(118deg,
rgba(255,255,255,0.00) 26%,
rgba(255,255,255,0.42) 35%,
rgba(255,255,255,0.62) 41%,
rgba(255,255,255,0.14) 48%,
rgba(255,255,255,0.00) 56%),
/* base glow from the top left */
linear-gradient(135deg,
rgba(255,255,255,0.68) 0%,
rgba(255,255,255,0.34) 24%,
rgba(255,255,255,0.00) 52%),
/* counter-glow bottom right, so the curvature shows */
linear-gradient(315deg,
rgba(255,255,255,0.30) 0%,
rgba(255,255,255,0.00) 34%),
var(--element);
/* slight inner shadow: makes the surface look recessed */
box-shadow: inset 0 0.3rem 1.2rem rgba(71,13,90,0.14);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
text-decoration: none;
padding: 2rem 1.5rem;
transition: filter 0.35s ease, transform 0.35s ease;
}
/* On hover the gloss brightens briefly - the mirror seems
to catch the light. */
.mirror:hover,
.mirror:focus-visible {
filter: brightness(1.05) saturate(1.04);
transform: scale(1.012);
}
.mirror-title {
font-family: var(--font-h2);
font-size: 4rem; /* 40 px per Figma */
line-height: 1.05;
color: var(--accent);
text-decoration: underline;
margin-bottom: 0.8rem;
}
.mirror-text {
font-family: var(--font-text);
font-size: 2.3rem; /* 23 px per Figma */
line-height: 1.3;
color: var(--title);
max-width: 16rem;
}
/* ============================================================
About Me - the magazine
A magazine rather than a bound book: StPageFlip produces flat,
rectangular pages - exactly what a magazine is.
Requirements:
- cover in light brown, only "About Me" on it in #803790
- the cover turns softly too, no rigid board
- when opened, the summary stands alone on the right
- no page numbers, no previous/next buttons
- text colour inside #470D5A
============================================================ */
/* StPageFlip sets the magazine itself to width:100 %. So this
frame defines the width - and the magazine shrinks with it
when the window gets narrower. */
.magazine-frame {
width: 100rem; /* two pages of 500 px each */
transition: transform 0.6s ease-in-out; /* = flippingTime in page.js */
}
/* Closed and centred: the cover occupies only one half, so the
frame shifts by half a magazine width (js/page.js) */
.magazine-frame.closed-front { transform: translateX(-25%); }
.magazine-frame.closed-back { transform: translateX(25%); }
.magazine-frame.no-transition { transition: none; }
/* The shifted magazine sticks out over the page edge with its
empty half - without clip that would cause a horizontal scrollbar */
.content--magazine { overflow-x: clip; }
.magazine { position: relative; }
/* NOTE: StPageFlip sets display:block on every page, so flex
centring does not work - anything that must be centred is
positioned absolutely (cover title, quote). */
.mpage {
padding: 4.6% 5.4%;
overflow: hidden;
background: #FFFCF6;
color: var(--title);
}
/* fine paper texture */
.mpage::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("../images/texture/paper.png");
background-size: 48% auto;
opacity: 0.16;
mix-blend-mode: multiply;
}
/* Shadow under the magazine - deliberately per page, NOT as a
filter on the whole magazine: a filter also casts the shadow of
the page being turned, which visibly trailed across the empty
background. StPageFlip clips the turning page with clip-path, so
its box-shadow disappears by itself during the movement. */
.mpage {
--magazine-shadow: 0 2.4rem 3.2rem -1.2rem rgba(71,13,90,0.34);
box-shadow: var(--magazine-shadow);
}
/* the sheet dips towards the fold */
.mpage--left { box-shadow: inset -3rem 0 3.4rem -2rem rgba(90,62,110,0.26), var(--magazine-shadow); }
.mpage--right { box-shadow: inset 3rem 0 3.4rem -2rem rgba(90,62,110,0.26), var(--magazine-shadow); }
/* Blank sheet for closing (see js/page.js): covers the area
being uncovered in the page background colour. */
.mpage-empty { background: var(--base); }
/* While closing (class set by js/page.js):
- the inside page underneath casts no magazine shadow, otherwise
it would remain as an outline around the already empty area
- the shadow StPageFlip lays on the free area is dropped;
it ends hard at the page edge and would trace it */
.magazine.closing .mpage--inside {
--magazine-shadow: 0 0 0 0 transparent;
clip-path: inset(1.5px); /* otherwise the edge shows through as a hairline */
}
.magazine.closing .stf__outerShadow { display: none !important; }
/* ---------- Cover: light brown ------------------------------ */
.mpage--cover {
background:
linear-gradient(118deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 34%),
linear-gradient(160deg, #CFB89C 0%, #C4AA8C 46%, #B39875 100%);
}
.mpage--cover::after { opacity: 0.20; }
/* Gloss on front and back cover: a diagonal light streak like
on varnished cover paper, plus a faint counter-glow bottom right.
Sits beneath the type. --gloss sets the strength (0 = off, 1 = full). */
.mpage--cover::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: var(--gloss, 0.7); /* 0.7 = chosen strength */
background:
linear-gradient(115deg,
rgba(255,255,255,0.00) 28%,
rgba(255,255,255,0.30) 38%,
rgba(255,255,255,0.55) 42%,
rgba(255,255,255,0.12) 48%,
rgba(255,255,255,0.00) 58%),
/* second, narrow streak further down - strengthened */
linear-gradient(115deg,
rgba(255,255,255,0.00) 60%,
rgba(255,255,255,0.34) 67%,
rgba(255,255,255,0.00) 75%),
/* counter-glow in the bottom right corner - strengthened */
linear-gradient(315deg,
rgba(255,255,255,0.50) 0%,
rgba(255,255,255,0.18) 20%,
rgba(255,255,255,0.00) 42%);
}
.cover-title {
position: absolute;
left: 50%;
top: 50%;
/* +0.05em: Cinzel sits slightly high in its line box - this
centres the visible lettering exactly on the cover (measured) */
transform: translate(-50%, calc(-50% + 0.05em));
width: 90%;
z-index: 1;
font-family: var(--font-h1);
font-size: 10rem; /* 100 px */
line-height: 1.04;
text-align: center;
color: var(--accent);
}
/* inside covers - nothing printed there */
.mpage--inside {
background:
linear-gradient(140deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 40%),
linear-gradient(160deg, #CBB295 0%, #C0A585 55%, #AF9472 100%);
}
.mpage--inside::after { opacity: 0.18; }
/* ---------- Type inside the magazine ------------------------ */
.mpage h2 {
font-family: var(--font-h1);
font-size: 2.4rem;
line-height: 1.15;
font-weight: normal;
letter-spacing: 0.01em;
color: var(--title);
margin: 0 0 0.5rem;
}
/* fine rule under the heading */
.mpage .line {
width: 3.6rem;
height: 2px;
background: var(--element);
margin: 0 0 1.5rem;
}
.mpage p,
.mpage li {
font-size: 1.5rem;
line-height: 1.4;
color: var(--title);
}
.mpage p { margin: 0 0 1rem; }
.mpage ul { margin: 0 0 1rem; padding-left: 2rem; }
/* Fixed line breaks as in the layout - the browser must not
wrap on its own, or the line layout would shift */
.mpage .fixed-breaks { white-space: nowrap; }
/* Professional Summary sizes.
Work Experience uses the same sizes. */
.mpage--summary h2, .mpage--work h2, .mpage--list h2 { font-size: 2.8rem; }
.mpage--summary p, .mpage--work p, .mpage--list p,
.mpage--list li { font-size: 1.7rem; }
/* blank line between two entries - same size as the paragraph
gap in the summary */
.mpage--work .entry + .entry,
.mpage--list .entry + .entry { margin-top: 3.4rem; }
.mpage--work .entry .sub-h,
.mpage--list .entry .sub-h { margin-top: 0; }
/* gap between "...illustrations." and "Holding a": a little
more than one blank line (line height 1.7 x 1.4 = 2.4rem) */
.mpage--summary p + p { margin-top: 3.4rem; } /* margins collapse: results in 3.4rem */
/* subheading: role and period */
.mpage .sub-h {
font-weight: bold;
line-height: 1.25;
margin: 1.4rem 0 0.3rem;
}
/* quote: bold and centred - not italic */
.mpage--quote p {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
font-size: 3rem;
font-weight: bold;
line-height: 1.45;
text-align: center;
}
/* ============================================================
Portfolio - 13 finished images (1920 x 1080)
The images themselves are untouched. Around them only the two
grey frames, measured from the layout:
image 1208 x 679.5 - light grey line - 6 px gap -
dark grey line, everything centred on the page. Lines 2 px.
The arrow and menu icon INSIDE the images are pure design.
============================================================ */
.folio { display: flex; flex-direction: column; align-items: center; }
/* outer frame #8B8B8B, then 6 px gap */
.folio-frame {
border: 0.2rem solid var(--frame-outer); /* 2 px line */
padding: 0.6rem;
}
/* inner frame #ADADAD directly at the image; the window always
shows exactly one image, the rest of the track lies outside */
.folio-window {
box-sizing: content-box;
width: 120.8rem;
aspect-ratio: 16 / 9;
border: 0.2rem solid var(--frame-inner); /* 2 px line as well */
overflow: hidden;
position: relative;
touch-action: pan-y; /* vertical scrolling stays allowed */
user-select: none;
cursor: grab;
}
.folio-window.dragging { cursor: grabbing; }
/* The track holding all 13 images side by side. It is moved
via transform - that is the swipe movement. */
.folio-track {
display: flex;
height: 100%;
transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: transform;
}
.folio-window.dragging .folio-track { transition: none; }
.folio-sheet {
position: relative;
flex: 0 0 100%;
height: 100%;
margin: 0;
}
.folio-sheet img {
display: block;
width: 100%;
height: 100%;
pointer-events: none; /* no native image dragging */
}
/* clickable video titles on sheet 9 - invisible, just the area */
.folio-link {
position: absolute;
border-radius: 1.2rem;
}
.folio-link[href] { cursor: pointer; }
.folio-link[href]:hover { background: rgba(255,255,255,0.14); }
.folio-link:focus-visible { outline: 0.3rem solid var(--accent); outline-offset: 0.2rem; }
/* Underline beneath a linked name in the image, so visitors see it is a
link. Thickness 2 of 1080 image pixels, rounded to whole physical
screen pixels (--device-px, set in js/page.js): with a fractional
height the browser draws some lines 1 and others 2 pixels thick,
depending on where they fall. Old browsers without round() use the
first line. */
.folio-underline {
position: absolute;
height: max(1px, 0.185%);
height: max(var(--device-px, 1px), round(nearest, 0.185%, var(--device-px, 1px)));
background: var(--title);
pointer-events: none;
}
/* ---------- Arrows below the frame ---------------------------
Subtle, with a gap to the frame, aligned with its outer edges.
At the start only "next", at the end only "previous".
------------------------------------------------------------ */
.folio-arrows {
display: flex;
justify-content: space-between;
width: 100%;
margin-top: 1.4rem;
}
.folio-arrow {
width: 6.4rem;
height: 2.6rem;
padding: 0.3rem 0;
border: 0;
background: none;
color: var(--accent);
opacity: 0.55;
cursor: pointer;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.folio-arrow svg {
display: block;
width: 100%;
height: 100%;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.folio-arrow:hover,
.folio-arrow:focus-visible { opacity: 1; }
.folio-arrow--next:hover { transform: translateX(0.4rem); }
.folio-arrow--prev:hover { transform: translateX(-0.4rem); }
.folio-arrow[hidden] { display: block; visibility: hidden; }
/* ============================================================
Services - the clipboard
Sheet 1 - board with clip, text, arrow bottom right
Sheet 2 - sheet 1 rolled up over the clip, below it the list
with pencils
Motion: sheet 1 rolls up from the bottom, passes IN FRONT of the
clip and stays rolled at the top. No grey frame around it.
StPageFlip cannot do this; it only turns pages sideways.
============================================================ */
.clipboard {
position: relative;
width: 52rem;
height: 70.5rem; /* so the page fits without scrolling ... */
margin-top: 4.6rem; /* ... and the roll stays below the title */
perspective: 220rem;
transform-style: preserve-3d; /* board, sheets and clip in ONE
3D space - so sheet 1 really
disappears behind the board */
}
.cb-board {
position: absolute;
inset: 0;
border-radius: 2.2rem;
background:
linear-gradient(118deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 38%),
linear-gradient(165deg, #B8906A 0%, #AA8461 55%, #9C7756 100%);
box-shadow:
inset 0 0 0 0.2rem rgba(110,78,48,0.55),
0 2.6rem 4rem -1.2rem rgba(71,13,90,0.38);
transform: translateZ(0);
}
/* fine fibre like hardboard */
.cb-board::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background-image: url("../images/texture/paper.png");
background-size: 40% auto;
opacity: 0.22;
mix-blend-mode: multiply;
}
/* ---------- Sheets ------------------------------------------ */
.cb-sheet {
position: absolute;
left: 2.6rem;
right: 2.6rem;
top: 4.2rem;
bottom: 3.4rem;
background: #FFFFFF;
box-shadow: 0 0.15rem 0.4rem rgba(60,40,20,0.22);
}
.cb-sheet--bottom { transform: translate3d(0.35rem, 0.45rem, 1px); background: #F6F4F0; }
/* paper texture on all sheets */
.cb-sheet::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("../images/texture/paper.png");
background-size: 48% auto;
opacity: 0.12;
mix-blend-mode: multiply;
}
/* ---------- Sheets 1 and 2 ------------------------------------- */
.cb-sheet--1 { transform: translateZ(3px); }
.cb-sheet--2 { transform: translate3d(0.15rem, 0.2rem, 2px); }
/* pointer cursor over the sheet only while the text is still
being written - a click then completes it instantly */
.cb-sheet.writing { cursor: pointer; }
.cb-sheet--1.is-gone { visibility: hidden; } /* during/after rolling up */
/* ---------- Paper curl (custom technique) ---------------------
Tipping, folding, a flat roller and a rotated StPageFlip were all
tried and discarded. StPageFlip is built for books: the sheet
cannot pass IN FRONT of the clip, the way back is not the same,
and the doubly rotated text wobbled.
Now: when turning, sheet 1 is cut into horizontal strips
(js/page.js) that wrap around an invisible roller - like real
paper rolled up from the bottom. The roll rises towards the
viewer (z up to 2 x radius) and so lies in front of the clip
(z 5px); the still-flat part stays below. Rolling back follows
exactly the same path in reverse.
------------------------------------------------------------ */
.cb-curl {
position: absolute;
left: 2.6rem;
right: 2.6rem;
top: 4.2rem;
bottom: 3.4rem;
transform: translateZ(3px);
transform-style: preserve-3d; /* strips sort with the clip */
pointer-events: none; /* and roll in the same 3D space */
}
.cb-strip {
position: absolute;
left: 0;
top: 0;
width: 100%;
transform-origin: 0 0;
transform-style: preserve-3d;
will-change: transform;
}
.cb-strip-front,
.cb-strip-back {
position: absolute;
inset: 0;
overflow: hidden;
backface-visibility: hidden;
}
.cb-strip-front { background: #FFFFFF; }
.cb-strip-back {
background: #F2EFEA; /* back side slightly matte */
transform: rotateX(180deg);
}
/* copy of sheet 1 inside the strip, shifted so that exactly the
matching slice is visible (top is set by js/page.js) */
.cb-strip-content {
position: absolute;
left: 0;
width: 100%;
}
.cb-strip-front::after,
.cb-strip-back::after { /* paper texture */
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("../images/texture/paper.png");
background-size: 48% auto;
opacity: 0.12;
mix-blend-mode: multiply;
}
.cb-strip-light { /* light and shade on the curl */
position: absolute;
inset: 0;
z-index: 2;
background: #3C2814;
opacity: 0;
}
/* the roll ends: spiral of the rolled-up layers (js/page.js) */
.cb-roll-end {
position: absolute;
left: 0;
top: 0;
overflow: visible;
transform-origin: 0 0;
pointer-events: none;
}
.cb-roll-end-face { fill: #EFEBE5; } /* view into the roll */
.cb-roll-end-line {
fill: none;
stroke: #B9B1A6; /* paper edges */
stroke-width: 1.1;
stroke-linecap: round;
}
/* shadow of the roll on the sheet below */
.cb-curl-shadow {
position: absolute;
left: 0;
width: 100%;
height: 4rem;
background: linear-gradient(180deg, rgba(40,28,15,0.28), rgba(40,28,15,0));
transform-origin: 0 0;
opacity: 0;
}
/* ---------- Clip ---------------------------------------------
Position as in the template: starts at 19.9 % of the board
width, is 57.2 % wide and rises just above the board's top edge.
------------------------------------------------------------ */
.cb-clip {
position: absolute;
left: 19.9%;
top: -0.7rem;
width: 57.2%;
transform: translateZ(5px); /* above the paper */
pointer-events: none;
}
/* The clip always stays in place. The self-rolled paper passes
in front of it and covers it completely at the end. */
/* ---------- Text on the paper ------------------------------- */
.cb-text {
position: relative;
z-index: 2;
margin: 0;
padding: 4.8rem 2.8rem 2rem; /* room for the clip at the top */
color: var(--title);
font-size: 1.9rem;
line-height: 1.24;
white-space: nowrap; /* breaks only where set in the text */
}
.cb-text p { margin: 0 0 2.3rem; }
.cb-text b { font-weight: bold; }
.cb-text .cb-subhead {
font-weight: bold;
text-decoration: underline;
text-underline-offset: 0.2rem;
}
/* Arrows: a button with an invisible, larger click area (1.2rem
all round, offset by a negative margin - the arrow itself stays
exactly in place). It appears only once the text is fully
written; then ONLY a click on it rolls the paper.
70 % opacity, full on hover. */
.cb-greeting { position: relative; margin-bottom: 0; }
.cb-arrow-button {
position: absolute;
z-index: 3;
margin: -1.2rem;
padding: 1.2rem;
border: 0;
background: none;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease, transform 0.25s ease;
}
.cb-arrow-button--next { right: 1rem; bottom: 0.25em; } /* next to the signature */
/* on sheet 2, exactly where the arrow on sheet 1 sits on screen
(offset of sheet 2 in the stack included, measured +-0.2 px) */
.cb-arrow-button--prev { right: 3.96rem; bottom: 2.48rem; }
.cb-arrow {
display: block;
width: 4.4rem;
height: 1.6rem;
fill: none;
stroke: var(--title);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.cb-text.is-done .cb-arrow-button,
.cb-list.is-done ~ .cb-arrow-button { opacity: 0.7; pointer-events: auto; }
.cb-arrow-button:hover,
.cb-arrow-button:focus-visible { opacity: 1; }
.cb-arrow-button--next:hover,
.cb-arrow-button--next:focus-visible { transform: translateX(0.5rem); }
.cb-arrow-button--prev:hover,
.cb-arrow-button--prev:focus-visible { transform: translateX(-0.5rem); }
.cb-arrow-button:focus-visible { outline: 0.2rem solid var(--accent); outline-offset: -0.8rem; border-radius: 0.6rem; }
/* sheet 2: list with pencils */
.cb-list {
list-style: none;
padding-top: 7rem; /* below the roll, spacing as in the template */
padding-left: 4rem;
}
.cb-list li {
position: relative;
padding-left: 2.8rem;
margin: 0 0 1.25rem;
}
/* Pencil drawn by hand rather than an emoji - an emoji looks
different on every device (orange on Windows, yellow on Apple).
Yellow body, pink eraser, wooden tip. */
.cb-list li::before {
content: "";
position: absolute;
left: -0.35rem;
top: -0.25rem;
width: 2.6rem;
height: 2.6rem;
background: url("data:image/svg+xml,") no-repeat center / contain;
}
/* Writing effect: each word appears on its own, as if being
written right now (js/page.js wraps the words) */
/* Opacity only, NO blur: filter:blur made the text wobble in
the transformed sheets while appearing */
.cb-text .word {
opacity: 0;
transition: opacity 0.45s ease;
}
.cb-text .word.visible { opacity: 1; }
/* the pencil appears with the first word of its item */
.cb-list li::before { opacity: 0; transition: opacity 0.35s ease; }
.cb-list li.has-word::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.cb-text .word, .cb-list li::before { transition: none; }
}
/* ============================================================
Photography - measured from the layout:
text left (fixed breaks), camera right (240 px, round),
both vertically centred to each other.
Filmstrip 127.1 x 26.5rem, centred: black, one row of holes
at top and bottom (holes 1 x 2.1rem, every 3rem) - real holes
the lilac page shows through -, plus six frames 20 x 19.7rem
with a 1rem bar, dark grey #181818.
Photos fully visible in their frame (object-fit: contain).
The strip is built in CSS rather than used as an image.
============================================================ */
.photography {
width: 127.1rem;
display: flex;
flex-direction: column;
align-items: center;
}
.photo-head {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 5.1rem 0 3.6rem;
}
.photo-text {
font-size: 2rem;
line-height: 1.15;
white-space: nowrap; /* breaks only as in the layout */
}
.photo-text p { margin: 0 0 2.3rem; }
.photo-text p:last-child { margin-bottom: 0; }
.photo-text b { font-weight: bold; }
.photo-camera {
width: 24rem;
height: 24rem;
flex: none;
}
.filmstrip {
--hole-color: var(--base); /* the page shows through the holes */
width: 100%;
margin-top: 2.7rem;
padding: 3.4rem 1rem; /* 0.6 black + 2.1 hole + 0.6 black (+0.1) */
display: flex;
gap: 1rem;
background:
/* top and bottom row of holes: 1rem wide holes every 3rem */
repeating-linear-gradient(90deg,
transparent 0 1.5rem, var(--hole-color) 1.5rem 2.5rem, transparent 2.5rem 3rem)
0 0.6rem / 100% 2.1rem no-repeat,
repeating-linear-gradient(90deg,
transparent 0 1.5rem, var(--hole-color) 1.5rem 2.5rem, transparent 2.5rem 3rem)
0 calc(100% - 0.6rem) / 100% 2.1rem no-repeat,
#050308;
}
.film-frame {
flex: 1 1 0;
height: 19.7rem;
margin: 0;
background: #181818;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.film-frame img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
/* Photos in the strip are buttons: a click opens them large.
On hover the photo lifts slightly and the cursor becomes a
magnifier. */
.film-button {
display: block;
width: 100%;
height: 100%;
padding: 0;
border: 0;
background: none;
cursor: zoom-in;
}
.film-button img { transition: transform 0.35s ease, filter 0.35s ease; }
.film-button:hover img,
.film-button:focus-visible img { transform: scale(1.04); filter: brightness(1.06); }
.film-button:focus-visible { outline: 0.2rem solid var(--base); outline-offset: -0.4rem; }
/* ---------- Large view ("lightbox") --------------------------
Dimmed background in a deep violet instead of black, matching
the page. Photo at full size, at most 88 % of the window width
and 84 % of its height - never artificially enlarged.
Arrows and close button kept simple, in the page's light lilac.
------------------------------------------------------------ */
.lightbox {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
background: rgba(24, 6, 32, 0.9);
opacity: 0;
transition: opacity 0.3s ease;
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox-image {
max-width: 88vw;
max-height: 84vh;
box-shadow: 0 1.6rem 4rem rgba(0, 0, 0, 0.55);
transition: opacity 0.25s ease;
touch-action: pan-y;
user-select: none;
}
.lightbox-image.loading { opacity: 0; }
.lightbox button {
position: absolute;
padding: 1.2rem;
border: 0;
background: none;
color: var(--base);
cursor: pointer;
opacity: 0.75;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.lightbox button:hover,
.lightbox button:focus-visible { opacity: 1; }
.lightbox button:focus-visible { outline: 0.2rem solid var(--base); outline-offset: 0.2rem; border-radius: 0.6rem; }
.lightbox svg {
display: block;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.lightbox-close { top: 1.6rem; right: 1.6rem; }
.lightbox-close svg { width: 2.8rem; height: 2.8rem; }
.lightbox-arrow { top: 50%; margin-top: -2.2rem; }
.lightbox-arrow svg { width: 6.4rem; height: 2rem; }
.lightbox-arrow--prev { left: 1.6rem; }
.lightbox-arrow--next { right: 1.6rem; }
.lightbox-arrow--prev:hover { transform: translateX(-0.4rem); }
.lightbox-arrow--next:hover { transform: translateX(0.4rem); }
.lightbox-arrow[hidden] { display: block; visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
.lightbox, .lightbox-image, .film-button img { transition: none; }
}
/* ============================================================
My Brands - measured from the layout
(layout image 1401 px wide, x 1.028 to 1440):
text on the left from 6.9rem, fixed breaks, 2.4rem.
Four monitors, 44.6rem wide each, in two columns at 38.1
and 89.7rem, row distance 37.6rem. Name centred below the foot.
Monitor image with a transparent screen (area 1.7 % /
1.5 % / 96.4 % / 71 % of the image), behind it black or the
brand's home page (fully visible, black at the sides).
"Coming soon" seal 31.3 % of the monitor width, at 74 % / 37 %.
============================================================ */
.brands {
width: 100%;
display: flex;
align-items: flex-start;
padding-left: 4.9rem; /* 6.9rem from the page edge, minus padding */
}
.brands-text {
width: 28.2rem;
flex: none;
margin-top: 1.4rem;
font-size: 2.45rem; /* measured against the line widths */
line-height: 1.18;
white-space: nowrap;
}
.brands-text p { margin: 0 0 2.9rem; }
.brands-text .brands-quote { margin-top: 5.8rem; margin-bottom: 0; }
.brands-grid {
display: grid;
grid-template-columns: repeat(2, 44.6rem);
column-gap: 7rem;
row-gap: 2.2rem;
margin-left: 3rem;
}
.brand { margin: 0; text-align: center; }
.brand-monitor {
position: relative;
width: 44.6rem;
aspect-ratio: 527 / 400;
}
.brand-screen {
position: absolute;
left: 1.7%;
top: 1.5%;
width: 96.4%;
height: 71%;
background: #000;
}
.brand-screen img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.brand-frame {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.brand-seal {
position: absolute;
left: 74%;
top: 37%;
width: 31.3%;
}
.brand figcaption {
margin-top: -1.2rem; /* tight below the monitor foot */
font-size: 2.45rem;
font-weight: bold;
line-height: 1.2;
}
.brand figcaption a { color: var(--title); text-decoration: underline; text-underline-offset: 0.3rem; }
.brand figcaption a:hover,
.brand figcaption a:focus-visible { color: var(--accent); }
/* ============================================================
Text pages: Contact, Legal Notice, Privacy Policy
Measured from the layout (Contact; layout image 1340 px,
x 1.0746): text from 33.4rem off the page edge, 2.57rem, line
30 px, fixed breaks; two blank lines between sections.
Behind it a large watermark at 5 % opacity
(colour measured: #470D5A at 5 %).
============================================================ */
/* The text block is horizontally CENTRED (as in all three
layouts, centred below the title), the text inside left-aligned. */
.textpage {
position: relative;
font-size: 2.57rem; /* measured against the line length */
line-height: 1.17; /* = 30 px line spacing */
white-space: nowrap; /* breaks only as in the layout */
}
.textpage p { position: relative; z-index: 1; margin: 0 0 6rem; }
.textpage p:last-child { margin-bottom: 0; }
.textpage-h { text-decoration: underline; text-underline-offset: 0.3rem; }
.textpage a { color: inherit; text-decoration: none; }
.textpage a:hover,
.textpage a:focus-visible { text-decoration: underline; text-underline-offset: 0.3rem; }
/* The watermark sits inside a wrapper in the page colour, so the
stardust does not shine through the 5 % image. */
.watermark {
position: absolute;
z-index: -1; /* behind all content, above the stardust */
display: block;
pointer-events: none;
user-select: none;
background: var(--base);
box-shadow: 0 0 2.5rem 2rem var(--base); /* soft edge */
}
.watermark img { display: block; width: 100%; height: 100%; opacity: 0.05; }
.watermark--contact { aspect-ratio: 627 / 432; }
.watermark--legal { aspect-ratio: 342 / 432; }
.watermark--privacy { aspect-ratio: 171 / 432; }
/* watermarks centred behind the text, sizes from the layouts */
.watermark--contact,
.watermark--legal,
.watermark--privacy { left: 50%; transform: translateX(-50%); }
.watermark--contact { top: -3.2rem; width: 91.6rem; } /* envelope */
.watermark--legal { top: -0.8rem; height: 73.3rem; } /* compass */
.watermark--privacy { top: -4.5rem; height: 75.4rem; } /* section sign */
/* Legal Notice and Privacy Policy: smaller type than Contact,
23.6 px line spacing, headings bold at text size, one blank line
between sections, two after the introduction. */
.textpage--legal { font-size: 2rem; line-height: 1.18; }
.textpage--legal p { margin: 0 0 2.36rem; }
.textpage--legal .textpage-intro { margin-bottom: 4.72rem; }
.textpage-h2 {
position: relative;
z-index: 1;
margin: 0;
font-family: var(--font-text);
font-size: 1em;
font-weight: bold;
line-height: inherit;
color: var(--title);
}
.textpage-list {
position: relative;
z-index: 1;
margin: 0 0 2.36rem; /* blank line before and after, as in the layout */
padding-left: 2.9rem;
}
.textpage-list li { margin: 0; }
.textpage a.textpage-link { text-decoration: underline; text-underline-offset: 0.2rem; }
.nowrap { white-space: nowrap; } /* e.g. never break the tax number at its hyphens */
/* ============================================================
MOBILE LAYOUT (below 900 px width)
Based on the Figma mobile layouts, exported 525 px wide. So that
every measurement transfers directly: 1rem = 1/52.5 of the
window width, i.e. 10 image pixels. On wider devices (phone in
landscape, small tablet) the page grows no wider than 525 px
and stays centred.
Only pages with use this layout.
============================================================ */
@media (max-width: 899px) {
html:has(body.mobile) { font-size: min(calc(100vw / 52.5), 10px); }
.mobile .page { max-width: 52.5rem; }
br.mobile-only { display: inline; }
br.desktop-only { display: none; }
/* ---------- Header, content, footer ----------
Baselines in the layout: title 64, subtitle 105, footer 1160.
On mobile the content is not vertically centred but sits at a
fixed distance below the header - the page is taller than the
screen anyway and scrolls. */
.mobile .header { padding: 1.9rem 1rem 0; }
.mobile .header-title { font-size: 4.1rem; } /* capitals, width as in the layout (457 px) */
.mobile .header-subtitle { font-size: 2.4rem; margin-top: 2.5rem; }
.mobile .content {
justify-content: flex-start;
padding: 5.73rem 0 4.07rem;
}
.mobile .footer {
gap: 2.2rem;
padding: 2rem 1rem 1.4rem;
font-size: 1.48rem;
}
/* ---------- Home page: mirrors 2 + 1 + 2 ----------
The desktop mirrors, scaled to 81.9 % (glass 165 instead of
201.5 px). Measured in the layout:
horizontal centres 156 / 366 (rows) and 261 (middle)
glass tops 224 / 500 / 776, i.e. 276 px apart
Frame 236.6 x 355.4 each, glass 35.8 from the left and 55.3
from the top. The group is centred. */
.mirror-row {
width: 44.66rem;
height: 90.74rem;
}
.mirror-row::after {
background-image:
url("../images/mirror-single.png"), url("../images/mirror-single.png"),
url("../images/mirror-single.png"), url("../images/mirror-single.png"),
url("../images/mirror-single.png");
background-size: 23.66rem 35.54rem;
background-position: 0 0, 21rem 0, 10.5rem 27.6rem, 0 55.2rem, 21rem 55.2rem;
background-repeat: no-repeat;
}
.mirror {
width: 16.5rem;
height: 24.49rem;
/* more padding at the bottom: in the layout the text sits
slightly above the middle (measured 5-15 px) */
padding: 0.7rem 1.2rem 2.5rem;
}
/* padding-bottom per mirror: the larger, the higher the text.
Values chosen so every baseline matches the layout within
+-2 px (the text does not sit equally high in every mirror). */
.mirror:nth-of-type(1) { left: 3.58rem; top: 5.53rem; padding-bottom: 1.7rem; }
.mirror:nth-of-type(2) { left: 24.58rem; top: 5.53rem; }
.mirror:nth-of-type(3) { left: 14.08rem; top: 33.13rem; padding-bottom: 4.5rem; }
.mirror:nth-of-type(4) { left: 3.58rem; top: 60.73rem; padding-bottom: 2.0rem; }
.mirror:nth-of-type(5) { left: 24.58rem; top: 60.73rem; padding-bottom: 4.1rem; }
.mirror-title { font-size: 3.28rem; line-height: 1.14; margin-bottom: 1.45rem; }
.mirror-text { font-size: 1.92rem; line-height: 1.172; max-width: 13.1rem; }
}
/* ---------- About Me on mobile: the magazine ----------
The magazine is wider than the screen: one page stands centred,
the neighbouring page peeks in at the edge. Inside, the magazine
is built exactly as on desktop (100rem wide) and only scaled to
73 % as a whole - so font sizes, spacing and fixed line breaks
stay consistent. Visible page 36.5rem, screen 52.5rem:
right page centred: translateX(-28.5rem)
left page centred: translateX(8rem)
Switching and page turning are handled by js/page.js. */
@media (max-width: 899px) {
.mobile .content--magazine {
align-items: flex-start;
justify-content: center;
padding: 3rem 0;
touch-action: pan-y; /* horizontal swipes are handled by our script */
user-select: none;
-webkit-user-select: none;
}
.mobile .magazine-frame,
.mobile .magazine-frame.closed-front,
.mobile .magazine-frame.closed-back {
--scale: 0.73;
flex: none;
width: 100rem;
transform-origin: 0 0;
transform: translateX(-28.5rem) scale(var(--scale));
/* scaling down frees height (68rem x 27 %) */
margin-bottom: -18.36rem;
}
.mobile .magazine-frame.shows-left {
transform: translateX(8rem) scale(var(--scale));
}
}
/* ---------- Portfolio on mobile ----------
Portrait: frame and images rotated 90 degrees clockwise - the
phone is turned sideways to view them. Swiping is vertical, like
a social media feed (js/page.js). The links on sheet 9 rotate
along because they sit inside the rotated frame.
Sizes from the layout (converted to 525 px): outer frame
43.3 x 74.6, the image inside 72.6rem long. The frame is
vertically centred between header and footer, as in the layout.
Landscape (screen rotates because auto-rotate is on): image
unrotated and filling the screen like a full-screen video,
without header and footer; swiping is horizontal as on desktop. */
@media (max-width: 899px) {
.mobile .content--folio {
justify-content: center;
padding: 2rem 0;
}
.mobile .folio-arrows { display: none; }
.mobile .folio-window {
touch-action: none; /* swipes belong to the feed */
cursor: default;
}
}
@media (max-width: 899px) and (orientation: portrait) {
.mobile .folio {
position: relative;
width: 42.84rem; /* 40.84 image + 2 x 1rem frame */
height: 74.6rem; /* 72.6 image + 2 x 1rem frame */
}
.mobile .folio-frame {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(90deg);
}
.mobile .folio-window { width: 72.6rem; }
}
@media (max-width: 899px) and (orientation: landscape) {
/* like a full-screen video: only the image, no header or footer */
.mobile .page:has(.content--folio) { max-width: none; min-height: 100svh; }
.mobile .page:has(.content--folio) .header,
.mobile .page:has(.content--folio) .footer { display: none; }
.mobile .content--folio { padding: 1rem 0; }
.mobile .folio-window {
width: min(calc(100vw - 4rem), calc((100svh - 4rem) * 16 / 9));
}
}
/* ---------- Services on mobile: the clipboard ----------
The whole desktop clipboard - writing, rolling up and rolling
back - unchanged, only scaled down as a whole. 84 % gives the
board width of the mobile layout (437 of 525 px).
The roll in js/page.js calculates in rem - that stays correct
because the scaling happens last, as a transform. */
@media (max-width: 899px) {
.mobile .content--clipboard {
justify-content: center;
padding: 2rem 0 3rem;
}
.mobile .clipboard {
transform: scale(0.84);
transform-origin: 50% 0;
margin-bottom: -11.28rem; /* 70.5rem x 16 %: height freed by scaling */
}
}
/* ---------- Photography on mobile ----------
Paragraph 1, camera, paragraph 2 stacked, below them the
filmstrip vertical - the desktop strip turned 90 degrees and
scaled to 72.5 % (19.2 x 92rem), photos stay upright.
Sizes from the layout overview (strip, camera 27.5rem) and the
text image: line spacing 20.3 px, left text edge 138.4 px.
Tapping a photo opens the lightbox, as on desktop. */
@media (max-width: 899px) {
.mobile .content--photo {
justify-content: flex-start;
padding: 10.6rem 0 7rem;
}
.mobile .photography { width: 100%; }
.mobile .photo-head {
flex-direction: column;
align-items: center;
padding: 0;
}
.mobile .photo-text {
display: contents; /* paragraphs and camera become siblings */
font-size: 1.735rem;
line-height: 1.17; /* 20.3 px line spacing as in the layout */
}
.mobile .photo-text p { margin: 0; width: 24.6rem; }
.mobile .photo-para-1 { order: 1; }
.mobile .photo-camera { order: 2; width: 27.5rem; height: 27.5rem; margin: 7.4rem 0 8.4rem; }
.mobile .photo-para-2 { order: 3; }
/* vertical strip: rows of holes left and right instead of
top/bottom, all desktop sizes x 0.725 */
.mobile .filmstrip {
flex-direction: column;
width: 19.2rem;
margin-top: 8rem;
padding: 0.725rem 2.47rem;
gap: 0.725rem;
background:
repeating-linear-gradient(180deg,
transparent 0 1.0875rem, var(--hole-color) 1.0875rem 1.8125rem, transparent 1.8125rem 2.175rem)
0.435rem 0 / 1.52rem 100% no-repeat,
repeating-linear-gradient(180deg,
transparent 0 1.0875rem, var(--hole-color) 1.0875rem 1.8125rem, transparent 1.8125rem 2.175rem)
calc(100% - 0.435rem) 0 / 1.52rem 100% no-repeat,
#050308;
}
.mobile .film-frame { flex: none; width: 100%; height: 14.5rem; }
/* Lightbox: on a narrow screen the arrows would sit on top of
the photo - so they move below it, and the photo gives up a
little height. Swiping works anyway. */
.mobile .lightbox-image { max-width: 92vw; max-height: 74vh; }
.mobile .lightbox-arrow { top: auto; bottom: 5rem; margin-top: 0; }
.mobile .lightbox-arrow--prev { left: 4vw; }
.mobile .lightbox-arrow--next { right: 4vw; }
}
/* ---------- My Brands on mobile ----------
Introduction, then the four monitors stacked (Viking-Celtic
Tattoo first), names bold on two lines, the quote at the very
bottom. Scrolling instead of a grid.
Monitors 39.6rem wide, centred.
The names stay links (so far only Viking-Celtic Tattoo). */
@media (max-width: 899px) {
.mobile .content--brands {
justify-content: flex-start;
padding: 5rem 0 7rem;
}
.mobile .brands {
flex-direction: column;
align-items: center;
padding-left: 0;
}
.mobile .brands-text {
display: contents; /* introduction at the top, quote at the bottom */
font-size: 1.77rem;
line-height: 1.18; /* 20.9 px line spacing */
}
.mobile .brands-text p {
order: 0;
align-self: flex-start;
margin: 0 0 2.09rem 9.85rem; /* left text edge 98.5 px as in the layout */
}
.mobile .brands-grid {
order: 1;
display: flex;
flex-direction: column;
align-items: center;
row-gap: 4.1rem; /* monitor to monitor ~395 px as in the layout */
margin: 4.4rem 0 0;
}
.mobile .brand:nth-of-type(2) { order: -1; } /* Viking-Celtic Tattoo first */
.mobile .brand-monitor { width: 39.6rem; }
.mobile .brand figcaption {
margin-top: -1.25rem;
font-size: 2.62rem;
line-height: 1.16;
}
.mobile .brands-text .brands-quote {
order: 2;
margin: 6.7rem 0 0 11.15rem;
font-size: 2.05rem;
line-height: 1.15; /* 23.6 px line spacing */
}
}
/* ---------- Contact, Legal Notice, Privacy Policy on mobile ----------
The mobile layouts wrap lines at the edge of a text box - so this
does the same: fixed desktop breaks off (only
stays), box width per page as in the layout, and the browser then
breaks at the same places.
Watermarks centred, sizes measured from the layout. */
@media (max-width: 899px) {
.mobile .content--text {
justify-content: flex-start;
padding: 13.8rem 0 7rem;
}
.mobile .textpage {
white-space: normal;
width: 41.6rem; /* Contact */
font-size: 2.24rem;
line-height: 1.17; /* 26.25 px */
}
.mobile .textpage br:not(.fixed) { display: none; }
.mobile .textpage p { margin-bottom: 5.25rem; } /* two blank lines */
.mobile .textpage p:last-child { margin-bottom: 0; }
.mobile .textpage--legal {
font-size: 1.73rem;
line-height: 1.18; /* 20.4 px */
}
.mobile .textpage--legal p { margin-bottom: 2.04rem; }
.mobile .textpage--legal .textpage-intro { margin-bottom: 4.08rem; }
.mobile .textpage-list { margin-bottom: 2.04rem; padding-left: 2.6rem; }
/* Legal and Privacy: the text starts at a fixed distance below
the title, as on Contact; the gap to the footer stays 9.2rem. */
.mobile .content--text:has(.watermark--legal),
.mobile .content--text:has(.watermark--privacy) {
justify-content: flex-start;
padding: 8rem 0 9.2rem;
}
.mobile .content--text:has(.watermark--legal) .textpage { width: 35.8rem; }
.mobile .content--text:has(.watermark--privacy) .textpage { width: 38.1rem; }
.mobile .watermark--contact { top: 23.7rem; width: 44.9rem; }
.mobile .watermark--legal { top: 18.1rem; height: 57.1rem; }
.mobile .watermark--privacy { top: -0.76rem; height: 86rem; }
}