/* ============================================================ DETERMIND — determind-official.com Design system derived from "Determind Portfolio 2026_v3". Colours were sampled from the deck itself, not chosen: #0c0c0c covers 37% of the deck surface, #e4e4e4 covers 11%. The deck contains NO accent colour — deliberately no red here, unlike stargazing-records.com. Restraint is the brand. Type: Anton (display) and Lato (body) match the deck exactly. The deck's label font, Agrandir, is a commercial licence and cannot ship on the web — Space Grotesk stands in for it. ============================================================ */ :root{ /* ground */ --bg: #0c0c0c; --surface: #181818; --surface-2: #242424; --line: #2e2e2e; --line-strong: #454545; /* ink */ --text: #e4e4e4; --text-dim: #8a8a8a; --white: #ffffff; --ivory: #f0f0e4; /* light panel — the deck's contents page */ /* type */ --display: 'Anton', 'Arial Narrow', sans-serif; --label: 'Space Grotesk', system-ui, sans-serif; --body: 'Lato', system-ui, sans-serif; /* rhythm */ --wrap: 1280px; --gut: clamp(20px, 4vw, 56px); --rail-h: 58px; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; /* iOS inflates type when a phone is turned to landscape unless told not to */ -webkit-text-size-adjust:100%; text-size-adjust:100%; /* Guard against a stray wide child sidescrolling the page. This MUST be `clip` on , not `hidden` on . Per spec, an element with overflow-x:hidden and overflow-y:visible has its overflow-y forced to `auto` — which turns into its own scroll container and leaves the document itself with almost nothing to scroll. The page then sticks a few pixels down and window.scrollY never advances, which silently kills every scroll-driven behaviour on the site. `clip` has no such side effect. Older Safari ignores it, which is harmless: the responsive audit found no horizontal overflow on any page at any width, so this is a seatbelt. */ overflow-x:clip; } body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--body); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; /* the default blue-grey flash on tap looks like a bug on a dark site */ -webkit-tap-highlight-color:transparent; } /* Long Vietnamese titles in a narrow column must break rather than overflow. */ h1,h2,h3,p,a,span{ overflow-wrap:break-word; } /* `height:auto` is not cosmetic. Where an carries width/height attributes for layout stability AND a CSS width, the HTML height wins on the other axis and the picture stretches — the pack artwork rendered 338×1000 instead of a square. This lets the aspect ratio survive the attributes. */ img{ max-width:100%; height:auto; display:block; } a{ color:inherit; text-decoration:none; } h1,h2,h3{ font-family:var(--display); font-weight:400; margin:0; text-transform:uppercase; line-height:.92; letter-spacing:.01em; } .wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); } .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; } /* ============================================================ HEADER — DTRMND mark left, nav right One sticky bar, same pattern as stargazing-records.com. The deck's four-column rail was dropped: it repeated the brand name twice and spent 58px of every screen on a year and a section label the visitor can already see. ============================================================ */ /* The bar was 82% opaque with a backdrop blur. Over the dark sections that read beautifully; over the ivory panels enough light bled through to lift the bar towards mid-grey, and dim-grey labels on mid-grey are unreadable. The site now has four light sections, so the bar is opaque. */ .nav{ position:sticky; top:0; z-index:100; background:#0c0c0c; border-bottom:1px solid var(--line); transition:background .35s ease, box-shadow .35s ease; } .nav.scrolled{ background:#080808; box-shadow:0 8px 30px rgba(0,0,0,.5); } .nav-inner{ max-width:var(--wrap); margin:0 auto; padding:14px var(--gut); display:flex; align-items:center; justify-content:space-between; gap:14px; transition:padding .35s ease; } .nav.scrolled .nav-inner{ padding:9px var(--gut); } .brand{ display:flex; align-items:center; gap:13px; flex:none; } .brand img{ height:38px; width:auto; display:block; transition:transform .4s cubic-bezier(.2,.7,.3,1), height .35s ease; } .brand:hover img{ transform:scale(1.07); } .nav.scrolled .brand img{ height:30px; } .brand span{ font-family:var(--display); font-size:20px; letter-spacing:.04em; color:var(--white); text-transform:uppercase; line-height:1; transition:font-size .35s ease; } .nav.scrolled .brand span{ font-size:17px; } /* Was --text-dim (#8a8a8a). At 12px, uppercase and tracked out to .18em that is far fainter than the same grey in a paragraph — tracking thins the strokes and there is less of each letter to catch the eye. #c9c9c9 keeps the hierarchy under the active item while staying comfortably legible. */ .nav a{ font-family:var(--label); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#c9c9c9; padding:8px 0; transition:color .2s ease; position:relative; } .nav a:hover, .nav a.is-active{ color:var(--white); } .nav a.is-active::after{ content:''; position:absolute; left:0; right:0; bottom:2px; height:1px; background:var(--white); } .nav-links{ display:flex; align-items:center; gap:clamp(16px,2.6vw,34px); margin-left:auto; } /* Book is the one action the whole site exists to produce. It was an outlined button in the same dim grey as the ordinary links — the least prominent thing in the header. Solid white, so it reads as a button and not as a fifth link. */ .nav-links .btn{ padding:12px 22px; background:var(--white); color:#0c0c0c; border-color:var(--white); font-weight:600; } .nav-links .btn::before{ content:none; } .nav-links .btn:hover, .nav-links .btn:focus-visible{ background:transparent; color:var(--white); border-color:var(--white); } .nav-toggle{ display:none; background:none; border:0; color:var(--text); font-size:22px; cursor:pointer; padding:4px 8px; margin-left:auto; } /* ============================================================ SECTION FURNITURE ============================================================ */ .section{ padding:clamp(56px,9vh,110px) 0; } .section.tight{ padding:clamp(36px,6vh,68px) 0; } .eyebrow{ font-family:var(--label); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--text-dim); margin:0 0 14px; } .title{ font-size:clamp(30px,5.2vw,62px); color:var(--white); } .lede{ font-size:clamp(15px,1.5vw,18.5px); line-height:1.7; color:var(--text); max-width:62ch; margin:20px 0 0; } .rule{ height:1px; background:var(--line); border:0; margin:0; } /* ============================================================ HERO — the deck's cover composition The name is set enormous and the figure stands in front of it, so the two overlap. Type and portrait share one grid cell and are separated by z-index rather than by columns. ============================================================ */ .hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line); } .hero-inner{ max-width:var(--wrap); margin:0 auto; padding:clamp(26px,5vh,54px) var(--gut) 0; position:relative; min-height:min(88vh,860px); display:flex; flex-direction:column; justify-content:flex-end; } .hero-stage{ position:relative; width:100%; } /* the name — sized to fill the measure, sitting behind the figure */ .hero h1{ font-size:clamp(64px,15.5vw,250px); color:var(--white); line-height:.82; letter-spacing:-.012em; text-align:center; position:relative; z-index:1; margin:0; /* optical: Anton carries side bearings that make a centred line look left-heavy at display size */ padding-left:.02em; } .hero .kicker{ font-family:var(--label); font-size:clamp(10px,1.15vw,13px); letter-spacing:.34em; text-transform:uppercase; color:var(--text-dim); text-align:center; margin:0 0 clamp(10px,1.6vh,20px); position:relative; z-index:4; /* above the figure, which rises past it */ } .hero-media{ position:relative; z-index:2; /* The figure sits in front of the name. Measured at 1318px: at -19vw the head rose 49px past the kicker's baseline, and dim grey type over dark hair is unreadable however the z-index falls. -12vw clears it at every width. */ margin-top:clamp(-160px,-12vw,-50px); display:flex; justify-content:center; pointer-events:none; } /* A true alpha cut-out, not a photo on a black plate. The background was flood-filled away from the frame edges inward so the black suit survived — a plain dark-pixel threshold would have erased the jacket along with it. */ .hero-media img{ width:auto; height:clamp(330px,52vw,620px); max-width:100%; object-fit:contain; display:block; } .hero-under{ position:relative; z-index:3; text-align:center; margin-top:clamp(-40px,-3vw,-14px); padding-bottom:clamp(30px,5vh,58px); } .hero .lede{ margin-left:auto; margin-right:auto; text-align:center; } .hero .affil{ font-family:var(--label); font-size:clamp(11px,1.2vw,14px); letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); margin:20px 0 0; } .hero .affil b{ color:var(--text); font-weight:600; } .hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; } .hero .hero-cta{ justify-content:center; } .btn{ font-family:var(--label); font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; padding:14px 26px; border:1px solid var(--line-strong); color:var(--text); background:transparent; cursor:pointer; transition:background .22s ease, color .22s ease, border-color .22s ease; } .btn:hover{ background:var(--white); color:var(--bg); border-color:var(--white); } .btn.solid{ background:var(--white); color:var(--bg); border-color:var(--white); } .btn.solid:hover{ background:transparent; color:var(--white); } /* ============================================================ STAT STRIP ============================================================ */ .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,3vw,40px); border-top:1px solid var(--line); padding-top:clamp(22px,3vh,34px); } .stat-num{ font-family:var(--display); font-size:clamp(30px,4.6vw,56px); color:var(--white); line-height:1; margin:0 0 8px; } .stat-label{ font-family:var(--label); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-dim); margin:0; } /* ============================================================ CREDIT GRID The deck's core pattern: photo, then a centred caption block of NAME / venue / years. Reused for residencies, brands, festivals. ============================================================ */ .credit-grid{ display:grid; gap:clamp(16px,2.4vw,28px); } .credit-grid.c2{ grid-template-columns:repeat(2,1fr); } .credit-grid.c3{ grid-template-columns:repeat(3,1fr); } .credit-grid.c4{ grid-template-columns:repeat(4,1fr); } .credit .shot{ aspect-ratio:3/4; overflow:hidden; background:var(--surface); border:1px solid var(--line); } .credit .shot img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; filter:grayscale(.2) contrast(1.05); transition:transform .6s cubic-bezier(.2,.7,.3,1), filter .4s ease; } .credit:hover .shot img{ transform:scale(1.05); filter:grayscale(0) contrast(1.08); } .credit .c-name{ font-family:var(--display); font-size:clamp(15px,1.7vw,21px); color:var(--white); margin:14px 0 3px; text-transform:uppercase; } .credit .c-sub{ font-family:var(--label); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text); margin:0 0 5px; font-weight:600; } .credit .c-year{ font-family:var(--label); font-size:10.5px; letter-spacing:.14em; color:var(--text-dim); margin:0; } .credit.center{ text-align:center; } /* logo row */ .logo-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:clamp(16px,3vw,44px); align-items:center; margin-top:clamp(28px,4vh,52px); padding-top:clamp(22px,3vh,34px); border-top:1px solid var(--line); } .logo-row img{ max-height:34px; width:auto; margin:0 auto; opacity:.62; filter:grayscale(1) brightness(1.7); transition:opacity .3s ease; } .logo-row img:hover{ opacity:1; } /* ============================================================ FEATURE BLOCK — used for Buddha-Bar / Stargazing credentials ============================================================ */ .feature{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(22px,4vw,58px); align-items:center; } .feature.rev{ direction:rtl; } .feature.rev > *{ direction:ltr; } .feature-media{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; } .feature-media img{ width:100%; aspect-ratio:1; object-fit:cover; border:1px solid var(--line); filter:grayscale(.15); } .feature-media img:first-child{ grid-column:1/-1; aspect-ratio:16/10; } /* Cover-art variant: sleeve artwork is square and carries type, so the default 16:10 lead crop would slice the title off. Three equal squares instead. */ .feature-media.covers{ grid-template-columns:repeat(3,1fr); } .feature-media.covers img, .feature-media.covers img:first-child{ grid-column:auto; aspect-ratio:1; } .badge{ display:inline-block; font-family:var(--label); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; border:1px solid var(--line-strong); padding:5px 12px; margin:0 0 16px; color:var(--text); } /* ============================================================ MEDIA TILES — mixtapes / videos ============================================================ */ .tile-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:clamp(12px,2vw,22px); } .tile{ position:relative; overflow:hidden; border:1px solid var(--line); background:var(--surface); } .tile img{ width:100%; aspect-ratio:3/4; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.3,1), opacity .3s ease; } .tile:hover img{ transform:scale(1.04); opacity:.72; } .tile .play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s ease; } .tile:hover .play{ opacity:1; } .tile .play span{ width:52px; height:52px; border-radius:50%; border:1.5px solid var(--white); display:flex; align-items:center; justify-content:center; background:rgba(12,12,12,.5); } .tile.video img{ aspect-ratio:16/9; } /* ============================================================ VIDEO — click-to-load The YouTube iframe is NOT in the HTML. A local poster stands in until the visitor clicks, at which point interactive.js swaps in a youtube-nocookie iframe. Six embeds on one page would otherwise cost roughly 3 MB and a dozen third-party requests on first paint. ============================================================ */ .vid-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2.6vw,30px); } .vid-grid.lead{ grid-template-columns:1fr; } .vid{ border:1px solid var(--line); background:var(--surface); } .vid-frame{ position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#000; cursor:pointer; border:0; padding:0; display:block; } .vid-frame img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.2) contrast(1.05) brightness(.86); transition:transform .6s cubic-bezier(.2,.7,.3,1), filter .4s ease; } .vid-frame:hover img{ transform:scale(1.03); filter:grayscale(0) contrast(1.08) brightness(.95); } .vid-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } .vid-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; } .vid-play span{ width:clamp(54px,6vw,76px); height:clamp(54px,6vw,76px); border-radius:50%; border:1.5px solid rgba(255,255,255,.85); background:rgba(12,12,12,.42); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(2px); transition:background .3s ease, transform .3s ease; } .vid-frame:hover .vid-play span{ background:rgba(255,255,255,.92); transform:scale(1.06); } .vid-play svg{ width:34%; height:auto; fill:var(--white); margin-left:8%; transition:fill .3s ease; } .vid-frame:hover .vid-play svg{ fill:#0c0c0c; } .vid-meta{ padding:16px 18px 18px; } .vid-meta h3{ font-size:clamp(16px,1.8vw,23px); color:var(--white); margin:0 0 7px; } .vid-meta p{ font-family:var(--label); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--text-dim); margin:0; } /* mixtape covers — square, all link to SoundCloud */ .mix-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:clamp(10px,1.6vw,18px); } /* The sleeve artwork already carries its own title, so the caption sits underneath rather than as an overlay — an overlaid gradient would obscure artwork that a booker is being asked to judge. */ .mix{ display:block; } .mix .frame{ overflow:hidden; border:1px solid var(--line); background:var(--surface); } /* The covers are 3:4 portrait artwork. A square crop was slicing the tops and bottoms off the designs, so the frame matches the source. */ .mix img{ width:100%; aspect-ratio:3/4; object-fit:cover; filter:grayscale(.18); transition:transform .5s cubic-bezier(.2,.7,.3,1), filter .4s ease; } .mix:hover img{ transform:scale(1.05); filter:grayscale(0); } .mix .cap{ display:block; padding:10px 1px 0; font-family:var(--label); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--text-dim); font-weight:600; transition:color .25s ease; } .mix:hover .cap{ color:var(--white); } /* ============================================================ DISCOGRAPHY + AUDIO One