/* =========================================================== La Montagna Digital โ€” 2026 redesign Warm editorial "atelier" theme ยท Light + Dark Toggle theme via [data-theme="light"|"dark"] on =========================================================== */ :root { /* Brand accents โ€” shared across both themes */ --moss: #5d6f4f; --moss-dark: #35422f; --gold: #c59b59; --terracotta: #b76948; --radius-xl: 34px; --radius-lg: 24px; --radius-md: 16px; --max: 1180px; --ease: cubic-bezier(0.16, 1, 0.3, 1); } /* ---------- LIGHT THEME (default) ---------- */ :root, :root[data-theme="light"] { --ink: #141414; /* primary text */ --ink-soft: #34312d; --bg: #f5f1ea; /* page background (stone) */ --bg-2: #eee3d3; /* deeper stone */ --surface: #fffaf1; /* cards (cream) */ --surface-2: rgba(255, 250, 241, 0.64); --line: rgba(20, 20, 20, 0.12); --muted: rgba(20, 20, 20, 0.66); --hero-grad: radial-gradient(circle at 18% 20%, rgba(197,155,89,.35), transparent 32%), radial-gradient(circle at 78% 22%, rgba(93,111,79,.28), transparent 34%), linear-gradient(180deg, #f8f2e8 0%, #eee3d3 100%); --shadow: 0 30px 80px rgba(20, 20, 20, 0.12); --shadow-sm: 0 18px 45px rgba(20, 20, 20, 0.06); --grain-blend: multiply; --grain-opacity: 0.30; /* "ink" surfaces (nav, dark bands) stay dark in light mode */ --band-bg: #141414; --band-text: #fffaf1; --band-muted: rgba(255, 250, 241, 0.68); --on-accent: #fffaf1; } /* ---------- WARM DARK THEME ---------- */ :root[data-theme="dark"] { --ink: #f3ece0; /* primary text (warm off-white) */ --ink-soft: #d8cdbb; --bg: #14110d; /* espresso */ --bg-2: #1c1812; --surface: #221d16; /* warm card */ --surface-2: rgba(255, 250, 241, 0.05); --line: rgba(243, 236, 224, 0.14); --muted: rgba(243, 236, 224, 0.62); --hero-grad: radial-gradient(circle at 18% 20%, rgba(197,155,89,.30), transparent 34%), radial-gradient(circle at 78% 22%, rgba(93,111,79,.26), transparent 36%), linear-gradient(180deg, #1c1812 0%, #14110d 100%); --shadow: 0 30px 80px rgba(0, 0, 0, 0.55); --shadow-sm: 0 18px 45px rgba(0, 0, 0, 0.35); --grain-blend: overlay; --grain-opacity: 0.22; /* bands invert to a warm cream so they still read as a contrast moment */ --band-bg: #0e0c09; --band-text: #f3ece0; --band-muted: rgba(243, 236, 224, 0.6); --on-accent: #14110d; } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--ink); line-height: 1.5; overflow-x: hidden; transition: background .5s var(--ease), color .5s var(--ease); } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } .page-shell { position: relative; min-height: 100vh; overflow: hidden; } /* Grain overlay */ .grain { pointer-events: none; position: fixed; inset: 0; opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend); z-index: 50; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E"); } /* ---------- Typography ---------- */ h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; letter-spacing: -0.06em; line-height: 0.95; margin: 0; } .serif { font-family: Georgia, "Times New Roman", serif; } /* ---------- Nav ---------- */ .nav { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); width: min(calc(100% - 32px), var(--max)); z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 12px 22px; border: 1px solid rgba(255,250,241,0.46); border-radius: 999px; background: rgba(20,20,20,0.72); backdrop-filter: blur(20px); color: var(--band-text); box-shadow: 0 18px 50px rgba(20,20,20,0.18); transition: background .4s var(--ease); } :root[data-theme="dark"] .nav { background: rgba(8,7,5,0.72); border-color: rgba(243,236,224,0.18); } .nav.scrolled { background: rgba(20,20,20,0.86); } :root[data-theme="dark"] .nav.scrolled { background: rgba(8,7,5,0.9); } .brand { display: flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: -0.03em; } .brand-mark { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--terracotta)); position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45); flex: none; } .brand-mark::before, .brand-mark::after { content: ""; position: absolute; left: 7px; bottom: 8px; width: 22px; height: 16px; background: #fffaf1; clip-path: polygon(0 100%, 42% 20%, 62% 56%, 78% 0, 100% 100%); opacity: 0.92; } .brand-mark::after { transform: translate(4px,4px) scale(0.78); background: var(--moss-dark); opacity: 0.72; } .nav-links { display: flex; align-items: center; gap: 24px; font-size: 14px; color: rgba(255,250,241,0.82); } .nav-links a { transition: color .25s; } .nav-links a:hover, .nav-links a.active { color: #fffaf1; } .nav-right { display: flex; align-items: center; gap: 12px; } /* Theme toggle */ .theme-toggle { width: 40px; height: 40px; border-radius: 50%; flex: none; border: 1px solid rgba(255,250,241,0.28); background: rgba(255,250,241,0.08); color: #fffaf1; cursor: pointer; display: grid; place-items: center; transition: background .25s, transform .25s var(--ease); font-size: 16px; } .theme-toggle:hover { background: rgba(255,250,241,0.18); transform: rotate(12deg); } .theme-toggle .i-sun { display: none; } .theme-toggle .i-moon { display: block; } :root[data-theme="dark"] .theme-toggle .i-sun { display: block; } :root[data-theme="dark"] .theme-toggle .i-moon { display: none; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent; font-weight: 700; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s, background .25s; } .btn:hover { transform: translateY(-2px); } .btn-primary { color: var(--band-text); background: var(--band-bg); box-shadow: 0 18px 35px rgba(20,20,20,0.18); } .btn-secondary { color: var(--ink); background: var(--surface-2); border-color: var(--line); } .btn-nav { min-height: 40px; padding: 0 17px; color: #141414; background: #fffaf1; font-size: 14px; } .btn-gold { background: var(--gold); color: #141414; } /* ---------- Hero ---------- */ .hero { position: relative; min-height: 100vh; padding: 150px 20px 80px; background: var(--hero-grad); } .hero::after { content: ""; position: absolute; inset: auto -8% -1px -8%; height: 160px; background: var(--bg); clip-path: polygon(0 46%, 18% 58%, 38% 28%, 56% 56%, 74% 22%, 100% 54%, 100% 100%, 0 100%); opacity: 0.92; } .hero-grid { width: min(100%, var(--max)); margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: center; position: relative; z-index: 2; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--moss-dark); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; } :root[data-theme="dark"] .eyebrow { color: var(--gold); } .pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--moss); box-shadow: 0 0 0 6px rgba(93,111,79,0.14); } h1 { max-width: 780px; font-size: clamp(56px, 8vw, 104px); line-height: 0.9; letter-spacing: -0.075em; color: var(--ink); } .hero-copy { max-width: 600px; margin: 28px 0 0; font-size: clamp(18px, 2vw, 22px); color: var(--muted); } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; } .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 42px; max-width: 650px; } .stat { padding: 18px; border-radius: 22px; background: var(--surface-2); border: 1px solid var(--line); } .stat strong { display: block; font-size: 25px; letter-spacing: -0.04em; } .stat span { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; } /* Hero visual card (stays dark in both themes โ€” it's a "screen") */ .visual-card { position: relative; min-height: 610px; border-radius: var(--radius-xl); background: linear-gradient(140deg, rgba(20,20,20,0.94), rgba(52,66,47,0.9)), #141414; box-shadow: var(--shadow); overflow: hidden; color: #fffaf1; border: 1px solid rgba(255,250,241,0.24); } .visual-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 72% 18%, rgba(197,155,89,0.35), transparent 26%), radial-gradient(circle at 22% 80%, rgba(183,105,72,0.3), transparent 28%); } .keyword-orbit { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0.9; } .orbit-ring { position: absolute; border: 1px solid rgba(255,250,241,0.14); border-radius: 50%; animation: spin 28s linear infinite; } .ring-1 { width: 430px; height: 430px; } .ring-2 { width: 310px; height: 310px; animation-direction: reverse; animation-duration: 20s; } .ring-3 { width: 190px; height: 190px; animation-duration: 16s; } @keyframes spin { to { transform: rotate(360deg); } } .keyword { position: absolute; padding: 9px 12px; border-radius: 999px; background: rgba(255,250,241,0.1); border: 1px solid rgba(255,250,241,0.18); color: rgba(255,250,241,0.9); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; backdrop-filter: blur(12px); } .k1 { top: 72px; left: 52px; } .k2 { top: 144px; right: 38px; } .k3 { bottom: 178px; left: 38px; } .k4 { bottom: 78px; right: 58px; } .k5 { top: 52%; left: 50%; transform: translate(-50%,-50%); background: #fffaf1; color: #141414; } .browser-card { position: absolute; left: 36px; right: 36px; bottom: 34px; padding: 18px; border-radius: 24px; background: rgba(255,250,241,0.95); color: #141414; box-shadow: 0 28px 60px rgba(0,0,0,0.22); } .browser-top { display: flex; gap: 7px; margin-bottom: 16px; } .dot { width: 10px; height: 10px; border-radius: 50%; background: #e7ddce; } .browser-row { display: grid; grid-template-columns: 1fr 0.65fr; gap: 12px; } .mock-block { min-height: 126px; border-radius: 18px; background: linear-gradient(135deg, var(--moss), var(--moss-dark)); padding: 18px; color: #fffaf1; } .mock-block h3 { font-size: 30px; line-height: 0.98; } .mock-lines { display: grid; gap: 9px; } .mock-lines span { display: block; height: 13px; border-radius: 999px; background: rgba(20,20,20,0.12); } .mock-lines span:nth-child(1){width:92%;} .mock-lines span:nth-child(2){width:74%;} .mock-lines span:nth-child(3){width:86%;} .mock-lines span:nth-child(4){width:52%; background: var(--gold);} /* ---------- Sections ---------- */ .section { padding: 110px 20px; position: relative; } .container { width: min(100%, var(--max)); margin: 0 auto; } .section-head { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: end; margin-bottom: 42px; } .section-label { color: var(--terracotta); font-size: 13px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; } :root[data-theme="dark"] .section-label { color: var(--gold); } h2 { margin: 10px 0 0; font-size: clamp(38px, 5vw, 68px); line-height: 0.95; letter-spacing: -0.06em; } .section-intro { margin: 0; color: var(--muted); font-size: 18px; max-width: 570px; } /* Page hero (interior pages) */ .page-hero { position: relative; padding: 170px 20px 70px; background: var(--hero-grad); } .page-hero .container { position: relative; z-index: 2; } .page-hero h1 { font-size: clamp(46px, 7vw, 92px); } .page-hero .hero-copy { max-width: 640px; } /* Logo / industry strip */ .logo-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .logo-tile { display: grid; place-items: center; min-height: 96px; padding: 18px; border-radius: 22px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); font-weight: 700; text-align: center; } /* Services */ .services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .service-card { padding: 26px; min-height: 285px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .28s var(--ease), box-shadow .28s; } .service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); } .service-icon { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; color: #fffaf1; background: var(--moss-dark); margin-bottom: 28px; font-size: 20px; } .service-card:nth-child(2) .service-icon { background: var(--terracotta); } .service-card:nth-child(3) .service-icon { background: var(--gold); color: #141414; } .service-card:nth-child(4) .service-icon { background: var(--ink); color: var(--bg); } .service-card h3 { margin: 0 0 12px; font-size: 22px; letter-spacing: -0.035em; } .service-card p { margin: 0; color: var(--muted); } /* Dark band (contrast section) */ .dark-band { background: var(--band-bg); color: var(--band-text); border-radius: 44px 44px 0 0; margin-top: 20px; } .dark-band h2, .dark-band .stat strong { color: var(--band-text); } .dark-band .section-intro, .dark-band .stat span { color: var(--band-muted); } .dark-band .stat { background: rgba(255,250,241,0.06); border-color: rgba(255,250,241,0.13); } /* Process */ .process { display: grid; gap: 14px; counter-reset: step; } .process-step { counter-increment: step; display: grid; grid-template-columns: 90px 0.75fr 1.25fr; gap: 24px; align-items: center; padding: 24px; border-radius: 28px; background: rgba(255,250,241,0.07); border: 1px solid rgba(255,250,241,0.13); } .process-step::before { content: "0" counter(step); width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #141414; font-weight: 800; } .process-step h3 { margin: 0; font-size: 25px; letter-spacing: -0.04em; color: var(--band-text); } .process-step p { margin: 0; color: var(--band-muted); } /* Portfolio / case cards */ .portfolio-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 18px; } .work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .case-card { position: relative; min-height: 430px; padding: 28px; border-radius: var(--radius-xl); overflow: hidden; color: #fffaf1; background: linear-gradient(135deg, var(--moss-dark), #1d211b); box-shadow: var(--shadow); display: flex; flex-direction: column; } .case-card.small { min-height: 206px; background: linear-gradient(135deg, var(--terracotta), #532b22); } .case-card.cocoa { background: linear-gradient(135deg, #40372d, #171411); } .case-card.gold { background: linear-gradient(135deg, var(--gold), #8a6322); } .case-card.moss { background: linear-gradient(135deg, var(--moss), var(--moss-dark)); } .case-card::after { content: ""; position: absolute; right: -70px; bottom: -100px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255,250,241,0.12); } .case-tag { display: inline-flex; align-self: flex-start; padding: 8px 12px; border-radius: 999px; background: rgba(255,250,241,0.12); border: 1px solid rgba(255,250,241,0.18); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .case-card h3 { position: relative; z-index: 1; max-width: 520px; margin: auto 0 0; padding-top: 110px; font-size: clamp(30px, 4vw, 52px); line-height: 0.95; } .case-card.small h3 { padding-top: 40px; font-size: 28px; } .case-card p { position: relative; z-index: 1; max-width: 480px; color: rgba(255,250,241,0.78); margin: 14px 0 0; } .case-card .work-link { position: relative; z-index: 1; margin-top: 16px; font-weight: 700; color: #fffaf1; display: inline-flex; gap: 8px; } .case-stack { display: grid; gap: 18px; } /* CTA */ .cta { padding: 100px 20px; background: radial-gradient(circle at 22% 20%, rgba(197,155,89,0.3), transparent 32%), linear-gradient(135deg, var(--surface), var(--bg-2)); } .cta-card { width: min(100%, var(--max)); margin: 0 auto; padding: clamp(34px,7vw,76px); border-radius: 42px; background: var(--band-bg); color: var(--band-text); position: relative; overflow: hidden; box-shadow: var(--shadow); } .cta-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent, rgba(197,155,89,0.16)); } .cta-content { position: relative; z-index: 2; max-width: 780px; } .cta h2 { color: var(--band-text); } .cta p { color: var(--band-muted); font-size: 20px; } /* Contact */ .contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 50px; align-items: start; } .contact-detail { margin-bottom: 26px; } .contact-detail .section-label { margin-bottom: 6px; } .contact-detail a { font-size: 22px; font-family: Georgia, serif; letter-spacing: -0.03em; } .field { margin-bottom: 20px; } .field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 8px; font-weight: 600; letter-spacing: 0.02em; } .field input, .field textarea, .field select { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; color: var(--ink); font-family: inherit; font-size: 16px; transition: border-color .3s; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--moss); } /* Footer */ .footer { padding: 40px 20px; background: var(--band-bg); color: var(--band-muted); font-size: 14px; } .footer-inner { width: min(100%, var(--max)); margin: 0 auto; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; } .footer a { color: var(--band-muted); transition: color .25s; } .footer a:hover { color: var(--band-text); } /* Reveal */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .reveal.in { opacity: 1; transform: none; } /* Load-more: hidden work cards */ .case-card.is-hidden { display: none; } /* Long-form / legal prose */ .prose { max-width: 760px; } .prose h2 { font-size: clamp(26px, 3.4vw, 38px); margin: 44px 0 14px; } .prose h3 { font-size: 22px; margin: 30px 0 10px; letter-spacing: -0.03em; } .prose p, .prose li { color: var(--muted); font-size: 17px; line-height: 1.7; } .prose ul { padding-left: 20px; margin: 12px 0; } .prose li { margin-bottom: 8px; } .prose a { color: var(--terracotta); text-decoration: underline; text-underline-offset: 3px; } :root[data-theme="dark"] .prose a { color: var(--gold); } .prose .meta { font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } /* Centered 404 */ .error-wrap { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 160px 20px 80px; } .error-wrap h1 { font-size: clamp(80px, 18vw, 200px); line-height: 0.85; } .error-wrap p { color: var(--muted); font-size: 20px; margin: 18px 0 30px; max-width: 46ch; } /* Responsive */ @media (max-width: 980px) { .hero-grid, .section-head, .portfolio-grid, .contact-grid { grid-template-columns: 1fr; } .visual-card { min-height: 520px; } .services-grid { grid-template-columns: repeat(2, 1fr); } .logo-strip { grid-template-columns: repeat(3, 1fr); } .work-grid { grid-template-columns: 1fr; } .process-step { grid-template-columns: 70px 1fr; } .process-step p { grid-column: 2; } .nav-links { display: none; } } @media (max-width: 640px) { .hero { padding-top: 125px; } .services-grid, .hero-stats, .logo-strip { grid-template-columns: 1fr; } .visual-card { min-height: 480px; } .browser-card { left: 18px; right: 18px; } .browser-row { grid-template-columns: 1fr; } .section { padding: 78px 20px; } .process-step { grid-template-columns: 1fr; } .process-step p { grid-column: auto; } .footer-inner { flex-direction: column; align-items: flex-start; } }