/* ============================================================ base.css — design tokens, reset, typography, layout helpers Portfolio Facundo Ferreyra · dirección "Galería" ============================================================ */ :root{ /* light theme (default) */ --bg:#f5f4ef; --bg-alt:#efeee7; --fg:#1b1a15; --fg2:#6c6a5f; --fg3:#9a9789; --line:#e0ddd2; --line2:#d2cfc2; --card:#fbfaf6; --accent:oklch(0.55 0.085 55); --accent-soft:oklch(0.55 0.085 55 / .12); --shadow:0 30px 60px -38px rgba(40,34,20,.45); --serif:'Newsreader',Georgia,'Times New Roman',serif; --sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif; --wrap:1200px; --pad:48px; --nav-h:80px; } [data-theme="dark"]{ --bg:#16150f; --bg-alt:#1a1912; --fg:#edebe1; --fg2:#a3a092; --fg3:#6f6c5e; --line:#2a281f; --line2:#35332a; --card:#1c1b14; --accent:oklch(0.76 0.08 70); --accent-soft:oklch(0.76 0.08 70 / .15); --shadow:0 30px 70px -40px rgba(0,0,0,.7); } /* ============================================================ COLOR PALETTES — 3 designs, each with light + dark. Switch with . "arena" is the default declared in :root / [data-theme]. ============================================================ */ /* — Niebla: neutros fríos + acento azul pizarra — */ [data-palette="niebla"]{ --bg:#f4f5f7; --bg-alt:#eceef2; --fg:#16181d; --fg2:#5a5f6b; --fg3:#9298a4; --line:#e0e3e9; --line2:#cfd3db; --card:#fbfcfd; --accent:oklch(0.54 0.13 256); --accent-soft:oklch(0.54 0.13 256 / .12); --shadow:0 30px 60px -38px rgba(20,28,45,.40); } [data-palette="niebla"][data-theme="dark"]{ --bg:#0f1115; --bg-alt:#14171c; --fg:#e9ebf0; --fg2:#9aa0ad; --fg3:#5e6470; --line:#22262e; --line2:#2e333d; --card:#14171d; --accent:oklch(0.74 0.12 256); --accent-soft:oklch(0.74 0.12 256 / .16); --shadow:0 30px 70px -40px rgba(0,0,0,.72); } /* — Salvia: neutros cálido-verdosos + acento salvia — */ [data-palette="salvia"]{ --bg:#f2f4ef; --bg-alt:#e9ede3; --fg:#171a14; --fg2:#586053; --fg3:#929a8b; --line:#dde2d6; --line2:#cdd4c4; --card:#fafcf7; --accent:oklch(0.5 0.09 150); --accent-soft:oklch(0.5 0.09 150 / .12); --shadow:0 30px 60px -38px rgba(28,40,24,.40); } [data-palette="salvia"][data-theme="dark"]{ --bg:#10130e; --bg-alt:#151911; --fg:#e8ece2; --fg2:#9aa491; --fg3:#5e6657; --line:#222719; --line2:#2d3422; --card:#141811; --accent:oklch(0.74 0.11 150); --accent-soft:oklch(0.74 0.11 150 / .16); --shadow:0 30px 70px -40px rgba(0,0,0,.7); } /* ============================================================ ACCESSIBLE PALETTES — high contrast, low-vision friendly. Pure black/white text, darker hairlines, saturated accents on colour-blind-safe hues (Okabe-Ito blue / vermillion). Both pass WCAG AA–AAA for body text against their backgrounds. ============================================================ */ /* — Contraste: máximo contraste neutro + azul intenso — */ [data-palette="contraste"]{ --bg:#ffffff; --bg-alt:#eceef1; --fg:#000000; --fg2:#24292e; --fg3:#41474d; --line:#9aa3ac; --line2:#6b747c; --card:#ffffff; --accent:oklch(0.46 0.15 245); --accent-soft:oklch(0.46 0.15 245 / .15); --shadow:0 30px 60px -36px rgba(0,0,0,.55); } [data-palette="contraste"][data-theme="dark"]{ --bg:#000000; --bg-alt:#101418; --fg:#ffffff; --fg2:#e2e7eb; --fg3:#b3bbc2; --line:#3d454d; --line2:#5f6a73; --card:#0a0e12; --accent:oklch(0.82 0.13 235); --accent-soft:oklch(0.82 0.13 235 / .2); --shadow:0 30px 70px -38px rgba(0,0,0,.85); } /* — Foco: alto contraste cálido + acento bermellón — */ [data-palette="foco"]{ --bg:#fffdf8; --bg-alt:#f1ece1; --fg:#120f08; --fg2:#312c22; --fg3:#4e4838; --line:#b7ad99; --line2:#8a8069; --card:#fffefa; --accent:oklch(0.52 0.17 45); --accent-soft:oklch(0.52 0.17 45 / .15); --shadow:0 30px 60px -36px rgba(40,28,10,.5); } [data-palette="foco"][data-theme="dark"]{ --bg:#0a0805; --bg-alt:#15110a; --fg:#fff9ef; --fg2:#ece2d2; --fg3:#bcb09c; --line:#473d2c; --line2:#6b5e46; --card:#100c06; --accent:oklch(0.82 0.15 62); --accent-soft:oklch(0.82 0.15 62 / .2); --shadow:0 30px 70px -38px rgba(0,0,0,.85); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ background:var(--bg); color:var(--fg); font-family:var(--sans); font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background .45s ease,color .45s ease; } img{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font-family:inherit} ::selection{background:var(--accent);color:#fff} /* semantic-element resets (so avoiding
stays clean) ---- */ figure,blockquote,dl,dd{margin:0} ul[class]{list-style:none} fieldset{border:0;padding:0;margin:0;min-width:0} legend{padding:0} address{font-style:normal} summary{cursor:pointer;list-style:none} summary::-webkit-details-marker{display:none} dialog{padding:0;border:0;color:inherit;max-width:none;max-height:none;background:none} dialog::backdrop{background:rgba(12,10,6,.55);backdrop-filter:blur(6px)} /* visible keyboard focus for accessibility */ :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px} :focus:not(:focus-visible){outline:none} .skip-link{position:absolute;left:-999px;top:8px;z-index:400;background:var(--fg);color:var(--bg);padding:10px 18px;border-radius:8px;font-size:13px} .skip-link:focus{left:16px} /* layout ---------------------------------------------------- */ .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);width:100%} .section{padding:104px 0;border-top:1px solid var(--line)} .section.alt{background:var(--bg-alt)} .eyebrow{ font-size:12px;letter-spacing:.2em;text-transform:uppercase; color:var(--fg3);font-weight:500; } .eyebrow.line{display:inline-flex;gap:16px;align-items:center} .eyebrow.line::before{content:"";width:42px;height:1px;background:var(--accent)} .sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:52px} .sec-head hgroup{display:flex;flex-direction:column;gap:14px} .sec-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.6vw,52px);letter-spacing:-.015em;line-height:1.04} .sec-head h2 em{font-style:italic;color:var(--accent)} .sec-head .link{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg2);border-bottom:1px solid var(--line2);padding-bottom:4px;transition:color .2s,border-color .2s} .sec-head .link:hover{color:var(--accent);border-color:var(--accent)} /* serif display helper */ .display{font-family:var(--serif);font-weight:300;letter-spacing:-.02em;line-height:1} .display em{font-style:italic;color:var(--accent)} /* buttons --------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;gap:10px; font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:500; padding:15px 28px;border-radius:99px;border:1px solid var(--line2); background:none;color:var(--fg);cursor:pointer; transition:background .25s,color .25s,border-color .25s,transform .25s; } .btn .ar{transition:transform .25s} .btn:hover .ar{transform:translateX(4px)} .btn.solid{background:var(--fg);color:var(--bg);border-color:var(--fg)} .btn.solid:hover{background:var(--accent);border-color:var(--accent);color:#fff} .btn.ghost:hover{border-color:var(--accent);color:var(--accent)} .btn.light{border-color:rgba(255,255,255,.5);color:#fff} .btn.light:hover{background:#fff;color:#15140f;border-color:#fff} /* availability dot */ .avail{display:inline-flex;gap:9px;align-items:center;color:var(--fg2);font-size:13.5px} .pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 2.6s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 var(--accent-soft)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}} /* scroll reveal --------------------------------------------- */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} .reveal[data-d="1"]{transition-delay:.08s} .reveal[data-d="2"]{transition-delay:.16s} .reveal[data-d="3"]{transition-delay:.24s} @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}} /* image-slot defaults so empty placeholders look intentional */ image-slot{--is-bg:var(--bg-alt)} @media(max-width:820px){ :root{--pad:24px} .section{padding:72px 0} .sec-head{margin-bottom:36px} } /* page transitions ----------------------------------------- */ .page-veil{ position:fixed;inset:0;z-index:300;background:var(--bg); pointer-events:none;opacity:0; transition:opacity .42s ease; } body.veil-in .page-veil{opacity:1;pointer-events:auto} /* leaving page */ .page-veil .pv-mark{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); font-family:var(--serif);font-size:30px;letter-spacing:.1em;color:var(--accent); opacity:0;transition:opacity .42s ease .05s; } body.veil-in .page-veil .pv-mark{opacity:1} /* content fades + lifts in on arrival */ main{animation:pageIn .6s cubic-bezier(.2,.7,.2,1) both} @keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){ main{animation:none} .page-veil{display:none} } /* back-to-top --------------------------------------------- */ .to-top{ position:fixed;right:clamp(18px,3vw,34px);bottom:clamp(18px,3vw,34px);z-index:120; width:50px;height:50px;border-radius:50%; border:1px solid var(--line2);background:color-mix(in oklch,var(--bg) 82%,transparent); backdrop-filter:blur(8px);color:var(--fg);cursor:pointer; display:grid;place-items:center;font-size:17px; opacity:0;transform:translateY(14px) scale(.9);pointer-events:none; transition:opacity .3s,transform .3s,background .25s,border-color .25s,color .25s; box-shadow:var(--shadow); } .to-top.show{opacity:1;transform:none;pointer-events:auto} .to-top:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-3px)} .to-top .tt-ring{position:absolute;inset:-1px;border-radius:50%;border:1px solid transparent}