Contact Us | RadioReads
/* =================================
RADIOREADS BRAND COLOURS
================================= */
:root {
--rr-green: #80C342;
--rr-blue: #4AA8D8;
--rr-dark-green: #285B42;
--rr-light-green: #F4FAEF;
--rr-pale-green: #EAF5E1;
--rr-border: #DDEBCF;
--rr-text: #52675B;
--rr-white: #FFFFFF;
}
/* Main Section */
.rr-contact {
background: var(--rr-light-green);
padding: 75px 20px;
font-family: Arial, Helvetica, sans-serif;
color: var(--rr-text);
}
.rr-contact * {
box-sizing: border-box;
}
.rr-container {
max-width: 1150px;
margin: auto;
}
/* Header */
.rr-header {
text-align: center;
max-width: 850px;
margin: 0 auto 50px;
}
.rr-label {
display: inline-block;
color: var(--rr-green);
font-size: 14px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 15px;
}
.rr-header h1 {
color: var(--rr-dark-green);
font-size: 40px;
line-height: 1.3;
margin: 0 0 15px;
font-weight: 700;
}
.rr-header h2 {
color: var(--rr-blue);
font-size: 23px;
margin: 0 0 20px;
font-weight: 600;
}
.rr-header p {
color: var(--rr-text);
font-size: 16px;
line-height: 1.9;
margin: 0 auto 12px;
}
/* Main Layout */
.rr-contact-grid {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 35px;
align-items: stretch;
}
/* Left Information Card */
.rr-info-card {
background: var(--rr-white);
border: 1px solid var(--rr-border);
border-radius: 12px;
padding: 35px;
box-shadow: 0 5px 20px rgba(40, 91, 66, 0.05);
}
.rr-info-card h2 {
color: var(--rr-dark-green);
font-size: 27px;
margin: 0 0 15px;
}
.rr-info-card > p {
color: var(--rr-text);
font-size: 15px;
line-height: 1.8;
margin-bottom: 25px;
}
/* Service List */
.rr-service-list {
list-style: none;
padding: 0;
margin: 0;
}
.rr-service-list li {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 13px 0;
border-bottom: 1px solid #EDF3E8;
color: var(--rr-dark-green);
font-size: 15px;
line-height: 1.6;
}
.rr-service-list li:last-child {
border-bottom: none;
}
.rr-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 23px;
height: 23px;
min-width: 23px;
background: #EDF7E7;
color: var(--rr-green);
border-radius: 50%;
font-size: 14px;
font-weight: bold;
}
/* Contact Message */
.rr-info-bottom {
background: var(--rr-pale-green);
border-left: 4px solid var(--rr-green);
padding: 17px;
border-radius: 5px;
margin-top: 25px;
}
.rr-info-bottom p {
color: var(--rr-dark-green);
font-size: 14px;
line-height: 1.8;
margin: 0;
}
/* Form Card */
.rr-form-card {
background: var(--rr-white);
border: 1px solid var(--rr-border);
border-radius: 12px;
padding: 35px;
box-shadow: 0 5px 20px rgba(40, 91, 66, 0.05);
}
.rr-form-card h2 {
color: var(--rr-dark-green);
font-size: 27px;
margin: 0 0 10px;
}
.rr-form-card > p {
color: var(--rr-text);
font-size: 14px;
line-height: 1.7;
margin-bottom: 25px;
}
/* Form Fields */
.rr-form-group {
margin-bottom: 19px;
}
.rr-form-group label {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--rr-dark-green);
margin-bottom: 8px;
}
.rr-form-group input,
.rr-form-group select,
.rr-form-group textarea {
width: 100%;
padding: 13px 15px;
border: 1px solid #DCE8D8;
border-radius: 6px;
background: #FCFEFB;
color: var(--rr-dark-green);
font-family: inherit;
font-size: 14px;
outline: none;
transition: border 0.3s ease;
}
.rr-form-group input:focus,
.rr-form-group select:focus,
.rr-form-group textarea:focus {
border-color: var(--rr-green);
box-shadow: 0 0 0 3px rgba(128, 195, 66, 0.10);
}
.rr-form-group input::placeholder,
.rr-form-group textarea::placeholder {
color: #9AA99D;
}
.rr-form-group textarea {
min-height: 120px;
resize: vertical;
}
/* Submit Button */
.rr-submit {
width: 100%;
border: none;
background: var(--rr-green);
color: var(--rr-white);
padding: 15px 25px;
border-radius: 6px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
}
.rr-submit:hover {
background: var(--rr-blue);
transform: translateY(-2px);
}
.rr-form-note {
text-align: center;
font-size: 12px;
color: #849489;
margin-top: 15px;
line-height: 1.6;
}
/* Bottom CTA */
.rr-bottom-cta {
text-align: center;
margin-top: 55px;
padding: 35px 20px;
background: var(--rr-pale-green);
border: 1px solid var(--rr-border);
border-radius: 12px;
}
.rr-bottom-cta h2 {
font-size: 27px;
color: var(--rr-dark-green);
margin: 0 0 12px;
}
.rr-bottom-cta p {
color: var(--rr-text);
font-size: 15px;
line-height: 1.8;
margin: 0;
}
/* Responsive */
@media(max-width: 850px) {
.rr-contact-grid {
grid-template-columns: 1fr;
}
.rr-header h1 {
font-size: 33px;
}
}
@media(max-width: 550px) {
.rr-contact {
padding: 45px 15px;
}
.rr-header h1 {
font-size: 28px;
}
.rr-header h2 {
font-size: 19px;
}
.rr-info-card,
.rr-form-card {
padding: 23px 19px;
}
.rr-info-card h2,
.rr-form-card h2 {
font-size: 23px;
}
.rr-bottom-cta h2 {
font-size: 23px;
}
}
