/* Copyright Surillyacom Entertainment */ /* ── Metallic sheen on accent text ───────────────────────── */ /* --accent-shine is defined inline in via PHP so it */ /* inherits --accent and works for any highlight colour. */ .hero__name, .section-label, .stat-callout__number, .influence-card__label, .highlight-item__title, .media-block__label, .project-item__year, .legal-section h2 { background: var(--accent-shine); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #0d0d0d; --bg-soft: #141414; --bg-card: #1a1a1a; --text: #c0c0c0; --text-muted:#b0b0b0; --border: #111111; --radius: 6px; --max-w: 860px; --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif; --font-display: 'Playfair Display', Georgia, serif; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 1rem; line-height: 1.7; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } img { display: block; max-width: 100%; height: auto; } @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Playfair+Display:ital,wght@0,700;0,900;1,700&display=swap'); .hero { position: relative; width: 100%; overflow: hidden; display: flex; align-items: flex-end; /* Mobile */ height: min(90vh, 700px); } /* Mobile */ .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58.6% 32.4%; z-index: 0; filter: saturate(0.7) brightness(0.75); } .hero__fade { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(13,13,13,0.10) 0%, rgba(13,13,13,0.15) 50%, rgba(13,13,13,0.85) 80%, rgba(13,13,13,1.00) 100% ); z-index: 1; } .hero__content { position: relative; z-index: 2; width: 100%; text-align: center; padding: 0 1.5rem 3.5rem; } /* PC */ @media (min-width: 960px) { .hero { height: min(92vh, 780px); align-items: stretch; } .hero__img { display: none; } .hero__fade { display: none; } .hero__content { flex: 0 0 52%; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 5% 5rem 8%; text-align: left; width: auto; background: var(--bg); box-shadow: 40px 0 80px 20px var(--bg); z-index: 2; } .hero__img-panel { flex: 0 0 48%; position: relative; overflow: hidden; } .hero__img-panel .hero__img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58.6% 32.4%; filter: saturate(0.85) brightness(0.85); } .hero__img-panel::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, var(--bg) 0%, transparent 35%); z-index: 1; pointer-events: none; } .hero__img-panel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 55%, var(--bg) 100%); z-index: 1; pointer-events: none; } } .hero__name { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 12vw, 12rem); letter-spacing: -0.02em; line-height: 1; white-space: nowrap; color: var(--accent); text-shadow: 0 0 80px color-mix(in srgb, var(--accent) 35%, transparent), 0 4px 24px rgba(0,0,0,0.7); } .hero__tagline { margin-top: 0.6rem; font-size: clamp(0.55rem, 1.8vw, 1rem); font-weight: 300; letter-spacing: 0.25em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; } .container { max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem; } .main-section { padding: 5rem 0; } .main-section + .main-section { border-top: 1px solid var(--border); } .section-label { display: inline-block; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.2rem; } .section-title { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; line-height: 1.2; color: var(--text); margin-bottom: 1.5rem; } .profile { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; } .profile__img-wrap { position: relative; } .profile__img-wrap::after { content: ''; position: absolute; inset: -8px; border: 1px solid var(--accent); opacity: 0.35; pointer-events: none; } .profile__img { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: center top; filter: grayscale(5%); transition: filter 0.4s ease; } .profile__img:hover { filter: grayscale(0%); } .profile__body p { color: var(--text-muted); margin-bottom: 1rem; } .profile__body p:last-child { margin-bottom: 0; } .influences { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-top: 2.5rem; } .influence-card { padding: 1.5rem; } .influence-card__label { font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.6rem; } .influence-card__title { font-family: var(--font-display); font-size: 1.1rem; color: var(--text); margin-bottom: 0.5rem; } .highlight-band { background: var(--bg-soft); } .highlight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-top: 2.5rem; } .highlight-item { display: flex; gap: 1rem; } .highlight-item__icon { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border: 1px solid var(--accent); display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 1rem; margin-top: 0.1rem; } .highlight-item__title { font-family: var(--font-display); font-size: 1.05rem; color: var(--text); margin-bottom: 0.3rem; } .highlight-item__text { font-size: 0.9rem; color: var(--text-muted); } .photo-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 3rem; } .photo-strip img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center top; filter: grayscale(20%) brightness(0.95); transition: filter 0.4s ease; } .photo-strip img:hover { filter: grayscale(0%) brightness(1); } .projects-list { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; } .project-item { padding-bottom: 1.5rem; } .project-item__title { font-family: var(--font-display); font-size: 1.1rem; color: var(--text); margin-bottom: 0.3rem; } .project-item__text { font-size: 0.9rem; color: var(--text-muted); } .project-item + .project-item { padding-top: 1.5rem; border-top: 1px solid var(--border); } .contact-section { background: var(--bg-soft); } .contact-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 4rem; align-items: flex-start; margin-top: 2.5rem; } .contact-aside__text { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 1.5rem; } .contact-aside__note { font-size: 0.8rem; color: var(--text-muted); opacity: 0.6; line-height: 1.5; } .form-group { margin-bottom: 1.2rem; } .form-group label { display: block; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.45rem; } .form-group input, .form-group textarea, .form-group select { width: 100%; background: var(--bg-card); border: 1px solid var(--border); color: var(--text); font-family: var(--font-body); font-size: 0.95rem; padding: 0.75rem 1rem; border-radius: var(--radius); outline: none; transition: border-color 0.25s; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--accent); } .form-group textarea { resize: vertical; min-height: 130px; } .hp-field { display: none !important; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .btn-submit { display: inline-flex; align-items: center; gap: 0.5rem; background: transparent; border: 1px solid var(--accent); color: var(--accent); font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.85rem 2.2rem; cursor: pointer; transition: background 0.25s, color 0.25s; border-radius: var(--radius); } .btn-submit:hover { background: var(--accent); color: #0d0d0d; } .form-msg { padding: 0.9rem 1.2rem; border-radius: var(--radius); font-size: 0.9rem; margin-bottom: 1.2rem; } .form-msg--ok { background: #162016; border: 1px solid #2d5a2d; color: #7ac97a; } .form-msg--err { background: #1f1212; border: 1px solid #5a2d2d; color: #c97a7a; } .field-error { font-size: 0.78rem; color: #c97a7a; margin-top: 0.3rem; } .media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-top: 2.5rem; align-items: start; } .media-block__label { font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.75rem; } .video-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; } .video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } @media (max-width: 640px) { .media-grid { grid-template-columns: 1fr; } } footer { border-top: 1px solid var(--border); padding: 2.5rem 0; text-align: center; } .footer__social { display: flex; justify-content: center; gap: 2rem; margin-bottom: 1.2rem; } .footer__social a { font-size: 0.78rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); text-decoration: none; transition: color 0.2s; } .footer__social a:hover { color: var(--accent); } .footer__credits { font-size: 0.72rem; color: var(--text-muted); opacity: 0.55; line-height: 1.8; } .footer__credits a { color: var(--text-muted); opacity: 0.8; text-decoration: none; } .footer__credits a:hover { opacity: 1; } @media (max-width: 959px) { .profile { grid-template-columns: 1fr; } .profile__img-wrap { max-width: 320px; margin: 0 auto; } .highlight-grid { grid-template-columns: 1fr; } .contact-grid { grid-template-columns: 1fr; gap: 2rem; } .photo-strip { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } } @media (max-width: 480px) { section { padding: 3.5rem 0; } } .legal-header { padding: 4rem 0 2.5rem; border-bottom: 1px solid var(--border); } .legal-back { display: inline-block; font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1.5rem; text-decoration: none; transition: color 0.2s; } .legal-back:hover { color: var(--accent); text-decoration: none; } .legal-title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; color: var(--text); } .legal-sub { margin-top: 0.4rem; font-size: 0.8rem; color: var(--text-muted); } .legal-body { padding-top: 3rem; padding-bottom: 5rem; max-width: 720px; } .legal-section { margin-bottom: 3rem; } .legal-section h2 { font-family: var(--font-display); font-size: 1.25rem; color: var(--accent); margin-bottom: 0.8rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border); } .legal-section h3 { font-size: 0.95rem; font-weight: 500; color: var(--text); margin: 1.2rem 0 0.4rem; } .legal-section p, .legal-section address { font-size: 0.93rem; color: var(--text-muted); line-height: 1.75; font-style: normal; margin-bottom: 0.8rem; } .legal-section ul { margin: 0.5rem 0 0.8rem 1.5rem; color: var(--text-muted); font-size: 0.93rem; line-height: 1.75; } .legal-section a { color: var(--accent); } .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.65s ease, transform 0.65s ease; } .reveal.visible { opacity: 1; transform: none; }