/* * theme.css — WRITTEN BY THE PLATFORM. Do not edit. * * Palette: Your colours (custom) * Source colours: #200904 #231f1c #fbf7f2 #e2431b #c7462a #ffffff * * Every value below is either one of those five or derived from them, and each * one is contrast-corrected against this palette's own background. Consume * them with var(--token); never write a colour value in app code. */ :root { --canvas: #fbf7f2; --surface: #fdfbf9; --surface-2: #f0ebe6; --border: #dcd6d1; --border-strong: #b9b0ab; --ink: #231f1c; --muted: #6f6c69; --accent: #e2431b; --accent-hover: #c03917; --accent-ink: #200904; --accent-text: #c7462a; --accent-strong: #b03415; --accent-soft: #f8ded4; --accent-border: #f0a691; --success: #15803d; --success-ink: #ffffff; --success-soft: #dfe9dc; --success-strong: #137638; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #f2e3d6; --warning-strong: #a64c08; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #f3ddd8; --danger-strong: #b91c1c;} /* The same palette on a dark page — written here, never by the app. It applies while carries data-theme="dark", which the platform's own toggle sets and remembers; an app that never renders that toggle is exactly as it was. Do not repoint any of these from app code: a token that references another token here is a cycle, and CSS makes every property in a cycle invalid. */ html[data-theme="dark"] { --canvas: #110503; --surface: #291e1c; --surface-2: #1d1210; --border: #322826; --border-strong: #58504f; --ink: #fbf7f2; --muted: #9d9692; --accent: #e2431b; --accent-hover: #e65f3d; --accent-ink: #200904; --accent-text: #e2431b; --accent-strong: #e6603e; --accent-soft: #3f1308; --accent-border: #6f210e; --success: #15803d; --success-ink: #ffffff; --success-soft: #122010; --success-strong: #499c68; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #351604; --warning-strong: #c57a40; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #360a09; --danger-strong: #d16969; } /* ==================================================================== * app.css — Studio Nova, a bold & creative UI/UX portfolio. * Loads after design.css and theme.css, so everything here wins. * ==================================================================== */ /* ---- retune the system: punchier radius, bolder shadow, brisker motion --- */ :root { --radius-sm: 10px; --radius: 18px; --radius-lg: 28px; --radius-xl: 34px; --dur-2: 220ms; --dur-3: 380ms; --content-max: 1240px; } @media (prefers-reduced-motion: no-preference) { :root { --hero-motion: 1; } } /* ================================================================== * PORTFOLIO SHELL * ================================================================== */ .portfolio { display: flex; flex-direction: column; padding-block: var(--s-6) var(--s-10); } .portfolio > * + * { margin-top: var(--s-12); } .brand { text-decoration: none; color: inherit; } .eyebrow { display: inline-block; font-size: var(--t-xs); font-weight: var(--fw-semi); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent-text); margin-bottom: var(--s-3); } /* ================================================================== * HERO * ================================================================== */ .hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--s-10); align-items: center; padding-block: var(--s-8) var(--s-4); } .hero-title { font-family: var(--font-sans); font-weight: 800; letter-spacing: var(--track-tight); line-height: 0.98; font-size: clamp(2.6rem, 2rem + 3.2vw, 5.2rem); color: var(--ink); margin: 0 0 var(--s-5); } .hero-sub { font-size: var(--t-lg); line-height: var(--lh); color: var(--muted); max-width: 46ch; margin: 0 0 var(--s-7); } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-9); } .hero-actions .btn svg { margin-left: var(--s-2); } .hero-stats { display: flex; flex-wrap: wrap; gap: var(--s-8); } .hero-stat { display: flex; flex-direction: column; } .hero-stat > * + * { margin-top: 2px; } .hero-stat-value { font-size: var(--t-3xl); font-weight: 800; letter-spacing: var(--track-tight); color: var(--ink); } .hero-stat-label { font-size: var(--t-xs); color: var(--muted); max-width: 14ch; } .hero-art { position: relative; } .hero-media { border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); transform: rotate(2deg); transition: transform var(--dur-3) var(--ease-out); } .hero-media:hover { transform: rotate(0deg) scale(1.01); } .hero-art::after { content: ""; position: absolute; inset: -18px -18px auto auto; width: 120px; height: 120px; z-index: -1; border-radius: 50%; background: var(--accent-soft); display: block; } /* ================================================================== * SECTIONS * ================================================================== */ .section { padding-block: var(--s-6); } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap; margin-bottom: var(--s-8); padding-bottom: var(--s-5); border-bottom: 1px solid var(--border); } .section-title { font-size: var(--t-4xl); font-weight: 800; letter-spacing: var(--track-tight); color: var(--ink); margin: 0; } .section-sub { color: var(--muted); max-width: 34ch; margin: 0; } /* ---- work grid ---------------------------------------------------- */ .work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s-7); } .project-card { display: block; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); } .project-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); border-color: var(--accent-border); } .project-card-media { position: relative; overflow: hidden; } .project-card-media .media { border-radius: 0; } .project-card-badge { position: absolute; top: var(--s-4); left: var(--s-4); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--border); } .project-card-body { padding: var(--s-6); } .project-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); } .project-card-title { font-size: var(--t-xl); font-weight: var(--fw-semi); letter-spacing: var(--track-snug); color: var(--ink); margin: 0; } .project-card-arrow { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); transition: transform var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); } .project-card-arrow svg { width: 16px; height: 16px; } .project-card:hover .project-card-arrow { background: var(--accent); color: var(--accent-ink); transform: translateX(3px); } .project-card-summary { color: var(--muted); font-size: var(--t-sm); line-height: var(--lh); margin: var(--s-2) 0 var(--s-4); } .project-card-meta { display: flex; gap: var(--s-2); font-size: var(--t-xs); color: var(--muted); font-weight: var(--fw-medium); } /* ---- skills --------------------------------------------------------- */ .skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-6); } .skill-card { padding: var(--s-6); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); } .skill-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .skill-card-title { font-size: var(--t-lg); font-weight: var(--fw-semi); color: var(--ink); margin: 0 0 var(--s-1); } .skill-card-blurb { font-size: var(--t-sm); color: var(--muted); margin: 0 0 var(--s-4); } .skill-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); } /* ---- about ------------------------------------------------------------ */ .about { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--s-10); align-items: center; } .about-media .media { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); } .about-text { color: var(--muted); line-height: var(--lh); margin: 0 0 var(--s-4); } .about-actions { margin-top: var(--s-5); } /* ---- contact band ------------------------------------------------------ */ .contact-band { border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: var(--accent-ink); padding: var(--s-10) var(--s-9); text-align: center; } .contact-band .eyebrow { color: color-mix(in srgb, var(--accent-ink) 80%, transparent); } .contact-inner { display: flex; flex-direction: column; align-items: center; max-width: 56ch; margin: 0 auto; } .contact-title { font-size: var(--t-4xl); font-weight: 800; letter-spacing: var(--track-tight); margin: 0 0 var(--s-4); } .contact-sub { opacity: 0.92; margin: 0 0 var(--s-7); } .contact-actions { display: flex; flex-direction: column; align-items: center; } .contact-actions > * + * { margin-top: var(--s-5); } .contact-cta { background: var(--surface); color: var(--accent-text); border: none; box-shadow: var(--shadow-lg); } .contact-cta:hover { background: var(--surface); transform: translateY(-2px); } .contact-links { display: flex; gap: var(--s-6); } .contact-link { color: var(--accent-ink); font-weight: var(--fw-medium); text-decoration: none; opacity: 0.88; border-bottom: 1px solid color-mix(in srgb, var(--accent-ink) 45%, transparent); transition: opacity var(--dur-1) var(--ease); } .contact-link:hover { opacity: 1; } .portfolio-foot { text-align: center; color: var(--muted); font-size: var(--t-xs); padding-top: var(--s-6); } /* ================================================================== * CASE STUDY * ================================================================== */ .case-study { display: flex; flex-direction: column; padding-block: var(--s-4) var(--s-10); } .case-study > * + * { margin-top: var(--s-8); } .back-link { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--muted); font-size: var(--t-sm); font-weight: var(--fw-medium); text-decoration: none; width: fit-content; } .back-link:hover { color: var(--accent-text); } .back-link svg { width: 16px; height: 16px; } .case-head { max-width: 62ch; } .case-title { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); font-weight: 800; letter-spacing: var(--track-tight); line-height: 1.05; color: var(--ink); margin: var(--s-3) 0 var(--s-4); } .case-summary { font-size: var(--t-lg); color: var(--muted); line-height: var(--lh); margin: 0 0 var(--s-6); } .case-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s-5); margin: 0; padding-top: var(--s-5); border-top: 1px solid var(--border); } .case-meta dt { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--muted); margin: 0 0 4px; } .case-meta dd { font-size: var(--t-md); font-weight: var(--fw-semi); color: var(--ink); margin: 0; } .case-cover, .case-inline-media { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); } .case-body { display: flex; flex-direction: column; max-width: 72ch; } .case-body > * + * { margin-top: var(--s-8); } .case-section-title { font-size: var(--t-2xl); font-weight: var(--fw-semi); letter-spacing: var(--track-snug); color: var(--ink); margin: 0 0 var(--s-3); } .case-section-text { font-size: var(--t-md); line-height: var(--lh-loose); color: var(--muted); margin: 0; } .result-band { display: flex; align-items: baseline; gap: var(--s-4); padding: var(--s-6) var(--s-7); border-radius: var(--radius-lg); background: var(--accent-soft); border: 1px solid var(--accent-border); } .result-label { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-caps); font-weight: var(--fw-semi); color: var(--accent-strong); } .result-value { font-size: var(--t-2xl); font-weight: 800; color: var(--accent-strong); } .adjacent-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); padding-top: var(--s-6); border-top: 1px solid var(--border); } .adjacent-link { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-5); border-radius: var(--radius); border: 1px solid var(--border); text-decoration: none; color: inherit; transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); } .adjacent-link:hover { transform: translateY(-2px); border-color: var(--accent-border); } .adjacent-next { justify-content: flex-end; text-align: right; grid-column: 2; } .adjacent-prev { grid-column: 1; } .adjacent-link svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--accent-text); } .adjacent-right { display: flex; flex-direction: column; } .adjacent-label { display: block; font-size: var(--t-xs); color: var(--muted); text-transform: uppercase; letter-spacing: var(--track-caps); } .adjacent-title { display: block; font-weight: var(--fw-semi); color: var(--ink); } .case-cta { text-align: center; padding: var(--s-9) var(--s-6); border-radius: var(--radius-xl); background: var(--surface-2); } .case-cta-title { font-size: var(--t-2xl); font-weight: var(--fw-semi); color: var(--ink); margin: 0 0 var(--s-5); } .case-cta .btn svg { margin-left: var(--s-2); } /* ================================================================== * RESPONSIVE * ================================================================== */ @media (max-width: 860px) { .hero { grid-template-columns: 1fr; } .hero-art { order: -1; max-width: 320px; margin-inline: auto; } .about { grid-template-columns: 1fr; } .about-media { max-width: 360px; margin-inline: auto; } } @media (max-width: 560px) { .hero-title { font-size: clamp(2.2rem, 1.6rem + 6vw, 3.2rem); } .hero-stats { gap: var(--s-6); } .section-title { font-size: var(--t-3xl); } .contact-band { padding: var(--s-7) var(--s-5); } .adjacent-nav { grid-template-columns: 1fr; } .adjacent-next { grid-column: 1; justify-content: flex-start; text-align: left; } .case-meta { grid-template-columns: repeat(2, 1fr); } } /* ================================================================== * MOTION * ================================================================== */ @media (prefers-reduced-motion: reduce) { .hero-media, .project-card, .skill-card, .adjacent-link, .contact-cta { transition: none; } }