diff --git a/arcade.html b/arcade.html
index 4d4dcfd..daf2fae 100644
--- a/arcade.html
+++ b/arcade.html
@@ -6,7 +6,7 @@
Retro Arcade — The Fat Dragon
-
+
diff --git a/board-games.html b/board-games.html
index bbb2fec..e753e80 100644
--- a/board-games.html
+++ b/board-games.html
@@ -6,7 +6,7 @@
Board & Card Games — The Fat Dragon
-
+
diff --git a/book-now/arcade.html b/book-now/arcade.html
index 6120138..6d2d67d 100644
--- a/book-now/arcade.html
+++ b/book-now/arcade.html
@@ -6,7 +6,7 @@
Book the Arcade — The Fat Dragon
-
+
diff --git a/book-now/dnd.html b/book-now/dnd.html
index 6298f66..6ea5729 100644
--- a/book-now/dnd.html
+++ b/book-now/dnd.html
@@ -6,7 +6,7 @@
Book a D&D Session — The Fat Dragon
-
+
diff --git a/book-now/index.html b/book-now/index.html
index bd7fbbd..b41e05e 100644
--- a/book-now/index.html
+++ b/book-now/index.html
@@ -6,7 +6,7 @@
Book Now — The Fat Dragon
-
+
diff --git a/book-now/table-games.html b/book-now/table-games.html
index 1430690..c090036 100644
--- a/book-now/table-games.html
+++ b/book-now/table-games.html
@@ -6,7 +6,7 @@
Book a Table — The Fat Dragon
-
+
diff --git a/css/style.css b/css/style.css
index afa4583..242d07c 100644
--- a/css/style.css
+++ b/css/style.css
@@ -9,28 +9,61 @@ button, input, select, textarea {
/* ── TOKENS ─────────────────────────────────────────── */
:root {
- --bg: #0c0a08;
- --bg-2: #131008;
- --bg-card: #1c1710;
- --bg-form: #221c14;
- --border: #2e2418;
- --border-lt: #3e3428;
- --gold: #d4900a;
- --gold-lt: #f0b428;
- --gold-dk: #9a6a08;
- --gold-glow: rgba(212,144,10,.18);
- --crimson: #b83020;
- --amber: #e07818;
- --text: #ede8e2;
- --text-2: #c0b8ae;
- --muted: #8a8078;
- --radius: 6px;
- --radius-lg: 10px;
- --shadow: 0 4px 24px rgba(0,0,0,.5);
- --font-brand: 'Cinzel Decorative', serif;
- --font-ui: 'Orbitron', monospace;
- --font-body: 'Inter', system-ui, sans-serif;
- --nav-h: 64px;
+ /* Warm cream palette — matched from Lovable design tokens */
+ --bg: hsl(30, 25%, 96%); /* #f5ede3 warm cream */
+ --bg-2: hsl(35, 30%, 92%); /* slightly deeper warm cream */
+ --bg-card: hsl(30, 20%, 93%); /* #eee3d9 card surface */
+ --bg-dark: hsl(30, 15%, 88%); /* warm light gray */
+ --border: hsl(30, 20%, 82%); /* #d4c4b4 warm beige border */
+ --border-dk: hsl(30, 18%, 72%); /* deeper warm border */
+
+ /* Primary: warm rust/terracotta */
+ --primary: hsl(25, 65%, 38%); /* #9f4d1a */
+ --primary-lt: hsl(25, 65%, 46%); /* hover */
+ --primary-fg: hsl(40, 30%, 96%); /* text on primary bg */
+
+ /* Accent: warm amber gold */
+ --gold: hsl(38, 80%, 55%); /* #e8a32a amber gold */
+ --gold-lt: hsl(38, 85%, 63%);
+ --gold-dk: hsl(35, 70%, 40%);
+ --gold-soft: hsl(38, 80%, 55%, .12);
+
+ /* Warm neutral tones */
+ --warm-brown: hsl(25, 40%, 25%); /* dark warm brown */
+ --warm-wood: hsl(25, 35%, 35%); /* medium wood tone */
+ --warm-amber: hsl(30, 70%, 45%); /* amber */
+
+ /* Text */
+ --text: hsl(25, 30%, 12%); /* #281d15 very dark brown */
+ --text-2: hsl(25, 20%, 30%); /* medium warm brown */
+ --muted: hsl(25, 10%, 45%); /* #7a7268 warm gray-brown */
+ --muted-lt: hsl(25, 8%, 60%);
+
+ /* Arcade section — dark purple exception */
+ --arc-bg: hsl(270, 55%, 10%); /* #1a0a30 very dark purple */
+ --arc-surface: hsl(268, 50%, 14%); /* #231435 */
+ --arc-border: hsl(270, 45%, 28%); /* #3d1a6e */
+ --arc-accent: hsl(270, 90%, 70%); /* #a855f7 bright purple */
+ --arc-muted: hsl(268, 40%, 75%);
+ --arc-fg: hsl(270, 100%, 97%);
+
+ /* Booking category colors */
+ --book-dnd: hsl(5, 35%, 50%); /* warm red/rust */
+ --book-arc: hsl(280, 70%, 55%); /* purple */
+ --book-tbl: hsl(145, 55%, 38%); /* forest green */
+
+ /* Typography */
+ --font-heading: 'Playfair Display', Georgia, serif;
+ --font-body: 'Inter', system-ui, sans-serif;
+
+ /* Spacing / shape */
+ --radius: 0.75rem;
+ --radius-sm: 0.5rem;
+ --radius-lg: 1rem;
+ --nav-h: 64px;
+ --shadow-sm: 0 1px 3px rgba(40, 20, 10, .08), 0 1px 2px rgba(40, 20, 10, .06);
+ --shadow: 0 4px 12px rgba(40, 20, 10, .10), 0 2px 4px rgba(40, 20, 10, .06);
+ --shadow-lg: 0 10px 30px rgba(40, 20, 10, .14), 0 4px 8px rgba(40, 20, 10, .08);
}
/* ── BASE ────────────────────────────────────────────── */
@@ -45,34 +78,39 @@ body {
}
/* ── TYPOGRAPHY ─────────────────────────────────────── */
-h1, h2, h3 { line-height: 1.2; }
-.brand-font { font-family: var(--font-brand); }
-.ui-font { font-family: var(--font-ui); }
+h1, h2, h3, h4 {
+ font-family: var(--font-heading);
+ line-height: 1.25;
+ color: var(--text);
+}
.label {
- font-family: var(--font-ui);
- font-size: .6rem; letter-spacing: .3em; text-transform: uppercase;
- color: var(--gold); display: block; margin-bottom: .5rem;
+ font-size: .72rem;
+ font-weight: 600;
+ letter-spacing: .12em;
+ text-transform: uppercase;
+ color: var(--primary);
+ display: block;
+ margin-bottom: .5rem;
}
.page-title {
- font-family: var(--font-brand);
- font-size: clamp(1.8rem, 5vw, 3rem);
- color: var(--text);
+ font-size: clamp(1.9rem, 5vw, 3rem);
+ font-weight: 700;
+ margin-bottom: .75rem;
}
.section-title {
- font-family: var(--font-brand);
- font-size: clamp(1.5rem, 3.5vw, 2.4rem);
- color: var(--text);
+ font-size: clamp(1.5rem, 3.5vw, 2.25rem);
+ font-weight: 700;
margin-bottom: .75rem;
}
.section-desc {
- color: var(--text-2);
+ color: var(--muted);
font-size: .97rem;
line-height: 1.75;
- max-width: 500px;
+ max-width: 520px;
}
/* ── LAYOUT ──────────────────────────────────────────── */
@@ -83,6 +121,11 @@ h1, h2, h3 { line-height: 1.2; }
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
+.section--dark {
+ background: var(--arc-bg);
+ border-color: var(--arc-border);
+ color: var(--arc-fg);
+}
.two-col {
display: grid;
@@ -99,21 +142,22 @@ h1, h2, h3 { line-height: 1.2; }
height: var(--nav-h);
display: flex; align-items: center; justify-content: space-between;
padding: 0 2.5rem;
- background: rgba(12,10,8,.88);
+ background: rgba(245, 237, 227, .92);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border);
}
.nav-logo {
text-decoration: none;
- font-family: var(--font-brand);
- font-size: .95rem;
- color: var(--gold);
- letter-spacing: .04em;
+ font-family: var(--font-heading);
+ font-size: 1.15rem;
+ font-weight: 700;
+ color: var(--text);
display: flex; align-items: center; gap: .5rem;
white-space: nowrap;
}
-.nav-logo .dragon { font-size: 1.5rem; }
+.nav-logo .dragon { font-size: 1.4rem; }
+.nav-logo span:last-child { color: var(--primary); }
.nav-links {
display: flex; align-items: center; gap: 2rem;
@@ -121,35 +165,34 @@ h1, h2, h3 { line-height: 1.2; }
}
.nav-links a {
text-decoration: none;
- font-size: .78rem; font-weight: 500;
- letter-spacing: .1em; text-transform: uppercase;
- color: var(--text-2);
+ font-size: .875rem;
+ font-weight: 500;
+ color: var(--muted);
transition: color .18s;
}
.nav-links a:hover,
-.nav-links a[aria-current="page"] { color: var(--gold); }
+.nav-links a[aria-current="page"] { color: var(--primary); }
-.nav-right {
- display: flex; align-items: center; gap: 1.25rem;
-}
+.nav-right { display: flex; align-items: center; gap: 1.25rem; }
.nav-find {
text-decoration: none;
- font-size: .78rem; color: var(--muted);
+ font-size: .875rem;
+ color: var(--muted);
transition: color .18s;
}
-.nav-find:hover { color: var(--gold); }
+.nav-find:hover { color: var(--primary); }
/* hamburger */
.nav-toggle {
display: none;
flex-direction: column; gap: 5px;
cursor: pointer; padding: 4px;
- background: none; border: none;
}
.nav-toggle span {
display: block; width: 22px; height: 2px;
- background: var(--text-2);
+ background: var(--text);
+ border-radius: 2px;
transition: all .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
@@ -158,122 +201,157 @@ h1, h2, h3 { line-height: 1.2; }
/* ── BUTTONS ─────────────────────────────────────────── */
.btn {
- display: inline-flex; align-items: center; gap: .45rem;
- padding: .7rem 1.5rem; border-radius: var(--radius);
- font-size: .82rem; font-weight: 600;
- letter-spacing: .08em; text-transform: uppercase;
+ display: inline-flex; align-items: center; gap: .5rem;
+ padding: .65rem 1.5rem;
+ border-radius: var(--radius);
+ font-size: .875rem; font-weight: 600;
text-decoration: none; cursor: pointer;
transition: all .2s;
+ white-space: nowrap;
+}
+.btn-primary {
+ background: var(--primary);
+ color: var(--primary-fg);
+}
+.btn-primary:hover {
+ background: var(--primary-lt);
+ transform: translateY(-1px);
+ box-shadow: var(--shadow);
}
.btn-gold {
- background: var(--gold); color: #000;
+ background: var(--gold);
+ color: hsl(25, 30%, 10%);
}
.btn-gold:hover {
background: var(--gold-lt);
- transform: translateY(-2px);
- box-shadow: 0 6px 20px rgba(212,144,10,.4);
+ transform: translateY(-1px);
+ box-shadow: 0 4px 14px hsla(38, 80%, 55%, .35);
}
.btn-outline {
- background: transparent; color: var(--text);
- border: 1px solid var(--border-lt);
+ background: transparent;
+ color: var(--text);
+ border: 1.5px solid var(--border-dk);
}
.btn-outline:hover {
- border-color: var(--gold); color: var(--gold);
- transform: translateY(-2px);
+ border-color: var(--primary);
+ color: var(--primary);
+ background: hsl(25, 65%, 38%, .05);
+ transform: translateY(-1px);
}
-.btn-sm { padding: .45rem 1rem; font-size: .75rem; }
+.btn-outline-light {
+ background: transparent;
+ color: var(--arc-fg);
+ border: 1.5px solid var(--arc-border);
+}
+.btn-outline-light:hover {
+ border-color: var(--arc-accent);
+ color: var(--arc-accent);
+ transform: translateY(-1px);
+}
+.btn-sm { padding: .45rem 1.1rem; font-size: .8rem; }
+.btn-lg { padding: .85rem 2rem; font-size: 1rem; }
/* ── BADGE / PILL ────────────────────────────────────── */
.badge {
- display: inline-block;
- font-family: var(--font-ui);
- font-size: .58rem; letter-spacing: .25em; text-transform: uppercase;
- padding: .3rem .9rem; border-radius: 3px;
+ display: inline-flex; align-items: center;
+ font-size: .72rem; font-weight: 600;
+ letter-spacing: .06em;
+ padding: .3rem .85rem;
+ border-radius: 999px;
}
-.badge-gold {
- background: rgba(212,144,10,.1);
- border: 1px solid rgba(212,144,10,.35);
- color: var(--gold);
+.badge-warm {
+ background: hsl(38, 80%, 55%, .15);
+ color: hsl(35, 70%, 35%);
+ border: 1px solid hsl(38, 80%, 55%, .3);
+}
+.badge-primary {
+ background: hsl(25, 65%, 38%, .1);
+ color: var(--primary);
+ border: 1px solid hsl(25, 65%, 38%, .25);
}
.badge-purple {
- background: rgba(109,40,217,.12);
- border: 1px solid rgba(109,40,217,.35);
- color: #b8a0f8;
+ background: hsl(270, 70%, 60%, .15);
+ color: hsl(270, 70%, 70%);
+ border: 1px solid hsl(270, 70%, 60%, .3);
}
-.badge-red {
- background: rgba(184,48,32,.12);
- border: 1px solid rgba(184,48,32,.35);
- color: #f08070;
+.badge-green {
+ background: hsl(145, 55%, 38%, .12);
+ color: hsl(145, 45%, 30%);
+ border: 1px solid hsl(145, 55%, 38%, .25);
+}
+.badge-dnd {
+ background: hsl(5, 35%, 50%, .12);
+ color: hsl(5, 45%, 42%);
+ border: 1px solid hsl(5, 35%, 50%, .25);
}
/* ── HERO ────────────────────────────────────────────── */
.hero {
position: relative;
- min-height: 100vh;
+ min-height: 90vh;
display: flex; align-items: center; justify-content: center; text-align: center;
padding: calc(var(--nav-h) + 4rem) 1.5rem 5rem;
overflow: hidden;
-}
-
-.hero-bg {
- position: absolute; inset: 0; z-index: 0;
background:
- radial-gradient(ellipse 70% 50% at 50% 110%, rgba(109,40,217,.16) 0%, transparent 68%),
- radial-gradient(ellipse 50% 40% at 10% 60%, rgba(184,48,32,.1) 0%, transparent 65%),
- radial-gradient(ellipse 50% 40% at 90% 60%, rgba(212,144,10,.07) 0%, transparent 65%),
- linear-gradient(180deg, #0c0a08 0%, #100e06 55%, #0c0a08 100%);
+ radial-gradient(ellipse 70% 50% at 50% 100%, hsl(25, 65%, 38%, .08) 0%, transparent 70%),
+ radial-gradient(ellipse 60% 60% at 20% 50%, hsl(38, 80%, 55%, .06) 0%, transparent 65%),
+ linear-gradient(180deg, var(--bg) 0%, hsl(30, 22%, 93%) 50%, var(--bg) 100%);
}
-.hero-bg::after {
+.hero::before {
content: '';
position: absolute; inset: 0;
background-image:
- radial-gradient(circle, rgba(212,144,10,.5) 1px, transparent 1px),
- radial-gradient(circle, rgba(212,144,10,.2) 1px, transparent 1px);
- background-size: 52px 52px, 88px 88px;
- background-position: 0 0, 26px 26px;
- opacity: .1;
- animation: drift 35s linear infinite;
+ radial-gradient(circle, hsl(38, 80%, 55%, .3) 1px, transparent 1px),
+ radial-gradient(circle, hsl(38, 80%, 55%, .15) 1px, transparent 1px);
+ background-size: 56px 56px, 96px 96px;
+ background-position: 0 0, 28px 28px;
+ opacity: .5;
}
-@keyframes drift { to { transform: translateY(-80px); } }
-.hero-body { position: relative; z-index: 1; max-width: 820px; }
+.hero-body { position: relative; z-index: 1; max-width: 760px; }
.hero-icon {
font-size: 5rem; line-height: 1; display: block;
- margin-bottom: 1rem;
- filter: drop-shadow(0 0 24px rgba(212,144,10,.5));
- animation: glow 3.5s ease-in-out infinite;
+ margin-bottom: 1.25rem;
+ filter: drop-shadow(0 4px 16px hsl(25, 65%, 38%, .3));
+ animation: float 4s ease-in-out infinite;
}
-@keyframes glow {
- 0%,100% { filter: drop-shadow(0 0 18px rgba(212,144,10,.4)); }
- 50% { filter: drop-shadow(0 0 44px rgba(212,144,10,.85)) drop-shadow(0 0 60px rgba(184,48,32,.3)); }
+@keyframes float {
+ 0%,100% { transform: translateY(0); }
+ 50% { transform: translateY(-8px); }
}
.hero-title {
- font-family: var(--font-brand);
- font-size: clamp(2.5rem, 8vw, 5rem);
- color: var(--gold);
- text-shadow: 0 0 50px rgba(212,144,10,.3);
- margin-bottom: .4rem;
+ font-family: var(--font-heading);
+ font-size: clamp(2.75rem, 8vw, 5.5rem);
+ font-weight: 700;
+ color: var(--text);
+ letter-spacing: -.02em;
+ margin-bottom: .3rem;
}
+.hero-title .accent { color: var(--primary); }
+
.hero-place {
- font-family: var(--font-ui);
- font-size: clamp(.68rem, 1.6vw, .9rem);
+ font-size: .9rem;
+ font-weight: 500;
color: var(--muted);
- letter-spacing: .35em; text-transform: uppercase;
+ letter-spacing: .12em;
+ text-transform: uppercase;
margin-bottom: 1.5rem;
}
.hero-copy {
- font-size: 1.05rem; color: var(--text-2);
- max-width: 540px; margin: 0 auto 1rem;
+ font-size: 1.1rem;
+ color: var(--text-2);
+ max-width: 520px; margin: 0 auto 1rem;
line-height: 1.8;
}
.hero-note {
display: inline-block;
- font-size: .78rem; color: #b8a0f8;
- border: 1px solid rgba(109,40,217,.35);
- background: rgba(109,40,217,.1);
- padding: .36rem 1rem; border-radius: 3px;
+ font-size: .82rem; font-weight: 500;
+ color: var(--primary);
+ background: hsl(25, 65%, 38%, .08);
+ border: 1px solid hsl(25, 65%, 38%, .2);
+ padding: .38rem 1rem; border-radius: 999px;
margin-bottom: 2.5rem;
}
.hero-ctas {
@@ -285,31 +363,35 @@ h1, h2, h3 { line-height: 1.2; }
padding: calc(var(--nav-h) + 3rem) 2rem 3rem;
text-align: center;
background:
- radial-gradient(ellipse 60% 60% at 50% 0%, rgba(212,144,10,.08) 0%, transparent 70%),
- var(--bg);
+ radial-gradient(ellipse 50% 70% at 50% 0%, hsl(25, 65%, 38%, .07) 0%, transparent 70%),
+ var(--bg-2);
border-bottom: 1px solid var(--border);
}
-.page-hero .label { justify-content: center; display: flex; }
-.page-hero .page-title { margin-bottom: .75rem; }
-.page-hero .section-desc { margin: 0 auto; text-align: center; }
+.page-hero .label { display: flex; justify-content: center; }
+.page-hero .section-desc { margin: 0 auto; }
-/* ── GAME TAG ────────────────────────────────────────── */
-.tag-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
+/* ── TAGS ────────────────────────────────────────────── */
+.tag-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.tag {
- font-family: var(--font-ui);
- font-size: .58rem; letter-spacing: .06em;
- padding: .32rem .75rem; border-radius: 3px;
- background: var(--bg-card); border: 1px solid var(--border);
- color: var(--muted);
- transition: border-color .18s, color .18s;
+ font-size: .8rem; font-weight: 500;
+ padding: .3rem .85rem; border-radius: 999px;
+ background: var(--bg-card);
+ border: 1px solid var(--border);
+ color: var(--text-2);
+ transition: border-color .18s, color .18s, background .18s;
+}
+.tag:hover {
+ border-color: var(--primary);
+ color: var(--primary);
+ background: hsl(25, 65%, 38%, .05);
}
-.tag:hover { border-color: var(--gold); color: var(--gold); }
-/* ── VISUAL PANELS ───────────────────────────────────── */
+/* ── PANELS / CARDS ──────────────────────────────────── */
.panel {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
+ box-shadow: var(--shadow-sm);
overflow: hidden;
}
@@ -320,54 +402,54 @@ h1, h2, h3 { line-height: 1.2; }
}
.cabinet-screen-wrap {
flex: 1;
- background: linear-gradient(135deg, #100e06 0%, #1c1810 100%);
+ background: var(--arc-bg);
display: flex; align-items: center; justify-content: center;
padding: 2rem 1.5rem;
}
.cabinet-screen {
- background: rgba(0,0,0,.7);
- border: 2px solid var(--gold-dk);
+ background: rgba(0,0,0,.6);
+ border: 2px solid var(--arc-border);
border-radius: 4px;
padding: 1.5rem 2rem;
text-align: center; width: 100%;
- box-shadow: 0 0 20px rgba(212,144,10,.15), inset 0 0 18px rgba(0,0,0,.4);
+ box-shadow: 0 0 20px hsl(270, 70%, 50%, .18), inset 0 0 18px rgba(0,0,0,.3);
}
.screen-title {
- font-family: var(--font-ui);
- font-size: 1.3rem; letter-spacing: .2em;
- color: var(--gold);
+ font-family: 'Orbitron', monospace;
+ font-size: 1.2rem; letter-spacing: .2em;
+ color: var(--arc-accent);
animation: pulse 2.2s ease-in-out infinite;
margin-bottom: .2rem;
}
@keyframes pulse {
- 0%,100% { text-shadow: 0 0 6px var(--gold); }
- 50% { text-shadow: 0 0 24px var(--gold), 0 0 46px rgba(212,144,10,.5); }
+ 0%,100% { text-shadow: 0 0 6px var(--arc-accent); }
+ 50% { text-shadow: 0 0 24px var(--arc-accent), 0 0 46px hsl(270, 70%, 50%, .5); }
}
.screen-sub {
- font-family: var(--font-ui); font-size: .5rem;
+ font-family: 'Orbitron', monospace; font-size: .5rem;
letter-spacing: .28em; text-transform: uppercase;
- color: var(--crimson); margin-bottom: 1rem;
+ color: hsl(5, 60%, 65%); margin-bottom: 1rem;
}
.screen-insert {
- font-family: var(--font-ui); font-size: .48rem;
+ font-family: 'Orbitron', monospace; font-size: .48rem;
letter-spacing: .22em; text-transform: uppercase;
- color: var(--muted);
+ color: var(--arc-muted);
animation: blink 1.3s step-end infinite;
}
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0; } }
.cabinet-controls {
- background: #1a1610;
- border-top: 1px solid var(--border);
+ background: hsl(268, 45%, 13%);
+ border-top: 1px solid var(--arc-border);
padding: .9rem 1.5rem;
display: flex; align-items: center; justify-content: center; gap: .6rem;
}
.stick {
width: 18px; height: 18px; border-radius: 50%;
- background: #282218; border: 2px solid #383228;
+ background: hsl(268, 35%, 22%); border: 2px solid hsl(268, 30%, 30%);
}
.btn-ab {
width: 13px; height: 13px; border-radius: 50%;
- border: 1px solid rgba(255,255,255,.15);
+ border: 1px solid rgba(255,255,255,.2);
}
/* board game visual */
@@ -375,142 +457,138 @@ h1, h2, h3 { line-height: 1.2; }
aspect-ratio: 4/3;
display: flex; align-items: center; justify-content: center;
position: relative; overflow: hidden;
+ background: linear-gradient(135deg, hsl(30, 25%, 90%), hsl(35, 30%, 85%));
}
.board-visual::before {
content: '';
position: absolute; inset: 0;
background:
- radial-gradient(circle at 35% 35%, rgba(109,40,217,.12) 0%, transparent 60%),
- radial-gradient(circle at 72% 72%, rgba(14,116,144,.08) 0%, transparent 60%);
+ radial-gradient(circle at 35% 35%, hsl(38, 70%, 60%, .15) 0%, transparent 60%),
+ radial-gradient(circle at 72% 72%, hsl(145, 40%, 50%, .1) 0%, transparent 60%);
}
.board-art { position: relative; z-index: 1; text-align: center; }
.board-art .icon { font-size: 4rem; display: block; margin-bottom: .5rem; }
.board-art .caption {
- font-family: var(--font-ui); font-size: .58rem;
- letter-spacing: .28em; text-transform: uppercase;
+ font-size: .75rem; font-weight: 600;
+ letter-spacing: .15em; text-transform: uppercase;
color: var(--muted);
}
/* ── GAME CATEGORY CARDS ─────────────────────────────── */
.game-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; }
.game-cat {
- background: var(--bg-card); border: 1px solid var(--border);
- border-radius: var(--radius); padding: 1rem 1.2rem;
- transition: border-color .18s;
+ background: var(--bg); border: 1px solid var(--border);
+ border-radius: var(--radius); padding: 1.1rem 1.25rem;
+ box-shadow: var(--shadow-sm);
+ transition: border-color .18s, box-shadow .18s;
+}
+.game-cat:hover {
+ border-color: var(--primary);
+ box-shadow: var(--shadow);
}
-.game-cat:hover { border-color: var(--gold-glow); }
.cat-title {
- font-family: var(--font-ui); font-size: .58rem;
- letter-spacing: .2em; text-transform: uppercase;
- color: var(--gold); margin-bottom: .6rem;
+ font-size: .75rem; font-weight: 700;
+ letter-spacing: .1em; text-transform: uppercase;
+ color: var(--primary); margin-bottom: .65rem;
}
.cat-games { list-style: none; }
.cat-games li {
- font-size: .87rem; color: var(--text-2);
- padding: .18rem 0 .18rem 1rem; position: relative;
+ font-size: .875rem; color: var(--text-2);
+ padding: .2rem 0 .2rem 1rem; position: relative;
}
.cat-games li::before {
- content: '▸'; position: absolute; left: 0;
- color: var(--gold-dk); font-size: .65rem;
+ content: '›'; position: absolute; left: 0;
+ color: var(--primary); font-size: .85rem;
top: 50%; transform: translateY(-50%);
}
/* ── EVENTS ──────────────────────────────────────────── */
.events-intro {
- text-align: center; max-width: 600px; margin: 0 auto 3.5rem;
- color: var(--text-2);
+ text-align: center; max-width: 600px; margin: 0 auto 3rem;
}
.month-group { margin-bottom: 3rem; }
.month-heading {
- font-family: var(--font-ui);
- font-size: .68rem; letter-spacing: .3em; text-transform: uppercase;
- color: var(--gold);
- padding-bottom: .75rem;
- border-bottom: 1px solid var(--border);
+ font-family: var(--font-heading);
+ font-size: 1.1rem; font-weight: 700;
+ color: var(--text);
+ padding-bottom: .6rem;
+ border-bottom: 2px solid var(--border);
margin-bottom: 1rem;
}
-.events-grid { display: grid; gap: .75rem; }
+.events-grid { display: grid; gap: .6rem; }
.event-card {
background: var(--bg-card); border: 1px solid var(--border);
border-radius: var(--radius); overflow: hidden;
- transition: border-color .2s;
+ box-shadow: var(--shadow-sm);
+ transition: border-color .2s, box-shadow .2s;
}
-.event-card:hover { border-color: var(--border-lt); }
-.event-card.special { border-color: rgba(212,144,10,.3); }
+.event-card:hover { border-color: var(--border-dk); box-shadow: var(--shadow); }
+.event-card.special { border-color: hsl(38, 80%, 55%, .4); }
+.event-card.special .event-date-box { background: hsl(38, 80%, 55%, .1); border-color: hsl(38, 80%, 55%, .3); }
+.event-card.special .event-date-box .day { color: var(--gold-dk); }
.event-summary {
display: grid;
grid-template-columns: 56px 1fr auto;
align-items: center; gap: 1rem;
padding: 1rem 1.25rem;
- cursor: pointer;
- user-select: none;
+ cursor: pointer; user-select: none;
}
.event-date-box {
background: var(--bg-2); border: 1px solid var(--border);
- border-radius: 4px; text-align: center;
- padding: .4rem .2rem;
+ border-radius: var(--radius-sm); text-align: center; padding: .4rem .2rem;
}
.event-date-box .day {
- font-family: var(--font-ui); font-size: 1.3rem;
- color: var(--gold); line-height: 1; display: block;
+ font-family: var(--font-heading); font-size: 1.4rem;
+ color: var(--primary); line-height: 1; display: block;
}
.event-date-box .weekday {
- font-family: var(--font-ui); font-size: .48rem;
- letter-spacing: .18em; text-transform: uppercase;
+ font-size: .6rem; font-weight: 600;
+ letter-spacing: .15em; text-transform: uppercase;
color: var(--muted);
}
.event-meta { min-width: 0; }
.event-name {
- font-weight: 600; font-size: .95rem;
- color: var(--text); margin-bottom: .15rem;
+ font-weight: 600; font-size: .95rem; color: var(--text);
+ margin-bottom: .15rem;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.event-time {
- font-family: var(--font-ui); font-size: .58rem;
- letter-spacing: .1em; color: var(--muted);
-}
-.event-chevron {
- color: var(--muted); font-size: .75rem;
- transition: transform .2s;
- flex-shrink: 0;
+ font-size: .8rem; font-weight: 500;
+ color: var(--muted);
}
+.event-chevron { color: var(--muted); font-size: .8rem; transition: transform .2s; flex-shrink: 0; }
.event-card.open .event-chevron { transform: rotate(180deg); }
.event-detail {
- display: none;
- padding: 0 1.25rem 1.25rem;
+ display: none; padding: 0 1.25rem 1.25rem;
border-top: 1px solid var(--border);
}
.event-card.open .event-detail { display: block; }
-.event-detail p { color: var(--text-2); font-size: .92rem; margin-bottom: .75rem; }
-.event-detail .btn { margin-top: .5rem; }
+.event-detail p { color: var(--muted); font-size: .9rem; line-height: 1.7; margin: .75rem 0; }
/* ── FIND US / MAP ───────────────────────────────────── */
.find-grid {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 3rem;
- align-items: start;
+ display: grid; grid-template-columns: 1fr 1fr;
+ gap: 3rem; align-items: start;
}
.map-embed {
aspect-ratio: 4/3;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--border);
- background: var(--bg-card);
+ box-shadow: var(--shadow);
}
.map-embed iframe { width: 100%; height: 100%; border: none; }
.info-block { margin-bottom: 2rem; }
-.info-block .label { margin-bottom: .75rem; }
.hours-list { list-style: none; }
.hours-list li {
display: flex; justify-content: space-between; gap: 1rem;
- font-size: .88rem; color: var(--text-2);
- padding: .3rem 0;
+ font-size: .875rem; color: var(--muted);
+ padding: .35rem 0;
border-bottom: 1px solid var(--border);
}
.hours-list li:last-child { border-bottom: none; }
@@ -518,12 +596,10 @@ h1, h2, h3 { line-height: 1.2; }
.contact-list { list-style: none; }
.contact-list li {
display: flex; align-items: center; gap: .65rem;
- font-size: .9rem; color: var(--text-2);
- padding: .35rem 0;
+ font-size: .9rem; color: var(--muted); padding: .35rem 0;
}
.contact-list a { text-decoration: none; transition: color .18s; }
-.contact-list a:hover { color: var(--gold); }
-.contact-icon { font-size: 1rem; flex-shrink: 0; }
+.contact-list a:hover { color: var(--primary); }
/* ── BOOKING HUB ─────────────────────────────────────── */
.booking-cards {
@@ -534,168 +610,212 @@ h1, h2, h3 { line-height: 1.2; }
background: var(--bg-card); border: 1px solid var(--border);
border-radius: var(--radius-lg); padding: 2rem 1.75rem;
text-decoration: none; display: block;
+ box-shadow: var(--shadow-sm);
transition: border-color .2s, transform .2s, box-shadow .2s;
+ position: relative; overflow: hidden;
}
.booking-card:hover {
- border-color: var(--gold);
transform: translateY(-4px);
- box-shadow: 0 10px 30px rgba(0,0,0,.4);
+ box-shadow: var(--shadow-lg);
}
+.booking-card--dnd:hover { border-color: var(--book-dnd); }
+.booking-card--arc:hover { border-color: var(--book-arc); }
+.booking-card--tbl:hover { border-color: var(--book-tbl); }
.booking-card .icon { font-size: 2.5rem; margin-bottom: 1rem; }
.booking-card .title {
- font-family: var(--font-brand); font-size: 1.2rem;
+ font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700;
color: var(--text); margin-bottom: .5rem;
}
-.booking-card .desc { font-size: .88rem; color: var(--text-2); line-height: 1.6; }
+.booking-card .desc { font-size: .875rem; color: var(--muted); line-height: 1.65; }
.booking-card .avail {
- display: inline-block; margin-top: 1rem;
- font-family: var(--font-ui); font-size: .55rem;
- letter-spacing: .2em; text-transform: uppercase;
- padding: .25rem .75rem; border-radius: 3px;
+ display: inline-flex; align-items: center; gap: .35rem;
+ margin-top: 1.25rem;
+ font-size: .72rem; font-weight: 600;
+ padding: .28rem .8rem; border-radius: 999px;
}
-.avail-open { background: rgba(34,197,94,.1); color: #4ade80; border: 1px solid rgba(34,197,94,.25); }
-.avail-soon { background: rgba(212,144,10,.1); color: var(--gold); border: 1px solid rgba(212,144,10,.25); }
+.avail-open { background: hsl(145, 55%, 38%, .12); color: hsl(145, 45%, 30%); border: 1px solid hsl(145, 55%, 38%, .25); }
+.avail-soon { background: hsl(38, 80%, 55%, .12); color: hsl(35, 60%, 35%); border: 1px solid hsl(38, 80%, 55%, .25); }
/* ── FORMS ───────────────────────────────────────────── */
.booking-layout {
display: grid; grid-template-columns: 1fr 1fr;
- gap: 3rem; align-items: start;
- max-width: 900px; margin: 0 auto;
+ gap: 3.5rem; align-items: start;
+ max-width: 920px; margin: 0 auto;
}
-.booking-info .label { margin-bottom: .5rem; }
-.booking-info h2 { font-family: var(--font-brand); font-size: 1.6rem; color: var(--text); margin-bottom: .75rem; }
-.booking-info p { color: var(--text-2); font-size: .93rem; line-height: 1.7; margin-bottom: 1rem; }
-.booking-info .detail-list { list-style: none; }
-.booking-info .detail-list li {
- display: flex; align-items: center; gap: .6rem;
- color: var(--text-2); font-size: .88rem; padding: .28rem 0;
+.booking-info h2 { font-size: 1.65rem; margin-bottom: .75rem; }
+.booking-info p { color: var(--muted); font-size: .93rem; line-height: 1.75; margin-bottom: 1.25rem; }
+.detail-list { list-style: none; }
+.detail-list li {
+ display: flex; align-items: center; gap: .65rem;
+ color: var(--muted); font-size: .875rem; padding: .28rem 0;
}
-.detail-list .dot {
+.detail-dot {
width: 6px; height: 6px; border-radius: 50%;
- background: var(--gold); flex-shrink: 0;
+ background: var(--primary); flex-shrink: 0;
}
.form-card {
- background: var(--bg-form);
+ background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 2rem;
+ box-shadow: var(--shadow);
}
.form-card h3 {
- font-family: var(--font-brand); font-size: 1.1rem;
+ font-family: var(--font-heading); font-size: 1.2rem;
color: var(--text); margin-bottom: 1.5rem;
padding-bottom: .75rem; border-bottom: 1px solid var(--border);
}
.field { margin-bottom: 1.1rem; }
.field label {
display: block;
- font-family: var(--font-ui); font-size: .58rem;
- letter-spacing: .18em; text-transform: uppercase;
- color: var(--muted); margin-bottom: .4rem;
+ font-size: .75rem; font-weight: 600;
+ letter-spacing: .06em; text-transform: uppercase;
+ color: var(--muted); margin-bottom: .45rem;
}
.field input,
.field select {
width: 100%;
- background: var(--bg-card); border: 1px solid var(--border);
- border-radius: var(--radius); padding: .65rem .85rem;
+ background: var(--bg); border: 1.5px solid var(--border);
+ border-radius: var(--radius-sm); padding: .65rem .9rem;
color: var(--text); font-size: .9rem;
- transition: border-color .18s;
- appearance: none;
- -webkit-appearance: none;
+ transition: border-color .18s, box-shadow .18s;
+ appearance: none; -webkit-appearance: none;
}
.field input:focus,
-.field select:focus { border-color: var(--gold); }
-.field input::placeholder { color: var(--muted); }
+.field select:focus {
+ border-color: var(--primary);
+ box-shadow: 0 0 0 3px hsl(25, 65%, 38%, .1);
+}
+.field input::placeholder { color: var(--muted-lt); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.form-btn {
width: 100%; margin-top: .5rem;
- background: var(--gold); color: #000;
- padding: .8rem; border-radius: var(--radius);
- font-size: .85rem; font-weight: 700;
- letter-spacing: .1em; text-transform: uppercase;
+ background: var(--primary); color: var(--primary-fg);
+ padding: .8rem; border-radius: var(--radius-sm);
+ font-size: .875rem; font-weight: 600;
cursor: pointer;
- transition: background .18s, transform .1s;
+ transition: background .18s, transform .1s, box-shadow .18s;
+}
+.form-btn:hover {
+ background: var(--primary-lt);
+ transform: translateY(-1px);
+ box-shadow: var(--shadow);
}
-.form-btn:hover { background: var(--gold-lt); transform: translateY(-1px); }
.form-success {
- display: none;
- text-align: center; padding: 2rem 1rem;
+ display: none; text-align: center; padding: 2rem 1rem;
}
.form-success .icon { font-size: 3rem; margin-bottom: 1rem; }
-.form-success h3 { font-family: var(--font-brand); color: var(--gold); margin-bottom: .5rem; }
-.form-success p { color: var(--text-2); font-size: .9rem; }
+.form-success h3 { font-family: var(--font-heading); color: var(--primary); margin-bottom: .5rem; }
+.form-success p { color: var(--muted); font-size: .9rem; }
+
+/* ── BACKWARDS COMPAT ALIASES ───────────────────────── */
+.badge-gold { background: hsl(38, 80%, 55%, .15); color: hsl(35, 70%, 35%); border: 1px solid hsl(38, 80%, 55%, .3); }
+.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); flex-shrink: 0; display: inline-block; }
+.contact-icon { margin-right: .15rem; }
+
+/* ── INFO ITEMS (detail rows) ────────────────────────── */
+.info-item {
+ display: flex; align-items: flex-start; gap: 1rem;
+ padding: 1rem 1.25rem;
+ border-radius: var(--radius);
+ background: var(--bg-card); border: 1px solid var(--border);
+ margin-bottom: .75rem;
+ box-shadow: var(--shadow-sm);
+ transition: border-color .18s;
+}
+.info-item:hover { border-color: var(--primary); }
+.info-item .icon { font-size: 1.75rem; flex-shrink: 0; margin-top: .1rem; }
+.info-item .title { font-weight: 600; font-size: .95rem; color: var(--text); margin-bottom: .2rem; }
+.info-item .desc { font-size: .875rem; color: var(--muted); line-height: 1.6; }
+
+/* ── CTA STRIP ───────────────────────────────────────── */
+.cta-strip {
+ background: linear-gradient(135deg, hsl(25, 65%, 38%, .08), hsl(38, 80%, 55%, .08));
+ border: 1px solid hsl(38, 80%, 55%, .2);
+ border-radius: var(--radius-lg);
+ padding: 2.5rem 2rem; text-align: center;
+}
+.cta-strip h2 { font-size: 1.6rem; margin-bottom: .5rem; }
+.cta-strip p { color: var(--muted); font-size: .95rem; margin-bottom: 1.5rem; }
/* ── FOOTER ──────────────────────────────────────────── */
footer {
- background: #080605;
- border-top: 1px solid var(--border);
- padding: 3.5rem 2rem 2rem;
+ background: hsl(25, 30%, 12%);
+ color: hsl(30, 15%, 80%);
+ padding: 4rem 2rem 2rem;
}
.footer-inner { max-width: 1120px; margin: 0 auto; }
.footer-grid {
- display: grid;
- grid-template-columns: 2fr 1fr 1fr 1fr;
- gap: 2.5rem;
- margin-bottom: 2.5rem;
+ display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
+ gap: 2.5rem; margin-bottom: 2.5rem;
}
.footer-brand {
- font-family: var(--font-brand); font-size: 1rem;
- color: var(--gold);
- display: flex; align-items: center; gap: .45rem;
- margin-bottom: .6rem;
+ font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700;
+ color: hsl(38, 80%, 65%);
+ display: flex; align-items: center; gap: .45rem; margin-bottom: .6rem;
}
-.footer-tagline { color: var(--muted); font-size: .85rem; line-height: 1.65; margin-bottom: 1rem; }
+.footer-tagline { color: hsl(30, 12%, 62%); font-size: .85rem; line-height: 1.7; margin-bottom: 1rem; }
.footer-contact a, .footer-contact span {
display: flex; align-items: center; gap: .5rem;
- color: var(--muted); font-size: .82rem; text-decoration: none;
- margin-bottom: .35rem; transition: color .18s;
-}
-.footer-contact a:hover { color: var(--gold); }
-.footer-col-head {
- font-family: var(--font-ui); font-size: .58rem;
- letter-spacing: .22em; text-transform: uppercase;
- color: var(--gold); margin-bottom: .8rem;
-}
-.footer-links { list-style: none; }
-.footer-links li { margin-bottom: .35rem; }
-.footer-links a {
- color: var(--muted); font-size: .82rem; text-decoration: none;
+ color: hsl(30, 12%, 62%); font-size: .82rem;
+ text-decoration: none; margin-bottom: .35rem;
transition: color .18s;
}
-.footer-links a:hover { color: var(--gold); }
+.footer-contact a:hover { color: hsl(38, 80%, 65%); }
+.footer-col-head {
+ font-size: .72rem; font-weight: 700;
+ letter-spacing: .12em; text-transform: uppercase;
+ color: hsl(38, 80%, 65%); margin-bottom: .85rem;
+}
+.footer-links { list-style: none; }
+.footer-links li { margin-bottom: .4rem; }
+.footer-links a {
+ color: hsl(30, 12%, 62%); font-size: .85rem; text-decoration: none;
+ transition: color .18s;
+}
+.footer-links a:hover { color: hsl(38, 80%, 65%); }
.footer-hours { list-style: none; }
.footer-hours li {
display: flex; justify-content: space-between;
- font-size: .82rem; color: var(--muted);
- padding: .18rem 0;
+ font-size: .83rem; color: hsl(30, 12%, 62%); padding: .2rem 0;
}
-.footer-hours .day { color: var(--text-2); }
+.footer-hours .day { color: hsl(30, 15%, 78%); font-weight: 500; }
.footer-bottom {
- border-top: 1px solid var(--border);
+ border-top: 1px solid hsl(25, 25%, 20%);
padding-top: 1.25rem;
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: .5rem;
}
-.footer-copy { font-size: .78rem; color: var(--muted); }
+.footer-copy { font-size: .78rem; color: hsl(30, 12%, 50%); }
.footer-legal { display: flex; gap: 1.25rem; }
-.footer-legal a { font-size: .78rem; color: var(--muted); text-decoration: none; }
-.footer-legal a:hover { color: var(--gold); }
+.footer-legal a { font-size: .78rem; color: hsl(30, 12%, 50%); text-decoration: none; }
+.footer-legal a:hover { color: hsl(38, 80%, 65%); }
-/* ── MISC ────────────────────────────────────────────── */
-.divider { border: none; border-top: 1px solid var(--border); margin: 0; }
-
-.cta-strip {
- background: linear-gradient(135deg, #1c1710, #221a10);
- border: 1px solid var(--border);
- border-radius: var(--radius-lg);
- padding: 2.5rem;
- text-align: center;
+/* ── DARK SECTION OVERRIDES ──────────────────────────── */
+.section--dark .label { color: var(--arc-accent); }
+.section--dark .section-title,
+.section--dark h2,
+.section--dark h3 { color: var(--arc-fg); }
+.section--dark .section-desc,
+.section--dark p { color: var(--arc-muted); }
+.section--dark .panel {
+ background: var(--arc-surface);
+ border-color: var(--arc-border);
+}
+.section--dark .tag {
+ background: hsl(268, 45%, 18%);
+ border-color: var(--arc-border);
+ color: var(--arc-muted);
+}
+.section--dark .tag:hover {
+ border-color: var(--arc-accent);
+ color: var(--arc-accent);
+ background: hsl(268, 45%, 22%);
}
-.cta-strip h2 { font-family: var(--font-brand); color: var(--text); margin-bottom: .5rem; font-size: 1.6rem; }
-.cta-strip p { color: var(--text-2); margin-bottom: 1.5rem; font-size: .95rem; }
/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 900px) {
@@ -705,15 +825,17 @@ footer {
.nav.menu-open .nav-links {
display: flex; flex-direction: column; align-items: flex-start;
position: absolute; top: var(--nav-h); left: 0; right: 0;
- background: rgba(12,10,8,.97); backdrop-filter: blur(16px);
+ background: var(--bg);
border-bottom: 1px solid var(--border);
padding: 1.5rem 2rem; gap: 1.25rem;
+ box-shadow: var(--shadow);
}
.nav.menu-open .nav-find {
display: block;
- position: absolute; top: calc(var(--nav-h) + 9rem); left: 0; right: 0;
- background: rgba(12,10,8,.97);
- padding: 0 2rem 1.5rem; border-bottom: 1px solid var(--border);
+ position: absolute; top: calc(var(--nav-h) + 9.5rem); left: 0; right: 0;
+ background: var(--bg);
+ padding: 0 2rem 1.5rem;
+ border-bottom: 1px solid var(--border);
}
.two-col, .two-col--reverse { grid-template-columns: 1fr; direction: ltr; }
.two-col--reverse > * { direction: ltr; }
diff --git a/events.html b/events.html
index f2cac95..8a2e674 100644
--- a/events.html
+++ b/events.html
@@ -6,7 +6,7 @@
Events — The Fat Dragon
-
+
diff --git a/find-us.html b/find-us.html
index c139144..1221577 100644
--- a/find-us.html
+++ b/find-us.html
@@ -6,7 +6,7 @@
Find Us — The Fat Dragon
-
+
diff --git a/index.html b/index.html
index 04f9a3d..29a299d 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
The Fat Dragon — Ashbourne, Co. Meath
-
+