diff --git a/public/css/style.css b/public/css/style.css index 3350b86..2168e49 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1,13 +1,14 @@ :root { - --bg: #ffffff; - --bg-alt: #f7f7f7; - --text: #1a1a1a; - --muted: #4a4a4a; - --accent: #d12020; - --accent-2: #dc0000; + --bg: #fff7f7; + --bg-alt: #ffecec; + --bg-deep: #2a0f0f; + --text: #1f1414; + --muted: #5a4242; + --accent: #c81919; + --accent-2: #e12a2a; --card: #ffffff; - --border: #e6e6e6; - --shadow: 0 10px 30px rgba(0,0,0,0.08); + --border: #f0caca; + --shadow: 0 12px 30px rgba(90, 15, 15, 0.12); } * { box-sizing: border-box; } @@ -16,53 +17,62 @@ html, body { margin: 0; padding: 0; } body { font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--text); - background: var(--bg); - line-height: 1.68; + background: + radial-gradient(900px 400px at 100% -5%, rgba(200, 25, 25, 0.12), transparent 60%), + radial-gradient(700px 300px at 0% 30%, rgba(225, 42, 42, 0.08), transparent 60%), + var(--bg); + line-height: 1.75; letter-spacing: 0.01em; + font-size: 17px; overflow-x: hidden; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; } -.container { width: min(1200px, calc(100% - 2rem)); margin-inline: auto; } -.section { padding: 5rem 0; } -.section-alt { background: var(--bg-alt); } +.container { width: min(1180px, calc(100% - 2.25rem)); margin-inline: auto; } +.section { padding: 5.75rem 0; } +.section-alt { + background: linear-gradient(180deg, #fff1f1 0%, #ffe8e8 100%); + border-top: 1px solid #f6d1d1; + border-bottom: 1px solid #f6d1d1; +} -h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -0.01em; } -p { margin: 0 0 1rem; } +h1, h2, h3, h4 { line-height: 1.18; letter-spacing: -0.015em; } +p { margin: 0 0 1.1rem; font-size: 1.06rem; color: var(--text); } .site-header { position: sticky; top: 0; z-index: 999; - background: rgba(255,255,255,.88); + background: rgba(255, 245, 245, 0.88); backdrop-filter: blur(10px); - border-bottom: 1px solid rgba(0,0,0,0.05); + border-bottom: 1px solid rgba(200, 25, 25, 0.16); transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease; } .site-header.is-scrolled { - background: rgba(255,255,255,.98); - border-bottom-color: rgba(0,0,0,0.08); - box-shadow: 0 10px 24px rgba(0,0,0,0.08); + background: rgba(255, 242, 242, 0.97); + border-bottom-color: rgba(200, 25, 25, 0.28); + box-shadow: 0 10px 24px rgba(88, 12, 12, 0.16); } .nav-wrap { display: flex; align-items: center; justify-content: space-between; - min-height: 78px; + min-height: 84px; gap: 1rem; } -.brand { display: inline-flex; align-items: center; gap: .65rem; font-weight: 700; flex-shrink: 0; } -.brand img { width: 44px; height: 44px; object-fit: contain; } +.brand { display: inline-flex; align-items: center; gap: .65rem; font-weight: 800; flex-shrink: 0; } +.brand img { width: 46px; height: 46px; object-fit: contain; } +.brand span { font-size: 1.05rem; } .site-nav { display: flex; align-items: center; - gap: .9rem; + gap: 1.2rem; justify-content: flex-end; flex-wrap: nowrap; min-width: 0; @@ -71,165 +81,212 @@ p { margin: 0 0 1rem; } .nav-links { display: flex; align-items: center; - gap: .4rem; + gap: 1rem; flex-wrap: nowrap; min-width: 0; } -.nav-links a, -.site-nav > a { - color: var(--muted); - font-weight: 600; - font-size: .95rem; +.nav-links a { + color: #5a3f3f; + font-weight: 700; + font-size: 1rem; line-height: 1; - padding: .62rem .9rem; - border-radius: 999px; - border: 1px solid transparent; + padding: .4rem .1rem; + border-radius: 0; + border-bottom: 2px solid transparent; white-space: nowrap; - transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease; + transition: color .2s ease, border-color .2s ease, transform .2s ease; } -.nav-links a:hover, -.site-nav > a:hover { +.nav-links a:hover { color: var(--accent); - background: rgba(209,32,32,.08); - border-color: rgba(209,32,32,.16); + border-bottom-color: rgba(200, 25, 25, 0.5); + transform: translateY(-1px); } -.nav-links a.active, -.site-nav > a.active { +.nav-links a.active { color: var(--accent); - background: rgba(209,32,32,.12); - border-color: rgba(209,32,32,.2); + border-bottom-color: var(--accent); } .nav-cta { display: inline-flex; align-items: center; justify-content: center; - padding: .64rem 1rem; + padding: .7rem 1.1rem; border-radius: 999px; - border: 1px solid rgba(209,32,32,.35); - background: linear-gradient(180deg, #ffffff, #fff8f8); - color: var(--accent); - font-weight: 700; + border: 1px solid #b71414; + background: linear-gradient(180deg, #df2a2a 0%, #bf1616 100%); + color: #fff; + font-weight: 800; white-space: nowrap; - transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; + box-shadow: 0 8px 16px rgba(161, 14, 14, 0.22); + transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; } .nav-cta:hover { - background: #fff3f3; - border-color: rgba(209,32,32,.52); - box-shadow: 0 8px 16px rgba(209,32,32,.18); transform: translateY(-1px); + box-shadow: 0 10px 20px rgba(161, 14, 14, 0.3); + filter: saturate(1.05); } .mobile-toggle { display: none; border: 1px solid transparent; border-radius: 10px; background: transparent; padding: .3rem .35rem; } -.mobile-toggle span { display: block; width: 22px; height: 2px; background: #222; margin: 5px 0; border-radius: 2px; } +.mobile-toggle span { display: block; width: 22px; height: 2px; background: #5a1a1a; margin: 5px 0; border-radius: 2px; } -.hero { padding: 6rem 0 4rem; position: relative; overflow: clip; } -.hero-bg { position: absolute; inset: 0; background: radial-gradient(700px 350px at 70% -30%, rgba(209,32,32,.12), transparent), radial-gradient(500px 280px at 20% 0%, rgba(220,0,0,.08), transparent); } -.hero-orb { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .35; pointer-events: none; animation: drift 10s ease-in-out infinite alternate; } -.hero-orb-1 { width: 260px; height: 260px; right: -70px; top: 60px; background: radial-gradient(circle at 30% 30%, #ff6a6a, #d12020); } -.hero-orb-2 { width: 180px; height: 180px; left: -60px; bottom: 20px; background: radial-gradient(circle at 30% 30%, #ffb2b2, #dc0000); animation-duration: 14s; } +.hero { padding: 6rem 0 4.5rem; position: relative; overflow: clip; } +.hero-bg { position: absolute; inset: 0; background: radial-gradient(700px 350px at 70% -30%, rgba(209,32,32,.18), transparent), radial-gradient(500px 280px at 20% 0%, rgba(220,0,0,.12), transparent); } +.hero-orb { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .4; pointer-events: none; animation: drift 10s ease-in-out infinite alternate; } +.hero-orb-1 { width: 260px; height: 260px; right: -70px; top: 60px; background: radial-gradient(circle at 30% 30%, #ff7777, #c81919); } +.hero-orb-2 { width: 180px; height: 180px; left: -60px; bottom: 20px; background: radial-gradient(circle at 30% 30%, #ffc0c0, #e12a2a); animation-duration: 14s; } @keyframes drift { from { transform: translateY(-8px); } to { transform: translateY(14px); } } -.hero-grid { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: center; } -.eyebrow { color: var(--accent); font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } -h1 { font-size: clamp(2.2rem, 5vw, 4rem); margin: .25rem 0 .85rem; } -h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin: 0 0 .8rem; } -.lead { color: var(--muted); font-size: 1.08rem; max-width: 68ch; } -.hero-actions { display: flex; gap: .8rem; margin-top: 1.35rem; flex-wrap: wrap; } +.hero-grid { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.2rem; align-items: center; } +.eyebrow { color: var(--accent); font-size: .9rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } +h1 { font-size: clamp(2.45rem, 5.3vw, 4.2rem); margin: .25rem 0 .95rem; } +h2 { font-size: clamp(2rem, 3.6vw, 2.85rem); margin: 0 0 1rem; } +h3 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); margin: 0 0 .65rem; } +.lead { color: var(--muted); font-size: 1.18rem; max-width: 68ch; } +.hero-actions { display: flex; gap: .85rem; margin-top: 1.5rem; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; justify-content: center; - padding: .78rem 1.15rem; + padding: .84rem 1.2rem; border-radius: 999px; border: 1px solid transparent; - font-weight: 600; + font-weight: 700; transition: .25s ease; } .btn-primary { background: var(--accent); color: #fff; } -.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(209,32,32,.3); } -.btn-ghost { border-color: #ccc; background: #fff; } -.btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: #fff8f8; } +.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(160, 22, 22, .33); } +.btn-ghost { border-color: #e4b1b1; background: #fff5f5; color: #7a2222; } +.btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: #ffeaea; } +/* Less card fragmentation: default cards are lighter and blend into the narrative flow */ .glass-card { - background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.98)); + background: transparent; + border: 0; + border-radius: 0; + padding: 0; + box-shadow: none; + transition: transform .25s ease; +} + +/* Panels only where structure is useful */ +.media-card, +.video-frame, +.stat-card, +.news-card, +.quote-card, +.cta-card, +.profile-card, +.team-card, +.inquiry-form { + background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .98)); border: 1px solid var(--border); border-radius: 18px; - padding: 1.25rem; box-shadow: var(--shadow); - transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease; + padding: 1.25rem; } -.glass-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.11); border-color: #dcdcdc; } + .media-card { padding: .75rem; } .media-card img { border-radius: 12px; width: 100%; object-fit: cover; } .video-frame { padding: .5rem; } .video-frame iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 12px; } -.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.2rem; } -.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.2rem; } -.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: center; } -.page-hero { padding: 5.2rem 0 1.8rem; } +.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.3rem; } +.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.3rem; } +.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; align-items: start; } +.page-hero { padding: 5.4rem 0 2rem; } .stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; } -.stat-card h3 { font-size: 2rem; margin: .2rem 0; color: var(--accent); } +.stat-card h3 { font-size: 2.25rem; margin: .1rem 0; color: var(--accent); } .chip-list { display: flex; flex-wrap: wrap; gap: .55rem; } -.chip { border: 1px solid #f0b7b7; background: #fff5f5; color: #961717; padding: .45rem .7rem; border-radius: 999px; font-weight: 600; font-size: .9rem; } -.cta-card { text-align: center; } -.text-link { color: var(--accent); font-weight: 600; } +.chip { border: 1px solid #efb2b2; background: #ffecec; color: #961717; padding: .46rem .74rem; border-radius: 999px; font-weight: 700; font-size: .95rem; } +.cta-card { text-align: left; } +.cta-card h2 { margin-bottom: .65rem; } +.text-link { color: var(--accent); font-weight: 700; } +.text-link:hover { text-decoration: underline; } -.gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .85rem; } -.gallery-grid img { border-radius: 12px; min-height: 150px; object-fit: cover; border: 1px solid var(--border); } -.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; } +.gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .9rem; } +.gallery-grid img { border-radius: 12px; min-height: 170px; object-fit: cover; border: 1px solid var(--border); } +.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.1rem; } .team-card img { border-radius: 12px; margin-bottom: .75rem; height: 260px; width: 100%; object-fit: cover; } -.profile-card { max-width: 820px; } -.profile-card img { width: 220px; height: 220px; border-radius: 24px; object-fit: cover; margin-bottom: 1rem; } +.profile-card { max-width: 860px; } +.profile-card img { width: 220px; height: 220px; border-radius: 20px; object-fit: cover; margin-bottom: 1rem; } -.timeline { display: grid; gap: 1rem; } -.news-card .date, .date { color: #a61c1c; font-weight: 700; font-size: .9rem; } -.quote-card p { font-size: 1.05rem; } +.timeline { + display: grid; + gap: 1.15rem; + position: relative; + padding-left: 1.4rem; +} +.timeline::before { + content: ""; + position: absolute; + left: .4rem; + top: .25rem; + bottom: .25rem; + width: 2px; + background: linear-gradient(180deg, rgba(200,25,25,.5), rgba(200,25,25,.12)); +} +.news-card { + position: relative; + padding-left: 1.25rem; +} +.news-card::before { + content: ""; + position: absolute; + left: -.75rem; + top: 1.15rem; + width: .7rem; + height: .7rem; + border-radius: 50%; + background: var(--accent); + box-shadow: 0 0 0 4px rgba(200, 25, 25, .14); +} +.news-card .date, .date { color: #a61c1c; font-weight: 800; font-size: .95rem; } +.quote-card p { font-size: 1.14rem; line-height: 1.7; } -.inquiry-form label { display: block; font-weight: 500; margin-bottom: .85rem; } +.inquiry-form label { display: block; font-weight: 600; margin-bottom: .95rem; } .inquiry-form input, .inquiry-form textarea, .inquiry-form select { width: 100%; margin-top: .35rem; - padding: .72rem .85rem; + padding: .78rem .9rem; border-radius: 12px; - border: 1px solid #ccc; + border: 1px solid #d6b3b3; background: #fff; color: var(--text); + font-size: 1rem; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; } .inquiry-form input:hover, .inquiry-form textarea:hover, -.inquiry-form select:hover { border-color: #b8b8b8; } +.inquiry-form select:hover { border-color: #bf9a9a; } -.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; } -.alert { margin-top: 1rem; padding: .8rem .9rem; border: 1px solid #f0b3b3; background: #fff1f1; color: #b42323; border-radius: 12px; } -.form-status { margin-top: .8rem; font-weight: 600; } +.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } +.alert { margin-top: 1rem; padding: .8rem .95rem; border: 1px solid #f0b3b3; background: #fff1f1; color: #b42323; border-radius: 12px; } +.form-status { margin-top: .8rem; font-weight: 700; } .form-status.success { color: #146c2f; } .form-status.error { color: #b42323; } .form-status.pending { color: #8a5a00; } .site-footer { - border-top: 1px solid #2a2a2a; + border-top: 1px solid #4b1616; margin-top: 3.5rem; - padding-top: 2.7rem; - background: #1a1a1a; - color: #f2f2f2; + padding-top: 2.9rem; + background: linear-gradient(180deg, #2f1010, #1a0909); + color: #f9eded; } -.footer-grid { display: grid; grid-template-columns: 1.2fr .8fr 1fr; gap: 1.3rem; } +.footer-grid { display: grid; grid-template-columns: 1.2fr .8fr 1fr; gap: 1.4rem; } .footer-links { list-style: none; padding: 0; margin: 0; } -.footer-links li { margin: .5rem 0; color: #bdbdbd; } +.footer-links li { margin: .54rem 0; color: #e1bcbc; } .footer-links a:hover { color: #ffffff; } -.footer-bottom { padding: 1.3rem 0 1.9rem; color: #bdbdbd; } -.legal { color: #bdbdbd; } +.footer-bottom { padding: 1.3rem 0 1.9rem; color: #dcb7b7; } +.legal { color: #dcb7b7; } .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } @@ -241,10 +298,10 @@ button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { - outline: 3px solid rgba(209,32,32,.28); + outline: 3px solid rgba(200, 25, 25, .28); outline-offset: 2px; - box-shadow: 0 0 0 1px rgba(209,32,32,.36); - border-color: rgba(209,32,32,.5); + box-shadow: 0 0 0 1px rgba(200, 25, 25, .36); + border-color: rgba(200, 25, 25, .5); } @media (max-width: 980px) { @@ -254,14 +311,14 @@ select:focus-visible { .site-nav { position: absolute; - top: 78px; + top: 82px; right: 1rem; left: 1rem; - background: rgba(255,255,255,.98); - border: 1px solid var(--border); - box-shadow: 0 14px 35px rgba(0,0,0,.14); + background: rgba(255, 244, 244, .99); + border: 1px solid #f0cccc; + box-shadow: 0 14px 35px rgba(87, 13, 13, .2); border-radius: 16px; - padding: .85rem; + padding: .9rem; flex-direction: column; align-items: stretch; gap: .7rem; @@ -284,17 +341,33 @@ select:focus-visible { width: 100%; flex-direction: column; align-items: stretch; - gap: .4rem; + gap: .25rem; + } + + .nav-links a { + width: 100%; + text-align: left; + padding: .75rem .7rem; + border-bottom: 0; + border-left: 3px solid transparent; + border-radius: 10px; + background: #fff; + } + + .nav-links a:hover, + .nav-links a.active { + border-left-color: var(--accent); + background: #fff0f0; } - .nav-links a, - .site-nav > a, .nav-cta { width: 100%; justify-content: center; text-align: center; border-radius: 12px; + margin-top: .25rem; } - .section { padding: 4rem 0; } + .section { padding: 4.25rem 0; } + body { font-size: 16.5px; } }