diff --git a/dist/assets/index-BDKv4rRo.css b/dist/assets/index-BDKv4rRo.css new file mode 100644 index 0000000..4d058ea --- /dev/null +++ b/dist/assets/index-BDKv4rRo.css @@ -0,0 +1 @@ +:root{--color-coffee-dark: #3b2f2f;--color-coffee-medium: #6F4E37;--color-cream: #F5E8C7;--color-gold: #D4A574;--color-teal: #1D7874;--color-orange: #E76F51;--bg-body: var(--color-cream);--text-body: var(--color-coffee-dark);--bg-surface: color-mix(in srgb, var(--color-cream), white 40%);--color-primary: var(--color-teal);--color-secondary: var(--color-gold);--border-subtle: color-mix(in srgb, var(--color-coffee-medium), transparent 85%);--shadow-soft: 0 4px 20px -2px color-mix(in srgb, var(--color-coffee-dark), transparent 90%);--font-sans: "Inter", system-ui, -apple-system, sans-serif;--bs-body-bg: var(--bg-body);--bs-body-color: var(--text-body);--bs-primary: var(--color-primary);--bs-primary-rgb: 42, 157, 143}@media(prefers-color-scheme:dark){:root{--bg-body: var(--color-coffee-dark);--text-body: var(--color-cream);--bg-surface: color-mix(in srgb, var(--color-coffee-dark), black 20%);--border-subtle: color-mix(in srgb, var(--color-cream), transparent 85%);--shadow-soft: 0 4px 20px -2px black;--bs-body-bg: var(--bg-body);--bs-body-color: var(--text-body);--bs-dark: #1f1a17}}body{font-family:var(--font-sans);background-color:var(--bg-body);color:var(--text-body);line-height:1.6;-webkit-font-smoothing:antialiased;transition:background-color .3s ease,color .3s ease}a{color:var(--color-primary);text-decoration:none;font-weight:600;transition:text-decoration-color .2s}a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}h1,h2,h3,h4,h5,h6{font-weight:800;letter-spacing:-.03em;color:currentColor;margin-bottom:1rem}h1{font-size:clamp(2.5rem,5vw,4rem);line-height:1.1}h2{font-size:clamp(1.75rem,3vw,2.5rem);margin-top:3rem;padding-bottom:.5rem;border-bottom:2px solid var(--color-secondary);display:inline-block}header{background-color:var(--bg-body);padding:3rem 1rem;margin-bottom:2rem}header h1{color:var(--color-coffee-medium)!important}header p{font-size:1.25rem;opacity:.8;max-width:600px;margin-inline:auto}.card{background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:12px;overflow:hidden;transition:transform .3s cubic-bezier(.25,.46,.45,.94),box-shadow .3s ease;height:100%;view-timeline-name:--card-entry;view-timeline-axis:block;animation:fade-in-up linear both;animation-timeline:view();animation-range:entry 10% cover 20%}.card:hover{transform:translateY(-4px) scale(1.01);box-shadow:var(--shadow-soft);border-color:var(--color-secondary)}.card .card-img-top{aspect-ratio:16/9;object-fit:cover;transition:transform .5s ease}.card:hover .card-img-top{transform:scale(1.05)}.card .card-body{padding:1.5rem;display:flex;flex-direction:column}.card .card-body h5.card-title{font-size:1.25rem;margin-bottom:.75rem}.card .card-body p.card-text{font-size:.95rem;opacity:.9;flex-grow:1}.list-group{--bs-list-group-bg: transparent;--bs-list-group-border-color: var(--border-subtle)}.list-group .list-group-item{background-color:var(--bg-surface);border-color:var(--border-subtle);font-weight:500;transition:background-color .2s}.list-group .list-group-item:hover{background-color:color-mix(in srgb,var(--color-primary),transparent 95%);border-left:4px solid var(--color-secondary)}footer{background-color:var(--color-coffee-dark)!important;color:var(--color-cream)!important;padding:3rem 0;margin-top:5rem;border-top:4px solid var(--color-secondary)}footer a{color:var(--color-cream);opacity:.7}footer a:hover{opacity:1;color:var(--color-secondary)}@keyframes fade-in-up{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.card-body{container-type:inline-size}@container (max-width: 300px){.card-title{font-size:1.1rem}}.btn-primary{background-color:var(--color-primary);border-color:var(--color-primary);color:#fff;font-weight:700;text-transform:uppercase;font-size:.85rem;letter-spacing:.05em;padding:.6em 1.2em;border-radius:50px}.btn-primary:hover,.btn-primary:focus,.btn-primary:active{background-color:color-mix(in srgb,var(--color-primary),black 10%)!important;border-color:color-mix(in srgb,var(--color-primary),black 10%)!important} diff --git a/dist/assets/index-DihxhKIl.css b/dist/assets/index-DihxhKIl.css deleted file mode 100644 index a0c3916..0000000 --- a/dist/assets/index-DihxhKIl.css +++ /dev/null @@ -1 +0,0 @@ -:root{--color-charcoal: #1a1a1a;--color-cream: #f8f5f0;--color-electric-blue: #00b4d8;--bg-body: var(--color-cream);--text-body: var(--color-charcoal);--bg-surface: #ffffff;--border-subtle: color-mix(in srgb, var(--color-charcoal), transparent 90%);--shadow-soft: 0 4px 20px -2px color-mix(in srgb, var(--color-charcoal), transparent 90%);--font-sans: "Inter", system-ui, -apple-system, sans-serif;--bs-body-bg: var(--bg-body);--bs-body-color: var(--text-body);--bs-primary: var(--color-electric-blue);--bs-primary-rgb: 0, 180, 216}@media(prefers-color-scheme:dark){:root{--bg-body: var(--color-charcoal);--text-body: var(--color-cream);--bg-surface: color-mix(in srgb, var(--color-cream), transparent 95%);--border-subtle: color-mix(in srgb, var(--color-cream), transparent 85%);--shadow-soft: 0 4px 20px -2px black;--bs-body-bg: var(--bg-body);--bs-body-color: var(--text-body);--bs-dark: #121212}}body{font-family:var(--font-sans);background-color:var(--bg-body);color:var(--text-body);line-height:1.6;-webkit-font-smoothing:antialiased;transition:background-color .3s ease,color .3s ease}a{color:var(--color-electric-blue);text-decoration:none;font-weight:600;transition:text-decoration-color .2s}a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}h1,h2,h3,h4,h5,h6{font-weight:800;letter-spacing:-.03em;color:currentColor;margin-bottom:1rem}h1{font-size:clamp(2.5rem,5vw,4rem);line-height:1.1}h2{font-size:clamp(1.75rem,3vw,2.5rem);margin-top:3rem;padding-bottom:.5rem;border-bottom:2px solid var(--color-electric-blue);display:inline-block}header{background-color:var(--bg-body);padding:3rem 1rem;margin-bottom:2rem}header h1{color:var(--color-electric-blue)!important}header p{font-size:1.25rem;opacity:.8;max-width:600px;margin-inline:auto}.card{background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:12px;overflow:hidden;transition:transform .3s cubic-bezier(.25,.46,.45,.94),box-shadow .3s ease;height:100%;view-timeline-name:--card-entry;view-timeline-axis:block;animation:fade-in-up linear both;animation-timeline:view();animation-range:entry 10% cover 20%}.card:hover{transform:translateY(-4px) scale(1.01);box-shadow:var(--shadow-soft);border-color:var(--color-electric-blue)}.card .card-img-top{aspect-ratio:16/9;object-fit:cover;transition:transform .5s ease}.card:hover .card-img-top{transform:scale(1.05)}.card .card-body{padding:1.5rem;display:flex;flex-direction:column}.card .card-body h5.card-title{font-size:1.25rem;margin-bottom:.75rem}.card .card-body p.card-text{font-size:.95rem;opacity:.9;flex-grow:1}.list-group{--bs-list-group-bg: transparent;--bs-list-group-border-color: var(--border-subtle)}.list-group .list-group-item{background-color:var(--bg-surface);border-color:var(--border-subtle);font-weight:500;transition:background-color .2s}.list-group .list-group-item:hover{background-color:color-mix(in srgb,var(--color-electric-blue),transparent 95%);border-left:4px solid var(--color-electric-blue)}footer{background-color:var(--color-charcoal)!important;color:var(--color-cream)!important;padding:3rem 0;margin-top:5rem;border-top:4px solid var(--color-electric-blue)}footer a{color:var(--color-cream);opacity:.7}footer a:hover{opacity:1;color:var(--color-electric-blue)}@keyframes fade-in-up{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.card-body{container-type:inline-size}@container (max-width: 300px){.card-title{font-size:1.1rem}}.btn-primary{background-color:var(--color-electric-blue);border-color:var(--color-electric-blue);color:#fff;font-weight:700;text-transform:uppercase;font-size:.85rem;letter-spacing:.05em;padding:.6em 1.2em;border-radius:50px}.btn-primary:hover,.btn-primary:focus,.btn-primary:active{background-color:color-mix(in srgb,var(--color-electric-blue),black 10%)!important;border-color:color-mix(in srgb,var(--color-electric-blue),black 10%)!important} diff --git a/dist/index.html b/dist/index.html index c9a0d04..8c01c17 100644 --- a/dist/index.html +++ b/dist/index.html @@ -7,7 +7,7 @@ - d@n tech - Web Development Services\n \n \n \n \n \n \n \n \n \n \n + d@n tech - Web Development Services\n \n \n \n \n \n \n \n \n \n \n @@ -20,7 +20,7 @@ scroll-behavior: smooth; } - +
diff --git a/index.html b/index.html index b89efc8..407abd0 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ - d@n tech - Web Development Services\n \n \n \n \n \n \n \n \n \n \n + d@n tech - Web Development Services\n \n \n \n \n \n \n \n \n \n \n diff --git a/styles.css b/styles.css index 92cdb78..f24ad0e 100644 --- a/styles.css +++ b/styles.css @@ -1,15 +1,21 @@ :root { - /* Palette */ - --color-charcoal: #1a1a1a; - --color-cream: #f8f5f0; - --color-electric-blue: #00b4d8; + /* Palette - Coffee Theme */ + --color-coffee-dark: #3b2f2f; /* Dark Roast - Replaces Charcoal */ + --color-coffee-medium: #6F4E37; /* Medium Roast */ + --color-cream: #F5E8C7; /* Light Roast/Foam */ + --color-gold: #D4A574; /* Caramel/Gold Accent */ + --color-teal: #1D7874; /* Deep Teal Accent - Optimized for contrast */ + --color-orange: #E76F51; /* Warm Orange/Terracotta */ /* Semantic Colors - Light Mode Default */ --bg-body: var(--color-cream); - --text-body: var(--color-charcoal); - --bg-surface: #ffffff; - --border-subtle: color-mix(in srgb, var(--color-charcoal), transparent 90%); - --shadow-soft: 0 4px 20px -2px color-mix(in srgb, var(--color-charcoal), transparent 90%); + --text-body: var(--color-coffee-dark); + --bg-surface: color-mix(in srgb, var(--color-cream), white 40%); + --color-primary: var(--color-teal); /* Replaces Electric Blue */ + --color-secondary: var(--color-gold); + + --border-subtle: color-mix(in srgb, var(--color-coffee-medium), transparent 85%); + --shadow-soft: 0 4px 20px -2px color-mix(in srgb, var(--color-coffee-dark), transparent 90%); /* Typography */ --font-sans: 'Inter', system-ui, -apple-system, sans-serif; @@ -17,23 +23,23 @@ /* BS Overrides */ --bs-body-bg: var(--bg-body); --bs-body-color: var(--text-body); - --bs-primary: var(--color-electric-blue); - --bs-primary-rgb: 0, 180, 216; + --bs-primary: var(--color-primary); + --bs-primary-rgb: 42, 157, 143; /* RGB of Teal */ } @media (prefers-color-scheme: dark) { :root { /* Semantic Colors - Dark Mode */ - --bg-body: var(--color-charcoal); + --bg-body: var(--color-coffee-dark); --text-body: var(--color-cream); - --bg-surface: color-mix(in srgb, var(--color-cream), transparent 95%); + --bg-surface: color-mix(in srgb, var(--color-coffee-dark), black 20%); --border-subtle: color-mix(in srgb, var(--color-cream), transparent 85%); --shadow-soft: 0 4px 20px -2px black; /* BS Overrides */ --bs-body-bg: var(--bg-body); --bs-body-color: var(--text-body); - --bs-dark: #121212; + --bs-dark: #1f1a17; } } @@ -48,7 +54,7 @@ body { } a { - color: var(--color-electric-blue); + color: var(--color-primary); text-decoration: none; font-weight: 600; transition: text-decoration-color 0.2s; @@ -77,7 +83,7 @@ h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-top: 3rem; padding-bottom: 0.5rem; - border-bottom: 2px solid var(--color-electric-blue); + border-bottom: 2px solid var(--color-secondary); display: inline-block; } @@ -88,7 +94,7 @@ header { margin-bottom: 2rem; h1 { - color: var(--color-electric-blue) !important; /* Force override inline style if present, ideally remove inline */ + color: var(--color-coffee-medium) !important; /* Elegant coffee tone for main title */ } p { @@ -118,7 +124,7 @@ header { &:hover { transform: translateY(-4px) scale(1.01); box-shadow: var(--shadow-soft); - border-color: var(--color-electric-blue); + border-color: var(--color-secondary); } .card-img-top { @@ -161,19 +167,19 @@ header { transition: background-color 0.2s; &:hover { - background-color: color-mix(in srgb, var(--color-electric-blue), transparent 95%); - border-left: 4px solid var(--color-electric-blue); + background-color: color-mix(in srgb, var(--color-primary), transparent 95%); + border-left: 4px solid var(--color-secondary); } } } /* Footer */ footer { - background-color: var(--color-charcoal) !important; + background-color: var(--color-coffee-dark) !important; color: var(--color-cream) !important; padding: 3rem 0; margin-top: 5rem; - border-top: 4px solid var(--color-electric-blue); + border-top: 4px solid var(--color-secondary); a { color: var(--color-cream); @@ -181,7 +187,7 @@ footer { &:hover { opacity: 1; - color: var(--color-electric-blue); + color: var(--color-secondary); } } } @@ -211,8 +217,8 @@ footer { /* Utility Overrides for Bootstrap Buttons to match theme */ .btn-primary { - background-color: var(--color-electric-blue); - border-color: var(--color-electric-blue); + background-color: var(--color-primary); + border-color: var(--color-primary); color: white; /* Electric blue needs white text for contrast */ font-weight: 700; text-transform: uppercase; @@ -222,7 +228,7 @@ footer { border-radius: 50px; /* Pill shape */ &:hover, &:focus, &:active { - background-color: color-mix(in srgb, var(--color-electric-blue), black 10%) !important; - border-color: color-mix(in srgb, var(--color-electric-blue), black 10%) !important; + background-color: color-mix(in srgb, var(--color-primary), black 10%) !important; + border-color: color-mix(in srgb, var(--color-primary), black 10%) !important; } }