1521 lines
29 KiB
CSS
1521 lines
29 KiB
CSS
/*
|
|
Theme Name: Arizona Computer Guru
|
|
Theme URI: https://azcomputerguru.com
|
|
Author: Arizona Computer Guru
|
|
Author URI: https://azcomputerguru.com
|
|
Description: Desert Brutalism - Bold distinctive design for Arizona Computer Guru
|
|
Version: 2.0.0
|
|
License: GNU General Public License v2 or later
|
|
License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
|
Text Domain: azcomputerguru
|
|
*/
|
|
|
|
/* ============================================
|
|
DESIGN VISION: DESERT BRUTALISM MEETS SOUTHWEST FUTURISM
|
|
|
|
Typography: Space Grotesk + IBM Plex Sans + JetBrains Mono
|
|
Colors: Sunset Copper, Midnight Desert, Canyon Shadow, Neon Accent
|
|
Visual: Geometric brutalism with Arizona desert aesthetics
|
|
============================================ */
|
|
|
|
/* TYPOGRAPHY IMPORTS */
|
|
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
|
|
|
|
/* COLOR SYSTEM */
|
|
:root {
|
|
/* Primary Palette - Desert Brutalism */
|
|
--sunset-copper: #D4771C;
|
|
--midnight-desert: #0A0F14;
|
|
--canyon-shadow: #2D1B14;
|
|
--sandstone: #E8D5C4;
|
|
--neon-accent: #00FFA3;
|
|
|
|
/* Functional Colors */
|
|
--color1: #0A0F14; /* Dark backgrounds */
|
|
--color2: #D4771C; /* Primary accent */
|
|
--color3: #2D1B14; /* Secondary dark */
|
|
--color4: #ffffff; /* White */
|
|
--color5: #000000; /* Pure black */
|
|
--color6: #4d4d4d; /* Mid gray */
|
|
|
|
/* Gradient Definitions */
|
|
--desert-gradient: linear-gradient(135deg, #D4771C 0%, #8B4513 100%);
|
|
--midnight-gradient: linear-gradient(180deg, #0A0F14 0%, #1a2332 100%);
|
|
--neon-glow: 0 0 20px rgba(0, 255, 163, 0.3);
|
|
}
|
|
|
|
/* RESET */
|
|
*{
|
|
margin: 0px;
|
|
padding: 0px;
|
|
border: 0px;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
}
|
|
|
|
*:before,
|
|
*:after{
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
html, body,h1, h2, h3, h4, h5, h6,a, p, span,em, small, strong,sub, sup,mark, del, ins, strike,abbr, dfn,blockquote, q, cite,code, pre,ol, ul, li, dl, dt, dd,div, section, article,main, aside, nav,header, hgroup, footer,img, figure, figcaption,address, time,audio, video,canvas, iframe,details, summary,fieldset, form, label, legend,table, caption,tbody, tfoot, thead,tr, th, td{
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
|
|
a,
|
|
a:visited{
|
|
color: inherit;
|
|
}
|
|
|
|
article,
|
|
aside,
|
|
footer,
|
|
header,
|
|
nav,
|
|
section,
|
|
main{
|
|
display: block;
|
|
}
|
|
|
|
img{max-width:100%;}
|
|
|
|
/* BASE STYLES - BRUTALIST FOUNDATION */
|
|
|
|
html{
|
|
scroll-behavior: smooth;
|
|
font: 16px/1.6em 'IBM Plex Sans', -apple-system, sans-serif;
|
|
}
|
|
|
|
body{
|
|
font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
background: var(--midnight-desert);
|
|
/* Desert texture overlay */
|
|
background-image:
|
|
radial-gradient(circle at 20% 50%, rgba(212, 119, 28, 0.03) 0%, transparent 50%),
|
|
radial-gradient(circle at 80% 80%, rgba(0, 255, 163, 0.02) 0%, transparent 50%);
|
|
background-attachment: fixed;
|
|
padding-top: 8.5rem;
|
|
color: var(--sandstone);
|
|
}
|
|
|
|
/* TYPOGRAPHY - BOLD AND GEOMETRIC */
|
|
|
|
h1{
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 3.5rem;
|
|
font-weight: 700;
|
|
letter-spacing: -0.03em;
|
|
line-height: 1.1em;
|
|
text-transform: uppercase;
|
|
color: var(--color4);
|
|
}
|
|
|
|
h2{
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 2.4rem;
|
|
font-weight: 600;
|
|
letter-spacing: -0.02em;
|
|
line-height: 1.2em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
h3{
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 1.6rem;
|
|
font-weight: 500;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
h1, h2, h3{
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
p{
|
|
margin-bottom: 1.2rem;
|
|
font-weight: 300;
|
|
line-height: 1.8em;
|
|
}
|
|
|
|
code, .monospace{
|
|
font-family: 'JetBrains Mono', monospace;
|
|
background: rgba(0, 255, 163, 0.05);
|
|
padding: 0.2em 0.5em;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.alignleft{
|
|
float:left;
|
|
margin:1rem 1rem 1rem 0;
|
|
}
|
|
.aligncenter{
|
|
margin:1rem auto 1rem auto;
|
|
}
|
|
.alignright{
|
|
float:right;
|
|
margin:1rem 0rem 1rem 1rem;
|
|
}
|
|
|
|
.more-link{
|
|
text-decoration: none;
|
|
color: var(--neon-accent);
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
font-size: 0.9rem;
|
|
border: 2px solid var(--neon-accent);
|
|
padding: 0.8rem 1.5rem;
|
|
display: inline-block;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.more-link::before{
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--neon-accent);
|
|
transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
z-index: -1;
|
|
}
|
|
|
|
.more-link:hover{
|
|
color: var(--midnight-desert);
|
|
box-shadow: var(--neon-glow);
|
|
}
|
|
|
|
.more-link:hover::before{
|
|
left: 0;
|
|
}
|
|
|
|
/* STRUCTURE ELEMENTS */
|
|
|
|
.wrapper{
|
|
width: 80%;
|
|
margin: 0 auto;
|
|
max-width: 1600px;
|
|
}
|
|
|
|
.flexwrap{
|
|
display: flex;
|
|
}
|
|
|
|
/* ABOVE HEADER - BRUTALIST TOP BAR */
|
|
|
|
.above-header{
|
|
width: 100%;
|
|
background: var(--midnight-desert);
|
|
border-bottom: 4px solid var(--sunset-copper);
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 100;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.above-header .widget{
|
|
flex: 1;
|
|
line-height: 2em;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-weight: 400;
|
|
text-transform: uppercase;
|
|
font-size: 0.85rem;
|
|
letter-spacing: 0.05em;
|
|
color: var(--sandstone);
|
|
}
|
|
|
|
.above-header .widget:nth-of-type(2){
|
|
text-align: right;
|
|
color: var(--neon-accent);
|
|
}
|
|
|
|
.above-header p{
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.above-header a{
|
|
color: var(--sunset-copper);
|
|
text-decoration: none;
|
|
transition: color 0.2s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.above-header a::after{
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -2px;
|
|
left: 0;
|
|
width: 0;
|
|
height: 2px;
|
|
background: var(--neon-accent);
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.above-header a:hover{
|
|
color: var(--neon-accent);
|
|
}
|
|
|
|
.above-header a:hover::after{
|
|
width: 100%;
|
|
}
|
|
|
|
/* HEADER - GEOMETRIC BOLD */
|
|
|
|
header{
|
|
width: 100%;
|
|
background: var(--color4);
|
|
border-bottom: 8px solid var(--sunset-copper);
|
|
position: fixed;
|
|
left: 0;
|
|
top: 2rem;
|
|
z-index: 100;
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
header.scrolled {
|
|
box-shadow: 0 4px 40px rgba(212, 119, 28, 0.2);
|
|
border-bottom: 6px solid var(--neon-accent);
|
|
}
|
|
|
|
.site-title{
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 2.5em;
|
|
font-weight: 700;
|
|
letter-spacing: -0.03em;
|
|
text-transform: uppercase;
|
|
color: var(--midnight-desert);
|
|
text-shadow: 3px 3px 0 var(--sunset-copper);
|
|
}
|
|
|
|
.site-description {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 0.9em;
|
|
color: var(--canyon-shadow);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.header-right{
|
|
flex: 2;
|
|
}
|
|
|
|
header.scrolled .header-left{
|
|
flex: 1;
|
|
}
|
|
|
|
header.scrolled .header-right{
|
|
flex: 10;
|
|
}
|
|
|
|
/* NAVIGATION - BRUTALIST BLOCKS */
|
|
|
|
header nav{
|
|
width: 100%;
|
|
}
|
|
|
|
.menu{
|
|
list-style: none;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 3rem 0 0 12rem;
|
|
justify-content: space-between;
|
|
text-align: right;
|
|
}
|
|
|
|
header.scrolled .menu{
|
|
padding: 0.5rem 0 0 20rem;
|
|
}
|
|
|
|
#menu-main > .current-menu-item:not(.page-item-17){
|
|
border-bottom: 4px var(--neon-accent) solid;
|
|
}
|
|
|
|
.menu-item .current-menu-item{
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.menu .menu-item a{
|
|
display: block;
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.05em;
|
|
line-height: 3em;
|
|
padding: 0 1.5rem;
|
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative;
|
|
color: var(--midnight-desert);
|
|
}
|
|
|
|
.menu .menu-item a::before{
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
width: 0;
|
|
height: 4px;
|
|
background: var(--sunset-copper);
|
|
transform: translateY(-50%);
|
|
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
#menu-main .menu-item:hover a{
|
|
color: var(--color4);
|
|
background: var(--sunset-copper);
|
|
transform: skewX(-5deg);
|
|
}
|
|
|
|
#menu-main .menu-item:hover a::before{
|
|
width: 100%;
|
|
}
|
|
|
|
.menu > .menu-item:last-child a{
|
|
background: var(--neon-accent);
|
|
color: var(--midnight-desert);
|
|
padding: 0 2rem;
|
|
font-weight: 700;
|
|
box-shadow: 0 4px 15px rgba(0, 255, 163, 0.3);
|
|
transform: skewX(-5deg);
|
|
}
|
|
|
|
.menu > .menu-item:last-child:hover a{
|
|
color: var(--neon-accent);
|
|
background: var(--midnight-desert);
|
|
border-bottom: 4px var(--neon-accent) solid;
|
|
box-shadow: var(--neon-glow);
|
|
}
|
|
|
|
header.scrolled .menu .menu-item a{
|
|
line-height: 1.6em;
|
|
}
|
|
|
|
/* NAV LEVEL 2 - GEOMETRIC DROPDOWN */
|
|
|
|
.sub-menu{
|
|
background: var(--midnight-desert);
|
|
width: 100%;
|
|
height: 0;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
left: 0;
|
|
z-index: -100;
|
|
border-top: 6px var(--sunset-copper) solid;
|
|
border-bottom: 6px var(--neon-accent) solid;
|
|
text-align: left;
|
|
opacity: 0;
|
|
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
#menu-main > li > .sub-menu{
|
|
padding: 2rem 10%;
|
|
}
|
|
|
|
.menu .menu-item:hover .sub-menu, .menu .menu-item .sub-menu:hover{
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
height: auto;
|
|
text-align: left;
|
|
opacity: 1;
|
|
z-index: 100;
|
|
}
|
|
|
|
.menu > .menu-item > .sub-menu > .menu-item{
|
|
flex: 1;
|
|
list-style-type: none;
|
|
text-align: left;
|
|
width: 25%;
|
|
background: none;
|
|
}
|
|
|
|
.menu > .menu-item > .sub-menu > .menu-item > a{
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 1.4rem;
|
|
text-align: center;
|
|
color: var(--midnight-desert);
|
|
font-weight: 700;
|
|
background: var(--sunset-copper);
|
|
border-left: 4px solid var(--neon-accent);
|
|
transform: skewX(-3deg);
|
|
padding: 1rem;
|
|
}
|
|
|
|
.dropdown-toggle{
|
|
display: none;
|
|
}
|
|
|
|
/* NAV LEVEL 3 */
|
|
|
|
.sub-menu .sub-menu{
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
transform: none;
|
|
position: static;
|
|
border: 3px var(--neon-accent) solid;
|
|
background: rgba(10, 15, 20, 0.8);
|
|
padding: 1rem;
|
|
}
|
|
|
|
.sub-menu .sub-menu .menu-item{
|
|
width: 30%;
|
|
list-style-type: none;
|
|
}
|
|
|
|
.sub-menu .sub-menu .menu-item a{
|
|
background: var(--color4);
|
|
color: var(--midnight-desert);
|
|
padding: 0.5rem 1rem;
|
|
font-size: 1rem;
|
|
line-height: 1.4em;
|
|
font-weight: 500;
|
|
border-left: 3px solid var(--sunset-copper);
|
|
}
|
|
|
|
/* MOBILE MENU ICON */
|
|
|
|
.mobile-menu-icon{
|
|
display: none;
|
|
}
|
|
|
|
.mobile-menu-icon .line{
|
|
width: 2rem;
|
|
height: 0.3rem;
|
|
background: var(--sunset-copper);
|
|
margin: 0.4rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.mobile-menu-icon .close{
|
|
display: none;
|
|
}
|
|
|
|
/* LOGO */
|
|
|
|
.logo{
|
|
flex: 1;
|
|
}
|
|
|
|
/* FEATURE - DRAMATIC HERO SECTION */
|
|
|
|
.feature{
|
|
width: 100%;
|
|
background: var(--desert-gradient);
|
|
color: var(--color4);
|
|
padding: 0;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.feature::before{
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background:
|
|
linear-gradient(135deg, transparent 0%, rgba(0, 255, 163, 0.05) 100%),
|
|
repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(255, 255, 255, 0.02) 50px, rgba(255, 255, 255, 0.02) 51px);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.feature .feature-content{
|
|
flex: 1;
|
|
padding: 8rem 0 8rem 10%;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.feature h1{
|
|
font-size: 4.5rem;
|
|
text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.feature-accent{
|
|
flex: 1.5;
|
|
position: relative;
|
|
}
|
|
|
|
.feature-accent.slide1{
|
|
background: url(https://azcomputerguru.com/wp-content/uploads/2025/10/fp-gurucube.png) center center no-repeat;
|
|
background-size: cover;
|
|
filter: contrast(1.2) brightness(0.9);
|
|
}
|
|
|
|
.feature-accent.slide2{
|
|
background: url(https://azcomputerguru.com/wp-content/uploads/2025/10/xwebdesign-graphic.png.pagespeed.ic.03ceO_rf1f.png) center center no-repeat;
|
|
background-size: contain;
|
|
}
|
|
|
|
.feature-slide{
|
|
padding: 0;
|
|
}
|
|
|
|
/* COLUMNS UPPER - GEOMETRIC CARDS */
|
|
|
|
.columns-upper .flexwrap{
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.columns-upper .widget{
|
|
flex: 1;
|
|
background: var(--sunset-copper);
|
|
color: var(--color4);
|
|
padding: 2rem 2rem 2rem 3rem;
|
|
margin: 5rem 1rem;
|
|
min-height: 12rem;
|
|
font-weight: 300;
|
|
font-size: 1.8rem;
|
|
line-height: 1.3em;
|
|
position: relative;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
border-left: 8px solid var(--neon-accent);
|
|
transform: skewY(-2deg);
|
|
}
|
|
|
|
.columns-upper .widget::before{
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(135deg, transparent 0%, rgba(0, 0, 0, 0.1) 100%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.columns-upper .widget:hover{
|
|
transform: skewY(-2deg) translateY(-8px) scale(1.02);
|
|
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), var(--neon-glow);
|
|
border-left-width: 12px;
|
|
}
|
|
|
|
.columns-upper .widget h2{
|
|
font-size: 1.8rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.columns-upper .more-link{
|
|
color: var(--neon-accent);
|
|
border-color: var(--neon-accent);
|
|
font-size: 1.3rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.columns-upper .more-link:hover{
|
|
color: var(--midnight-desert);
|
|
}
|
|
|
|
/* ABOVE CONTENT - DARK SECTION */
|
|
|
|
.home .above-content{
|
|
background: var(--midnight-gradient);
|
|
color: var(--sandstone);
|
|
padding: 10rem 0;
|
|
font-size: 1.3rem;
|
|
font-weight: 300;
|
|
line-height: 1.6em;
|
|
position: relative;
|
|
}
|
|
|
|
.home .above-content::before{
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background:
|
|
radial-gradient(circle at 30% 50%, rgba(212, 119, 28, 0.05) 0%, transparent 50%),
|
|
repeating-linear-gradient(0deg, transparent, transparent 100px, rgba(0, 255, 163, 0.02) 100px, rgba(0, 255, 163, 0.02) 101px);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.home .above-content h2{
|
|
font-size: 3.5rem;
|
|
font-weight: 700;
|
|
margin-bottom: 3rem;
|
|
text-align: center;
|
|
color: var(--color4);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
position: relative;
|
|
}
|
|
|
|
.home .above-content h2::after{
|
|
content: '';
|
|
display: block;
|
|
width: 100px;
|
|
height: 6px;
|
|
background: var(--neon-accent);
|
|
margin: 1rem auto 0;
|
|
}
|
|
|
|
.home .above-content .more-link{
|
|
color: var(--neon-accent);
|
|
border-color: var(--neon-accent);
|
|
}
|
|
|
|
.home .above-content .more-link:hover{
|
|
color: var(--midnight-desert);
|
|
}
|
|
|
|
/* MAIN CONTENT - CLEAN READING AREA */
|
|
|
|
main{
|
|
background: var(--color4);
|
|
padding: 4rem 0;
|
|
}
|
|
|
|
.home main{
|
|
background: rgba(255, 255, 255, 0.98);
|
|
padding: 0 0 10rem 0;
|
|
}
|
|
|
|
main article{
|
|
line-height: 1.8em;
|
|
font-size: 1.2rem;
|
|
font-weight: 300;
|
|
color: var(--midnight-desert);
|
|
}
|
|
|
|
main article .title{
|
|
font-size: 3.5rem;
|
|
padding-top: 6rem;
|
|
color: var(--midnight-desert);
|
|
}
|
|
|
|
main article .title span{
|
|
font-size: 2rem;
|
|
font-weight: 300;
|
|
color: var(--sunset-copper);
|
|
}
|
|
|
|
main article h2.highlight{
|
|
color: var(--sunset-copper);
|
|
font-weight: 600;
|
|
font-size: 2.4rem;
|
|
border-left: 6px solid var(--neon-accent);
|
|
padding-left: 1.5rem;
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
main article h3.highlight{
|
|
font-size: 1.8rem;
|
|
font-weight: 500;
|
|
color: var(--canyon-shadow);
|
|
}
|
|
|
|
.gurucube{
|
|
float: right;
|
|
margin: 0;
|
|
padding: 0;
|
|
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
|
|
}
|
|
|
|
main article .more-link{
|
|
color: var(--neon-accent);
|
|
border: 3px var(--neon-accent) solid;
|
|
padding: 1rem 2rem;
|
|
}
|
|
|
|
main article .more-link:hover{
|
|
background: var(--neon-accent);
|
|
color: var(--midnight-desert);
|
|
}
|
|
|
|
main article .breakout{
|
|
margin: 3rem 0;
|
|
width: 100%;
|
|
border: 4px var(--sunset-copper) solid;
|
|
border-left: 8px var(--neon-accent) solid;
|
|
padding: 2rem 2rem 8rem 2rem;
|
|
font-size: 1.3rem;
|
|
position: relative;
|
|
background: linear-gradient(135deg, rgba(212, 119, 28, 0.03) 0%, transparent 100%);
|
|
}
|
|
|
|
.breakout-icon{
|
|
padding: 1rem;
|
|
flex: 1;
|
|
}
|
|
|
|
.breakout-icon img{
|
|
width: 100%;
|
|
filter: drop-shadow(0 5px 15px rgba(212, 119, 28, 0.3));
|
|
}
|
|
|
|
.breakout-content{
|
|
flex: 9;
|
|
}
|
|
|
|
.breakout-content h2{
|
|
color: var(--sunset-copper);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.breakout .more-link{
|
|
position: absolute;
|
|
bottom: 2rem;
|
|
}
|
|
|
|
/* MAIN PAGE BOXES - BOLD GRID */
|
|
|
|
.button-row{
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.button-box{
|
|
flex-grow: 1;
|
|
width: 23%;
|
|
height: 28rem;
|
|
border: 12px var(--sunset-copper) solid;
|
|
margin: 1rem;
|
|
position: relative;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
background: var(--color4);
|
|
overflow: hidden;
|
|
transform: skewY(-2deg);
|
|
}
|
|
|
|
.button-box::before{
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--desert-gradient);
|
|
transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
z-index: 0;
|
|
}
|
|
|
|
.button-box:hover{
|
|
transform: skewY(-2deg) translateY(-10px) scale(1.03);
|
|
box-shadow: 0 20px 50px rgba(212, 119, 28, 0.3), var(--neon-glow);
|
|
border-color: var(--neon-accent);
|
|
}
|
|
|
|
.button-box:hover::before{
|
|
left: 0;
|
|
}
|
|
|
|
.button-box a > div{
|
|
width: 100%;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.button-box > a > p{
|
|
display: none;
|
|
}
|
|
|
|
.button-box .fi{
|
|
display: inline-block;
|
|
font-size: 5rem;
|
|
margin: 3rem 1rem 1rem 1rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.button-box:hover .fi{
|
|
transform: scale(1.2) rotate(-5deg);
|
|
filter: drop-shadow(0 0 20px rgba(0, 255, 163, 0.5));
|
|
}
|
|
|
|
.button-box a{
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-decoration: none;
|
|
color: var(--sunset-copper);
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 2.2rem;
|
|
text-transform: uppercase;
|
|
font-weight: 700;
|
|
line-height: 1.2em;
|
|
letter-spacing: -0.02em;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.button-box:hover a{
|
|
color: var(--color4);
|
|
}
|
|
|
|
.button-box p{
|
|
padding: 1rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.button-box:hover p{
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
color: var(--color4);
|
|
}
|
|
|
|
.button-box a p{
|
|
padding: 0 1rem 1rem 1rem;
|
|
}
|
|
|
|
/* FOOTER - DARK FOUNDATION */
|
|
|
|
footer{
|
|
background: var(--midnight-desert);
|
|
color: var(--sandstone);
|
|
padding: 4rem 0;
|
|
border-top: 6px solid var(--sunset-copper);
|
|
position: relative;
|
|
}
|
|
|
|
footer::before{
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: repeating-linear-gradient(90deg, transparent, transparent 200px, rgba(212, 119, 28, 0.02) 200px, rgba(212, 119, 28, 0.02) 201px);
|
|
pointer-events: none;
|
|
}
|
|
|
|
footer .widget{
|
|
padding: 2rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
footer h2{
|
|
color: var(--neon-accent);
|
|
font-weight: 700;
|
|
border-left: 4px solid var(--sunset-copper);
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
footer a{
|
|
transition: all 0.2s ease;
|
|
position: relative;
|
|
}
|
|
|
|
footer a::after{
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -2px;
|
|
left: 0;
|
|
width: 0;
|
|
height: 2px;
|
|
background: var(--neon-accent);
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
footer a:hover{
|
|
color: var(--neon-accent);
|
|
}
|
|
|
|
footer a:hover::after{
|
|
width: 100%;
|
|
}
|
|
|
|
/* SOCIAL FLOAT */
|
|
|
|
.social-float{
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
background: var(--midnight-desert);
|
|
border-top: 4px var(--neon-accent) solid;
|
|
min-height: 3rem;
|
|
z-index: 90;
|
|
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* PAGE TEMPLATES */
|
|
|
|
.page-template-default:not(.home) .above-content{
|
|
background: rgba(255, 255, 255, 0.98);
|
|
padding: 4rem 0;
|
|
}
|
|
|
|
.page-template-default:not(.home) .above-content .flexwrap{
|
|
align-items: stretch;
|
|
}
|
|
|
|
.page-template-default:not(.home) .above-content .widget{
|
|
flex: 1;
|
|
padding: 3rem;
|
|
}
|
|
|
|
.page-template-default:not(.home) .above-content .content h2{
|
|
font-size: 2.4rem;
|
|
margin-bottom: 2rem;
|
|
color: var(--midnight-desert);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.page-template-default:not(.home) .above-content .content h3{
|
|
color: var(--sunset-copper);
|
|
font-size: 2.2rem;
|
|
font-weight: 600;
|
|
margin: 2rem 0 1rem;
|
|
border-left: 6px solid var(--neon-accent);
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
.page-template-default:not(.home) .above-content .content h3::before {
|
|
content: '\2713';
|
|
padding-right: 1rem;
|
|
color: var(--neon-accent);
|
|
}
|
|
|
|
.page-template-default:not(.home) .above-content .widget:nth-of-type(1){
|
|
background: #fff;
|
|
}
|
|
|
|
.page-template-default:not(.home) .above-content .widget:nth-of-type(2){
|
|
background: var(--midnight-gradient);
|
|
padding: 8rem 0;
|
|
color: var(--color4);
|
|
text-align: center;
|
|
}
|
|
|
|
.page-template-default:not(.home) .above-content h2,
|
|
.page-template-default:not(.home) .above-content h3,
|
|
.page-template-default:not(.home) .above-content h4{
|
|
margin: 0;
|
|
}
|
|
|
|
.page-template-default:not(.home) .above-content h2{
|
|
display: inline-block;
|
|
margin: 0 auto 2rem auto;
|
|
font-size: 3.5rem;
|
|
font-weight: 700;
|
|
color: var(--sunset-copper);
|
|
padding: 0 0 1rem 0;
|
|
border-bottom: 6px var(--neon-accent) solid;
|
|
}
|
|
|
|
.page-template-default:not(.home) .above-content h2 span{
|
|
color: var(--color4);
|
|
}
|
|
|
|
.page-template-default:not(.home) .above-content h3{
|
|
color: var(--color4);
|
|
font-size: 2.2rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.page-template-default:not(.home) .above-content h3 span{
|
|
font-size: 3rem;
|
|
color: var(--neon-accent);
|
|
}
|
|
|
|
.page-template-default:not(.home) .above-content h4{
|
|
font-size: 1.4rem;
|
|
color: var(--sunset-copper);
|
|
}
|
|
|
|
/* LANDING PAGE TEMPLATE */
|
|
|
|
.page-template-page-landingpage{}
|
|
|
|
.page-template-page-landingpage main{
|
|
padding: 0;
|
|
}
|
|
|
|
.page-template-page-landingpage main > .wrapper{
|
|
width: 100%;
|
|
}
|
|
|
|
.page-template-page-landingpage main article{
|
|
padding: 0;
|
|
}
|
|
|
|
.landing-page-feature{
|
|
color: #fff;
|
|
padding-bottom: 2rem;
|
|
position: relative;
|
|
}
|
|
|
|
.landing-page-feature::before{
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(135deg, rgba(212, 119, 28, 0.2) 0%, rgba(10, 15, 20, 0.6) 100%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.landing-page-feature .wrapper{
|
|
width: 40%;
|
|
margin: 0 0 0 10%;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.landing-page-feature h1{
|
|
font-size: 5rem;
|
|
font-weight: 700;
|
|
text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.page-template-page-landingpage .more-link{
|
|
display: block;
|
|
width: 25%;
|
|
padding: 1.5rem;
|
|
background: var(--neon-accent);
|
|
color: var(--midnight-desert);
|
|
margin: 4rem 0;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
font-weight: 700;
|
|
border: none;
|
|
}
|
|
|
|
.page-template-page-landingpage .more-link:hover{
|
|
background: var(--sunset-copper);
|
|
color: var(--color4);
|
|
box-shadow: 0 10px 30px rgba(212, 119, 28, 0.4);
|
|
}
|
|
|
|
.page-template-page-landingpage .above-content{
|
|
padding: 8rem 0;
|
|
background: var(--sunset-copper);
|
|
color: var(--color4);
|
|
}
|
|
|
|
.page-template-page-landingpage .above-content .widget{
|
|
font-size: 1.6rem;
|
|
line-height: 1.6em;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.testimonial > div:nth-of-type(1){
|
|
flex: 1;
|
|
}
|
|
|
|
.testimonial > div:nth-of-type(2){
|
|
flex: 18;
|
|
}
|
|
|
|
.testimonial > div:nth-of-type(3){
|
|
flex: 1;
|
|
}
|
|
|
|
.page-template-page-landingpage .content{
|
|
padding: 8rem 0;
|
|
}
|
|
|
|
.page-template-page-landingpage .content h2{
|
|
font-size: 3.5rem;
|
|
font-weight: 700;
|
|
line-height: 1.2em;
|
|
color: var(--midnight-desert);
|
|
}
|
|
|
|
.page-template-page-landingpage .content h2 span{
|
|
font-weight: 300;
|
|
color: var(--sunset-copper);
|
|
}
|
|
|
|
.page-template-page-landingpage .content .more-link{
|
|
width: 16rem;
|
|
}
|
|
|
|
.below-content{
|
|
color: var(--color4);
|
|
background: var(--midnight-gradient);
|
|
}
|
|
|
|
.below-content .widget{
|
|
padding: 8rem 0;
|
|
font-size: 1.3rem;
|
|
line-height: 1.6em;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.below-content h2{
|
|
color: var(--neon-accent);
|
|
font-size: 3.5rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.below-content .flexwrap > div:nth-of-type(1){
|
|
flex: 2;
|
|
padding-right: 16rem;
|
|
}
|
|
|
|
.page-template-page-landingpage .below-content .flexwrap > div:nth-of-type(2){
|
|
flex: 1;
|
|
}
|
|
|
|
/* PAGE-SPECIFIC STYLES */
|
|
|
|
/* Business IT Page */
|
|
.page-id-269 .landing-page-feature{
|
|
background: url(https://azcomputerguru.com/wp-content/uploads/2025/10/LeadBannerImage_BusinessITServices.jpg) center center fixed no-repeat;
|
|
background-size: cover;
|
|
box-shadow: inset 2px -600px 400px 10px rgba(10, 15, 20, 0.85);
|
|
}
|
|
|
|
/* Web Services Page */
|
|
.page-id-62 .landing-page-feature{
|
|
background: url(https://azcomputerguru.com/wp-content/uploads/2025/10/webdesign-graphic.png) right center fixed no-repeat;
|
|
background-size: 50%;
|
|
color: var(--color4);
|
|
}
|
|
|
|
.page-id-62 .below-content .widget:nth-of-type(1){
|
|
background: var(--midnight-desert);
|
|
}
|
|
|
|
.page-id-62 .below-content .widget:nth-of-type(1) .flexwrap > div{
|
|
flex: 1;
|
|
}
|
|
|
|
.page-id-62 .below-content .widget:nth-of-type(1) .flexwrap > div:nth-of-type(1){
|
|
padding-right: 4rem;
|
|
}
|
|
|
|
/* Contact Page */
|
|
.page-id-305 article{
|
|
flex: 3;
|
|
padding-right: 2rem;
|
|
}
|
|
|
|
.page-id-305 aside{
|
|
flex: 1;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.forminator-ui#forminator-module-338.forminator-design--default .forminator-button-submit{
|
|
background-color: var(--neon-accent);
|
|
color: var(--midnight-desert);
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
border: none;
|
|
padding: 1rem 2rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.forminator-ui.forminator-design--default .forminator-button-submit:hover{
|
|
background-color: var(--sunset-copper);
|
|
color: var(--color4);
|
|
box-shadow: 0 8px 20px rgba(212, 119, 28, 0.3);
|
|
}
|
|
|
|
/* TABLET LAYOUT */
|
|
@media (max-width:1600px){
|
|
.button-box{
|
|
height: 22rem;
|
|
border: 8px var(--sunset-copper) solid;
|
|
}
|
|
.button-box a{
|
|
font-size: 1.8rem;
|
|
}
|
|
}
|
|
|
|
/* PHONE LAYOUT */
|
|
@media (max-width:1200px){
|
|
|
|
/* HIDE ON MOBILE */
|
|
.above-header,
|
|
.feature-accent{
|
|
display: none;
|
|
}
|
|
|
|
html{
|
|
font-size: 16px;
|
|
}
|
|
|
|
body{
|
|
overflow-x: hidden;
|
|
padding-bottom: 4rem;
|
|
background: var(--midnight-desert);
|
|
position: relative;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.wrapper{
|
|
width: 100%;
|
|
}
|
|
|
|
/* HEADER / LOGO */
|
|
header{
|
|
position: static;
|
|
}
|
|
|
|
header .flexwrap{
|
|
flex-direction: column;
|
|
}
|
|
|
|
header .logo{
|
|
width: 100%;
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
header h1{
|
|
margin: 0;
|
|
}
|
|
|
|
/* FEATURE AREA */
|
|
.feature .flexwrap{
|
|
flex-direction: column;
|
|
}
|
|
|
|
.feature .feature-content{
|
|
padding: 2rem 1rem;
|
|
}
|
|
|
|
.home .feature .widget h1{
|
|
font-size: 2.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.home .feature .widget h1 div{
|
|
font-size: 1.6rem;
|
|
line-height: 2em;
|
|
}
|
|
|
|
.feature-content{
|
|
text-align: center;
|
|
}
|
|
|
|
.feature .more-link{
|
|
width: 80%;
|
|
margin: 2rem auto 1rem auto;
|
|
}
|
|
|
|
.landing-page-feature .wrapper{
|
|
margin: 0;
|
|
padding: 2rem 1rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.page-template-page-landingpage .more-link{
|
|
width: 75%;
|
|
margin: 1rem auto;
|
|
}
|
|
|
|
.page-template-page-landingpage .above-content{
|
|
padding: 2rem 1rem;
|
|
}
|
|
|
|
.breakout-icon{
|
|
display: none;
|
|
}
|
|
|
|
/* UPPER COLUMNS */
|
|
.columns-upper .flexwrap{
|
|
flex-direction: column;
|
|
}
|
|
|
|
.columns-upper .widget {
|
|
margin: 1rem 0;
|
|
padding: 1.5rem;
|
|
transform: skewY(0);
|
|
}
|
|
|
|
.columns-upper .widget:hover{
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
/* ABOVE CONTENT */
|
|
.home .above-content{
|
|
padding: 2rem 1rem;
|
|
}
|
|
|
|
.above-content .widget{
|
|
padding: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.home .above-content h2{
|
|
font-size: 2.2rem;
|
|
}
|
|
|
|
/* MAIN CONTENT */
|
|
.page main article{
|
|
padding: 1rem;
|
|
}
|
|
|
|
main article .title{
|
|
padding: 0;
|
|
}
|
|
|
|
.page-title .title {
|
|
font-size: 2rem;
|
|
line-height: 1.3em;
|
|
padding-top: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
/* BELOW CONTENT */
|
|
.below-content .flexwrap{
|
|
flex-direction: column;
|
|
}
|
|
|
|
.below-content .flexwrap > div:nth-of-type(1){
|
|
padding: 1rem;
|
|
}
|
|
|
|
.home .below-content h2{
|
|
padding: 1rem;
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
/* FOOTER */
|
|
footer .flexwrap{
|
|
flex-direction: column;
|
|
}
|
|
|
|
footer .widget{
|
|
padding: 1rem 1rem 4rem 1rem;
|
|
}
|
|
|
|
footer img{
|
|
float: none;
|
|
display: block;
|
|
width: 90%;
|
|
margin: 1rem auto;
|
|
}
|
|
|
|
/* EXTRAS */
|
|
.alignleft,
|
|
.aligncenter,
|
|
.alignright,
|
|
.home .gurucube{
|
|
float: none;
|
|
display: block;
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.button-row.flexwrap{
|
|
flex-direction: column;
|
|
}
|
|
|
|
.button-box{
|
|
width: 90%;
|
|
transform: skewY(0);
|
|
}
|
|
|
|
.button-box:hover{
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
/* NAVIGATION */
|
|
nav{
|
|
height: auto;
|
|
}
|
|
|
|
nav .menu{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
background: var(--midnight-desert);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
transform: translateY(-100%);
|
|
opacity: 0;
|
|
padding: 1rem;
|
|
z-index: 9999;
|
|
border-bottom: 6px solid var(--neon-accent);
|
|
}
|
|
|
|
nav .menu li{
|
|
width: 100%;
|
|
margin: 0.5rem 0;
|
|
}
|
|
|
|
nav .menu li a,
|
|
.scrolled nav .menu li a{
|
|
font-size: 1.3rem;
|
|
color: var(--color4);
|
|
text-align: center;
|
|
line-height: 1.6em;
|
|
transform: skewX(0);
|
|
}
|
|
|
|
nav .menu li:hover a{
|
|
background: var(--sunset-copper);
|
|
color: var(--color4);
|
|
}
|
|
|
|
.mobile-menu-icon{
|
|
display: block;
|
|
z-index: 100;
|
|
border-top: 4px var(--neon-accent) solid;
|
|
padding: 1rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.mobile-menu-icon .line{
|
|
background: var(--sunset-copper);
|
|
}
|
|
|
|
.nav-active{
|
|
transform: translateY(0%);
|
|
opacity: 1;
|
|
position: fixed;
|
|
z-index: 100000;
|
|
}
|
|
|
|
nav ul li:hover .sub-menu,
|
|
nav ul li:active .sub-menu{
|
|
position: static;
|
|
display: block;
|
|
}
|
|
|
|
.menu-active .line{
|
|
display: none;
|
|
}
|
|
|
|
.menu-active .close{
|
|
display: block;
|
|
}
|
|
|
|
.menu .sub-menu{
|
|
flex-direction: column;
|
|
transform: none;
|
|
}
|
|
|
|
.social-float{
|
|
bottom: 4rem;
|
|
border-top: 4px var(--neon-accent) solid;
|
|
}
|
|
|
|
.social-float ul{
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
}
|