:root { --torn-rim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='36' viewBox='0 0 1200 36' preserveAspectRatio='none'%3E%3Cpath d='M0,14 L4.6,12.6 L7.6,12.9 L10.5,17.2 L14.5,11.4 L21.1,12.0 L27.4,10.5 L33.5,9.5 L39.6,10.3 L46.5,9.2 L50.2,8.2 L56.4,9.4 L62.3,11.0 L70.8,10.8 L74.5,12.3 L79.0,12.5 L84.4,13.1 L90.2,11.9 L98.8,11.9 L101.8,12.3 L109.6,11.9 L115.3,13.3 L118.4,12.5 L121.4,13.6 L127.6,14.3 L134.8,15.8 L143.4,15.0 L149.1,13.8 L156.4,13.4 L162.1,12.2 L166.4,11.0 L172.5,12.2 L179.4,11.9 L182.5,10.8 L185.1,12.5 L189.4,11.3 L195.8,10.9 L203.9,13.0 L211.2,13.0 L219.9,13.8 L225.0,13.4 L230.1,12.3 L235.5,11.0 L238.6,11.6 L247.3,12.3 L251.2,12.1 L259.9,12.7 L263.1,12.8 L268.8,12.2 L276.1,13.4 L283.1,13.5 L291.8,13.0 L300.3,14.1 L306.9,12.5 L312.8,14.3 L316.8,14.4 L323.4,14.8 L330.8,13.5 L335.9,14.8 L341.6,15.6 L349.3,15.3 L355.7,14.5 L362.9,13.9 L365.9,12.3 L370.6,12.5 L377.1,10.7 L381.8,11.7 L385.1,11.5 L388.9,13.3 L395.5,11.8 L402.7,11.9 L405.8,10.9 L408.4,11.6 L415.2,12.3 L420.8,14.2 L426.9,12.3 L434.1,11.0 L437.5,13.2 L445.7,11.5 L451.4,12.8 L457.5,14.3 L464.8,15.8 L472.6,15.6 L480.8,14.0 L486.6,15.4 L493.0,16.3 L496.5,16.5 L499.4,16.9 L505.0,17.6 L507.9,11.6 L514.0,12.9 L519.4,13.5 L525.2,14.3 L531.2,14.2 L538.2,15.6 L542.4,15.6 L550.4,14.0 L555.8,12.4 L558.7,13.2 L567.1,12.0 L573.9,10.8 L582.7,10.1 L587.7,10.6 L595.7,9.7 L601.5,9.6 L606.1,15.1 L608.7,14.3 L614.5,12.6 L622.1,14.6 L626.4,12.8 L630.6,11.5 L639.1,13.0 L642.5,14.7 L649.6,8.9 L652.6,11.2 L660.3,10.0 L663.2,11.8 L667.9,12.3 L672.1,11.1 L676.2,9.9 L679.0,9.3 L683.5,10.8 L689.3,10.0 L691.9,5.2 L696.0,6.1 L702.7,7.6 L711.0,10.2 L714.9,9.6 L723.1,11.0 L732.0,13.2 L734.6,13.8 L739.9,12.1 L744.9,12.4 L751.3,9.9 L756.7,9.5 L765.5,10.2 L774.3,10.0 L776.8,10.0 L782.6,9.3 L785.1,9.0 L790.2,12.5 L793.2,14.5 L796.8,15.9 L803.1,16.7 L808.8,15.6 L812.3,16.6 L818.1,16.0 L823.9,17.4 L830.1,15.0 L832.9,15.4 L837.8,10.4 L844.7,5.7 L850.5,6.8 L853.4,8.6 L856.4,8.3 L860.3,9.9 L866.0,10.0 L872.9,11.5 L879.6,10.2 L883.7,11.6 L889.9,10.0 L894.2,11.1 L901.1,10.7 L906.6,10.9 L914.9,10.1 L923.5,8.7 L931.3,11.2 L935.6,10.4 L939.4,11.1 L945.3,13.2 L953.2,13.4 L960.2,12.4 L965.9,15.6 L971.0,16.3 L976.0,14.6 L980.6,13.9 L989.2,16.4 L992.1,15.6 L995.1,17.1 L1003.2,20.6 L1006.6,21.7 L1011.2,21.8 L1016.5,19.0 L1021.6,19.9 L1025.4,17.6 L1030.6,17.6 L1038.7,17.1 L1044.8,15.4 L1049.1,14.3 L1055.9,13.9 L1061.5,14.6 L1068.2,12.9 L1076.0,13.2 L1080.6,14.3 L1086.7,13.3 L1092.8,12.7 L1100.6,15.7 L1107.9,14.4 L1115.3,14.3 L1120.1,15.0 L1127.8,16.2 L1136.1,15.5 L1141.4,14.6 L1150.2,13.1 L1157.7,14.4 L1163.4,12.7 L1171.9,12.9 L1177.3,14.2 L1180.8,16.0 L1188.7,16.5 L1200,14 L1200,36 L0,36 Z' fill='%23000'/%3E%3C/svg%3E"); --torn-sheet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='36' viewBox='0 0 1200 36' preserveAspectRatio='none'%3E%3Cpath d='M0,17 L4.6,14.355010140348245 L7.6,16.730584847320905 L10.5,18.704098119936106 L14.5,13.276955313218613 L21.1,15.208146860895756 L27.4,12.112775191191712 L33.5,13.145064882273577 L39.6,14.687304688870167 L46.5,12.579418207372589 L50.2,11.284759428418228 L56.4,12.212291585622324 L62.3,14.791532153907404 L70.8,12.598334354244589 L74.5,14.701047852436528 L79.0,16.83062137476111 L84.4,15.175105295808955 L90.2,14.182645640304305 L98.8,15.771461591148249 L101.8,13.80345607125301 L109.6,15.012428955022722 L115.3,17.78912215517515 L118.4,14.835810950970798 L121.4,16.049071086449377 L127.6,18.318233617032483 L134.8,18.02707280088896 L143.4,18.078833123328568 L149.1,16.941006706216747 L156.4,14.987842567874809 L162.1,14.935430450096435 L166.4,14.44894993992294 L172.5,13.865926144014017 L179.4,13.982345675639293 L182.5,14.954545575554594 L185.1,15.941505068987963 L189.4,13.043276206938687 L195.8,13.083521531537661 L203.9,15.772967210229355 L211.2,15.610654098394201 L219.9,16.77883035318771 L225.0,16.98746835599955 L230.1,15.954996724886229 L235.5,13.586959675309807 L238.6,14.28907462503194 L247.3,13.82026039653415 L251.2,14.476333625744191 L259.9,16.735449165959917 L263.1,14.502297371742545 L268.8,15.187086839300216 L276.1,15.501241409295405 L283.1,17.297571319788794 L291.8,15.081799795422155 L300.3,16.995342220845284 L306.9,14.7950658670173 L312.8,18.468001628553857 L316.8,16.227024197994027 L323.4,18.170791043991553 L330.8,16.830294933631567 L335.9,18.989428543075714 L341.6,18.555158213161583 L349.3,19.531187999217828 L355.7,16.169251232194036 L362.9,17.184406493895867 L365.9,16.565770630392283 L370.6,14.163075138917916 L377.1,12.270886156874589 L381.8,14.98838141579727 L385.1,14.246154801216138 L388.9,16.929575767967147 L395.5,13.852314476519563 L402.7,14.748925893712805 L405.8,14.536104238411419 L408.4,14.042599901543344 L415.2,14.139616678599936 L420.8,15.938083577117222 L426.9,14.29690122148192 L434.1,13.072050568137591 L437.5,16.657404746172162 L445.7,14.574392737738231 L451.4,15.70284748446704 L457.5,16.73548142905004 L464.8,19.47613194984092 L472.6,19.617380998444936 L480.8,18.45494864132324 L486.6,18.227305439917615 L493.0,18.12687290019253 L496.5,18.234726040358986 L499.4,18.642288910257818 L505.0,20.360549477238543 L507.9,15.755517975770868 L514.0,16.083386742270093 L519.4,17.276414890752786 L525.2,16.940389070435522 L531.2,18.006196253483896 L538.2,18.026097634926614 L542.4,19.511808738837747 L550.4,15.763280787674873 L555.8,16.015769463929477 L558.7,15.287147497520916 L567.1,15.124587109375888 L573.9,13.639042496525338 L582.7,12.569927557503778 L587.7,14.311959411881716 L595.7,12.62360302128528 L601.5,12.994986377897899 L606.1,17.34403914388622 L608.7,17.676224914938242 L614.5,15.314317829325411 L622.1,17.226702979986094 L626.4,15.692151841429919 L630.6,15.410014240147397 L639.1,14.686011692665874 L642.5,16.784824355258497 L649.6,10.588555223462398 L652.6,14.516848866769735 L660.3,12.588922864324926 L663.2,14.304912740536547 L667.9,16.66128727235597 L672.1,12.730756689507643 L676.2,13.639313670619632 L679.0,12.868732030313097 L683.5,15.072684222660147 L689.3,12.39221762874212 L691.9,8.86471620847998 L696.0,9.386704471330187 L702.7,11.516975057884604 L711.0,14.539463173074651 L714.9,11.295996299928204 L723.1,14.978054983180751 L732.0,15.021784112047904 L734.6,17.44671356134365 L739.9,14.997231719357757 L744.9,16.22907003283161 L751.3,13.769396572956 L756.7,13.740631895436453 L765.5,14.144400753680031 L774.3,11.898121824743585 L776.8,12.989621822154653 L782.6,10.826115547177977 L785.1,13.293168710287393 L790.2,14.909944344075514 L793.2,18.076329822230548 L796.8,17.853945695025942 L803.1,18.908427533383662 L808.8,19.683727113594458 L812.3,19.482343590897138 L818.1,19.85149909814258 L823.9,20.687150951005847 L830.1,18.035654340624326 L832.9,18.07505622847868 L837.8,12.379812150760909 L844.7,8.423270305947952 L850.5,10.248637992900544 L853.4,11.545069712830959 L856.4,11.433849859068358 L860.3,11.882077158546204 L866.0,12.779662807661474 L872.9,13.315664261307354 L879.6,11.916495132406606 L883.7,14.973804720135389 L889.9,12.125023121306805 L894.2,13.863180825825227 L901.1,15.165296410987626 L906.6,15.316349957442949 L914.9,12.119575586189246 L923.5,10.598793483156873 L931.3,14.082771297253093 L935.6,14.57378767596428 L939.4,13.30479994448968 L945.3,16.3156937743795 L953.2,17.22162120933291 L960.2,16.178699929740237 L965.9,19.439251775463028 L971.0,18.68177025229742 L976.0,16.93819073215613 L980.6,16.202997642151363 L989.2,18.662169511722045 L992.1,17.881005156022088 L995.1,19.918193284737225 L1003.2,22.657209258794943 L1006.6,23.9065120299158 L1011.2,24.14406229594725 L1016.5,23.222704684248882 L1021.6,21.964750403009457 L1025.4,19.29441228500164 L1030.6,19.854961237142582 L1038.7,19.33784768225233 L1044.8,18.478926240609162 L1049.1,17.74892196674145 L1055.9,15.701627337634411 L1061.5,17.49174709448864 L1068.2,14.511069428227822 L1076.0,14.713476300420524 L1080.6,18.448475069234583 L1086.7,15.493340677929439 L1092.8,15.544891471737076 L1100.6,18.32162886650179 L1107.9,18.530646548278874 L1115.3,16.49867803422846 L1120.1,16.65117348409235 L1127.8,19.50147993504178 L1136.1,19.483775114637474 L1141.4,16.682484824884842 L1150.2,14.825349754964641 L1157.7,17.438007010507448 L1163.4,14.733277007545095 L1171.9,16.209126561729942 L1177.3,18.024994626144533 L1180.8,19.494266791918175 L1188.7,18.01901856301233 L1200,17 L1200,36 L0,36 Z' fill='%23000'/%3E%3C/svg%3E"); } /* ========================================================================== Matheus Lopes — Lado A / Lado B Papel e impressão: magenta de risografia, papel rasgado, fibras, marcas de corte e de registro, barra de cores, papel com grão. Tipos: Archivo (display, largura variável) + Schibsted Grotesk (texto, grotesca de jornal). Rótulos em Archivo estreito, caixa-alta. ========================================================================== */ :root { --paper: #F1F0EB; --paper-2: #E6E4DD; --ink: #18171A; --muted: #6F6C68; --rule: rgba(24, 23, 26, .16); --magenta: #FF48B0; /* Riso Fluorescent Pink */ --magenta-ink: #D6247F; /* magenta legível sobre papel claro */ --blue: #0078BF; /* Riso Blue (só no desalinhamento) */ --dot: rgba(24, 23, 26, .07); --sheet: #E5E2DA; --rim: #FBFAF6; --crumple-op: .55; --grain-op: .32; --grain-blend: multiply; --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif; --f-text: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif; --gutter: clamp(16px, 4vw, 56px); --max: 1440px; --ease: cubic-bezier(.2, .7, .1, 1); color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #151416; --paper-2: #201E21; --ink: #ECEAE4; --muted: #96928D; --rule: rgba(236, 234, 228, .15); --magenta-ink: #FF5DB9; --dot: rgba(236, 234, 228, .05); --grain-op: .14; --grain-blend: screen; --sheet: #1F1D21; --rim: #3B393E; --crumple-op: .4; color-scheme: dark; } } :root[data-theme="dark"] { --paper: #151416; --paper-2: #201E21; --ink: #ECEAE4; --muted: #96928D; --rule: rgba(236, 234, 228, .15); --magenta-ink: #FF5DB9; --dot: rgba(236, 234, 228, .05); --grain-op: .14; --grain-blend: screen; --sheet: #1F1D21; --rim: #3B393E; --crumple-op: .4; color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; } body { margin: 0; background-color: var(--paper); color: var(--ink); font-family: var(--f-text); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; position: relative; transition: background-color .4s var(--ease), color .4s var(--ease), opacity .3s var(--ease); } /* crumpled paper: soft creases lit from the top left */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--crumple-op); mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='.0045' numOctaves='3' seed='11' stitchTiles='stitch' result='n'/%3E%3CfeDiffuseLighting in='n' lighting-color='%23fff' surfaceScale='3.2' diffuseConstant='1'%3E%3CfeDistantLight azimuth='225' elevation='62'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E"); background-size: 900px 900px; } /* paper grain */ body::after { content: ""; position: fixed; inset: -50%; z-index: 100; pointer-events: none; opacity: var(--grain-op); mix-blend-mode: var(--grain-blend); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } body.is-leaving, body.is-entering { opacity: 0; } /* theme change: swap every colour at once */ html.theme-swap *, html.theme-swap *::before, html.theme-swap *::after { transition: none !important; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } ::selection { background: var(--magenta); color: #18171A; } :focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; } .wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); } .label { font-family: var(--f-display); font-stretch: 80%; font-weight: 600; font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; } .muted { color: var(--muted); } .pink { color: var(--magenta-ink); } /* registration mark */ .regmark { width: 18px; height: 18px; flex: none; color: var(--ink); } /* crop marks around a frame */ .crop { position: relative; } .crop::before { --m: var(--ink); --o: 14px; --l: 9px; content: ""; position: absolute; inset: calc(var(--o) * -1); pointer-events: none; z-index: 2; opacity: .7; background: linear-gradient(var(--m), var(--m)) left 0 top var(--o) / var(--l) 1px, linear-gradient(var(--m), var(--m)) left var(--o) top 0 / 1px var(--l), linear-gradient(var(--m), var(--m)) right 0 top var(--o) / var(--l) 1px, linear-gradient(var(--m), var(--m)) right var(--o) top 0 / 1px var(--l), linear-gradient(var(--m), var(--m)) left 0 bottom var(--o) / var(--l) 1px, linear-gradient(var(--m), var(--m)) left var(--o) bottom 0 / 1px var(--l), linear-gradient(var(--m), var(--m)) right 0 bottom var(--o) / var(--l) 1px, linear-gradient(var(--m), var(--m)) right var(--o) bottom 0 / 1px var(--l); background-repeat: no-repeat; } /* ---------- header ---------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 40; border-bottom: 1px solid transparent; transition: background-color .3s var(--ease), border-color .3s var(--ease); } .site-header.is-scrolled { background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); border-color: var(--rule); } .header-inner { display: flex; align-items: center; gap: 32px; height: 72px; } .brand { display: flex; align-items: center; gap: 12px; } .brand-mark { font-family: var(--f-display); font-weight: 800; font-stretch: 125%; font-size: 21px; letter-spacing: -.02em; line-height: 1; } .brand-mark i { font-style: normal; color: var(--magenta); } .brand-name { font-size: 15px; font-weight: 500; } .nav { display: flex; gap: 28px; margin-left: 24px; } .nav a { font-size: 15px; position: relative; padding: 4px 0; } .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--magenta); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); } .nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; } .controls { margin-left: auto; display: flex; align-items: center; gap: 18px; } .ctrl { font-family: var(--f-display); font-stretch: 80%; font-weight: 600; font-size: 13px; letter-spacing: .07em; text-transform: uppercase; padding: 6px 0; } .ctrl span { opacity: .38; transition: opacity .2s; } .ctrl span.on { opacity: 1; } .ctrl:hover span { opacity: .8; } .ctrl:hover span.on { opacity: 1; } .theme-btn button { font: inherit; letter-spacing: inherit; text-transform: inherit; opacity: .38; transition: opacity .2s; } .theme-btn button:hover { opacity: .8; } .theme-btn button.on { opacity: 1; cursor: default; } .menu-btn { display: none; } .mobile-nav { position: fixed; inset: 0; z-index: 39; background: var(--paper); padding: 104px var(--gutter) 32px; display: flex; flex-direction: column; gap: 6px; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); } .mobile-nav.open { opacity: 1; pointer-events: auto; } .mobile-nav a { font-family: var(--f-display); font-weight: 800; font-stretch: 112%; font-size: 38px; letter-spacing: -.035em; line-height: 1.1; } @media (max-width: 860px) { .nav, .brand-name { display: none; } .menu-btn { display: inline-block; } } /* ---------- misregistration ---------- */ .riso { position: relative; display: inline-block; } .riso::before, .riso::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: transform .6s var(--ease), opacity .6s var(--ease); } .riso::before { color: var(--magenta); mix-blend-mode: multiply; } .riso::after { color: var(--blue); mix-blend-mode: multiply; } :root[data-theme="dark"] .riso::before, :root[data-theme="dark"] .riso::after { mix-blend-mode: screen; } .riso:hover::before { opacity: .85; transform: translate(-.03em, .018em); } .riso:hover::after { opacity: .6; transform: translate(.025em, -.012em); } /* ---------- hero ---------- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; } .hero::before { /* a torn scrap of riso-pink paper behind the badge */ content: ""; position: absolute; z-index: -1; pointer-events: none; right: 8%; top: -1%; width: min(30vw, 470px); height: 61%; background-color: var(--magenta); transform: rotate(-3.5deg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); clip-path: polygon(1.50% 1.96%,2.38% 2.35%,3.26% 2.20%,4.15% 1.82%,5.03% 1.99%,5.91% 1.60%,6.79% 1.37%,7.67% 2.75%,8.55% 2.84%,9.44% 2.57%,10.32% 1.86%,11.20% 1.48%,12.08% 2.39%,12.96% 2.03%,13.85% 1.69%,14.73% 0.58%,15.61% 1.04%,16.49% 1.81%,17.37% 2.12%,18.25% 1.83%,19.14% 1.63%,20.02% 1.94%,20.90% 2.19%,21.78% 2.44%,22.66% 1.72%,23.55% 2.10%,24.43% 2.40%,25.31% 1.75%,26.19% 1.99%,27.07% 1.51%,27.95% 2.01%,28.84% 1.54%,29.72% 1.25%,30.60% 1.69%,31.48% 1.74%,32.36% 1.43%,33.25% 1.19%,34.13% 1.03%,35.01% 1.02%,35.89% 1.69%,36.77% 1.48%,37.65% 1.28%,38.54% 1.73%,39.42% 1.31%,40.30% 1.16%,41.18% 1.58%,42.06% 1.39%,42.95% 1.09%,43.83% 1.04%,44.71% 1.13%,45.59% 1.70%,46.47% 1.70%,47.35% 1.34%,48.24% 1.77%,49.12% 1.44%,50.00% 1.67%,50.88% 1.32%,51.76% 1.72%,52.65% 1.55%,53.53% 1.09%,54.41% 1.00%,55.29% 0.95%,56.17% 1.23%,57.05% 1.01%,57.94% 0.78%,58.82% 1.08%,59.70% 1.31%,60.58% 1.71%,61.46% 1.14%,62.35% 1.18%,63.23% 0.96%,64.11% 1.17%,64.99% 1.11%,65.87% 1.63%,66.75% 1.68%,67.64% 0.21%,68.52% 0.62%,69.40% 0.00%,70.28% 0.33%,71.16% 0.54%,72.05% 0.45%,72.93% 0.98%,73.81% 1.30%,74.69% 1.54%,75.57% 1.28%,76.45% 1.61%,77.34% 1.37%,78.22% 1.63%,79.10% 1.57%,79.98% 1.48%,80.86% 0.98%,81.75% 1.50%,82.63% 1.56%,83.51% 1.61%,84.39% 1.36%,85.27% 0.89%,86.15% 0.56%,87.04% 0.76%,87.92% 1.07%,88.80% 1.18%,89.68% 1.91%,90.56% 1.25%,91.45% 1.19%,92.33% 0.99%,93.21% 1.01%,94.09% 0.93%,94.97% 1.09%,95.85% 1.29%,96.74% 0.92%,97.62% 1.33%,98.13% 1.00%,97.57% 2.09%,98.38% 3.18%,98.09% 4.27%,98.02% 5.36%,98.11% 6.44%,98.24% 7.53%,98.67% 8.62%,98.53% 9.71%,98.03% 10.80%,97.73% 11.89%,98.08% 12.98%,97.41% 14.07%,97.72% 15.16%,98.27% 16.24%,98.60% 17.33%,99.01% 18.42%,98.37% 19.51%,98.52% 20.60%,98.04% 21.69%,98.50% 22.78%,98.67% 23.87%,97.48% 24.96%,97.61% 26.04%,98.10% 27.13%,98.32% 28.22%,98.22% 29.31%,98.68% 30.40%,98.97% 31.49%,98.35% 32.58%,98.46% 33.67%,98.28% 34.76%,98.67% 35.84%,98.97% 36.93%,98.86% 38.02%,98.85% 39.11%,98.77% 40.20%,98.29% 41.29%,98.77% 42.38%,98.61% 43.47%,98.29% 44.56%,98.64% 45.64%,98.07% 46.73%,98.19% 47.82%,97.10% 48.91%,98.59% 50.00%,98.63% 51.09%,98.44% 52.18%,98.76% 53.27%,98.72% 54.36%,98.90% 55.44%,98.81% 56.53%,98.51% 57.62%,98.71% 58.71%,98.17% 59.80%,98.58% 60.89%,98.59% 61.98%,98.80% 63.07%,98.35% 64.16%,98.32% 65.24%,98.25% 66.33%,98.93% 67.42%,98.14% 68.51%,98.16% 69.60%,98.45% 70.69%,98.31% 71.78%,97.80% 72.87%,97.84% 73.96%,98.38% 75.04%,98.24% 76.13%,98.12% 77.22%,98.51% 78.31%,98.16% 79.40%,98.25% 80.49%,97.81% 81.58%,97.44% 82.67%,97.42% 83.76%,97.50% 84.84%,97.84% 85.93%,98.16% 87.02%,98.12% 88.11%,97.79% 89.20%,97.82% 90.29%,97.82% 91.38%,97.56% 92.47%,97.88% 93.56%,97.96% 94.64%,98.09% 95.73%,97.79% 96.82%,98.18% 97.91%,98.00% 98.83%,97.12% 99.27%,96.25% 99.60%,95.37% 99.01%,94.49% 99.19%,93.61% 98.73%,92.74% 98.74%,91.86% 98.48%,90.98% 97.83%,90.10% 98.32%,89.23% 98.84%,88.35% 99.04%,87.47% 98.84%,86.60% 99.15%,85.72% 100.00%,84.84% 99.23%,83.96% 98.81%,83.09% 99.26%,82.21% 98.72%,81.33% 99.16%,80.45% 99.26%,79.58% 99.04%,78.70% 98.88%,77.82% 98.40%,76.95% 98.86%,76.07% 98.78%,75.19% 98.68%,74.31% 98.40%,73.44% 98.10%,72.56% 98.62%,71.68% 98.98%,70.80% 98.79%,69.93% 98.75%,69.05% 99.00%,68.17% 99.24%,67.30% 99.26%,66.42% 98.94%,65.54% 99.16%,64.66% 99.20%,63.79% 98.88%,62.91% 98.39%,62.03% 99.44%,61.15% 99.55%,60.28% 98.76%,59.40% 99.11%,58.52% 98.64%,57.65% 98.32%,56.77% 98.43%,55.89% 98.22%,55.01% 98.25%,54.14% 98.02%,53.26% 97.98%,52.38% 98.20%,51.50% 99.45%,50.63% 98.84%,49.75% 98.74%,48.87% 99.06%,48.00% 99.27%,47.12% 99.22%,46.24% 99.00%,45.36% 98.37%,44.49% 98.09%,43.61% 97.92%,42.73% 98.22%,41.85% 98.69%,40.98% 98.60%,40.10% 98.39%,39.22% 98.53%,38.35% 98.27%,37.47% 97.13%,36.59% 97.70%,35.71% 97.87%,34.84% 97.65%,33.96% 97.83%,33.08% 98.22%,32.20% 98.52%,31.33% 98.63%,30.45% 97.73%,29.57% 98.34%,28.70% 98.29%,27.82% 98.56%,26.94% 98.09%,26.06% 98.11%,25.19% 97.76%,24.31% 97.60%,23.43% 98.00%,22.55% 97.87%,21.68% 97.93%,20.80% 98.06%,19.92% 98.51%,19.05% 98.14%,18.17% 98.50%,17.29% 98.47%,16.41% 98.13%,15.54% 98.19%,14.66% 98.28%,13.78% 97.94%,12.90% 98.44%,12.03% 97.65%,11.15% 97.38%,10.27% 96.25%,9.40% 97.01%,8.52% 97.06%,7.64% 97.50%,6.76% 97.60%,5.89% 97.51%,5.01% 97.94%,4.13% 97.59%,3.25% 98.03%,2.38% 98.26%,1.42% 98.00%,1.76% 96.93%,1.81% 95.87%,1.51% 94.80%,1.75% 93.73%,1.58% 92.67%,1.14% 91.60%,0.87% 90.53%,1.18% 89.47%,1.50% 88.40%,1.77% 87.33%,1.38% 86.27%,1.01% 85.20%,1.43% 84.13%,1.24% 83.07%,1.20% 82.00%,1.19% 80.93%,1.52% 79.87%,1.93% 78.80%,2.17% 77.73%,2.21% 76.67%,1.74% 75.60%,2.08% 74.53%,1.60% 73.47%,1.42% 72.40%,1.35% 71.33%,1.10% 70.27%,1.56% 69.20%,1.87% 68.13%,1.40% 67.07%,1.82% 66.00%,1.21% 64.93%,1.37% 63.87%,1.89% 62.80%,2.04% 61.73%,1.87% 60.67%,1.31% 59.60%,1.62% 58.53%,1.16% 57.47%,0.94% 56.40%,1.31% 55.33%,1.11% 54.27%,1.29% 53.20%,1.27% 52.13%,1.83% 51.07%,1.69% 50.00%,1.84% 48.93%,2.12% 47.87%,2.20% 46.80%,2.27% 45.73%,2.30% 44.67%,2.44% 43.60%,2.09% 42.53%,2.15% 41.47%,1.81% 40.40%,1.93% 39.33%,1.63% 38.27%,1.28% 37.20%,1.16% 36.13%,0.86% 35.07%,0.73% 34.00%,1.31% 32.93%,0.95% 31.87%,1.25% 30.80%,0.89% 29.73%,0.82% 28.67%,0.83% 27.60%,1.19% 26.53%,1.00% 25.47%,0.87% 24.40%,0.93% 23.33%,1.48% 22.27%,1.25% 21.20%,1.76% 20.13%,1.70% 19.07%,1.61% 18.00%,1.11% 16.93%,1.57% 15.87%,1.57% 14.80%,1.32% 13.73%,1.55% 12.67%,1.04% 11.60%,1.10% 10.53%,1.47% 9.47%,1.14% 8.40%,1.11% 7.33%,1.63% 6.27%,1.72% 5.20%,1.40% 4.13%,1.09% 3.07%); filter: drop-shadow(0 6px 10px rgba(0,0,0,.12)); } .hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; min-height: 100svh; padding-top: 72px; } .hero-copy { position: relative; z-index: 2; padding: 48px 0 96px; } .hero-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; } .hero-name { margin: 0; font-family: var(--f-display); font-weight: 800; font-stretch: 108%; font-size: clamp(39px, 6.19vw, 107px); line-height: .86; letter-spacing: -.045em; white-space: nowrap; } .hero-name .line { display: block; width: fit-content; overflow: hidden; padding-bottom: .04em; } .hero-name .ch { display: inline-block; transform: translateY(105%); animation: rise .9s var(--ease) forwards; } @keyframes rise { to { transform: translateY(0); } } .hero-lead { max-width: 30em; margin: 32px 0 0; font-size: clamp(16px, 1.24vw, 18px); color: var(--muted); opacity: 0; animation: fade .8s .7s var(--ease) forwards; } .hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 38px; opacity: 0; animation: fade .8s .85s var(--ease) forwards; } @keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .btn { display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 22px; white-space: nowrap; background: var(--ink); color: var(--paper); font-weight: 500; font-size: 15px; transition: background-color .3s var(--ease), color .3s; } .btn:hover { background: var(--magenta); color: #18171A; } .btn .arr { transition: transform .3s var(--ease); } .btn:hover .arr { transform: translateY(2px); } .hint { color: var(--muted); font-size: 14px; } .hero-foot { position: absolute; left: 0; right: 0; bottom: 24px; display: flex; justify-content: space-between; color: var(--muted); } /* ---------- badge ---------- */ .badge-stage { position: absolute; top: 0; right: 0; width: 50%; height: 100%; z-index: 45; pointer-events: none; } .badge-stage svg.strap { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .strap-band { fill: none; stroke: var(--magenta); stroke-width: 30; stroke-linejoin: round; } .strap-text { font-family: var(--f-display); font-weight: 800; font-stretch: 125%; font-size: 11px; letter-spacing: .18em; fill: #18171A; text-transform: uppercase; } .badge { position: absolute; left: 0; top: 0; width: 276px; pointer-events: auto; touch-action: none; cursor: grab; transform-origin: 50% 0; will-change: transform; perspective: 1400px; user-select: none; -webkit-user-select: none; } .badge.dragging { cursor: grabbing; } /* desktop: a slightly bigger badge (children are zoomed, the physics box grows to match) */ @media (min-width: 861px) { .badge { --bz: 1.08; width: calc(276px * var(--bz)); } .badge > * { zoom: var(--bz); } } @media (min-width: 1200px) { .badge { --bz: 1.2; } } .badge-clip { position: relative; margin: 0 auto; width: 46px; height: 30px; border-radius: 6px 6px 4px 4px; background: linear-gradient(180deg, #CFCDD3, #8D8A92); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 4px rgba(0,0,0,.25); } .badge-clip::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 14px; height: 16px; transform: translateX(-50%); border: 3px solid #9C99A1; border-top: 0; border-radius: 0 0 8px 8px; } .badge-inner { position: relative; margin-top: 4px; transform-style: preserve-3d; transition: transform .8s var(--ease); } .badge.flipped .badge-inner { transform: rotateY(180deg); } .badge-face { position: relative; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; background-color: #F5F3EE; color: #18171A; border-radius: 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .38 0 0 0 0 .35 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); box-shadow: 0 30px 60px -22px rgba(0,0,0,.45), 0 10px 20px -10px rgba(0,0,0,.3); } .badge-face.back { position: absolute; inset: 0; transform: rotateY(180deg); display: flex; flex-direction: column; } .badge-hole { width: 54px; height: 9px; margin: 14px auto 0; border-radius: 9px; background: #D9D6D0; box-shadow: inset 0 1px 2px rgba(0,0,0,.25); } .badge-head { display: flex; align-items: flex-end; justify-content: space-between; padding: 14px 20px 0; } .badge-access { font-family: var(--f-display); font-weight: 900; font-stretch: 62%; font-size: 40px; line-height: .8; text-transform: uppercase; } .badge-mark { font-family: var(--f-display); font-weight: 800; font-stretch: 125%; font-size: 22px; line-height: 1; letter-spacing: -.03em; } .badge-mark i { font-style: normal; color: #FF48B0; } .badge-meta { display: flex; justify-content: space-between; padding: 10px 20px 0; font-family: var(--f-display); font-stretch: 80%; font-weight: 600; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #6F6C68; } .badge-photo { position: relative; margin: 12px 20px 0; aspect-ratio: 1 / 1.02; overflow: hidden; background: #DAD7D1; } .badge-photo img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .badge-reg { position: absolute; right: 8px; top: 8px; width: 16px; height: 16px; color: #fff; } .badge-name { padding: 14px 20px 0; font-family: var(--f-display); font-weight: 800; font-stretch: 108%; font-size: 27px; line-height: 1; letter-spacing: -.035em; } .badge-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 20px 16px; } .badge-field small { display: block; font-family: var(--f-display); font-stretch: 80%; font-weight: 600; font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: #6F6C68; } .badge-field b { display: block; margin-top: 2px; font-weight: 600; font-size: 12.5px; line-height: 1.25; } .badge-foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 20px; background: #FF48B0; color: #18171A; font-family: var(--f-display); font-stretch: 80%; font-weight: 700; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; } .badge-bars { display: flex; gap: 2px; } .badge-bars i { width: 9px; height: 9px; background: #18171A; } .badge-bars i:nth-child(2) { opacity: .7; } .badge-bars i:nth-child(3) { opacity: .45; } .badge-bars i:nth-child(4) { opacity: .2; } .badge-back-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 28px; text-align: center; } .badge-back-body .badge-access { font-size: 56px; margin-bottom: 18px; } .badge-qr { width: 70%; aspect-ratio: 1; padding: 12px; background: #fff; } .badge-qr img { width: 100%; height: 100%; } .badge-back-body p { margin: 14px 0 0; font-size: 12.5px; line-height: 1.35; color: #6F6C68; } .badge-back-body a { margin-top: 6px; font-size: 12px; color: #18171A; border-bottom: 1.5px solid #FF48B0; } @media (max-width: 860px) { .hero { flex-direction: column; align-items: stretch; min-height: 0; } .hero-grid { grid-template-columns: 1fr; min-height: auto; padding-top: 96px; } .hero-copy { padding: 40px 0 0; } .hero-actions .hint, .hero-foot { display: none; } .badge-stage { position: relative; z-index: 1; width: 100%; height: 600px; margin-top: -8px; -webkit-mask-image: linear-gradient(transparent, #000 90px); mask-image: linear-gradient(transparent, #000 90px); } .badge { width: 248px; } .hero::before { top: auto; bottom: 40px; right: 10%; width: 70vw; height: 420px; } } /* ---------- sections ---------- */ .section { padding: clamp(80px, 12vw, 160px) 0; position: relative; } main > .section:last-child { padding-bottom: 0; } .sec-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; padding-bottom: 26px; border-bottom: 2px solid var(--ink); } .sec-label { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .sec-title { margin: 0; font-family: var(--f-display); font-weight: 800; font-stretch: 112%; font-size: clamp(29px, 4.68vw, 69px); line-height: .9; letter-spacing: -.04em; } /* ---------- tracklist ---------- */ .tracklist { list-style: none; margin: 0; padding: 0; } .track-head, .track a { display: grid; grid-template-columns: 64px 1fr 1fr 80px 28px; gap: 16px; align-items: center; } .track-head { padding: 14px 0; color: var(--muted); border-bottom: 1px solid var(--rule); } .track a { padding: 26px 0; border-bottom: 1px solid var(--rule); position: relative; isolation: isolate; } .track a::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; background: var(--magenta); opacity: .14; transition: width .5s var(--ease); z-index: -1; } .track a:hover::before { width: 100%; } .track-no { font-family: var(--f-display); font-stretch: 80%; font-weight: 600; font-size: 15px; color: var(--muted); } .track-title { font-family: var(--f-display); font-weight: 700; font-stretch: 105%; font-size: clamp(18px, 2.13vw, 31px); line-height: 1.05; letter-spacing: -.03em; transition: transform .45s var(--ease); } .track-tags { color: var(--muted); font-size: 15px; } .track-year { font-family: var(--f-display); font-stretch: 80%; font-weight: 600; font-size: 15px; text-align: right; } .track-arr { justify-self: end; transition: transform .45s var(--ease); } .track a:hover .track-title { transform: translateX(14px); } .track a:hover .track-arr { transform: rotate(-45deg); } .track a:hover .track-no { color: var(--magenta-ink); } .track-thumb { display: none; } @media (max-width: 760px) { .track-head { display: none; } .track a { grid-template-columns: 40px 1fr auto; row-gap: 6px; padding: 20px 0; } .track-tags { grid-column: 2 / 3; grid-row: 2; font-size: 14px; } .track-year { grid-column: 3; grid-row: 1; } .track-arr { display: none; } .track-thumb { display: block; grid-column: 1 / -1; margin-top: 12px; } } .cursor-preview { position: fixed; left: 0; top: 0; z-index: 30; width: 300px; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) rotate(-2deg); transition: opacity .3s var(--ease); box-shadow: 0 20px 40px -18px rgba(0,0,0,.35); } .cursor-preview.on { opacity: 1; } .cursor-preview .ph, .cursor-preview img { width: 100%; aspect-ratio: 16/10; object-fit: cover; } @media (hover: none), (max-width: 760px) { .cursor-preview { display: none; } } /* ---------- media + placeholders ---------- */ .media { position: relative; overflow: hidden; background: var(--paper-2); } .media img { width: 100%; height: 100%; object-fit: cover; } .media[data-parallax] > img, .media[data-parallax] > .ph { height: 118%; margin-top: -9%; will-change: transform; } .ph { position: relative; width: 100%; height: 100%; background-color: var(--paper-2); display: flex; align-items: center; justify-content: center; } .ph span { font-family: var(--f-display); font-stretch: 80%; font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .ph.tone { background-color: var(--tone); } .ph.tone span { color: rgba(24,23,26,.65); } /* ---------- side B teaser ---------- */ .sideb-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); margin-top: 56px; align-items: start; } .sideb-left { grid-column: 1 / 6; display: flex; flex-direction: column; gap: clamp(32px, 4vw, 56px); } .sideb-lead { font-size: clamp(17px, 1.47vw, 21px); line-height: 1.45; margin: 0; } .setlist { grid-column: 7 / 13; align-self: stretch; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); } .setlist a { display: flex; align-items: baseline; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--rule); } .setlist .n { width: 28px; color: var(--muted); } .setlist .t { font-family: var(--f-display); font-weight: 700; font-stretch: 105%; font-size: clamp(18px, 1.97vw, 26px); letter-spacing: -.03em; transition: transform .45s var(--ease); } .setlist a:hover .t, .setlist a.on .t { transform: translateX(10px); } .setlist a.on .n { color: var(--magenta-ink); } .setlist a:hover .n { color: var(--magenta-ink); } .setlist .c { margin-left: auto; color: var(--muted); } @media (max-width: 860px) { .sideb-left, .setlist { grid-column: 1 / -1; } } .about-teaser { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: end; } .about-teaser p { grid-column: 1 / 9; margin: 0; font-family: var(--f-display); font-weight: 500; font-size: clamp(21px, 2.79vw, 39px); line-height: 1.12; letter-spacing: -.025em; } .about-teaser p em { font-style: normal; background: linear-gradient(transparent 62%, color-mix(in srgb, var(--magenta) 55%, transparent) 62%); } .about-teaser .link-arrow { grid-column: 10 / 13; justify-self: end; } .link-arrow { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; border-bottom: 2px solid var(--magenta); padding-bottom: 4px; } .link-arrow .arr { transition: transform .35s var(--ease); } .link-arrow:hover .arr { transform: translateX(5px); } @media (max-width: 860px) { .about-teaser p, .about-teaser .link-arrow { grid-column: 1 / -1; justify-self: start; } } /* ---------- inner page head ---------- */ .page-head { padding: 160px 0 56px; } .page-title { margin: 0; font-family: var(--f-display); font-weight: 800; font-stretch: 118%; font-size: clamp(37px, 7.2vw, 115px); line-height: .86; letter-spacing: -.05em; } .page-lead { max-width: 34em; margin: 32px 0 0; font-size: clamp(17px, 1.38vw, 20px); color: var(--muted); } /* ---------- project ---------- */ .proj-top { display: flex; justify-content: space-between; align-items: center; padding-top: 112px; color: var(--muted); } .proj-top a:hover { color: var(--ink); } .proj-title { margin: 40px 0 0; font-family: var(--f-display); font-weight: 800; font-stretch: 112%; font-size: clamp(35px, 6.48vw, 104px); line-height: .88; letter-spacing: -.05em; max-width: 12ch; } .proj-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); margin: 56px 0 0; padding: 20px 0; border-top: 2px solid var(--ink); } .proj-meta dt { color: var(--muted); margin-bottom: 6px; } .proj-meta dd { margin: 0; font-size: 16px; } .proj-cover { margin-top: 56px; } .proj-body { padding: clamp(64px, 8vw, 112px) 0 0; display: flex; flex-direction: column; } .proj-body > * + * { margin-top: clamp(72px, 8vw, 120px); } .proj-body > .b-text + *:not(.b-text):not(.b-specs):not(.b-lead) { margin-top: clamp(28px, 3vw, 44px); } .proj-body > .b-lead + .b-text { margin-top: clamp(56px, 6vw, 88px); } @media (max-width: 760px) { .proj-meta { grid-template-columns: 1fr 1fr; } } .b-lead { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); } .b-lead p { grid-column: 1 / 11; margin: 0; max-width: 30em; font-family: var(--f-display); font-weight: 500; font-size: clamp(20px, 2.46vw, 34px); line-height: 1.15; letter-spacing: -.025em; } .b-text { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); } .b-text h3, .b-split h3 { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(20px, 1.84vw, 26px); letter-spacing: -.02em; } .b-text h3 { grid-column: 1 / 5; } .b-text p { grid-column: 6 / 13; max-width: 40em; margin: 0; font-size: clamp(16px, 1.2vw, 17px); } .b-full { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* sangria: true edge-to-edge bleed */ .b-full figcaption { margin: 12px auto 0; width: min(var(--max), 100%); padding: 0 var(--gutter); color: var(--muted); } .b-pair figcaption { margin: 12px 0 0; color: var(--muted); } .b-pair figcaption { margin-left: 0; } .b-split { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: center; } .b-split .media-wrap { grid-column: 1 / 8; } .b-split .copy { grid-column: 9 / 13; } .b-split.right .media-wrap { grid-column: 6 / 13; order: 2; } .b-split.right .copy { grid-column: 1 / 5; order: 1; } .b-split h3 { margin-bottom: 14px; } .b-split p { margin: 0; color: var(--muted); } .b-pair .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: end; } .b-pair .grid > :nth-child(1) { grid-column: 1 / 8; } .b-pair .grid > :nth-child(2) { grid-column: 8 / 13; } .b-pair .grid > :nth-child(2) { margin-bottom: 12%; } .b-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); } .b-trio > :nth-child(2) { margin-top: 18%; } .b-trio > :nth-child(3) { margin-top: 6%; } .b-palette .row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; min-height: 260px; } .b-palette .sw { padding: 16px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; } .b-type .spec { display: grid; grid-template-columns: 1fr 2fr; gap: var(--gutter); align-items: end; padding: 32px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .b-type .big { font-size: clamp(46px, 8.64vw, 144px); line-height: .85; letter-spacing: -.04em; font-weight: 700; } .b-quote blockquote { margin: 0; max-width: 18em; text-align: left; font-family: var(--f-display); font-weight: 700; font-stretch: 108%; font-size: clamp(22px, 3.31vw, 49px); line-height: 1.02; letter-spacing: -.04em; } .b-quote blockquote::before { content: "“"; display: block; color: var(--magenta); } .b-specs { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); } .b-specs h3 { grid-column: 1 / 5; margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(20px, 1.84vw, 26px); letter-spacing: -.02em; } .b-specs dl { grid-column: 6 / 13; margin: 0; border-top: 2px solid var(--ink); } .b-specs dl { display: grid; grid-template-columns: subgrid; } .b-specs dl > div { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; padding: 14px 0; border-bottom: 1px solid var(--rule); } .b-specs dt { grid-column: 1 / 4; } .b-specs dd { grid-column: 4 / -1; } .b-specs dt { color: var(--muted); } .b-specs dd { margin: 0; } .blk-label { margin-bottom: 18px; color: var(--muted); } @media (max-width: 760px) { .b-text h3, .b-text p, .b-split .media-wrap, .b-split .copy, .b-split.right .media-wrap, .b-split.right .copy, .b-specs h3, .b-specs dl { grid-column: 1 / -1; order: 0; } .b-pair .grid { grid-template-columns: 1fr; } .b-pair .grid > :nth-child(2) { margin: 0 0 0 20%; } .b-trio { grid-template-columns: 1fr 1fr; } .b-trio > :nth-child(3) { display: none; } .b-palette .row { grid-auto-flow: row; min-height: 0; } .b-palette .sw { min-height: 90px; } .b-type .spec, .b-specs dl > div { grid-template-columns: 1fr; gap: 2px; } } .next-proj { margin-top: clamp(96px, 12vw, 180px); border-top: 2px solid var(--ink); } .next-proj a { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 32px 0 0; } .next-proj .t { font-family: var(--f-display); font-weight: 800; font-stretch: 112%; font-size: clamp(26px, 5.04vw, 81px); line-height: .9; letter-spacing: -.05em; transition: transform .5s var(--ease); } .next-proj a:hover .t { transform: translateX(16px); } .next-proj .arr { font-size: clamp(23px, 3.6vw, 52px); line-height: 1; transition: transform .5s var(--ease), color .3s; } .next-proj a:hover .arr { transform: translateX(8px); color: var(--magenta-ink); } /* ---------- photography ---------- */ .band-index { list-style: none; margin: 56px 0 0; padding: 0; border-top: 2px solid var(--ink); } .band-index a { display: grid; grid-template-columns: 56px 1fr auto auto; gap: var(--gutter); align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--rule); } .band-index .t { font-family: var(--f-display); font-weight: 700; font-stretch: 105%; font-size: clamp(20px, 2.46vw, 36px); letter-spacing: -.035em; line-height: 1.05; transition: transform .45s var(--ease); } .band-index a:hover .t { transform: translateX(12px); } .band-index a:hover .n { color: var(--magenta-ink); } .series { padding: clamp(72px, 10vw, 140px) 0 0; scroll-margin-top: 72px; } .series-head { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--gutter); align-items: end; padding-bottom: 22px; margin-bottom: 48px; border-bottom: 2px solid var(--ink); } .series-head h2 { margin: 0; font-family: var(--f-display); font-weight: 800; font-stretch: 112%; font-size: clamp(29px, 4.32vw, 69px); line-height: .9; letter-spacing: -.045em; } .series-meta { color: var(--muted); } .series-desc { max-width: 32em; margin: -24px 0 40px 0; color: var(--muted); } .photo-flow { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: start; } .photo-flow figure { margin: 0; cursor: zoom-in; } .photo-flow figcaption { margin-top: 10px; color: var(--muted); font-size: 14px; } .photo-flow figure:nth-child(5n+1) { grid-column: 1 / 9; } .photo-flow figure:nth-child(5n+2) { grid-column: 9 / 13; margin-top: 30%; } .photo-flow figure:nth-child(5n+3) { grid-column: 2 / 6; } .photo-flow figure:nth-child(5n+4) { grid-column: 7 / 13; margin-top: 12%; } .photo-flow figure:nth-child(5n+5) { grid-column: 4 / 10; } @media (max-width: 760px) { .band-index a { grid-template-columns: 36px 1fr auto; } .band-index .kind { display: none; } .series-head { grid-template-columns: 1fr; gap: 8px; } .series-meta { text-align: left; } .photo-flow figure:nth-child(n) { grid-column: 1 / -1; margin-top: 0; } .photo-flow figure:nth-child(2n) { grid-column: 4 / -1; } } .lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(15,14,16,.95); display: flex; align-items: center; justify-content: center; padding: 32px; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); cursor: zoom-out; } .lightbox.open { opacity: 1; pointer-events: auto; } .lightbox img { max-height: 90vh; width: auto; } /* ---------- about ---------- */ .about-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); padding-bottom: clamp(64px, 9vw, 120px); } .about-photo { grid-column: 1 / 5; align-self: start; } .about-photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; } .about-bio { grid-column: 6 / 13; } .about-bio p { margin: 0 0 1em; font-size: clamp(17px, 1.56vw, 21px); line-height: 1.45; } .about-bio p:first-child { font-family: var(--f-display); font-weight: 500; font-size: clamp(20px, 2.13vw, 30px); line-height: 1.18; letter-spacing: -.025em; } .about-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gutter); padding: 40px 0; border-top: 2px solid var(--ink); } .about-lists h3 { margin: 0 0 14px; color: var(--muted); } .about-lists ul { list-style: none; margin: 0; padding: 0; } .about-lists li { padding: 10px 0; border-bottom: 1px solid var(--rule); } .cv { padding: 48px 0 0; } .cv h2 { margin: 0 0 4px; font-family: var(--f-display); font-weight: 800; font-stretch: 112%; font-size: clamp(26px, 3.28vw, 46px); letter-spacing: -.04em; padding-bottom: 18px; border-bottom: 2px solid var(--ink); } .cv-row { display: grid; grid-template-columns: 1fr 1.4fr 1.6fr; gap: var(--gutter); padding: 18px 0; border-bottom: 1px solid var(--rule); } @media (max-width: 760px) { .about-photo, .about-bio { grid-column: 1 / -1; } .about-photo { max-width: 320px; } .about-lists { grid-template-columns: 1fr; } .cv-row { grid-template-columns: 1fr; gap: 2px; } } .research { display: grid; grid-template-columns: 1fr 3fr; gap: var(--gutter); padding: 22px 0; border-bottom: 1px solid var(--rule); } .research h3 { margin: 0 0 8px; font-family: var(--f-display); font-weight: 700; font-size: clamp(18px, 1.66vw, 24px); line-height: 1.15; letter-spacing: -.02em; } .research p { margin: 0; color: var(--muted); max-width: 46em; } .timeline { list-style: none; margin: 0; padding: 0; } .timeline li { display: grid; grid-template-columns: 1fr 3fr; gap: var(--gutter); padding: 14px 0; border-bottom: 1px solid var(--rule); } .photo-specs { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gutter); margin: 40px 0 0; padding-top: 18px; border-top: 1px solid var(--rule); max-width: 1000px; } .photo-specs dt { color: var(--muted); margin-bottom: 6px; } .photo-specs dd { margin: 0; } @media (max-width: 760px) { .research, .timeline li, .photo-specs { grid-template-columns: 1fr; gap: 6px; } } /* ---------- contact ---------- */ .contact-big { display: inline-block; margin-top: 48px; font-family: var(--f-display); font-weight: 700; font-stretch: 105%; font-size: clamp(19px, 3.89vw, 60px); line-height: 1; letter-spacing: -.04em; border-bottom: 3px solid var(--magenta); word-break: break-all; } .contact-status { margin-top: 32px; color: var(--muted); } .contact-list { list-style: none; margin: 72px 0 0; padding: 0; border-top: 2px solid var(--ink); } .contact-list a { display: grid; grid-template-columns: 1fr 2fr 28px; gap: var(--gutter); align-items: center; padding: 24px 0; border-bottom: 1px solid var(--rule); } .contact-list .v { font-family: var(--f-display); font-weight: 600; font-size: clamp(17px, 1.84vw, 24px); letter-spacing: -.02em; transition: transform .45s var(--ease); } .contact-list a:hover .v { transform: translateX(10px); } .contact-list a:hover .arr { color: var(--magenta-ink); } @media (max-width: 760px) { .contact-list a { grid-template-columns: 1fr 28px; } .contact-list .k { grid-column: 1 / -1; } } /* ---------- footer ---------- */ .site-footer { padding: clamp(80px, 10vw, 140px) 0 28px; margin-top: clamp(80px, 10vw, 140px); border-top: 2px solid var(--ink); } .foot-cta { display: inline-block; font-family: var(--f-display); font-weight: 800; font-stretch: 118%; font-size: clamp(32px, 6.48vw, 104px); line-height: .88; letter-spacing: -.05em; } .foot-mail { display: table; margin-top: 28px; font-size: clamp(16px, 1.47vw, 20px); border-bottom: 2px solid var(--magenta); padding-bottom: 4px; } .foot-cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--gutter); margin-top: 80px; } .foot-cols h4 { margin: 0 0 14px; color: var(--muted); } .foot-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .foot-cols a:hover { color: var(--magenta-ink); } /* printer's slug: color bar + registration + info */ .slug { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 64px; padding-top: 18px; border-top: 1px solid var(--rule); color: var(--muted); } .slug .bars { display: flex; } .slug .bars i { width: 16px; height: 16px; background: var(--magenta); } .slug .bars i:nth-child(2) { opacity: .75; } .slug .bars i:nth-child(3) { opacity: .5; } .slug .bars i:nth-child(4) { opacity: .25; } .slug .bars i:nth-child(5) { background: var(--ink); opacity: 1; margin-left: 6px; } .slug .bars i:nth-child(6) { background: var(--ink); opacity: .5; } .slug .grow { flex: 1; } .slug a:hover { color: var(--ink); } @media (max-width: 760px) { .foot-cols { grid-template-columns: 1fr 1fr; } .foot-cols > :first-child { grid-column: 1 / -1; } } /* ---------- scroll entrances ---------- */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); } [data-reveal].in { opacity: 1; transform: none; } /* images "come off the press": wipe down */ [data-reveal="print"] { opacity: 1; transform: none; } [data-reveal="print"] > * { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease); transition-delay: var(--d, 0s); } [data-reveal="print"].in > * { clip-path: inset(0 0 0 0); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; } [data-reveal], [data-reveal] > * { opacity: 1; transform: none; clip-path: none !important; } } /* ========================================================================== Papel rasgado: folhas sobrepostas com borda irregular e fibra branca ========================================================================== */ .sheet { position: relative; background-color: var(--sheet); } .tear { position: absolute; left: 0; right: 0; height: 36px; pointer-events: none; z-index: 1; filter: drop-shadow(0 -2px 1.5px rgba(0,0,0,.09)); } .tear-top { bottom: calc(100% - 1px); } .tear-bottom { top: calc(100% - 1px); transform: scaleY(-1); filter: drop-shadow(0 -2px 1.5px rgba(0,0,0,.06)); } .tear::before, .tear::after { content: ""; position: absolute; inset: 0; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-size: 1200px 36px; mask-size: 1200px 36px; -webkit-mask-position: var(--tx, 0) 0; mask-position: var(--tx, 0) 0; } .tear::before { background: var(--rim); -webkit-mask-image: var(--torn-rim); mask-image: var(--torn-rim); } .tear::after { background: var(--sheet); -webkit-mask-image: var(--torn-sheet); mask-image: var(--torn-sheet); } .site-footer.sheet { border-top: 0; margin-top: clamp(120px, 12vw, 180px); } main > .section.sheet:last-child { padding-bottom: clamp(80px, 10vw, 140px); } /* tape strip */ .tape { position: absolute; z-index: 3; width: 110px; height: 30px; background: rgba(244, 238, 214, .72); box-shadow: 0 1px 2px rgba(0,0,0,.12); backdrop-filter: blur(1px); -webkit-mask: linear-gradient(90deg, transparent 0 3px, #000 3px calc(100% - 3px), transparent 0) ; mask: linear-gradient(90deg, transparent 0 3px, #000 3px calc(100% - 3px), transparent 0); } :root[data-theme="dark"] .tape { background: rgba(236, 230, 205, .28); } /* ========================================================================== Fotografia — índice ========================================================================== */ .series-index { list-style: none; margin: 0; padding: 0; } .series-row { padding: clamp(56px, 8vw, 110px) 0; border-top: 1px solid var(--rule); } .series-row:first-child { border-top: 2px solid var(--ink); } .series-row a { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: center; } .series-row .cover { grid-column: 6 / 13; grid-row: 1; position: relative; transition: transform .6s var(--ease); } .series-row .info { grid-column: 1 / 6; grid-row: 1; } .series-row:nth-child(even) .cover { grid-column: 1 / 8; order: 2; } .series-row:nth-child(even) .info { grid-column: 9 / 13; order: 3; } .series-row .info .sub { margin-top: 14px; color: var(--muted); max-width: 28em; } .series-row .cover .tape { top: -12px; left: 18%; transform: rotate(-4deg); } .series-row:nth-child(even) .cover .tape { left: auto; right: 16%; transform: rotate(5deg); } .series-row .n { color: var(--muted); } .series-row h2 { margin: 14px 0 18px; font-family: var(--f-display); font-weight: 800; font-stretch: 112%; font-size: clamp(29px, 4.32vw, 66px); line-height: .9; letter-spacing: -.045em; transition: color .3s; } .series-row .meta { color: var(--muted); } .series-row .go { display: inline-flex; gap: 10px; margin-top: 26px; font-weight: 500; border-bottom: 2px solid var(--acc, var(--magenta)); padding-bottom: 4px; } .series-row a:hover .cover { transform: rotate(-.6deg) scale(1.01); } .series-row a:hover h2 { color: var(--acc, var(--magenta-ink)); } @media (max-width: 760px) { .series-row .cover, .series-row .info, .series-row:nth-child(even) .cover, .series-row:nth-child(even) .info { grid-column: 1 / -1; grid-row: auto; order: 0; } } /* ========================================================================== Fotografia — página de cada série (5 layouts) ========================================================================== */ .series-page { --acc: var(--magenta); } .sp-top { display: flex; justify-content: space-between; align-items: center; padding-top: 112px; color: var(--muted); } .sp-top a:hover { color: var(--ink); } .sp-head { padding: 40px 0 56px; } .sp-title { margin: 0; font-family: var(--f-display); font-weight: 800; font-stretch: 115%; font-size: clamp(40px, 7.92vw, 132px); line-height: .84; letter-spacing: -.05em; } .sp-title.riso::before { color: var(--acc); opacity: .85; transform: translate(-.03em, .02em); } .sp-meta { display: grid; grid-template-columns: repeat(4, auto) 1fr; gap: 12px 40px; margin-top: 40px; padding-top: 18px; border-top: 2px solid var(--ink); } .sp-meta dt { color: var(--muted); margin-bottom: 4px; } .sp-meta dd { margin: 0; } .sp-desc { max-width: 34em; margin: 28px 0 0; font-size: clamp(17px, 1.38vw, 20px); } .sp-mark { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--acc); margin-right: 8px; vertical-align: -1px; } @media (max-width: 760px) { .sp-meta { grid-template-columns: 1fr 1fr; } } .sp-body figure { margin: 0; cursor: zoom-in; position: relative; } .sp-body figcaption { margin-top: 10px; color: var(--muted); font-size: 14px; } /* a) POSTER — capa sangrada com o nome sobreposto */ .lay-poster .poster-hero { position: relative; margin: 0 calc(var(--gutter) * -1); } .lay-poster .poster-hero .media { aspect-ratio: auto !important; height: min(78vh, 820px); } .lay-poster .poster-flow { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: start; margin-top: var(--gutter); } .lay-poster .poster-flow > :nth-child(5n+1) { grid-column: 1 / 8; } .lay-poster .poster-flow > :nth-child(5n+2) { grid-column: 8 / 13; margin-top: 18%; } .lay-poster .poster-flow > :nth-child(5n+3) { grid-column: 1 / 5; } .lay-poster .poster-flow > :nth-child(5n+4) { grid-column: 5 / 9; margin-top: 10%; } .lay-poster .poster-flow > :nth-child(5n+5) { grid-column: 9 / 13; margin-top: 4%; } /* b) CONTATO — folha de contato com marcações de lápis */ .lay-contact .pick { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: end; margin-bottom: clamp(56px, 8vw, 110px); } .lay-contact .pick figure { grid-column: 2 / 12; } .lay-contact .pick .tape:first-of-type { top: -14px; left: 6%; transform: rotate(-6deg); } .lay-contact .pick .tape:last-of-type { top: -14px; right: 6%; transform: rotate(4deg); } .lay-contact .film { background: #141315; color: #E9E5DC; padding: 28px clamp(16px, 3vw, 40px) 34px; margin: 0 calc(var(--gutter) * -1); position: relative; } .lay-contact .film::before, .lay-contact .film::after { content: ""; position: absolute; left: 0; right: 0; height: 14px; background: radial-gradient(circle at 50% 50%, var(--paper) 3px, transparent 3.5px) 0 0 / 22px 14px repeat-x; opacity: .9; } .lay-contact .film::before { top: 6px; } .lay-contact .film::after { bottom: 6px; } .lay-contact .frames { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px 16px; padding: 18px 0; } .lay-contact .frame { position: relative; } .lay-contact .frame .media { background: #222; } .lay-contact .frame .no { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--f-display); font-stretch: 80%; font-weight: 600; font-size: 11px; letter-spacing: .1em; color: #F2B33D; } .lay-contact .frame.picked::after { content: ""; position: absolute; inset: -9px -9px 14px; border: 3px solid var(--acc); border-radius: 46% 54% 48% 52% / 52% 44% 56% 48%; transform: rotate(-2deg); pointer-events: none; } .lay-contact .frame.picked .no b { color: var(--acc); } /* c) ZINE — colagem com fita e rasgos */ .lay-zine .collage { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); padding: 40px 0; } .lay-zine .collage figure { background: #F7F5F0; padding: 10px 10px 14px; box-shadow: 0 14px 30px -18px rgba(0,0,0,.45); transition: transform .5s var(--ease); } :root[data-theme="dark"] .lay-zine .collage figure { background: #E9E6DF; } .lay-zine .collage figcaption { color: #6F6C68; } .lay-zine .collage figure:hover { transform: rotate(0) scale(1.015) !important; z-index: 5; } .lay-zine .collage figure:nth-child(6n+1) { grid-column: 1 / 8; transform: rotate(-2.2deg); } .lay-zine .collage figure:nth-child(6n+2) { grid-column: 8 / 13; transform: rotate(3deg); margin-top: 22%; } .lay-zine .collage figure:nth-child(6n+3) { grid-column: 2 / 6; transform: rotate(2deg); margin-top: -10%; } .lay-zine .collage figure:nth-child(6n+4) { grid-column: 6 / 13; transform: rotate(-1.4deg); } .lay-zine .collage figure:nth-child(6n+5) { grid-column: 1 / 6; transform: rotate(-3deg); } .lay-zine .collage figure:nth-child(6n+6) { grid-column: 7 / 12; transform: rotate(1.6deg); margin-top: 14%; } .lay-zine .collage .tape { top: -14px; left: 50%; margin-left: -55px; transform: rotate(-3deg); } .lay-zine .stamp { position: absolute; right: 2%; top: -10px; z-index: 4; padding: 10px 16px; border: 3px solid var(--acc); color: var(--acc); font-family: var(--f-display); font-weight: 900; font-stretch: 70%; font-size: 26px; letter-spacing: .04em; text-transform: uppercase; transform: rotate(8deg); opacity: .9; mix-blend-mode: multiply; } :root[data-theme="dark"] .lay-zine .stamp { mix-blend-mode: normal; } /* d) EDITORIAL — grade assimétrica com números grandes */ .lay-editorial .ed { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: start; } .lay-editorial .ed figure .big-n { position: absolute; top: -.55em; left: -.06em; z-index: 2; font-family: var(--f-display); font-weight: 900; font-stretch: 125%; font-size: clamp(35px, 5.04vw, 79px); line-height: 1; color: var(--acc); mix-blend-mode: multiply; pointer-events: none; } :root[data-theme="dark"] .lay-editorial .ed figure .big-n { mix-blend-mode: screen; } .lay-editorial .ed figure:nth-child(5n+1) { grid-column: 1 / 9; } .lay-editorial .ed figure:nth-child(5n+2) { grid-column: 9 / 13; margin-top: 30%; } .lay-editorial .ed figure:nth-child(5n+3) { grid-column: 2 / 6; } .lay-editorial .ed figure:nth-child(5n+4) { grid-column: 7 / 13; margin-top: 12%; } .lay-editorial .ed figure:nth-child(5n+5) { grid-column: 4 / 10; } /* e) MOSAICO — grade densa, fotos ocupando espaços laterais */ .lay-mosaic .mosaic { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(90px, 9vw, 150px); grid-auto-flow: dense; gap: 12px; } .lay-mosaic .mosaic figure { grid-column: span 2; grid-row: span 2; } .lay-mosaic .mosaic figure.land { grid-column: span 4; grid-row: span 3; } .lay-mosaic .mosaic figure.port { grid-column: span 2; grid-row: span 3; } .lay-mosaic .mosaic figure.sq { grid-column: span 2; grid-row: span 2; } .lay-mosaic .mosaic figure .media { aspect-ratio: auto !important; height: 100%; } .lay-mosaic .mosaic figcaption { position: absolute; left: 10px; bottom: 8px; margin: 0; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); } .lay-mosaic .mosaic figure .n { position: absolute; top: 8px; left: 10px; z-index: 2; color: #fff; font-family: var(--f-display); font-stretch: 80%; font-weight: 700; font-size: 12px; letter-spacing: .08em; mix-blend-mode: difference; } @media (max-width: 760px) { .lay-contact .pick figure { grid-column: 1 / -1; } .lay-zine .collage figure:nth-child(n), .lay-editorial .ed figure:nth-child(n) { grid-column: span 6; margin-top: 0; } .lay-zine .collage figure:nth-child(3n+1), .lay-editorial .ed figure:nth-child(3n+1) { grid-column: 1 / -1; } .lay-zine .collage, .lay-editorial .ed { gap: 14px; } .lay-poster .poster-flow > :nth-child(n) { grid-column: 1 / -1; margin-top: 0; } .lay-poster .poster-flow > :nth-child(5n+3), .lay-poster .poster-flow > :nth-child(5n+4) { grid-column: span 6; } .lay-mosaic .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 120px; } .lay-mosaic .mosaic figure.land { grid-column: span 2; grid-row: span 2; } .lay-mosaic .mosaic figure.port, .lay-mosaic .mosaic figure.sq { grid-column: span 1; grid-row: span 2; } } .sp-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); margin-top: clamp(96px, 12vw, 180px); border-top: 2px solid var(--ink); } .sp-nav a { display: block; padding-top: 28px; } .sp-nav a:last-child { text-align: right; } .sp-nav .t { display: block; margin-top: 12px; font-family: var(--f-display); font-weight: 800; font-stretch: 112%; font-size: clamp(20px, 3.6vw, 55px); line-height: .9; letter-spacing: -.045em; transition: color .3s; } .sp-nav a:hover .t { color: var(--magenta-ink); } .lightbox .lb-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; color: #F5F3EE; font-size: 28px; } .lightbox .lb-prev { left: 12px; } .lightbox .lb-next { right: 12px; } .lightbox .lb-count { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: #bdb8b0; } /* ========================================================================== Blocos que respeitam a proporção original das imagens ========================================================================== */ /* linhas: cada imagem com a mesma altura, largura proporcional à sua proporção */ .b-rows { display: flex; flex-direction: column; gap: clamp(10px, 1.2vw, 18px); } .b-rows .row { display: flex; gap: clamp(10px, 1.2vw, 18px); align-items: flex-start; } .b-rows .row > div { min-width: 0; } .b-rows figcaption, .b-cols figcaption { margin-top: 12px; color: var(--muted); } .b-rows .row-label { margin: clamp(14px, 2vw, 26px) 0 2px; color: var(--muted); } .b-rows .row-label:first-child { margin-top: 0; } /* colunas: imagens empilhadas em colunas de larguras proporcionais (colagem) */ .b-cols .cols { display: flex; gap: clamp(10px, 1.2vw, 18px); align-items: flex-start; } .b-cols .col { display: flex; flex-direction: column; gap: clamp(10px, 1.2vw, 18px); min-width: 0; } .media.round { border-radius: clamp(10px, 1.4vw, 20px); } .media.frame { box-shadow: 0 20px 40px -24px rgba(0,0,0,.45); } @media (max-width: 760px) { .b-rows .row.many { flex-wrap: wrap; } .b-rows .row.many > div { flex-basis: calc(50% - 6px) !important; flex-grow: 0 !important; } .b-cols .cols { flex-wrap: wrap; } .b-cols .col { flex-basis: calc(50% - 6px) !important; } } /* índice de projetos agrupado por categoria */ .cat-head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: baseline; padding: clamp(48px, 7vw, 96px) 0 0; } .cat-head > div { grid-column: 1 / 6; display: flex; gap: 16px; align-items: baseline; } .cat-head:first-child { padding-top: 0; } .cat-head h2 { margin: 0; font-family: var(--f-display); font-weight: 700; font-stretch: 105%; font-size: clamp(20px, 1.9vw, 28px); letter-spacing: -.02em; } .cat-head .label { color: var(--magenta-ink); } .cat-head p { grid-column: 6 / 13; margin: 0; color: var(--muted); max-width: 34em; font-size: 15px; } .track-group { padding: 22px 0 8px; color: var(--magenta-ink); border-bottom: 1px solid var(--rule); } @media (max-width: 760px) { .cat-head > div, .cat-head p { grid-column: 1 / -1; } .cat-head p { margin-top: 6px; } } /* Lado B: series preview in the left column */ .sideb-preview { display: block; transform: rotate(-1.2deg); transition: transform .5s var(--ease); } .sideb-preview:hover { transform: rotate(0); } .sideb-preview .crop { position: relative; } .sideb-preview .tape { top: -13px; left: 50%; margin-left: -55px; transform: rotate(-3deg); } .sideb-preview .media img { transition: opacity .35s var(--ease); } .sideb-preview .cap { display: flex; gap: 14px; align-items: baseline; margin-top: 16px; } .sideb-preview .cap .n { color: var(--magenta-ink); } .sideb-preview .cap .t { color: var(--ink); } .sideb-preview .cap { flex-wrap: wrap; } .sideb-preview .cap .m { flex-basis: 100%; color: var(--muted); } @media (max-width: 860px) { .sideb-preview { display: none; } } /* image blocks snap to the grid: full (1–12), wide (2–11) or content (6–12) */ .b-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); } .b-grid > figure { grid-column: 1 / 13; min-width: 0; } .b-grid.span-wide > figure { grid-column: 2 / 12; } .b-grid.span-content > figure { grid-column: 6 / 13; } .b-grid.span-center > figure { grid-column: 3 / 11; } /* house ads: rows of equal height, frames swapped by one shared clock */ .b-ads { margin: 0; } .b-ads .board { display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 20px); padding: clamp(18px, 2.6vw, 40px); background: var(--sheet); position: relative; } .b-ads .ads-row { display: flex; gap: clamp(12px, 1.4vw, 20px); align-items: flex-start; } .b-ads .ad { position: relative; min-width: 0; box-shadow: 0 12px 26px -16px rgba(0,0,0,.4); } .b-ads .ad img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .b-ads .ad img.f2 { opacity: 0; } html.ad-f2 .b-ads .ad img.f1 { opacity: 0; } html.ad-f2 .b-ads .ad img.f2 { opacity: 1; } .b-ads > figcaption { margin-top: 12px; color: var(--muted); } /* text beside the images it introduces: copy 1–4, images 6–12 */ .b-side { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: start; } .b-side .copy { grid-column: 1 / 5; position: sticky; top: 96px; } .b-side .copy h3 { margin: 0 0 14px; font-family: var(--f-display); font-weight: 700; font-size: clamp(20px, 1.84vw, 26px); letter-spacing: -.02em; } .b-side .copy p { margin: 0; font-size: clamp(16px, 1.2vw, 17px); } .b-side > figure { grid-column: 6 / 13; margin: 0; min-width: 0; } @media (max-width: 760px) { .b-side .copy, .b-side > figure { grid-column: 1 / -1; position: static; } .b-ads .ads-row { flex-direction: column; } .b-ads .ad { width: 100%; flex: none !important; } .b-lead p, .b-grid > figure, .b-grid.span-wide > figure, .b-grid.span-content > figure, .b-grid.span-center > figure, .b-pair .grid > :nth-child(n) { grid-column: 1 / -1; } .b-specs dt, .b-specs dd { grid-column: 1 / -1; } } /* typography: balanced headings, no widows/orphans in running text */ h1, h2, h3, .sec-title, .page-title, .proj-title, .sp-title, .foot-cta, .about-teaser p, .b-lead p, .b-quote blockquote { text-wrap: balance; } p, dd, li, figcaption, .series-row .sub { text-wrap: pretty; orphans: 2; widows: 2; } /* zoom on project images */ .media.zoomable { cursor: zoom-in; } .media.zoomable img { transition: transform .6s var(--ease); } .media.zoomable:hover img { transform: scale(1.015); } /* live type specimen */ .b-typeset .ts-row { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: 6px; align-items: baseline; padding: clamp(18px, 2.4vw, 32px) 0; border-top: 1px solid var(--rule); } .b-typeset .ts-row:last-child { border-bottom: 1px solid var(--rule); } .b-typeset .ts-name { grid-column: 1 / 6; font-size: clamp(28px, 3.4vw, 50px); line-height: 1.05; letter-spacing: -.01em; } .b-typeset .ts-meta { grid-column: 1 / 6; color: var(--muted); } .b-typeset .ts-sample { grid-column: 6 / 13; grid-row: 1 / span 2; margin: 0; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; max-width: 38em; } @media (max-width: 760px) { .b-typeset .ts-name, .b-typeset .ts-meta, .b-typeset .ts-sample { grid-column: 1 / -1; grid-row: auto; } } /* ========================================================================== Sobre — fora do expediente (jogos e música), cards impressos ========================================================================== */ .offclock { padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 7vw, 96px); } .off-lead { margin: 18px 0 0; max-width: 34em; color: var(--muted); font-size: clamp(16px, 1.3vw, 19px); } .off-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(28px, 3vw, 44px); align-items: stretch; } .card { position: relative; background: var(--sheet); padding: clamp(16px, 1.8vw, 24px); box-shadow: 0 18px 36px -26px rgba(0,0,0,.45); } .card h3 { margin: 12px 0 2px; font-family: var(--f-display); font-weight: 700; font-size: clamp(17px, 1.4vw, 21px); letter-spacing: -.015em; line-height: 1.15; } .card p { margin: 0; font-size: 14px; } .card-label { display: flex; align-items: center; gap: 8px; color: var(--muted); margin-bottom: 14px; } .card .tape { top: -12px; left: 50%; margin-left: -55px; transform: rotate(-3deg); } .card-fav { grid-column: 1 / 5; display: flex; flex-direction: column; } .card-fav .boxart.big { flex: 1; aspect-ratio: auto; min-height: 320px; } .card-games { grid-column: 5 / 13; } .card-song { grid-column: 1 / 8; grid-row: 2; } .card-artists { grid-column: 8 / 13; grid-row: 2; } .card-albums { grid-column: 1 / 13; grid-row: 3; } .card-artists .pins { justify-content: center; } .fav-playing { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--rule); } .fav-playing .card-label { margin-bottom: 10px; } /* printed box art (generated, no third-party artwork) */ .boxart { position: relative; aspect-ratio: 3 / 4; background-color: var(--bg); color: var(--fg); overflow: hidden; display: flex; align-items: flex-end; padding: 10%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); background-image: radial-gradient(circle, rgba(0,0,0,.18) 1px, transparent 1.4px); background-size: 7px 7px; } .boxart::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,.18), transparent 45%); } .boxart .ba-title { position: relative; font-family: var(--f-display); font-weight: 900; font-stretch: 75%; text-transform: uppercase; line-height: .9; letter-spacing: -.01em; font-size: clamp(13px, 1.3vw, 18px); text-wrap: balance; } .boxart .ba-mark { position: absolute; top: 8%; right: 9%; font-family: var(--f-display); font-weight: 800; font-stretch: 125%; font-size: 10px; opacity: .55; } .boxart.big .ba-title { font-size: clamp(26px, 3vw, 44px); } .boxart.mini { width: 64px; flex: none; padding: 8px; } .boxart.mini .ba-title { font-size: 9px; } .game-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.2vw, 16px); } .game-grid li { transition: transform .4s var(--ease); } .game-grid li:hover { transform: translateY(-4px) rotate(-1deg); } .game-grid .g-name { display: block; margin-top: 8px; font-size: 13px; line-height: 1.25; } .playing { display: flex; gap: 14px; align-items: center; } .playing h3 { margin: 0; } .live { width: 8px; height: 8px; border-radius: 50%; background: #3FCB7E; box-shadow: 0 0 0 0 rgba(63,203,126,.6); animation: live 2s infinite; } @keyframes live { 70% { box-shadow: 0 0 0 8px rgba(63,203,126,0); } 100% { box-shadow: 0 0 0 0 rgba(63,203,126,0); } } /* cassette */ .cassette { position: relative; aspect-ratio: 2.1; background: #1E1D20; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 22%; box-shadow: inset 0 0 0 6px #2C2A2E; } .cassette .reel { width: 18%; aspect-ratio: 1; border-radius: 50%; background: repeating-conic-gradient(#F5F3EE 0 20deg, #8E8A93 20deg 60deg); animation: spin 4s linear infinite; animation-play-state: paused; } .player.playing .cassette .reel { animation-play-state: running; } .cassette .tape-label { position: absolute; left: 8%; right: 8%; top: 9%; padding: 3px 8px; background: #FF48B0; color: #18171A; font-family: var(--f-display); font-stretch: 80%; font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @keyframes spin { to { transform: rotate(360deg); } } /* vinyl sleeves */ .albums { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 1.6vw, 24px); } .albums li { display: flex; gap: 14px; align-items: flex-end; } .sleeve { position: relative; width: 52%; flex: none; aspect-ratio: 1; background-color: var(--bg); color: var(--fg); display: flex; align-items: flex-end; padding: 9%; z-index: 1; background-image: radial-gradient(circle, rgba(0,0,0,.16) 1px, transparent 1.4px); background-size: 7px 7px; box-shadow: 0 12px 22px -16px rgba(0,0,0,.5); } .sleeve .vinyl { position: absolute; top: 4%; right: -38%; width: 92%; aspect-ratio: 1; border-radius: 50%; z-index: -1; transition: right .5s var(--ease); background: radial-gradient(circle, var(--bg) 0 14%, #111 14.5% 16%, transparent 16.5%), repeating-radial-gradient(circle, #141315 0 2px, #222 2px 3px); } .albums li:hover .vinyl { right: -52%; } .sleeve .sl-title { font-family: var(--f-display); font-weight: 900; font-stretch: 75%; text-transform: uppercase; font-size: clamp(12px, 1.1vw, 15px); line-height: .95; text-wrap: balance; } .al-meta { display: flex; flex-direction: column; gap: 2px; padding-left: 22%; font-size: 14px; line-height: 1.3; } /* button pins */ .pins { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; } .pin { width: clamp(96px, 9vw, 128px); aspect-ratio: 1; border-radius: 50%; background: var(--bg); color: var(--fg); display: grid; place-items: center; text-align: center; padding: 12%; box-shadow: inset 0 -6px 12px rgba(0,0,0,.18), inset 0 6px 10px rgba(255,255,255,.25), 0 10px 18px -12px rgba(0,0,0,.6); transition: transform .4s var(--ease); } .pin:nth-child(odd) { transform: rotate(-6deg); } .pin:nth-child(even) { transform: rotate(5deg); } .pin:hover { transform: rotate(0) scale(1.05); } .pin span { font-family: var(--f-display); font-weight: 900; font-stretch: 75%; text-transform: uppercase; font-size: 13px; line-height: .95; } /* hobby stickers */ .stickers { list-style: none; margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; } .stickers li { padding: 9px 16px; background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; font-weight: 600; font-size: 14px; transform: rotate(var(--r)); box-shadow: 3px 3px 0 var(--magenta); transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .stickers li:hover { transform: translateY(-6px) rotate(calc(var(--r) * .4)); box-shadow: 4px 8px 0 var(--magenta); } /* about: centred between the cards and the rule below, spread edge to edge */ .offclock { padding-bottom: 0; } .offclock > .stickers { margin: clamp(28px, 3vw, 44px) 0; } @media (min-width: 900px) { .offclock > .stickers, .home-off .stickers { display: grid; grid-template-columns: repeat(5, auto); justify-content: space-between; justify-items: center; gap: 44px 12px; } .offclock > .stickers li:nth-child(5n+1), .home-off .stickers li:nth-child(5n+1) { justify-self: start; } .offclock > .stickers li:nth-child(5n), .home-off .stickers li:nth-child(5n) { justify-self: end; } } @media (max-width: 1000px) { .card-fav { grid-column: 1 / 6; } .card-games { grid-column: 6 / 13; } .card-song { grid-column: 1 / -1; grid-row: 2; } .card-artists { grid-column: 1 / -1; grid-row: 3; } .card-albums { grid-column: 1 / -1; grid-row: 4; } } @media (max-width: 760px) { .card-fav, .card-games, .card-playing, .card-song, .card-albums, .card-artists { grid-column: 1 / -1; grid-row: auto; } .game-grid { grid-template-columns: repeat(3, 1fr); } .albums { grid-template-columns: 1fr; } } /* images with transparency (mockups, rounded posts) sit directly on the paper */ .media.bare { background: transparent; } .media.bare.frame { box-shadow: none; } /* official covers inside the cards */ .boxart.has-cover { padding: 0; background: #111; } .boxart.has-cover::before { display: none; } .boxart.has-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .card-fav .boxart.big.has-cover { flex: none; aspect-ratio: 3 / 4; min-height: 0; } .boxart.mini.has-cover { width: 56px; aspect-ratio: 2 / 3; } .game-grid .boxart { aspect-ratio: 2 / 3; } .sleeve.has-cover { padding: 0; background: #111; } .sleeve.has-cover img { position: relative; width: 100%; height: 100%; object-fit: cover; display: block; } .al-link { display: flex; gap: 14px; align-items: flex-end; width: 100%; } .al-link:hover b { color: var(--magenta-ink); } /* mini player */ .player { display: flex; flex-direction: column; gap: 14px; } .player .cassette { aspect-ratio: 2.4; } .pl-now { display: flex; gap: 12px; align-items: center; } .pl-cover { width: 48px; height: 48px; object-fit: cover; flex: none; box-shadow: 0 6px 14px -8px rgba(0,0,0,.5); } .pl-now b { display: block; font-family: var(--f-display); font-weight: 700; font-size: 17px; letter-spacing: -.01em; line-height: 1.2; } .pl-now span { font-size: 14px; } .pl-bar { height: 3px; background: var(--rule); } .pl-bar span { display: block; height: 100%; width: 0; background: var(--magenta); transition: width .25s linear; } .pl-ctrl { display: flex; align-items: center; gap: 8px; } .pl-ctrl button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--rule); font-size: 13px; transition: border-color .2s, background-color .2s, color .2s; } .pl-ctrl button:hover { border-color: var(--ink); } .pl-ctrl .pl-play { width: 46px; height: 46px; background: var(--ink); color: var(--paper); border-color: var(--ink); } .pl-ctrl .pl-play:hover { background: var(--magenta); color: #18171A; border-color: var(--magenta); } .pl-play .i-pause, .player.playing .pl-play .i-play { display: none; } .player.playing .pl-play .i-pause { display: inline; } .pl-link { margin-left: auto; color: var(--muted); border-bottom: 1px solid var(--magenta); } .pl-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); } .pl-list button { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; width: 100%; padding: 9px 0; text-align: left; border-bottom: 1px solid var(--rule); font-size: 14px; } .pl-list button:hover .t, .pl-list button.on .t { color: var(--magenta-ink); } .pl-list button.on .n { color: var(--magenta-ink); } .pl-note { margin: 0; font-size: 10.5px; } .pl-spotify { width: 100%; height: 152px; border: 0; border-radius: 12px; } .card-song { grid-row: span 1; } /* home: off-the-clock teaser */ .home-off-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(28px, 3vw, 44px); align-items: stretch; } .ho-games { grid-column: 1 / 7; } .ho-song { grid-column: 7 / 13; } .ho-games .game-grid { grid-template-columns: repeat(4, 1fr); } .ho-games .tape { top: -12px; left: 50%; margin-left: -55px; transform: rotate(-3deg); } .game-grid li { position: relative; } .fav-tag { position: absolute; top: 8px; left: -6px; padding: 3px 8px; background: var(--magenta); color: #18171A; transform: rotate(-4deg); box-shadow: 2px 2px 0 rgba(0,0,0,.25); } .home-off .stickers { margin: clamp(28px, 3vw, 44px) 0 0; } .section.home-off { padding-bottom: 0; } /* home ends with the tags: same gap above them and down to the torn edge of the footer */ body[data-page="home"] .site-footer { margin-top: calc(clamp(28px, 3vw, 44px) + 20px); } .ho-intro { max-width: 34ch; margin: clamp(28px, 3vw, 44px) 0 0; font-family: var(--f-display); font-weight: 500; font-size: clamp(21px, 2.4vw, 34px); line-height: 1.15; letter-spacing: -.025em; text-wrap: balance; } .ho-intro em { font-style: normal; background: linear-gradient(transparent 62%, color-mix(in srgb, var(--magenta) 55%, transparent) 62%); } @media (max-width: 1100px) { .ho-games, .ho-song { grid-column: 1 / -1; } } @media (max-width: 760px) { .ho-fav, .ho-games, .ho-song { grid-column: 1 / -1; } } /* contact form */ .contact-form { display: flex; flex-direction: column; gap: 22px; margin-top: 8px; padding: clamp(20px, 3vw, 40px); background: var(--sheet); max-width: 980px; position: relative; } .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .contact-form label > .label, .contact-form legend { display: block; margin-bottom: 8px; color: var(--muted); } .contact-form input[type=text], .contact-form input[type=email], .contact-form textarea { width: 100%; font: inherit; font-size: 17px; color: var(--ink); background: transparent; border: 0; border-bottom: 2px solid var(--ink); padding: 10px 0; outline: none; border-radius: 0; resize: vertical; transition: border-color .2s; } .contact-form textarea { border: 2px solid var(--ink); padding: 12px; min-height: 160px; } .contact-form input:focus, .contact-form textarea:focus { border-color: var(--magenta); } .cf-topics { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; } .cf-topics legend { width: 100%; } .chip { cursor: pointer; } .chip input { position: absolute; opacity: 0; pointer-events: none; } .chip span { display: inline-block; padding: 8px 16px; border: 2px solid var(--ink); border-radius: 999px; font-weight: 600; font-size: 14px; transition: background-color .2s, color .2s, box-shadow .2s; } .chip input:checked + span { background: var(--ink); color: var(--paper); box-shadow: 3px 3px 0 var(--magenta); } .chip input:focus-visible + span { outline: 2px solid var(--magenta); outline-offset: 2px; } .cf-honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .cf-foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .cf-status { margin: 0; color: var(--muted); } .cf-status a { border-bottom: 1px solid var(--magenta); } .contact-form + .contact-list { margin-top: clamp(48px, 6vw, 80px); } @media (max-width: 760px) { .cf-row { grid-template-columns: 1fr; } } /* player volume */ .pl-vol { display: flex; align-items: center; gap: 10px; } .pl-vol .label { color: var(--muted); } .pl-vol output { min-width: 3.2em; text-align: right; color: var(--muted); } .pl-vol input[type=range] { --v: 10%; flex: 1; -webkit-appearance: none; appearance: none; height: 3px; background: linear-gradient(90deg, var(--magenta) var(--v), var(--rule) var(--v)); outline: none; cursor: pointer; } .pl-vol input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--ink); } .pl-vol input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); border: 2px solid var(--paper); } .pl-vol input[type=range]:focus-visible { outline: 2px solid var(--magenta); outline-offset: 6px; } /* ========================================================================== Miniplayer v2: detailed cassette (SVG) + track list beside it ========================================================================== */ .card-song, .ho-song { container-type: inline-size; } .player { display: flex; flex-direction: column; gap: 14px; } .pl-top { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: center; } @container (min-width: 480px) { .pl-top { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } } .pl-deck { position: relative; } .k7 { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 18px rgba(0,0,0,.28)); animation: k7-bob 6s ease-in-out infinite; } .player.is-playing .k7 { animation-duration: 2.4s; } @keyframes k7-bob { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-4px) rotate(.6deg); } } .k7-shell { fill: #1C1B1E; } .k7-face { fill: #2A282D; stroke: #3A383E; stroke-width: 1; } .k7-screw circle { fill: #8E8A93; stroke: #5F5C64; stroke-width: 1; } .k7-screw path { stroke: #3A383E; stroke-width: 1.4; } .k7-label { fill: #F5F3EE; } .k7-label-band { fill: #FF48B0; } .k7-side { font: 800 11px var(--f-display); fill: #18171A; } .k7-title { font: 800 15px var(--f-display); font-stretch: 80%; letter-spacing: .04em; text-transform: uppercase; fill: #18171A; } .k7-rule { stroke: rgba(24,23,26,.25); stroke-width: 1; } .k7-window { fill: #141315; stroke: #5F5C64; stroke-width: 1.5; } .k7-tape { fill: none; stroke: #4A3424; stroke-width: 3; } .k7-spool { fill: #4A3424; } .k7-hub { fill: #EDEBE6; } .k7-tooth { fill: #141315; } .k7-reel { transform-box: fill-box; transform-origin: center; animation: k7-spin 5s linear infinite; } .player.is-playing .k7-reel { animation-duration: 1.3s; } .k7-reel-l .k7-spool { animation: k7-shrink 30s linear infinite alternate; transform-box: fill-box; transform-origin: center; } .k7-reel-r .k7-spool { animation: k7-grow 30s linear infinite alternate; transform-box: fill-box; transform-origin: center; } @keyframes k7-spin { to { transform: rotate(360deg); } } @keyframes k7-shrink { to { transform: scale(.72); } } @keyframes k7-grow { to { transform: scale(1.38); } } .k7-bevel { fill: #232126; stroke: #3A383E; stroke-width: 1; } .k7-hole { fill: #0E0D10; } /* the reel position transforms live on the ; keep them by spinning an inner layer */ .k7-reel-l { animation-name: k7-spin-l; } .k7-reel-r { animation-name: k7-spin-r; } @keyframes k7-spin-l { from { transform: translate(110px, 108px) rotate(0); } to { transform: translate(110px, 108px) rotate(360deg); } } @keyframes k7-spin-r { from { transform: translate(210px, 108px) rotate(0); } to { transform: translate(210px, 108px) rotate(360deg); } } .k7-reel { transform-box: view-box; transform-origin: 0 0; } .pl-list { list-style: none; margin: 0; padding: 0 6px 0 0; border-top: 1px solid var(--rule); align-self: stretch; position: relative; max-height: 246px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--magenta) transparent; } .pl-list::-webkit-scrollbar { width: 4px; } .pl-list::-webkit-scrollbar-thumb { background: var(--magenta); } .pl-list button { display: grid; grid-template-columns: 34px 1fr 18px; gap: 10px; align-items: center; width: 100%; padding: 7px 4px; text-align: left; border-bottom: 1px solid var(--rule); transition: background-color .2s; } .pl-list button:hover { background: color-mix(in srgb, var(--magenta) 10%, transparent); } .pl-list img { width: 34px; height: 34px; object-fit: cover; } .pl-list .t { font-size: 14px; font-weight: 600; line-height: 1.2; display: flex; flex-direction: column; min-width: 0; } .pl-list .t small { font-size: 12px; font-weight: 400; } .pl-list button.on .t { color: var(--magenta-ink); } .eq { display: flex; gap: 2px; align-items: flex-end; height: 12px; opacity: 0; } .eq i { width: 3px; height: 100%; background: var(--magenta); transform-origin: bottom; transform: scaleY(.3); } .pl-list button.on .eq { opacity: 1; } .player.is-playing .pl-list button.on .eq i { animation: eq 0.9s ease-in-out infinite; } .player.is-playing .pl-list button.on .eq i:nth-child(2) { animation-delay: -.3s; } .player.is-playing .pl-list button.on .eq i:nth-child(3) { animation-delay: -.6s; } @keyframes eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } } .pl-now { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .pl-now b { display: block; font-family: var(--f-display); font-weight: 700; font-size: 17px; letter-spacing: -.01em; } .pl-now span { font-size: 14px; } .pl-now .pl-link { margin-left: 0; flex: none; } .pl-ctrl { flex-wrap: wrap; } .pl-ctrl .pl-vol { flex: 1; min-width: 160px; margin-left: 8px; } .player.is-playing .pl-play .i-play { display: none; } .player.is-playing .pl-play .i-pause { display: inline; } .player .pl-play .i-pause { display: none; } .now-game { display: flex; gap: 14px; align-items: center; } .now-game h3 { margin: 0; } /* albums carousel: cover above title / artist / year */ .al-carousel { position: relative; } .al-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 6px 2px 14px; scrollbar-width: thin; } .al-item { flex: 0 0 clamp(170px, 18vw, 240px); margin: 0; scroll-snap-align: start; } .al-item a { display: block; } .al-item .sleeve { width: 100%; } .al-item .sleeve .vinyl { top: -2%; right: 4%; width: 92%; } .al-item:hover .sleeve .vinyl { right: -30%; } .al-item figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; font-size: 14px; line-height: 1.3; } .al-item figcaption b { font-family: var(--f-display); font-size: 16px; letter-spacing: -.01em; } .al-item a:hover b { color: var(--magenta-ink); } .al-nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; } .al-nav button { width: 40px; height: 40px; border: 1px solid var(--rule); transition: border-color .2s, opacity .2s; } .al-nav button:hover { border-color: var(--ink); } .al-nav button:disabled { opacity: .3; cursor: default; } /* artist pins with photos */ .pin.has-photo { position: relative; padding: 0; overflow: visible; background: var(--bg); } .pin.has-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; filter: saturate(1.05) contrast(1.05); box-shadow: inset 0 0 0 4px rgba(255,255,255,.4); } .pin.has-photo::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 -8px 14px rgba(0,0,0,.25), inset 0 8px 12px rgba(255,255,255,.3); pointer-events: none; } .pin.has-photo span { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%) rotate(-3deg); white-space: nowrap; padding: 3px 9px; background: var(--bg); color: var(--fg); font-size: 11px; box-shadow: 2px 2px 0 rgba(0,0,0,.25); z-index: 1; } /* favourite artists: 2 × 2 visible, sideways scroll for the rest */ .card-artists .pins.al-track { display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: min(50%, 240px); gap: 30px 0; justify-content: start; justify-items: center; scroll-snap-type: none; padding: 10px 0 22px; } .card-artists .pin { width: clamp(112px, 11vw, 150px); } .card-artists .al-nav { margin-top: 0; } /* photo series: justified rows — every photo shown whole */ .lay-mosaic .mosaic.justified { display: flex; flex-wrap: wrap; gap: 10px; } .lay-mosaic .mosaic.justified figure { flex: var(--r) 1 calc(var(--r) * clamp(160px, 22vw, 340px)); aspect-ratio: var(--r); grid-column: auto; grid-row: auto; margin: 0; } .lay-mosaic .mosaic.justified figure .media { height: 100%; aspect-ratio: auto !important; } .lay-mosaic .mosaic.justified .mosaic-end { flex: 1000 1 0; } @media (max-width: 760px) { .lay-mosaic .mosaic.justified figure { flex-basis: calc(var(--r) * 150px); } }